How to describe that a user should not be able to do something? #GivenWhenThenWithStyle

Many online examples of Given-When-Then files show how a user performs an action, or how some process works. Describing the opposite is sometimes a challenge. Showing that a user cannot perform an action, or that some process is blocked, is often tricky because it involves several different perspectives. Our next challenge deals with one such case:

How would you specify that a single user cannot reserve more than 10 items? In particular, how would you show the impact of that rule on the user interface.

A trivial solution for this problem would be to show a scenario outline involving the number of items and whether the reservation is allowed or not, but that shows the business rule, not the user interface. Here are some options that try to capture the user interface layer:

Option 1: Describe the visual state transitions

Given the user has reserved <previous> items 
When the user adds <new> items to reservation
Then the "Reserve" button should be <button state>

Examples:

| previous | new  | button state |
| 0        |   9  | enabled      |
| 0        |   10 | disabled     |
| 1        |   9  | disabled     |
| 8        |   1  | enabled      |
| 8        |   2  | disabled     |

Option 2: Describe the user interaction

Given the user is trying to reserve <items> items
When the user clicks the "Reserve" button
Then the action should be <action>

Examples:

| items | action                       |
| 1     | form submitted, page reloads |
| 9     | form submitted, page reloads |
| 10    | nothing happens              |
| 11    | nothing happens              |

Option 3: Describe UI-backend interaction

Given the user is trying to reserve <items> items
When the user submits the reservation form
Then the submission is <sending status>

Examples:

| items | sending status |
| 1     | sent           |
| 9     | sent           |
| 10    | blocked        |
| 11    | blocked        |

Option 4: Describe reservation and visual impact separately

Scenario: Validating reservations

Given the user tries to reserve <items> items
Then the reservation status should be <reservation state>

Examples:

| items   | reservation state |
|     1   |             valid |
|     9   |             valid |
|    10   |           invalid |
|    11   |           invalid |

Scenario: UI impact

Given the reservation status is <reservation state> 
Then the "Reserve" button should be <button state>
And the form submission should be <submission state>

Examples:

| reservation state | button state | submission state |
| valid             | enabled      | not blocked      |
| invalid           | disabled     | blocked          |

Participate in the challenge

Choose one of the options you like the best, or propose your own solution. You can post short answers directly in the form below. For longer explanations, perhaps post your suggestion somewhere and send us the link.

To participate, send your answers by Monday 8th February. We will post the results on Tuesday the 9th.

Stay up to date with all the tips and tricks and follow SpecFlow on Twitter or LinkedIn.

PS: … and don’t forget to share the challenge with your friends and team members by clicking on one of the social icons below 👇