Flutter测试(二):在项目中进行 Widget 测试

上回书对 Flutter 中 Widget 测试的官方 Demo 进行了简单的讲解,这篇文章我们对自己的项目进行 Widget 测试。

就拿 「想吃啥」APP 来进行测试吧。

在首页中,我们可以看到有 6 个 Widget,有:

1.荤菜 & 素菜:
2.选个菜吧 ×2
3.Button ×2

因为平时我们写APP的时候,肯定会封装一些 Widget 来进行复用,所以首页中 选个菜吧 & Button 都被我封装成了一个 Widget。

下面我们就先针对这两个 Widget 进行测试。

选个菜吧

首先我们也是根据步骤来,先编写 Widget,然后编写 Widget 测试。(说得好像是废话)

编写Widget

其中 「选个菜吧」是封装了一个 Row,里面包含了一个 Text & IconButton ,具体代码如下:

class MenuWidget extends StatelessWidget {

  final Stream stream;
  final VoidCallback callback;

  MenuWidget(this.stream, this.callback);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        StreamBuilder(
          stream: stream,
          initialData: "选个菜吧",
          builder: (context, snapshot) {
            return Text(
              snapshot.data,
              style: TextStyle(fontSize: 34, color: Colors.black87),
            );
          },
        ),
        IconButton(
          icon: Icon(Icons.refresh),
          onPressed: callback,
        ),
      ],
    );
  }
}

参数有两个:

1.Stream:用于 StreamBuilder 的 stream 参数,在本APP中是用来随机菜单2.VoidCallback:用于 IconButton 的点击事件

这样我们就封装成了一个 Widget,可以在编写 UI 的时候复用了,那既然写完了 Widget,下面就要对他进行测试了。

编写 Widget 测试

在编写测试代码之前,我们要明确该 Widget 的作用。(由于我是在写文章,可能很多人没仔细看前面的代码,所以这里还是解释一下该 Widget的逻辑):

1.该 Widget 是由两个 Widget 组合而成。一个是 Text, 一个是 IconButton。
2.Text 用来展示菜谱。
3.IconButton 用来点击调用随机菜谱的方法。

所以我们在写测试的时候,也应该按照上述的逻辑来写,我写的测试代码如下:

void main() {
  testWidgets('MenuWidget test', (WidgetTester tester) async {
    StreamController<String> _controller = StreamController();
    try {
      await tester.pumpWidget(MaterialApp(
        home: Material(
          child: MenuWidget(
            _controller.stream, 
                () => _controller.sink.add("111"),
          ),
        ),
      ));
      expect(find.text('选个菜吧'), findsOneWidget);

      await tester.tap(find.byIcon(Icons.refresh));
      await tester.pump();
      expect(find.text('111'), findsOneWidget);


    } finally {
      _controller.close();
    }
  });
}

上述逻辑大致如下:

1.创建测试的 Widget,也就是我们的 MenuWidget,其中需要两个参数,一个是 stream,一个是 VoidCallback
2.由于 Stream 必须要 close,所以套了一层异常捕获,在 finally 中释放 stream。
3.定义好 Widget 后,查找,是否有「选个菜吧」 的Widget。
4.如果有的话,则点击一个 Icon 为 Icons.refresh 的按钮。
5.然后刷新页面
6.查找是否有文字为「111」的 Widget。

运行测试代码,结果如下:

可以看到确实是通过了,那就证明,我们组合的这个 Widget 不存在逻辑的问题,也就是该 Widget 可用。

Button

在开发中,对于 Button 样式的一致性大家肯定是有了解的,那既然如此,就要封装好一个通用的Button。

编写Widget

一个 Button 需要的参数无非也就两个:

1.Button 上显示的文案
2.Button 点击回调

代码如下:

class CommonButton extends StatelessWidget {

  final String text;
  final VoidCallback callback;

  CommonButton(this.text, this.callback);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))),
      color: Theme.of(context).accentColor,
      textColor: Colors.white,
      padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
      onPressed: callback,
      child: Text(
        text,
        style: TextStyle(fontSize: 18),
      ),
    );
  }
}

这里封装的 Button 就是一个 RaisedButton,用了圆角,设定了文字的大小,这样就封装好了。

下面就写该 Button 的测试。

编写 Widget 测试

Button 的测试逻辑还是非常简单的,我们只需要判断:

1.文字是否正常显示
2.点击回调是否走得通

以上两个条件就 ok 了。

测试代码如下:

testWidgets('CommonButton test', (WidgetTester tester) async {
  bool flag = false;
  await tester.pumpWidget(MaterialApp(
    home: Material(
      child: CommonButton(
        '我是CommonButton',
        () => flag = true,
      ),
    ),
  ));
  expect(find.text('我是CommonButton'), findsOneWidget);
  expect(flag, isFalse);
  await tester.tap(find.byType(CommonButton));
  expect(flag, isTrue);
});

上述代码逻辑为:

  1. 定义一个 flag,用来测试 Button 的点击回调
  2. 创建 Widget,定义好参数
  3. 判断 Button 的文案是否正常显示
  4. 判断 flag 是否为开始定义的值
  5. 点击该 Button6.判断 flag 是否已经更改

运行结果如下:

