Flutter nv_golden的使用_NvGolden 是是一个用于生成金丝雀测试(golden testing)的Flutter插件

发布于 1周前 作者 nodeper 最后一次编辑是 5天前 来自 Flutter

Flutter nv_golden的使用_NvGolden 是是一个用于生成金丝雀测试(golden testing)的Flutter插件

NvGolden

NvGolden 是是一个用于生成金丝雀测试(golden testing)的Flutter插件。 通过这个插件,你可以创建和展示金丝雀截图,以确保你的应用在不同设备和屏幕尺寸上的表现一致。

初始化

在运行任何包含文本或图标的内容之前,必须调用 init 方法。该方法尝试加载 pubspec.yaml 文件中注册的所有字体。如果 init 无法加载您的字体,请手动使用 NvGolden.loadFont(...) 加载它们。

setUpAll(NvGolden.init);

// 或者在字体未自动拾取的情况下
setUpAll(() => Future.wait([
    NvGolden.init(),
    NvGolden.loadFont(
      name: 'Roboto',
      paths: ['lib/fonts/Roboto-Regular.ttf'],
    ),
  ]),
);

单独渲染

singular 构造函数允许你渲染单个场景。这特别适用于添加到常规 widget 测试中,以便在测试期间看到正在渲染的内容。

testWidgets('your test name', (tester) async {
  final nvGolden = NvGolden.singular(
    widget: nvWrapper.wrap(YourWidget(...)),
    screen: Screen(size: Size(200, 100)),
  );

  await tester.createGolden(nvGolden, 'your-golden-name');

  // 预期语句必须在 createGolden 或 createSequenceGolden 调用之后发生
  expect(find.byType(YourWidget), findsOneWidget);
});

网格渲染

grid 构造函数允许你将多个金丝雀场景合并到一个文件中。

testWidgets('your test name', (tester) async {
  final nvGolden = NvGolden.grid(
    nrColumns: 2,
    screen: Screen(size: Size(200, 100)),
  )
    ..addScenario(
      name: 'Icon 1',
      widget: nvWrapper.wrap(YourWidget(...)),
    )
    ..addScenario(...);

  await tester.createGolden(nvGolden, 'your-golden-name');

  // 预期语句必须在 createGolden 或 createSequenceGolden 调用之后发生
  // 注意,你的 widget 将会为每个场景单独渲染一次!
  expect(find.byType(YourWidget), findsNWidgets(4));
});

设备渲染

devices 构造函数将每个场景分别渲染到每种设备上。强烈建议在页面/屏幕级别添加这些测试,并使用较小的设备(如 Device.iphone5s)和较大的的设备(如 Device.iphone12proMax),以确保设计在大屏幕上看起来不错,在小屏幕上不会溢出。

testWidgets('your test name', (tester) async {
  final nvGolden = NvGolden.devices(
    deviceSizes: [Device.iphone5s, Device.iphone12proMax],
  )
  ..addScenario(
    name: 'scenario name',
    widget: YourWidgt(...),
  )
  ..addScenario(...);

  await tester.createGolden(nvGolden, 'your-golden-name');

  // 预期语句必须在 createGolden 或 createSequenceGolden 调用之后发生
  // 注意,你的 widget 将会为每个 Device 渲染一次!
  expect(find.byType(YourWidget), findsNWidgets(4));
});

金丝雀创建

createGoldencreateSequenceGolden 是是 WidgetTester 类的扩展方法。它们接受一个 NvGolden 实例作为第一个参数和一个金丝雀文件名作为第二个参数。

await tester.createGolden(nvGolden, 'your-golden-name');

示例代码

import 'package:example/main_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: lightTheme,
      home: MainPage(),
    );
  }
}

final lightTheme = ThemeData(
  primarySwatch: Colors.blueGrey,
);

更多关于Flutter nv_golden的使用_NvGolden 是是一个用于生成金丝雀测试(golden testing)的Flutter插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter nv_golden的使用_NvGolden 是是一个用于生成金丝雀测试(golden testing)的Flutter插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


关于Flutter中的nv_golden插件,虽然这不是一个广泛知名的官方或主流插件,但基于你提出的需求,我会假设它是一个用于图像对比测试(Golden Tests)的自定义插件。Golden Tests在Flutter开发中常用于验证UI在不同条件下的一致性,确保UI没有意外变更。

由于nv_golden的具体实现细节和API可能不为大众所熟知,且没有直接的可访问文档或源代码,我将提供一个基于Flutter官方Golden Tests的示例代码,这可以帮助你理解如何在Flutter项目中使用类似的图像对比测试功能。如果你使用的nv_golden插件有类似API,你可以参考这个示例进行调整。

Flutter Golden Tests 示例

  1. 添加依赖

    首先,确保你的pubspec.yaml文件中包含了flutter_test依赖(这通常是默认包含的):

    dependencies:
      flutter:
        sdk: flutter
    
    dev_dependencies:
      flutter_test:
        sdk: flutter
  2. 创建Golden Test

    在你的测试文件夹(通常是test/widget_test.dart)中,你可以编写一个Golden Test。以下是一个简单的示例:

    import 'package:flutter/material.dart';
    import 'package:flutter_test/flutter_test.dart';
    
    void main() {
      testWidgets('MyWidget matches golden', (WidgetTester tester) async {
        // 构建一个简单的Widget
        await tester.pumpWidget(MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Golden Test')),
            body: Center(child: Text('Hello, Golden!')),
          ),
        ));
    
        // 生成Golden图片并保存到本地
        await expectLater(
          find.byType(Scaffold),
          matchesGoldenFile('golden_test.png'),
        );
      });
    }
  3. 运行Golden Test

    在命令行中运行以下命令来执行Golden Test,并生成或更新Golden图片:

    flutter test --update-goldens

    这将生成或更新test/golden_tests/golden_test.png文件(确保你的测试目录结构支持这一点,或者根据需要调整路径)。

  4. 验证Golden Test

    再次运行测试命令,但不使用--update-goldens选项,以验证当前UI是否与Golden图片匹配:

    flutter test

    如果UI有变化,测试将失败,提示Golden图片不匹配。

假设的nv_golden使用

如果你使用的nv_golden插件有类似的API,你可能需要替换上述示例中的matchesGoldenFile函数调用。例如,如果nv_golden提供了一个名为captureAndCompare的函数:

await nv_golden.captureAndCompare(
  tester,
  find.byType(Scaffold),
  'golden_test_nv.png',
);

请注意,上述nv_golden.captureAndCompare是一个假设的函数调用,具体实现取决于nv_golden插件的实际API。建议查阅nv_golden的官方文档或源代码以获取准确的用法。

由于nv_golden不是广泛使用的插件,以上示例基于Flutter官方的Golden Tests功能。希望这能帮助你理解如何在Flutter项目中实现图像对比测试,并为你使用nv_golden插件提供一定的参考。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!