Flutterexperts

In this article, we will Explore BDD in Flutter. We perceive how to execute a demo program. We will show you how to use BDD in Flutter with the bdd_widget_test package to write behaviour-driven tests in your Flutter applications.

For bdd_widget_test:

bdd_widget_test | Flutter package
A BDD-style widget testing library. Generates Flutter widget tests from *.feature files.pub.dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

Table Of Contents::

Introduction

Implementation

Code Implement

Conclusion

---

---

Introduction:

A collaborative approach to software development, behavior-driven development (BDD) focusses on the intended behaviour of the application as seen by the user in natural language. It entails using the Gherkin syntax, which explains application behaviour in Given-When-Then words, to write test scenarios in an organised manner.

This strategy guarantees that everyone involved is aware of how the application works. All of the functionality for retrieving posts and managing errors will be covered by the BDD-style test cases that we create. The example uses get_it for dependency injection and is built on a clean architecture.

Implementation:

Step 1: Add the dependencies

Include build_runner and bdd_widget_test in your pubspec.yaml file’s dev_dependencies section:

dev_dependencies:
  build_runner:latest version 
  bdd_widget_test:latest version 

Step 2: Run flutter packages get in the root directory of your app

Run the command:

flutter pub get

How to implement code in your file :

You need to implement it in your code respectively:

In the project’s test directory, create a Posts.feature file and add the following content:

Feature: Posts
    Situation: When the app is running, 
    users should see a list of posts. 
    Instead, I see the {CircularProgressIndicator} 
    widget.
    After waiting, I see a list of posts instead 
    of the {CircularProgressIndicator} widget.

   Situation: When retrieving posts, users should 
   notice an error.
   I see the phrase "Api failed error" when the 
   program is running with {sendError:true}, 
   but I don't see the {CircularProgressIndicator} widget.

Next, run the following command in your terminal:

dart run build_runner build --delete-conflicting-outputs

A posts_test.dart file and a step folder with the files i_see_posts_list.dart and the_app_is_running.dart will be produced as a result.

Now, we will create the_app_is_running.dart file:

We configure the application state and simulate PostCubit activity in this file:

import 'package:flutter_forge/presentation/bloc/post_cubit.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_forge/main.dart';
import '../mocks.dart';
Future<void> theAppIsRunning(
  WidgetTester tester, {
  bool sendError = false,
}) async {
  if (getIt.isRegistered<PostCubit>()) {
    getIt.unregister<PostCubit>();
  }
  getIt.registerFactory(
    () => PostCubit(
      getMockUsecase(
        sendError: sendError,
      ),
    ),
  );
  await tester.pumpWidget(const MyApp());
}

Now, we will create mocks.dart file:

Depending on the sendError argument, this file either throws an error or delivers mock data:

import 'package:flutter_forge/domain/model/post_model.dart';
import 'package:flutter_forge/domain/usecases/get_posts_usecase.dart';
import 'package:get_it/get_it.dart';
import 'package:mocktail/mocktail.dart';

GetIt getIt = GetIt.instance;

class MockPostUsecase extends Mock implements GetPostsUseCase {}

GetPostsUseCase getMockUsecase({bool sendError = false}) {
  final mock = MockPostUsecase();
  if (sendError) {
    when(() => mock.execute()).thenThrow(Exception());
  } else {
    when(() => mock.execute()).thenAnswer(
      (_) => Future.value([
        Post(id: 1, title: "test1", body: "body1"),
        Post(id: 2, title: "test2", body: "body2"),
        Post(id: 3, title: "test3", body: "body3"),
      ]),
    );
  }
  return mock;
}

Now , we will create i_see_posts_list.dart file:

We confirm that the posts are visible in this file:

import 'package:bdd_widget_test/step/i_see_text.dart';
import 'package:flutter_test/flutter_test.dart';

/// Usage: I see posts list
Future<void> iSeePostsList(WidgetTester tester) async {
  await iSeeText(tester, "test1");
  await iSeeText(tester, "body1");

  await iSeeText(tester, "test2");
  await iSeeText(tester, "body2");

  await iSeeText(tester, "test3");
  await iSeeText(tester, "body3");
}

The generated posts_test.dart file integrates the steps to define the test scenarios:

// GENERATED CODE - DO NOT MODIFY BY HAND
// ignore_for_file: unused_import, directives_ordering

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import './step/the_app_is_running.dart';
import 'package:bdd_widget_test/step/i_see_widget.dart';
import 'package:bdd_widget_test/step/i_wait.dart';
import './step/i_see_posts_list.dart';
import 'package:bdd_widget_test/step/i_dont_see_widget.dart';
import 'package:bdd_widget_test/step/i_see_text.dart';

void main() {
  group('''Posts''', () {
    testWidgets('''Users should see list of Posts''', (tester) async {
      await theAppIsRunning(tester);
      await iSeeWidget(tester, CircularProgressIndicator);
      await iWait(tester);
      await iSeePostsList(tester);
      await iDontSeeWidget(tester, CircularProgressIndicator);
    });
    testWidgets('''Users should see error while fetching posts''',
        (tester) async {
      await theAppIsRunning(tester, sendError: true);
      await iSeeText(tester, "Api failed error");
      await iDontSeeWidget(tester, CircularProgressIndicator);
    });
  });
}

Run the Tests:

Use the following command to run the tests:

flutter test

For a report on coverage, use:

flutter test --coverage && genhtml coverage/lcov.info -o coverage/html && open coverage/html/index.html

Conclusion:

In the article, I have explained the Explore BDD in Flutter; you can modify this code according to your choice. This was a small introduction to the Explore BDD in Flutter User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Explore BDD in your Flutter projects. We will show you what the Introduction is. Writing behavior-driven tests to make sure your Flutter application satisfies user expectations is made simple by using BDD with the bdd_widget_test package. You can ship high-quality apps with confidence when every functionality is covered. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I need to correct something? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---