可以看到上述有两个 test 都完成了。

总结

在 Flutter 中,一切皆为 Widget。

相信各位学 Flutter 的也都知道这个概念,那就可以看得出来,Widget 测试是 Flutter 中最重要的测试。

一个好的程序,测试覆盖率应该也要很高。

推荐5个Flutter重磅开源项目!

大家好,我是hub哥,近年来,随着移动智能设备的快速普及,移动多端统一开发框架已成为一个热门话题。这里为大家整理了5个Flutter优质的开源项目,希望对大家有帮助

发布于:2月以前  |  426次阅读  |  详细内容 »

Flutter在PLUS业务中的探索和实践

2016年京东为向核心客户提供更优质的购物体验,特别推出京东PLUS会员,旨在全方位提升和丰富用户网购体验,目前京东PLUS会员已成为电商行业付费人数最多的会员体系。作为PLUS的前端开发,我们思考最多的就是如何让页面更快更好的呈现在用户面前,如何用技术为用户提供最好的购物体验。

发布于:2月以前  |  357次阅读  |  详细内容 »

首发 | 闲鱼公开多年 Flutter 实践经验

Flutter从诞生到现在,已经成为了跨端开发的领跑者。闲鱼应用在flutter能够以模块形式存在前,进行了很长时间的混合app架构的探索,对原生工程进行较多改动,在官方推出flutter模块模式后,我们进行了大量调研,最终推出了一套开箱即用的混合工程脚手架flutter-boot,帮助大家快速搭建混合工程。

发布于:2月以前  |  362次阅读  |  详细内容 »

打破重重阻碍,Flutter 和 Web 生态如何对接?

Flutter 设计之初是不考虑 Web 生态的,原因很简单:两种技术设计理念不同,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的。今天,阿里无线开发专家门柳就来手把手教如何实现 Flutter 和 Web 生态的对接?

发布于:2月以前  |  363次阅读  |  详细内容 »

一文看完阿里巴巴 AliFlutter 客户端研发体系

Flutter 是开源的 UI 工具包,其能够帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 组件采用现代响应式框架构建,中心思想是用组件 (widget) 构建 UI。淘宝终端技术部无线技术专家王康从 Flutter 的原理出发,介绍了 Flutter 的原理、业内现状,以及阿里巴巴在 Flutter 上所做的深度实践和探索。

发布于:2月以前  |  360次阅读  |  详细内容 »

美团外卖Flutter动态化实践

动态化是 Flutter 无法避开的话题。本文从 Flutter 的特点讲起, 阐述了美团外卖团队在整个 Flutter 动态化上探索的心路历程,还有设计理念、核心原理以及业务应用的经验。本文的视角也不局限于框架本身,更多思考了在解决问题的过程中技术团队需要做的事情,希望能对大家有所启发和帮助。

发布于:2月以前  |  401次阅读  |  详细内容 »

Flutter 上的内存泄漏监控

Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。

发布于:3月以前  |  386次阅读  |  详细内容 »

网易支付-高性能NEJFlutter小程序动态化架构实践

大家好,今天跟大家分享的主题是《NEJFlutter小程序动态化高性能架构》,这是关于网易支付团队在Flutter小程序动态化方向上尝试的一套技术解决方案,一句话介绍NEJFlutter,就是用JavaScript开发业务逻辑、Flutter开发UI布局的小程序架构,性能堪比原生Flutter应用;

发布于:3月以前  |  573次阅读  |  详细内容 »

Flutter卡顿问题的监控与思考

使用Flutter技术构建的应用,一直以高性能高流畅度著称。但是随着应用复杂度越来越高,Flutter会出现一些页面流畅度明显低于Native的情况,甚至可能发生一些卡顿。而很多时候卡顿都发生在线上,即使获得了用户的操作路径,也难以重现。如果我们有一套卡顿监控系统,能够帮助我们捕获到卡顿时的堆栈,那么在发生卡顿的时候,我们就可以定位到具体是哪个函数引起的卡顿,从而解决这些问题。

发布于:3月以前  |  537次阅读  |  详细内容 »

最多阅读

在Flutter中添加资源和图片 1年以前  |  2726次阅读
Flutter的手势GestureDetector分析详解 1年以前  |  2579次阅读
Flutter插件详解及其发布插件 1年以前  |  2286次阅读
发布Flutter开发的iOS程序 1年以前  |  2003次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1687次阅读
使用Inspector检查用户界面 1年以前  |  1681次阅读
Flutter Widget框架概述 1年以前  |  1677次阅读
Flutter 状态管理指南之 Provider 1年以前  |  1667次阅读
Flutter for Web详细介绍 1年以前  |  1507次阅读
JSON和序列化 1年以前  |  1505次阅读
Flutter框架概览 1年以前  |  1486次阅读
为Flutter应用程序添加交互 1年以前  |  1417次阅读
Flutter路由详解 1年以前  |  1410次阅读
使用自定义字体 1年以前  |  1401次阅读
处理文本输入 1年以前  |  1337次阅读
发布Flutter开发的Android程序 1年以前  |  1272次阅读
使用包来开发Flutter应用 1年以前  |  1254次阅读
编写国际化Flutter App 1年以前  |  1228次阅读