Testing in Flutter

In this episode, we will use the newly created goldens function to generate goldens. Head over to login_screen_test.dart file and replace the Golden code with the following code.

await doGolden('Login-Page', 'All Widgets on screen', testCaseScreenInfo);

This Function helps us create goldens with the widget’s name, state of the widget, and device name. This will help us to develop and identify goldens easily.

Let’s replace this everywhere in all scenarios.

await doGolden('Login-Page', 'Invalid Credentials', testCaseScreenInfo);

await doGolden('Login-Page', 'Valid Credentials', testCaseScreenInfo);

await doGolden('Login-Page', 'Show Loading Indicator', testCaseScreenInfo);

await doGolden('Login-Page', 'Hide Loading Indicator', testCaseScreenInfo);

Same with the Quotes widget test.

Navigate to quotes_page_test.dart and replace the golden code with the following code.

await doGolden(
 'Quotes-Page', 'Pumped Quotes Page Screen', testCaseScreenInfo);


await doGolden(
 'Quotes-Page', 'Check for circular progress indicator', testCaseScreenInfo);


await doGolden(
     'Quotes-Page', 'Check for mock quotes on screen', testCaseScreenInfo);

Now run the widget test to test, and you will notice the test fails, as there are no goldens to compare. So let’s fix that by updating goldens first.

 flutter test --update-goldens

You can now see goldens of multiple screen sizes generated in the goldens folder. And if you see snapshots, you can check how the Snapshots are generated. The only major issue is the font. When generating Goldens, by default, take font names AHEM In this font, most letters are box or square. Let’s change that to the human-readable font.

Let’s do that by Integrating new Fonts into the project.

I will create a new file named fonts and add any font you wish. Or best is to use the Application font to always show the correct font.

I will use Roboto font. After adding font in the asset, we need to add it to the pubspec.yaml file. In pubspec.yaml file, add the following code.

  fonts: 
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf

So we have added the font to our application. I would suggest running flutter pub get and restarting the app.

Let’s use this added font in our Goldens Generation. Head to the extension file and add dome following code to add font.

final roboto = rootBundle.load('fonts/Roboto-Regular.ttf');
final fontLoader = FontLoader('Roboto')..addFont(roboto);

await fontLoader.load();

Make the final function look like this.

Future testWidgetsMultipleScreenSizes(
        String testName,
        Future<void> Function(WidgetTester, TestCaseScreenInfo testCase)
            testFunction) async =>
    testCaseScreenInfoList.forEach((testCase) async {
      WidgetController.hitTestWarningShouldBeFatal = true;
      testWidgets("$testName-${testCase.deviceName}", (tester) async {
        final roboto = rootBundle.load('fonts/Roboto-Regular.ttf');
        final fontLoader = FontLoader('Roboto')..addFont(roboto);

        await fontLoader.load();
        await tester.setScreenSize(testCase);
        await testFunction(tester, testCase);
      });
    });

Run the command to generate goldens again.

 flutter test --update-goldens

Now if you see the goldens folder, you will see the goldens are generated with the correct font.