How to create BDD tests in FlutLab

Myroslava Drobnych
4 min readJan 17, 2022

BDD (Behavior-driven development) is a process that encourages collaboration among developers, quality assurance testers, and customer representatives in a software project. In BDD, test cases are written in a natural language that even non-programmers can read.

In this BDD tutorial, we are going to see how BDD Testing in Flutter works (without long & boring installations of Flutter, packages, etc…). Only you, online IDE and test feature.

  1. Go to https://flutlab.io.
  2. Create a new project from Codebase (“Stateful click counter” for example).

3. Click the Tests tab in the bottom panel.

4. We are going to create BDD widget tests. We will use bdd_widget_test package for this ( https://pub.dev/packages/bdd_widget_test ). Press “enable Bdd tests” button and the last version of the bdd_widget_test package will be auto-imported into your project.

5. Open pubspec.yaml file and check what was added to your file inside the “dev_dependencies: “ section.

6. Back to “Tests” tab and click the “create new feature” button. Write the name of the feature and press Enter (for example — “counter”).

7. We created a counter.feature file with an example of BDD(Gherkin — https://cucumber.io/docs/gherkin/reference/ ) syntax.

8. Add your first Scenario to the counter.feature file:

Feature: Counter
Scenario: Initial counter value is 0
Given the app is running
Then I see {'0'} text
And I see {Icons.add} icon

9. Click the “generate tests” button in the Tests tab. After that, the corresponding dart file will be generated for each of your feature files. During feature-to-dart generation additional “steps” folder will be created. It will contain all steps required to run the scenario.

10. Check what do you have inside the “counter_test.dart” file.

11. Click “run tests” button.

12. Great! All tests passed!

13. Let’s add a new Scenario to the counter.feature file:

Scenario: Plus button increases the counter
Given the app is running
When I tap {Icons.add} icon
Then I see {'1'} text

14. Click “generate tests” button and wait for a feedback from the tests generator.

15. Click “run tests” button.

Bingo! … All tests passed!

16. Let’s make some changes to our Scenario (line 22). Click the “generate tests” button and “run tests” then.

17. Oh, no! Our test failed :( Accept a small challenge and fix it on your own!

--

--