Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check font text on Flutter golden test

I'm making a package for vertical Mongolian text. I have a custom widget that needs a special font to display. I'm trying to write a test that shows the Mongolian text has rendered correctly.

On the emulator it looks like this:

But the golden file looks like this:

I can't verify that the Mongolian is getting rendered correctly if the golden test is just giving me tofu.

This is my test:

testWidgets('MongolText renders font', (WidgetTester tester) async {

  await tester.pumpWidget(
    MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text('My App')),
          body: Stack(
            children: <Widget>[
              Center(
                child: MongolText('ᠮᠣᠩᠭᠣᠯ'),
              ),
            ],
          )
      ),
    ),
  );

  await tester.pumpAndSettle();

  await expectLater(
    find.byType(MaterialApp),
    matchesGoldenFile('golden-file.png'),
  );
});

Is there any way to fix this?

I've read these two articles about golden tests:

  • Flutter: Golden tests — compare Widgets with Snapshots
  • Do you see the difference? — Flutter Snapshot test
like image 751
Suragch Avatar asked Jan 26 '23 13:01

Suragch


2 Answers

Since version 0.2.0-dev of the package you have access to the method loadAppFonts() to automatically load font assets from the pubspec.yaml or any package your projects depends on.

source

0.2.0-dev

Improved the mechanism for loading font assets. Consumers no longer need to supply a directory to read the .ttf files from.

They can now simply call: await loadAppFonts() and the package will automatically load any font assets from their pubspec.yaml or from any packages they depend on.

Now your test might look like this:

testWidgets('Text renders', (tester) async {
  // Load fonts
  await loadAppFonts();

  // Pump your test widget
  await tester.pumpWidget(
    MaterialApp(
      home: Scaffold(
        body: Text('My text'),
      ),
    ),
  );

  // Compare image file
  await screenMatchesGolden(tester, 'golden-file');
});
like image 43
Guillaume Roux Avatar answered Jan 28 '23 04:01

Guillaume Roux


Flutter tests only support one font currently, ahem.

Try out this package from eBay: https://pub.dev/packages/golden_toolkit

like image 97
Dhruvam Sharma Avatar answered Jan 28 '23 02:01

Dhruvam Sharma