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

简介

bc_golden_plugin 是一个用于自动化视觉质量保证（QA）的Flutter包。它改进了原生的golden测试，并根据开发过程中需求添加了一些特性，例如自动化视觉QA的手动过程。该包受到了其他包如golden_toolkit和alchemist的启发。

目录

• 用例
• 指南
• BcGoldenConfiguration
• 窗口配置
• 自定义窗口配置
• 无障碍
• bcGoldenTest
• LocalFileComparatorThreshold

用例 👨🏻‍💻

该包的主要目的是将组件或小部件与设计师团队在Figma中提供的设计进行比较。以下是一个用例示例：

• 设计图:
• 开发结果:

通过使用Golden Image Testing，可以减少与设计团队的审查会议时间，从而加快上市时间。

指南 📝

• 测试文件应位于包的test文件夹内。
• 测试文件应以_golden_test.dart命名。

BcGoldenConfiguration 🛠

BcGoldenConfiguration处理应用程序的主题提供程序和主题数据。可以在flutter_test_config.dart中设置配置：

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  TestWidgetsFlutterBinding.ensureInitialized();

  BcGoldenConfiguration bcGoldenConfiguration = BcGoldenConfiguration();

  bcGoldenConfiguration.setThemeProvider = [
    ChangeNotifierProvider(create: (_) => BcThemeNotifier()),
    ...BancolombiaFoundations.themeProvider,
  ];

  bcGoldenConfiguration.setThemeData = BcThemeData.lightTheme;

  await loadConfiguration();

  await testMain();
}

窗口配置 | 设备 📱

以下是可用的窗口配置，用于模拟物理设备：

示例渲染效果：

device	example
iPhone 8
iPad Pro

自定义窗口配置

如果上述配置不适用，可以使用自定义窗口配置：

bcGoldenTest(
    'Test con custom window config data',
    (tester) async {
      await bcWidgetMatchesImage(
        imageName: 'golden',
        widget: const HomePage(title: "Flutter Demo Home Page"),
        tester: tester,
        device: bcCustomWindowConfigData(
          name: 'Custom Configuraton',
          pixelDensity: 3.0,
          size: const Size(375, 828),
        ),
      );
    },
);

无障碍 🦾

可以通过textScaleFactor参数测试无障碍功能，调整字体大小：

iPhone14 normal	iPhone14 with text scale factor

bcGoldenTest 🏗

bcGoldenTest是带有"golden"标签的个性化测试函数，示例如下：

bcGoldenTest(
    '<name of the test file>',
    (tester) async {
      // Test goes here
    },
    shouldUseRealShadows: true,
);

LocalFileComparator

LocalFileComparator类允许自定义两个图像之间的可接受差异阈值：

class LocalFileComparatorWithThreshold extends LocalFileComparator {
  final double threshold;

  LocalFileComparatorWithThreshold(Uri testFile, this.threshold)
      : assert(threshold >= 0 && threshold <= 1),
        super(testFile);

  @override
  Future<bool> compare(Uint8List imageBytes, Uri golden) async {
    final result = await GoldenFileComparator.compareLists(
      imageBytes,
      await getGoldenBytes(golden),
    );

    if (!result.passed && result.diffPercent <= threshold) {
      debugPrint(
        'Se encontró una diferencia de ${result.diffPercent * 100}%, pero es '
        'un valor aceptable, dado que el porcentaje de aceptación es de '
        '${threshold * 100}%',
      );

      return true;
    }

    if (!result.passed) {
      final error = await generateFailureOutput(result, golden, basedir);
      throw FlutterError(error);
    }
    return result.passed;
  }
}

示例代码 🤌🏻

使用该包非常简单，以下是一个完整的示例：

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

void main() {
  group('Button Widget Golden Tests', () {
    bcGoldenTest(
      'button_widget_golden',
      (tester) async {
        await bcWidgetMatchesImage(
          imageName: 'button_widget',
          widget: ButtonWidget(),
          tester: tester,
          device: iPhone8,
          textScaleFactor: 2.0,
        );
      },
      shouldUseRealShadows: true,
    );
  });
}

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            child: Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

这个示例将生成golden并将其与开发的小部件进行比较。