Flutter未知功能插件golden_test的探索使用

介绍

Golden Test 是一个用于编写黄金测试（golden tests）的 Flutter 插件。黄金测试通过比较屏幕截图与参考图像来验证 UI 的正确性。以下是 Golden Test 支持的主要功能：

1. 多设备支持：可以在多个设备上运行测试。
2. 暗模式支持：可以测试应用在亮模式和暗模式下的表现。
3. 多语言支持：可以验证应用在不同语言环境下的外观和行为。

安装

在 pubspec.yaml 文件中添加 golden_test 作为开发依赖项：

dev_dependencies:
  golden_test: [latest-version]

示例

以下是一个简单的示例，展示如何使用 golden_test 编写黄金测试：

import 'package:flutter/material.dart';
import 'package:golden_toolkit/golden_toolkit.dart';

void main() {
  testGoldens('Example Page', (tester) async {
    await tester.pumpWidgetBuilder(
      Scaffold(
        body: Center(
          child: Container(
            height: 100,
            color: Colors.red,
            child: const Center(child: Text('Example')),
          ),
        ),
      ),
      wrapper: materialAppWrapper(),
    );
    await screenMatchesGolden(tester, 'example_page');
  });
}

详细说明

• testGoldens：用于定义黄金测试的入口。
• pumpWidgetBuilder：用于构建要测试的 widget。
• materialAppWrapper：为 widget 提供一个 MaterialApp 环境。
• screenMatchesGolden：将当前屏幕截图与参考图像进行比较，并确保它们匹配。

设备配置

为了在多个设备上运行黄金测试，golden_test 提供了一组预配置的设备。你可以全局配置设备，也可以为特定测试覆盖这些配置。

指定设备

为特定测试指定设备：

goldenTest(
  name: 'Example Page',
  supportedDevices: [Device.iphone15Pro(), Device.pixel9ProXL()],
  builder: (_) => ExamplePage(),
);

全局配置设备

为所有黄金测试配置设备：

List<Device> goldenTestSupportedDevices = [
  Device.iphone15Pro(),
  Device.pixel9ProXL(),
  // 添加更多设备
];

goldenTest(
  name: 'Example Page',
  supportMultipleDevices: true,
  builder: (_) => ExamplePage(),
);

支持的设备

以下是一些预配置的设备：

Device.noInsets() - 无边距的基础设备
Device.iphone15Pro() - 模拟 iPhone 15 Pro
Device.pixel9ProXL() - 模拟 Pixel 9 Pro XL
Device.ipadPro12() - 模拟 iPad Pro 12
Device.browser() - 模拟通用网页浏览器

多语言支持

黄金测试支持多种语言，以验证应用在不同语言环境下的表现。

配置支持的语言

为所有测试配置支持的语言：

goldenTestSupportedLocales = [
  const Locale('pl'),
  const Locale('en'),
];

为特定测试配置支持的语言：

goldenTest(
  name: 'Example Page',
  builder: (_) => ExamplePage(),
  supportedLocales: [
    const Locale('pl'),
    const Locale('en'),
  ],
);

包含本地化委托

为了支持额外的语言，需要包含本地化委托：

goldenTestLocalizationsDelegates = [
  YourAppLocalizations.delegate,
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
  GlobalCupertinoLocalizations.delegate,
];

为特定测试配置本地化委托：

goldenTest(
  name: 'Example Page',
  builder: (_) => ExamplePage(),
  supportedLocales: [
    const Locale('pl'),
    const Locale('en'),
  ],
  localizationsDelegates: [
    YourAppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
);

使用 intl 包

如果你的项目使用 intl 包进行本地化，并且默认语言不是 en_US 或者你希望支持多种语言，你需要提供额外的配置，特别是针对 intl 包。因为 intl 包默认使用 en_US 作为系统语言，而你需要根据测试更改它。你可以在 flutter 配置文件中添加以下代码：

globalSetup = (locale) async => Intl.defaultLocale = locale.languageCode;

自定义字体

如果你的项目使用自定义字体，你需要注册并加载这些字体，使它们在测试中可用。每个字体家族需要在每次字体加载器中加载一次。

Future<void> setupFonts() async {
  TestWidgetsFlutterBinding.ensureInitialized();

  await (FontLoader('Roboto')..addFont(rootBundle.load('assets/fonts/Roboto-Regular.ttf'))).load();
}

如果你的项目使用 google_fonts 包，你需要找到 .otf 或 .ttf 文件，并将其作为资产直接提供给应用程序。

主题设置

为了设置应用的主题，你需要使用以下配置：

goldenTestThemeInTests = yourThemeData;
goldenTestDarkThemeInTests = yourThemeDataDark;

如果没有设置主题，默认配置将使用基本的 ThemeData()。

暗模式

Golden Test 允许你在亮模式和暗模式下运行测试，以验证应用在不同主题设置下的视觉效果。默认情况下，测试会在两种模式下运行。你可以通过修改 goldenTestSupportedThemes 列表来禁用暗模式测试：

goldenTestSupportedThemes = [Brightness.light];

你也可以为每个测试配置支持的主题：

goldenTest(
  name: 'Example Page',
  builder: (_) => ExamplePage(),
  supportedThemes: [Brightness.light, Brightness.dark],
);

全局设置回调

globalSetup 回调允许你定义项目特定的配置，例如禁用动画或设置默认语言。

globalSetup = (_) async => duringTestExecution = false;

差异容忍度

差异容忍度可以帮助管理参考图像和当前 UI 输出之间的可接受视觉差异。这对于允许小的变化（如抗锯齿或平台渲染差异）特别有用。

goldenTestDifferenceTolerance(0.01);