Flutter故事书工具测试插件storybook_toolkit_tester的使用

Flutter故事书工具测试插件storybook_toolkit_tester的使用

准备工作

以下是使用 storybook_toolkit_tester 插件进行 Flutter 故事书工具测试的基本步骤。

步骤 1: 引入包

在项目的 pubspec.yaml 文件中添加 storybook_toolkit_tester 包：

dev_dependencies:
  storybook_toolkit_tester: ^1.2.0

步骤 2: 创建测试文件

创建一个测试文件，例如 storybook_test.dart。

步骤 3: 添加测试代码

在 storybook_test.dart 文件中添加以下内容：

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

void main() => testStorybook(
  storybook,
  devices: { Devices.ios.iPhoneSE, Devices.android.pixel4, Devices.ios.iPadAir4 },
  filterStories: (Story story) {
    final skipStories = ['CounterPage']; // 可以根据需求修改需要跳过的测试故事
    return !skipStories.contains(story.name);
  },
);

final storybook = Storybook(
  stories: [
    Story(
      name: 'Button',
      builder: (context) => ElevatedButton(
        onPressed: () {},
        child: const Text('Button'),
      ),
    ),
    Story(
      name: 'CounterPage',
      builder: (context) => const CounterPage(), // 假设 CounterPage 是你定义的一个页面
    ),
  ],
);

步骤 4: 生成黄金图像

运行以下命令来生成黄金图像：

flutter test --update-goldens --tags=storybook

更多关于Flutter故事书工具测试插件storybook_toolkit_tester的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter故事书工具测试插件storybook_toolkit_tester的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


storybook_toolkit_tester 是一个用于 Flutter 的测试插件，它帮助开发者在开发过程中使用 Storybook 工具来测试和展示 UI 组件。Storybook 是一个流行的工具，用于独立开发和测试 UI 组件，通常用于前端开发，但在 Flutter 中也有类似的工具。

以下是 storybook_toolkit_tester 的基本使用方法：

1. 安装依赖

首先，你需要在 pubspec.yaml 文件中添加 storybook_toolkit_tester 依赖：

dependencies:
  flutter:
    sdk: flutter
  storybook_toolkit: ^0.0.1
  storybook_toolkit_tester: ^0.0.1

然后运行 flutter pub get 来获取依赖。

2. 创建 Storybook

接下来，你可以创建一个 Storybook 来展示你的组件。假设你有一个简单的 Button 组件，你可以为它创建一个 Storybook：

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

class Button extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  Button({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

final buttonStories = [
  Story(
    name: 'Primary Button',
    builder: (context) => Button(
      text: 'Click Me',
      onPressed: () {},
    ),
  ),
  Story(
    name: 'Disabled Button',
    builder: (context) => Button(
      text: 'Disabled',
      onPressed: null,
    ),
  ),
];

void main() {
  runApp(StorybookApp(
    stories: buttonStories,
  ));
}

3. 使用 storybook_toolkit_tester 进行测试

storybook_toolkit_tester 可以帮助你编写测试用例来验证 Storybook 中的组件。你可以使用 storybookTester 函数来编写测试：

import 'package:flutter_test/flutter_test.dart';
import 'package:storybook_toolkit_tester/storybook_toolkit_tester.dart';
import 'package:your_app/main.dart'; // 导入你的 Storybook 应用

void main() {
  testWidgets('Test Button Storybook', (WidgetTester tester) async {
    await storybookTester(
      tester,
      stories: buttonStories,
      onStoryLoaded: (story) {
        expect(find.text(story.name), findsOneWidget);
      },
    );
  });
}

在这个例子中，storybookTester 函数会加载 buttonStories 中的每一个故事，并在每个故事加载后执行 onStoryLoaded 回调。你可以在这个回调中编写测试逻辑，例如检查组件是否正确渲染。

4. 运行测试

你可以使用 flutter test 命令来运行这些测试：

flutter test
回到顶部