Flutter nv_golden的使用_NvGolden 是是一个用于生成金丝雀测试(golden testing)的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));
});
金丝雀创建
createGolden
和 createSequenceGolden
是是 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
更多关于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 示例
-
添加依赖
首先,确保你的
pubspec.yaml
文件中包含了flutter_test
依赖(这通常是默认包含的):dependencies: flutter: sdk: flutter dev_dependencies: flutter_test: sdk: flutter
-
创建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'), ); }); }
-
运行Golden Test
在命令行中运行以下命令来执行Golden Test,并生成或更新Golden图片:
flutter test --update-goldens
这将生成或更新
test/golden_tests/golden_test.png
文件(确保你的测试目录结构支持这一点,或者根据需要调整路径)。 -
验证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
插件提供一定的参考。