Flutter简易小部件测试插件gg_easy_widget_test的使用

Flutter简易小部件测试插件gg_easy_widget_test的使用

GgEasyWidgetTest简化了对小部件的测试。它能轻松地为你提供以下关于待测小部件的信息：

  • 宽度和高度
  • 绝对框架
  • 渲染框
  • 渲染元素
  • 小部件的实例
  • 小部件状态的实例

更多详情请参见提供的示例。

示例代码

// @license
// Copyright (c) 2019 - 2021 Dr. Gabriel Gatzsche. All Rights Reserved.
//
// Use of this source code is governed by terms that can be
// found in the LICENSE file in the root of this package.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:gg_easy_widget_test/src/gg_easy_widget_test.dart';

const subwidgetFrame = Rect.fromLTWH(10, 20, 30, 40);

/// 这是我们将使用GgEasyWidgetTest测试的示例小部件
class SampleWidget extends StatefulWidget {
  const SampleWidget({required Key key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _SampleWidgetState createState() => _SampleWidgetState();
}

/// 这是我们将使用GgEasyWidgetTest测试的示例小部件的状态
class _SampleWidgetState extends State<SampleWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: subwidgetFrame.width,
      height: subwidgetFrame.height,
    );
  }
}

void main() {
  group('GgEasyWidgetTest', () {
    testWidgets('应提供关于待测小部件的信息',
        (WidgetTester tester) async {
      // 创建一个包含子小部件的小部件
      final sampleWidgetKey = GlobalKey(debugLabel: 'sampleWidgetKey');
      final sampleWidget = SampleWidget(key: sampleWidgetKey);

      final widget = Directionality(
        textDirection: TextDirection.ltr,
        child: Container(
          child: Stack(
            children: [
              Positioned(
                left: subwidgetFrame.left,
                top: subwidgetFrame.top,
                child: sampleWidget,
              ),
            ],
          ),
        ),
      );

      // 实例化小部件
      await tester.pumpWidget(widget);
      await tester.pumpAndSettle();

      // 查找子小部件
      final sampleWidgetFinder = find.byKey(sampleWidgetKey);

      // 创建GgEasyWidgetTest实例
      final ggEasyWidgetTest = GgEasyWidgetTest(sampleWidgetFinder, tester);

      // 宽度和高度应该正确
      expect(ggEasyWidgetTest.width, subwidgetFrame.width);
      expect(ggEasyWidgetTest.height, subwidgetFrame.height);

      // 应该提供渲染框
      expect(ggEasyWidgetTest.renderBox, isInstanceOf<RenderBox>());

      // 应该提供元素
      expect(ggEasyWidgetTest.element, isInstanceOf<Element>());

      // 应该提供绝对框架
      expect(ggEasyWidgetTest.absoluteFrame, subwidgetFrame);

      // 应该提供小部件实例
      expect(ggEasyWidgetTest.widget, sampleWidget);

      // 应该提供状态实例
      expect(ggEasyWidgetTest.state, isInstanceOf<_SampleWidgetState>());
    });
  });
}

更多关于Flutter简易小部件测试插件gg_easy_widget_test的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter简易小部件测试插件gg_easy_widget_test的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


gg_easy_widget_test 是一个用于简化 Flutter 小部件测试的插件。它提供了一些便捷的功能，使得编写和运行小部件测试变得更加容易。以下是一个简单的使用指南，帮助你快速上手 gg_easy_widget_test 插件。

1. 安装插件

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

dev_dependencies:
  flutter_test:
    sdk: flutter
  gg_easy_widget_test: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 编写小部件测试

接下来，你可以使用 gg_easy_widget_test 提供的功能来编写小部件测试。以下是一个简单的示例：

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

void main() {
  testWidgets('Test MyWidget', (WidgetTester tester) async {
    // 使用 gg_easy_widget_test 提供的便捷方法来加载小部件
    await tester.pumpWidgetWithGG(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('MyWidget Test'),
          ),
          body: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );

    // 使用 gg_easy_widget_test 提供的断言方法
    expect(find.text('Hello, World!'), findsOneWidget);
  });
}

3. 运行测试

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

flutter test

4. 主要功能

gg_easy_widget_test 提供了一些便捷的功能，包括：

  • pumpWidgetWithGG: 一个简化的小部件加载方法，可以替代 tester.pumpWidget。
  • expect 断言增强: 提供了一些额外的断言方法，使得测试更加简洁。
  • tapWithGG 和 enterTextWithGG: 简化了用户交互的模拟操作。

5. 示例代码

以下是一个更复杂的测试示例，展示了如何使用 gg_easy_widget_test 进行交互测试：

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

void main() {
  testWidgets('Test MyButton', (WidgetTester tester) async {
    bool isPressed = false;

    await tester.pumpWidgetWithGG(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('MyButton Test'),
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                isPressed = true;
              },
              child: Text('Press Me'),
            ),
          ),
        ),
      ),
    );

    // 模拟按钮点击
    await tester.tapWithGG(find.text('Press Me'));
    await tester.pump();

    // 断言按钮点击后的状态
    expect(isPressed, true);
  });
}
回到顶部