【Flutter】自动测试探索

这篇具有很好参考价值的文章主要介绍了【Flutter】自动测试探索。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        根据flutter官方文档的说明,flutter可以对我们的应用,进行自动化测试,保证我们应用的稳定性和功能的完整性,并且可以快速修复问题。

自动化测试可分为以下几类:

单元测试:测试单一的函数,方法或类

组件测试:测试单一的 widget

集成测试:测试一个完整的应用或者一个应用的大部分功能。

        我的整个探索,也是根据这上面3项项进行的。

官方文档地址:

测试 Flutter 应用 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter学习不同类型的测试以及如何编写它们。https://flutter.cn/docs/testing

一.单元测试

        测试单一的函数,方法或类。单元测试的目标是验证逻辑单元在各种条件下的正确性。因为,在很多对日项目,都在追求单元测试覆盖率的前提下,推荐以一个物理文件为单位,编写一组测试。整个过程如下:

        step1.新建一个Flutter 项目 fluttertest并编写一个逻辑处理类lib/counter.dart

class Counter {
  int value = 0;

  void increment() => value++;

  void decrement() => value--;
}

        step2.项目追加test依赖

 flutter pub add test

         step3.创建一个单元测试类,在test目录中 counter_test.dart

import 'package:counter_app/counter.dart';
import 'package:test/test.dart';

void main() {
  group('Counter', () {
    test('value should start at 0', () {
      expect(Counter().value, 0);
    });

    test('value should be incremented', () {
      final counter = Counter();

      counter.increment();

      expect(counter.value, 1);
    });

    test('value should be decremented', () {
      final counter = Counter();

      counter.decrement();

      expect(counter.value, -1);
    });
  });
}

        这样单元测试就编写好了,单元测试主要测试的是逻辑处理单元,用到了test作为一个测试单元,在其中进行相关的测试逻辑编写,并使用expect进行期望判定,同时,可以通过group对test进行分类。

        step4.通过命令,可以运行单元测试,并获取相应的测试报告。

flutter test --coverage 

        step5.执行上述的测试后,我们可以在项目根目录中找到coverage文件夹,在文件夹中已经为我们生成好了lcov.info文件,该文件中计入了测试的覆盖率信息,我们可以通过vscode 上的插件对他进行简单的查看。VSCode LCOV - Visual Studio Marketplace

        当然,我们还需要对这个文件进行转换,生成相应的测试报告。这个转换过程在windows下,我们需要搭建Linux环境,并通过相应的指令进行。环境搭建需要依次安装下面的内容。

MinGW-W64->msys2->lcov 相关的软件我都是在SourceForge上找到并安装。搜关键字即可。
Compare, Download & Develop Open Source & Business Software - SourceForgeSourceForge provides free & fast open source software downloads and development, and business software reviews and comparisons featuring the largest open source and business software directory.https://sourceforge.net/Linux Test Project - Coverage » lcov (sourceforge.net)https://ltp.sourceforge.net/coverage/lcov.php

安装的简单说明:不会的不明白的可以自己百度,这个没什么难度。不浪费篇幅,贴图了。

  • MinGW-W64 和msys2都只下一步就可以了。
  • lcov 是解压文件,需要解压,并把lcov、gendesc、genhtml、geninfo、genpng复制到mingw64的bin目录下。然后在吧整个bin目录加到系统的环境变量中path中。
  • 找到msys2的shell入口cmd文件C:\msys64\msys2_shell.cmd,修改该文件。检索set MSYS2_PATH_TYPE=inherit 把该行的rem去掉,让其在cmd运行时执行,以便把我们的windows系统环境变量,加入到msys2中。

        经过上面的安装,我们再msys2的shell环境中,进入到我们的项目目录,如果你的项目在e盘,你需要通过cd /e/ 来进入。

当你进入到的项目根目录后,你需要执行下面的指令,来完成转换

genhtml coverage/lcov.info -o coverage/html

Administrator@BAC1901170-PC MSYS /e/test/fluttertest
$ genhtml coverage/lcov.info -o coverage/html
Reading data file coverage/lcov.info
Resolved relative source file path "lib\counter.dart" with CWD to "/e/test/fluttertest/lib/counter.dart".
Found 2 entries.
Found common filename prefix "/e/test/fluttertest"
Writing .css and .png files.
Generating output.
Processing file lib/main.dart
Processing file lib/counter.dart
Writing directory view page.
Overall coverage rate:
  lines......: 92.3% (24 of 26 lines)
  functions..: no data found

然后再到自己的根目录下,就可以看到html文件夹,双击html/index.html 就可以看到报告了。

【Flutter】自动测试探索

总结:

上述内容容易理解,记住一下二点即可:

1.flutter单元测试主要用到 test expect group 三个函数

