Getting started with BDD - Part 1
Understanding BDD
In this post, we’re going to write some BDD cases for a To-Do App.
To-Do App
Here is the GitHub link:
https://github.com/d2phap/vuejs-todo
And a live demo:
https://d2phap.github.io/vuejs-todo/#/
Requirements
Have node_installed on your machine.
Then git clone the project.
Cd in the project folder.
Run npm start.
User Stories
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
Example
- 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
Example
- 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
Example
- 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