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.
PS: … and don’t forget to share the challenge with your friends and team members by clicking on one of the social icons below 👇