2.理解到单元测试的主要目标是,测试逻辑的正确性

另外:覆盖率是度量测试完整性的一个手段,是测试有效性的一个度量

测试覆盖是对测试完全程度的评测。覆盖率_百度百科

2.组件测试

        组件测试,就是widget测试,对widget类的测试,这部分的测试弥补了单元测试只能测试业务逻辑而不能测试画面组件的缺憾。从而提高我们整个测试的覆盖率。

        当你新建一个flutter项目时,创建模板就已经将组件测试包含到你的项目中了,你无需再添加flutter_test依赖,就可以使用他了。

dev_dependencies:
  flutter_test:
    sdk: flutter

        当然你也将在test文件夹中,找到widget_test文件,在这个文件里已经编写好了一个典型的widget测试。我们一起学习一下他的构造。

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

import 'package:fluttertest/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(const MyApp());

    // Verify that our counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the '+' icon and trigger a frame.
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // Verify that our counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

testWidgets测试方法,这个方法中定义了我们整个widget测试的内容。

WidgetTester提供的 pumpWidget方法会建立并渲染我们提供的 widget。在调用pumpwidget后,我们还可以调用pump等函数用于重新构建widget,这个对StatefulWidget 或者动画会非常有用。

在一个expect函数中,我们可以通过expct(Finder,Matcher)来验证,控件的内容期望。

案例是通过find.text这个Finder,来查找指定文本内容的组件,通过findsOneWidget 这个Matcher来进行判断

常用的Matchers:

findsOneWidget                  验证widget 只在屏幕中出现一次

findsNothing                        验证没有可被查找的 widgets。

findsWidgets                       验证一个或多个 widgets 被找到。

findsNWidgets                     验证特定数量的 widgets 被找到。

matchesGoldenFile             验证渲染的 widget 是否与特定的图像匹配(「目标文件」测试)。

常用的finder构造函数:

find.text 它会创建一个 Finder 来寻找显示特定文本 String 的 widget

find.byKey 通过已经提供给 widget 的 Key 来查找 widget

如果上述示例不适用于一些特殊情况,请到 CommonFinders 文档 中查看更多用法

WidgetTester 提供了文本输入、点击、拖动的相关方法:

  • enterText()
  • tap()
  • drag()

在很多情况下,用户交互会更新应用状态。在测试环境中,Flutter 在状态发生改变的时候并不会自动重建 widget。为了保证模拟用户交互实现后,widget 树能重建,一定要调用 WidgetTester 提供的 pump() 或 pumpAndSettle()。

3.集成测试

        Unit tests 和 Widget tests 并不能够测试单独的模块形成的整体或者获取真实设备上应用运行状态。这些任务需要集成测试 (integration tests) 来处理。

        他能够达到的效果是在真机上运行测试脚本,进行自动化测试。正体编写与单元测试和组件测试类似。具体步骤如下:

        step1.引入依赖

dev_dependencies:
  integration_test:
    sdk: flutter
  flutter_test:
    sdk: flutter

        step2.项目根目录下创建integration_test 文件夹,编写一个app_test.dart的文件,内容如下

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

import 'package:integration_test/integration_test.dart';


void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('Main Test', (WidgetTester tester) async {
      //进入主程序
      await tester.pumpWidget(MyApp());
      //等待加载一会
      await Future.delayed(const Duration(seconds: 3));
      //找到对应的入力框
      Finder userFinder = find.byType(TextFormField).at(0);
      Finder passwordFinder = find.byType(TextFormField).at(1);
      expect(userFinder, findsOneWidget);
      expect(passwordFinder, findsOneWidget);
      //填写用户名密码
      await tester.enterText(userFinder, 'xxxx');
      await tester.enterText(passwordFinder, 'xxxx');
      await tester.pumpAndSettle();
      
      //等待3秒后执行点击登录按钮操作
      await Future.delayed(const Duration(seconds: 3)).then((value) async {
        Finder loginFinder = find.byType(LoginButton);
        expect(loginFinder, findsOneWidget);
        await tester.tap(loginFinder);
        //需要等待动画加载画面迁移(此处不能省略)
        await tester.pumpAndSettle();
        await Future.delayed(const Duration(seconds: 10));
      });


    });
  });
}

注意:await tester.pumpAndSettle();的调用,在用动画的画面,迁移画面时必须调用,否则看不到相应动画的测试与调用。

        step3.启动设备,运行测试 

flutter test integration_test --coverage

        step4.查看报告(参2.组件测试)


其他测试相关内容,有待探索。。。

《TODO》处理滚动

处理滚动 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter如何在 widget 测试中处理滚动。https://flutter.cn/docs/cookbook/testing/widget/scrolling

