(译)widget测试简介

栏目: 编程工具 · 发布时间: 5年前

内容简介:在单元测试介绍中,我们学习了如何使用test包测试Dart类。为了测试Widget类,我们需要一些flutter测试包提供的附加工具,它是随FlutterSDK一起提供的。flutter_test包提供了以下用于测试widget的工具:

原文链接

在单元测试介绍中,我们学习了如何使用test包测试Dart类。为了测试Widget类,我们需要一些flutter测试包提供的附加工具,它是随FlutterSDK一起提供的。

flutter_test包提供了以下用于测试widget的工具:

  • WidgetTester,它允许我们在测试环境中构建Widgets并与之交互。
  • testWidgets方法。此方法将自动为每个测试用例创建一个新的WidgetTester,并用于代替正常的测试功能。
  • Finder类。这些类允许我们在测试环境中查找widget。
  • 特定于 widget Matcher常量,可帮助我们验证Finder是否在测试环境中找到widget或多个widget。

如果这听起来很难对付,请不要担心!我们将在整个配方中看到所有这些零件是如何组合在一起的。

路径

flutter_test
testWidgets
WidgetTester
Finder
Matcher

1. 添加flutter_test依赖

在我们开始编写测试之前,我们需要在pubspec.yaml文件的 dev_dependencies 部分中包含 flutter_test 依赖项。如果使用命令行 工具 或代码编辑器创建新的Flutter项目,则此依赖项应该已经到位!

dev_dependencies:
  flutter_test:
    sdk: flutter

2.创建一个要测试的Widget

接下来,我们需要创建一个我们可以测试的Widget!对于这个配方,我们将创建一个显示标题和消息的widget。

class MyWidget extends StatelessWidget {
  final String title;
  final String message;

  const MyWidget({
    Key key,
    @required this.title,
    @required this.message,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

3.创建一个testWidget测试

现在我们有一个Widget来测试,我们可以开始编写我们的第一个测试了!首先,我们将使用flutter_test包提供的testWidgets方法来定义测试。 testWidgets方法将允许我们定义一个Widget测试,并将创建一个WidgetTester供我们使用。

我们的测试将验证MyWidget是否显示给定的标题和消息。

void main() {
  // Define a test. The TestWidgets function will also provide a WidgetTester
  // for us to work with. The WidgetTester will allow us to build and interact
  // with Widgets in the test environment.
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Test code will go here!
  });
}

4.使用WidgetTester构建Widget

接下来,我们将要在测试环境中构建MyWidget。为此,我们可以使用WidgetTester提供的pumpWidget方法。 pumpWidget方法将构建并渲染我们提供的Widget。

在这种情况下,我们将创建一个MyWidget实例,将“T”显示为标题,将“M”显示为消息。

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Create the Widget tell the tester to build it
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));
  });
}

注意 在初始调用 pumpWidget 之后, WidgetTester 提供了重建相同Widget的其他方法。如果您正在使用StatefulWidget或动画,这将非常有用。

例如,如果我们点击一​​个按钮,并且此按钮调用setState,Flutter将不会在测试环境中自动重建您的Widget。我们需要使用以下方法之一来让Flutter再次构建我们的Widget。

  • tester.pump() 在给定的持续时间后触发Widget的重建。
  • tester.pumpAndSettle() 在给定的持续时间内反复呼叫泵,直到不再安排任何帧。这基本上要等待所有动画完成。

这些方法提供了对构建生命周期的细粒度控制,这在测试时特别有用。

5.使用 Finder 查找我的Widget

现在我们已经在测试环境中构建了Widget,我们想要使用Finder在Widget树中查找标题和消息Text Widgets。这将允许我们验证我们是否正确显示这些widget!

在这种情况下,我们将使用flutter_test包提供的顶级find方法来创建Finders。由于我们知道我们正在查找Textwidget,我们可以使用find.text方法。

有关Finder类的更多信息,请参阅 widget测试配方中的查找widget

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));

    // Create our Finders
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');
  });
}

6. 使用Matcher验证我们的Widget是否正常工作

最后,我们可以使用flutter_test提供的Matcher常量验证标题和消息Text Widgets在屏幕上显示。 Matcher类是测试包的核心部分,并提供了一种通用方法来验证给定值是否符合我们的期望。

在这种情况下,我们希望确保我们的widget只出现在屏幕上一次。因此,我们可以使用findsOneWidget Matcher。

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');

    // Use the `findsOneWidget` matcher provided by flutter_test to verify our
    // Text Widgets appear exactly once in the Widget tree
    expect(titleFinder, findsOneWidget);
    expect(messageFinder, findsOneWidget);
  });
}

其他Matcher

除了findsOneWidget之外,flutter_test还为常见案例提供了其他的Matcher。

  • findsNothing 验证没有找到Widgets
  • findsWidgets 验证是否找到一个或多个小部件
  • findsNWidgets 验证是否找到特定数量的小部件

完整代码

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

void main() {
  // Define a test. The TestWidgets function will also provide a WidgetTester
  // for us to work with. The WidgetTester will allow us to build and interact
  // with Widgets in the test environment.
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Create the Widget tell the tester to build it
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));

    // Create our Finders
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');

    // Use the `findsOneWidget` matcher provided by flutter_test to verify our
    // Text Widgets appear exactly once in the Widget tree
    expect(titleFinder, findsOneWidget);
    expect(messageFinder, findsOneWidget);
  });
}

class MyWidget extends StatelessWidget {
  final String title;
  final String message;

  const MyWidget({
    Key key,
    @required this.title,
    @required this.message,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python编程快速上手

Python编程快速上手

Albert Sweigart / 王海鹏 / 人民邮电出版社 / 2016-7-1 / 69.00元

如今,人们面临的大多数任务都可以通过编写计算机软件来完成。Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。通过Python编程,我们能够解决现实生活中的很多任务。 本书是一本面向实践的Python编程实用指南。本书的目的,不仅是介绍Python语言的基础知识,而且还通过项目实践教会读者如何应用这些知识和技能。本书的首部分介绍了基本Python编程概念,第二部分介绍了一些不......一起来看看 《Python编程快速上手》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具