Test behavior of widgets in Flutter

Our widget tests should give us confidence about how they respond to user interactions - its behavior.

Using the CustomButton widget from a previous post, we can test if it fires its onPressed callback when tapped on all platforms.

Testing the behavior

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'path/to/CustomButton.dart';

void main() {
  Widget buildApp({VoidCallback onPressed}) {
    return MaterialApp(
      home: CustomButton(
        onPressed: onPressed,
      ),
    );
  }

  group('CustomButton >', () {
    group('behavior >', () {
      testWidgets(
        'calls onPressed when tapped on iOS',
        (tester) async {
          debugDefaultTargetPlatformOverride = TargetPlatform.iOS;

          final log = <int>[];
          final onPressed = () => log.add(0);

          await tester.pumpWidget(buildApp(onPressed: onPressed));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 1);
          await tester.tap(find.byType(CustomButton));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 3);

          debugDefaultTargetPlatformOverride = null; <-- this is required
        },
      );

      testWidgets(
        'calls onPressed when tapped on other platforms',
        (tester) async {
          final log = <int>[];
          final onPressed = () => log.add(0);

          await tester.pumpWidget(buildApp(onPressed: onPressed));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 1);
          await tester.tap(find.byType(CustomButton));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 3);
        },
      );
    });
  });
}

Using the same approach to override the platform, we can easily verify that our widget behaves properly on all platforms.

Now, if we change our implementation, our tests will assert if the behavior was maintained.

We can change from a CupertinoButton to a Container + GestureDetector on iOS and our tests will continue to pass because it's the same behavior:

Widget buildCupertinoWidget(BuildContext context) {
  return GestureDetector(
    onTap: onPressed,
    child: Container(
      child: Text('Click me'),
    ),
  );
}

But if we remove the GestureDetector, our tests will fail because the widget doesn't behave as before:

Widget buildCupertinoWidget(BuildContext context) {
  return Container(
    child: Text('Click me'),
  );
}

Notes

• We must reset debugDefaultTargetPlatformOverride to null by the end of every test case, otherwise Flutter will throw an error;
• The example here is a bit specific, but you should take the approach and apply to all your widgets.

If you're have any suggestions to improve this example, feel free to share it in the comments.

---

I hope you enjoyed this post and follow me on any platform for more.

Comments

[Reme Le Hane]

You can simplify you test by using verify instead of running actual logic within the test to update a list.

You end up with the same quality of test by verifying the function was called instead of creating, modifying and expecting on a list.

Even though this is very simply logic, logic should be avoided in tests as there is no test to test that the logic in the test is correct.

[Arthur Denner]

Good point in avoiding logic on tests, thanks for contributing!

Are you referring to Mockito's verify function? If so, does it apply here as I'm dealing with a callback function? I have only used Mockito when testing abstract classes so far.

[Reme Le Hane]

It actually does, I wrote a post on how to do that. There is a lot of missing information around testing with flutter right now and we are busy with a larger scale, long term white-label product and realized we have learnt a lot with little help from google.

The only thing I have not worked out yet is how to test the pull to refresh.

The shirt is, pop your callback function into a mock class, then pass that into your widget. You can then verify that.

[Arthur Denner]

Cool! I'll check it out. Thanks :)