《TODO》模拟(Mocks)允许我们仿造一个线上服务或数据库使用 Mockito 模拟依赖关系 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter使用 Mockito package 在测试中模拟服务端行为。https://flutter.cn/docs/cookbook/testing/unit/mocking

《TODO》为 plugin 编写单元测试如何测试 Flutter Pluginhttps://flutter.cn/docs/development/packages-and-plugins/plugins-in-tests文章来源地址https://www.toymoban.com/news/detail-403497.html

到了这里,关于【Flutter】自动测试探索的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter--常用技术文档

    配置 清华大学flutter镜像 export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter 社区镜象 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 混合开发 问题 解决 iOS、Flutter混合开发 ➜ Na

    2024年01月16日
    浏览(67)
  • flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

    flutter开发实战-实现marquee文本跑马灯效果 最近开发过程中需要marquee文本跑马灯效果,这里使用到了flutter的插件marquee 效果图如下 1.1 引入marquee 在pubspec.yaml中引入marquee 1.2 marquee使用 marquee使用也是非常方便的。比如直接指定文本text 或者设置更多属性值 根据Text文本的大小判断

    2024年02月13日
    浏览(46)
  • 探索 Flutter 的 Provider:介绍与用法

    在 Flutter 应用开发中,状态管理始终是一个核心话题。随着 Flutter 的不断发展,各种状态管理方案应运而生。Provider,作为一个轻量级且高效的状态管理库,在社区中获得了广泛的认可和使用。本文将深入探讨 Provider 的最新特性和用法,帮助开发者更好地在 Flutter 应用中实现

    2024年01月16日
    浏览(38)
  • Flutter中状态管理选项的比较:利弊探索

    Flutter 应用程序开发的一个关键方面是管理状态,这确保了整个应用程序的数据一致性和更新。然而,Flutter 提供了多种状态管理解决方案,每种解决方案都有自己的优缺点。在这篇博客中,我们将探讨 Flutter 中一些流行的状态管理选项,并讨论它们的优缺点。 这些状态管理

    2024年01月25日
    浏览(48)
  • 探索 Flutter Effects: 打造生动有趣的 UI 动画

    项目地址:https://gitcode.com/HitenDev/flutter_effects Flutter 是 Google 推出的一款跨平台的移动应用开发框架,以其高效、易于学习和丰富的视觉效果赢得了开发者们的喜爱。今天,我们要向您推荐一个特别的 Flutter 项目:Flutter Effects。这是一个开源库,集合了一系列创意十足的 UI 动画

    2024年04月29日
    浏览(39)
  • 把Flutter扩展到微信小程序端的探索

    Flutter是声明式UI框架,声明式UI只需要向框架描述UI长什么样子而不用关心框架具体的实现细节,具体到Flutter,上层的UI描述使用底层的skia图形引擎处理就是原生Flutter,而把底层处理换成html/css/canvas就是flutter_web,flutter_mp则是探索在类小程序上对这些UI描述的处理。 我们看一

    2024年04月28日
    浏览(38)
  • Flutter的Platform介绍-跨平台开发,如何根据不同平台创建不同UI和行为

    Flutter 平台(Platform)是一个概念,用于描述 Flutter 框架在不同操作系统(如Android、iOS、Web、macOS、Windows等)上运行时的适应性和支持。Flutter 旨在实现跨平台开发,使开发人员能够使用单一代码库构建应用程序,然后在多个平台上运行,而无需编写平台特定的代码。以下是有

    2024年02月08日
    浏览(64)
  • Flutter 极简 Dio 组件二次封装文档

    本文档介绍了如何通过二次封装 Flutter Dio 组件来简化网络请求的过程。通过封装,我们可以提高代码复用性,简化调用方式,并添加一些常用的功能,使网络请求更加易于管理和维护。 首先,确保你的 Flutter 项目已经添加了 Dio 的依赖。在项目的 pubspec.yaml 文件中,添加以下

    2024年02月11日
    浏览(57)
  • 探索Flutter框架对iOS应用打包与部署的最佳实践

    本文探讨了使用Flutter开发的iOS应用能否上架,以及上架的具体流程。苹果提供了App Store作为正式上架渠道,同时也有TestFlight供开发者进行内测。合规并通过审核后,Flutter应用可以顺利上架。但上架过程可能存在一些挑战,因此可能需要专业技术人员或上架服务商的协助。

    2024年04月16日
    浏览(53)
  • 【Flutter】Flutter 实现 Text 自动换行 解决长文本溢出问题

    你是否渴望成为 Flutter 的专家,掌握更多的技巧和最佳实践?我们有个好消息要告诉你! Flutter 从零到一 基础入门到应用上线全攻略 正在等待你的加入!这个专栏包含了你需要的所有 Flutter 学习资源,包括代码示例和深度解析。专栏内容会持续更新,价格也会随之上涨。现

    2024年02月12日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包