Testing in Flutter

Before we begin, let’s create a new helper function that will help us create goldens in a better way. If you see, Goldens require a name for the screenshot. We will create a new function that will take the widget’s name and generate the golden name for us.

String getGoldenName(
        String page, String state, TestCaseScreenInfo testCaseScreenInfo) =>
    'goldens/$page-$state-${testCaseScreenInfo.deviceName}.png';

The getGoldenName function takes the page name, state name and device name and generates the golden name for us.

Let us create a function that will generate golden for us with the name.

Future doGoldenGeneric<T>(
        String page, String state, TestCaseScreenInfo testCaseScreenInfo) =>
    expectLater(find.byType(T),
        matchesGoldenFile(getGoldenName(page, state, testCaseScreenInfo)));

The doGoldenGeneric function takes the widget type, page name, state name and device name and generates the golden for us. Here we did not mention the type of the widget. We can use this function to generate goldens for any widget; that’s why it’s called Generic function.

The only problem we have with reusing the Widget test as an integration test is that, Integration test fails if the widget test generates goldens, as there are no snapshots to compare. Run the Integration and check the results. You can see that the test fails. This is because the Login Widget test is generating goldens.

Let’s solve that by preventing goldens from generating when the test is run as an integration test. We pass testCaseScreenInfo in the Widget test and to Goldens test to run the Widget test for multiple screen sizes. But the Integration test does not require this information.

Let’s create a new function to build goldens only when the testCaseScreenInfo is not null.

Future doGolden(
        String page, String state, TestCaseScreenInfo? testCaseScreenInfo) =>
    testCaseScreenInfo != null
        ? doGoldenGeneric<MaterialApp>(page, state, testCaseScreenInfo)
        : Future.value();

The above function will generate goldens only when the testCaseScreenInfo is not null.

Now let’s use this function and testWidgetsMultipleScreenSizes in our widget testing.

Head back to login_widget_test.dart and replace the function from the main as follows.

testWidgetsMultipleScreenSizes('Login-Page', loginWidgetTest);

I will also add TestCaseScreenInfo as a nullable argument to our loginWidgetTest function.

Future<void> loginWidgetTest(
    WidgetTester tester, TestCaseScreenInfo? testCaseScreenInfo) async {
}

This testCaseScreenInfo will be helpful to to generate goldens in our widget test.

Now let’s make the same changes in our quotes_page_test.dart page.

testWidgetsMultipleScreenSizes('All Quotes Widget Test', allQuotesWidgetTest);
Future<void> allQuotesWidgetTest(
  WidgetTester tester, TestCaseScreenInfo? testCaseScreenInfo) async {}

As you know, we are also reusing the widget test as an integration test. So we need to pass null to the testCaseScreenInfo in the integration test. as follows.

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  group('Integration Tests', () {
    WidgetController.hitTestWarningShouldBeFatal = true;

    testWidgets('Login-Page', (tester) => loginWidgetTest(tester, null));

    testWidgets('All-Quotes-Page', (tester) => allQuotesWidgetTest(tester, null));
  });
}

You can see there is line WidgetController.hitTestWarningShouldBeFatal = true; in the integration test. This line will ensure that the widgets hit warning should fail the test and not be ignored. It helps to protect us from missing widgets in the widget tree.

If you run the integration test, it will fail due to goldens as we are still using the old method to generate goldens. In the next episode, we will use the new method to generate goldens for multiple screen sizes and fix the integration test.