6

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:

Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393

4 Answers4

5

Flutter tests only support one font currently, ahem.

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

Dhruvam Sharma
  • 1,661
  • 14
  • 22
3

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');
});
Guillaume Roux
  • 6,352
  • 1
  • 13
  • 38
2

It looks like real fonts are not supported, yet.

https://medium.com/flutter-community/testing-custompaint-widgets-in-flutter-using-golden-image-files-889fe3bdf9ca

Sebastian Roth
  • 11,344
  • 14
  • 61
  • 110
0

Without knowing how your widget is composed this is difficult to answer, but I would guess that you are using a RichText widget underneath. If thats the case then adding the fontFamily explicitly to each TextSpan's textStyle should do the trick.

Damian K. Bast
  • 1,074
  • 7
  • 18