如何在 Flutter 黄金测试中检查字体文本

Question

我正在为垂直的蒙古文制作一个包。 我有一个需要特殊字体才能显示的自定义小部件。 我正在尝试编写一个测试，显示蒙古文已正确呈现。

在模拟器上看起来是这样的：

但是黄金文件看起来像这样：

如果黄金测试只是给我豆腐，我无法验证蒙古语是否正确渲染。

这是我的测试：

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'),
  );
});

有没有什么办法解决这一问题？

我读过这两篇关于黄金测试的文章：

• Flutter：黄金测试——比较小部件和快照
• 你看得到差别吗？ — 颤振快照测试

Answer 1

我正在准备蒙古文的垂直包装。 我有一个需要特殊字体才能显示的自定义窗口小部件。 我正在尝试编写一个显示蒙古文字已正确呈现的测试。

在模拟器上，它看起来像这样：

但是黄金文件看起来像这样：

如果黄金测试只是给我豆腐，我无法验证蒙古人的渲染是否正确。

这是我的测试：

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'),
  );
});

有没有什么办法解决这一问题？

我已经阅读了有关黄金测试的这两篇文章：

• Flutter：黄金测试-将小部件与快照进行比较
• 你看得到差别吗？ — Flutter Snapshot测试

Answer 2

我正在准备蒙古文的垂直包装。 我有一个需要特殊字体才能显示的自定义窗口小部件。 我正在尝试编写一个显示蒙古文字已正确呈现的测试。

在模拟器上，它看起来像这样：

但是黄金文件看起来像这样：

如果黄金测试只是给我豆腐，我无法验证蒙古人的渲染是否正确。

这是我的测试：

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'),
  );
});

有没有什么办法解决这一问题？

我已经阅读了有关黄金测试的这两篇文章：

• Flutter：黄金测试-将小部件与快照进行比较
• 你看得到差别吗？ — Flutter Snapshot测试

Answer 3

从包的0.2.0-dev版本开始，您可以访问方法loadAppFonts()以自动从pubspec.yaml或您的项目依赖的任何包加载字体资产。

来源

0.2.0-dev

改进了加载字体资源的机制。 消费者不再需要提供一个目录来读取 .ttf 文件。

他们现在可以简单地调用： await loadAppFonts()并且包将自动从他们的 pubspec.yaml 或他们依赖的任何包加载任何字体资产。

现在您的测试可能如下所示：

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');
});