In this post, we’re going to write some BDD cases for a To-Do App.
Here is the GitHub link:
And a live demo:
Have node_installed on your machine.
Then git clone the project.
Cd in the project folder.
Run npm start.
We will write the user stories, acceptance criteria, and concrete examples.
The biggest difference between BDD and Test Driven Development (TDD) is the importance of concrete examples to illustrate scenarios.
As a user, I want to see the todo app.
- wait for the page to load
- Example: wait for the heading Vuejs Todo app to appear
As a user, I want to add a new task.
- click on the input
- enter the text
- press enter
- the new task should be displayed
- click on the input with label “What needs to be done?”
- enter “Buy new coffee”
- press enter
- the task “Buy new coffee” appears
As a user, I want to see the list of tasks I’ve added.
- add another task
- a list of tasks should appear
- add “Morning walk 30 minutes”
As a user, I want to check off the task I’ve completed.
- when I check a task off, it should be greyed out
- when I check off the task “Buy new coffee”, the text should be strikethrough
As a user, I want to remove a task that I’ve checkout.
BDD Gherkin Syntax
Add a new task:
Given I load the Todo App And I wait for the page to load When I enter a task in the input And I type on enter Then the new task should appear in the list
Check the task:
Given that I see my list of tasks When I check off a task Then the task should be strikethrough and greyed