Flutterexperts

Crafting Next-Gen Apps with Flutter Power
Integration Testing With Flutter

Brief Introduction

The individual pieces work together as a whole or capture the performance of an application running on a real device. These tasks are performed with integration tests.

Integration testing ( GUI testing) is automated, to avoid having humans do that kind of repetitive work because, frankly, we’re not that great at it. Integration testing attempts to simulate a user interacting with your app by doing things like pushing buttons, selecting items, and typing on the keyboard.


Problems with Flutter_driver

  1. First, issue is that having a separate process for your tests makes it difficult to check the state of your app.
  2. Second, issue is that tests run from the development machine and communicate with the app on the device, which means that the tests aren’t suitable for running on a device farm like Firebase Test Lab.

In this blog, we will learn how to test the authentication flow of ToDo app. I already wrote ToDo app for you so we sharply focus on integration testing.

Follow the steps with me

  1. First, add a dependency in pubspec.yaml under dev
dev_dependencies:
         flutter_test:
           sdk: flutter
         test: ^latest version
         integration_test: ^latest version

2. Your package should have a structure that looks like this:

3.Add this piece of code in test/test_driver/integration_test.dart

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver();

integrationDriver() : Adaptor to run an integration test using `flutter drive`.

4. Add key as we set in flutter_driver

TextFormField(
key: Key("signInEmailField"),
decoration: textInputDecoration.copyWith(hintText: 'email'),
validator: (val) => val.isEmpty ? 'Enter an email' : null,
onChanged: (val) {
setState(() => email = val);
},
),

Add keys at the widgets which are going to use in the test( our Login flow). You can set according to your test. We are going to test the login flow so we added keys to all field, button etc. I will drop a link for a repository down below you can get a reference through it.

5. Now actual test write under integration_test/foo_test.dart example

For Login Flow.

code sample:

void main() {
IntegrationTestWidgetsFlutterBinding.ensureInitialized();

testWidgets("Sign in test example", (WidgetTester tester) async {

/*
* Setups the finder*/
final Finder signInEmailField = find.byKey(Key('signInEmailField'));
final Finder signInPasswordField = find.byKey(Key('signInPasswordField'));
final Finder signInSaveButton = find.byKey(Key('signInSaveButton'));

await tester.pumpWidget(MyApp());

/*
* pump and settle is same like waitfor in flutter_driver
* */
await tester.pumpAndSettle();

await tester.tap(find.byKey(Key('signInEmailField')));
await tester.enterText(signInEmailField, "test@gmail.com");

await tester.tap(signInPasswordField);
await tester.enterText(signInPasswordField, "123456");

await tester.tap(signInSaveButton);
print("button tapped");

await tester.pumpAndSettle(Duration(seconds: 1));

expect(
find.byWidgetPredicate((widget) =>
widget is AppBar &&
widget.title is Text &&
(widget.title as Text).data.startsWith("ToDoApp")),
findsOneWidget);

await tester.pumpAndSettle(Duration(seconds: 1));
});
}

code sample for check validation:

testWidgets("validate test drive ", (WidgetTester tester) async {


final Finder signInEmailField = find.byKey(Key('signInEmailField'));
final Finder signInSaveButton = find.byKey(Key('signInSaveButton'));

await tester.pumpWidget(MyApp());


await tester.pumpAndSettle();

await tester.enterText(signInEmailField, "");

await tester.tap(signInSaveButton);

await tester.pumpAndSettle(Duration(seconds: 1));

expect(
find.byWidgetPredicate((widget) =>
widget is Text &&
widget.data.contains("Enter an email") ),
findsOneWidget);

await tester.pumpAndSettle(Duration(seconds: 1));
});

6. Foo last run the command in your terminal

flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/foo_test.dart

After running the test :

Happy Fluttering..

Link for repository:

flutter-devs/integration_testing
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

A warm welcome for all the queries and suggestion. If you find anything that could be improved please let me know, I would love to improve


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! You can connect with us on Facebook, GitHub, Twitter and LinkedIn for any flutter related queries.

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!

Leave comment

Your email address will not be published. Required fields are marked with *.