A Complete Guide For Implementing Integration Testing In Flutter

Integration testing is an essential part of any software development process, and Flutter is no exception. Integration tests ensure that your app's different components work together seamlessly. Flutter apps are especially composed of a variety of different widgets and packages. In this blog post, we will walk you through how to implement integration testing in Flutter. We will cover everything from setting up your test environment to writing and running your tests.

Integration testing is the most effective way for Flutter developers to ensure that their apps will work exactly as intended when released to production. It can significantly reduce the cost and time of the testing phase by automating the process. This guide provides a scalable and structured approach to integrating integration testing into your Flutter app, regardless of its size. It provides a clear and concise overview of the benefits of integration testing and how to implement it in Flutter.

To get started with integration testing in Flutter, you should have a basic understanding of testing in Flutter. You can find more information on the official Flutter docs.

Let’s take an example for Flutter Implementing Integration Testing

Here we have created an example on which we will implement the integration test that will help you to understand the pattern in which we can write integration tests for a large portion of the whole application. In this app, we have three screens

1. Sign in Screen
2. Sign up Screen
3. Home Screen

The authentication logic that we have implemented behind this screen must ensure these common scenarios:

Sign Up Screen

• All fields must be filled out.
• The password and confirm password fields must match.
• The username must be unique.
• If all validations pass, the new user should be added to the database.

Sign In Screen

• When a username is not found, the app should inform the user to enter a valid username.
• If the password is incorrect, the app should inform the user to enter a valid password.
• If the username and password are correct, the user should be navigated to the home screen.
• If the user has opted for the "remember me" option, the username and password fields should be auto-filled with the correct credentials when the user returns to the sign-in screen.

Home Screen

• The home screen should display the correct user's details.
• Automatically navigate to the home screen when the app is opened again after being closed, without prompting the user to sign in again.
• The delete user button should delete the user's account and navigate the user to the sign-in screen. If the user tries to sign in again with the same credentials, the username should not be recognized.

Also Read: How To Add Navigator Observer To Your Flutter App

How to Implement Integration Testing In Flutter

To implement integration testing in Flutter, you can use the integration_test package. This package provides a number of classes and functions for writing integration tests in Flutter.

1. Add Integration_test Package

Add integration_test and flutter_test dependencies in your projects pubspec.yaml under the dev_dependencies.

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter 

2. Create a Project Folder

Create a folder named integration_test at the root of your project.

3. Add main_test.dart File

Add a main_test.dart file under integration_tests folder

4. Create Folder Structure

The integration_test/ folder contains tests for the app's integration with external systems, such as APIs or databases. Screens/ folder contains the code for the app's screens, which are the different user interfaces that the user sees. Each screen has its own folder, which contains the code for the screen's layout, logic, and state management.

Similar way, the utils/ folder contains utility functions and classes that are used throughout the app. And, the main_test.dart file contains the main test runner for the app.

5. Add testing_helper.dart File

Add testing_helper.dart file under the utils folder and add all the methods that are repeatedly used in the testWidgets() function.

root/integration_test/src/utils/testing_helper.dart

class TestHelper {
  static late WidgetTester tester;

  static Future<void> pumpApp() async {
    await tester.pumpWidget(const MainApp());
    await tester.pumpAndSettle(const Duration(seconds: 4));
  }

  static Future<void> enterDataInTextField(
      {String name = '',
      required String data,
      Finder? finder,
      int at = 0}) async {
    try {
      var textfield = finder ?? find.widgetWithText(TextField, name).at(at);
      await tester.ensureVisible(textfield);
      await tester.pumpAndSettle();
      await tester.tap(textfield, warnIfMissed: false);
      await tester.enterText(textfield, data);
      await tester.pumpAndSettle();
    } catch (ex) {
      log(ex.toString());
    }
  }
}

6. Include Test Cases

Add test cases for all the expected conditions for individual screens in their respective file.

root/integration_test/src/screens/auth/sign_up/sign_up.dart

void signUpTest1() {
  testWidgets("Form Validation Test", (WidgetTester tester) async {
    TestHelper.tester = tester;
    await TestHelper.pumpApp();
    await TestHelper.tapButton(finder: find.text('Sign up?'));
    await TestHelper.tapButton(name: 'Sign up');
    expect(find.text('Please Enter a valid Username'), findsOneWidget);
    expect(find.text('Please Enter a valid First Name'), findsOneWidget);
    expect(find.text('Please Enter a valid Last Name'), findsOneWidget);
    expect(find.text('Please Enter a valid Date of Birth'), findsOneWidget);
    expect(find.text('Please select a gender'), findsOneWidget);
    expect(find.text('Please Enter a valid Password'), findsNWidgets(2));
  });
}

7. Add Different Tests

Add different tests in their respective group

root/integration_test/main_test.dart

void main() async {
  try {
    await initializeTest();
    FlutterError.onError = (details) {
      log(details.exception.toString());
    };
  } catch (ex) {
    log(ex.toString());
  }
}

Future<void> initializeTest() async {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  WidgetsFlutterBinding.ensureInitialized();
  await DB.instance().initialize();

  group('Sign Up Test Group',skip: false, () {
    signUpTest1();
    signUpTest2();
    signUpTest3();
    signUpTest4();
  });

  group('Sign In Test Group', () {
    signInTest1();
    signInTest2();
    signInTest3();
    signInTest4();
  });

  group('Home Test Group', () {
    homeTest1();
    homeTest2();
    homeTest3();
  });
}

8. Run the Integration

To run your Flutter integration tests, you can use the following command:

flutter test integration_test/main_test.dart 

This will run all of the integration tests in your project. If you have different flavors in your project, you can use the --flavor flag to specify which flavor you want to test. For example, to test the dev flavor, you would run the following command:

flutter test integration_test/main_test.dart --flavor dev 

9. Final Output

The Final result of Flutter integration testing will look as shown in the image.

10. View Full Source Code

To view the full source code of the application and its integration test’s implementation and better understand the concept visit https://github.com/nischhalcodetrade/MyIntegrationTestApp

Conclusion

Integration testing is an important part of any Flutter development workflow. Writing integration tests helps you catch bugs early and ensure that your app works as expected before releasing it to users. The architecture outlined above provides a scalable, structured, and fast way to implement integration testing in Flutter.

We at CodeTrade, encourage you to start writing integration tests for your Flutter apps today. Our Flutter experts will help you to complete your dream application. Also, You can hire dedicated flutter developers from CodeTrade as per your requirements. Get in touch with the top mobile app development company, CodeTrade India.