Flutter自适应黄金测试插件adaptive_golden_test的使用

adaptive_golden_test 是一个用于在Flutter小部件测试期间生成自适应黄金文件的插件。它可以帮助开发者确保UI在不同设备和平台上的显示一致性，避免回归问题。以下是关于如何使用该插件的详细说明和一个完整的示例demo。

功能

使用此插件可以在测试中实现以下功能：

• 为不同设备生成黄金文件
• 加载自定义字体
• 设置窗口大小和像素密度
• 等待图像渲染完成
• 渲染物理和系统UI层
• 在测试中渲染键盘
• 设置运行测试的首选操作系统
• 配置文件比较的差异容差阈值

开始使用

1. 添加依赖

首先，在pubspec.yaml文件中添加adaptive_test到你的开发依赖项中：

dev_dependencies:
  adaptive_test: ^最新版本号

2. 创建flutter_test_config.dart

在test文件夹的根目录下创建一个名为flutter_test_config.dart的文件，并添加以下代码：

import 'package:flutter_test/flutter_test.dart';
import 'package:adaptive_test/adaptive_test.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  TestWidgetsFlutterBinding.ensureInitialized();
  await loadFonts(); // 加载自定义字体
  setupFileComparatorWithThreshold(); // 设置差异阈值
  await testMain();
}

使用方法

1. 渲染自定义字体

步骤：

1. 将字体文件添加到应用的资源文件夹中。
2. 在pubspec.yaml中声明字体：

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Black.ttf

1. 在flutter_test_config.dart中调用loadFonts()以加载字体：

await loadFonts();

2. 设置测试设备

步骤：

1. 定义一组设备变体：

final defaultDeviceConfigs = {
  Devices.ios.iPhoneSE,
  Devices.ios.iPhone12,
  Devices.ios.iPad,
  Devices.linux.laptop,
  Devices.android.pixel4,
  Devices.android.samsungGalaxyS20,
};

1. 使用AdaptiveTestConfiguration单例设置设备变体：

AdaptiveTestConfiguration.instance
  ..setDeviceVariants(defaultDeviceConfigs);

3. 配置差异阈值

为了允许处理器之间的微小像素差异，可以在flutter_test_config.dart中添加setupFileComparatorWithThreshold()：

setupFileComparatorWithThreshold();

4. 强制测试平台

可以配置AdaptiveTestConfiguration以强制特定的测试平台：

AdaptiveTestConfiguration.instance
  ..setEnforcedTestPlatform(TargetPlatform.macOS)
  ..setDeviceVariants(defaultDeviceConfigs);

如果希望在非预期平台上跳过测试而不是抛出错误，可以设置setFailTestOnWrongPlatform(false)：

AdaptiveTestConfiguration.instance
  ..setEnforcedTestPlatform(TargetPlatform.macOS)
  ..setFailTestOnWrongPlatform(false)
  ..setDeviceVariants(defaultDeviceConfigs);

5. 编写测试

使用testAdaptiveWidgets函数编写测试：

void main() {
  testAdaptiveWidgets(
    'App渲染无回归',
    (tester, variant) async {
      await tester.pumpWidget(
        AdaptiveWrapper(
          device: variant,
          orientation: Orientation.portrait,
          isFrameVisible: true,
          showVirtualKeyboard: false,
          child: const App(),
        ),
      );

      await tester.expectGolden<App>(variant); // 生成黄金文件
    },
  );
}

完整示例Demo

以下是一个完整的示例项目，展示了如何使用adaptive_golden_test进行自适应黄金测试。

1. pubspec.yaml

name: adaptive_golden_test_demo
description: A demo project for adaptive_golden_test.

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  adaptive_test: ^最新版本号

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Black.ttf

2. test/flutter_test_config.dart

import 'package:flutter_test/flutter_test.dart';
import 'package:adaptive_test/adaptive_test.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  TestWidgetsFlutterBinding.ensureInitialized();
  final defaultDeviceConfigs = {
    Devices.ios.iPhoneSE,
    Devices.ios.iPhone12,
    Devices.ios.iPad,
    Devices.linux.laptop,
    Devices.android.pixel4,
    Devices.android.samsungGalaxyS20,
  };

  AdaptiveTestConfiguration.instance
    ..setDeviceVariants(defaultDeviceConfigs)
    ..setEnforcedTestPlatform(TargetPlatform.macOS)
    ..setFailTestOnWrongPlatform(false);

  await loadFonts();
  setupFileComparatorWithThreshold();
  await testMain();
}

3. test/widget_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:adaptive_test/adaptive_test.dart';

void main() {
  testAdaptiveWidgets(
    'App渲染无回归',
    (tester, variant) async {
      await tester.pumpWidget(
        AdaptiveWrapper(
          device: variant,
          orientation: Orientation.portrait,
          isFrameVisible: true,
          showVirtualKeyboard: false,
          child: const MyApp(),
        ),
      );

      await tester.expectGolden<MyApp>(variant); // 生成黄金文件
    },
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo Home Page'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '0',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
    );
  }
}