Flutter 中的测试驱动开发

最新推荐文章于 2024-05-13 05:49:22 发布

程序员小何SS

最新推荐文章于 2024-05-13 05:49:22 发布

阅读量187

点赞数

分类专栏： Kotlin 文章标签： flutter 驱动开发 tdd

本文链接：https://blog.csdn.net/xiaokangss/article/details/126947352

版权

Kotlin 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

了解如何使您的 Flutter 应用程序可靠且错误最少，并通过提高代码效率来减少重复调试。

在本文中，我将描述在您的 Flutter 项目中实现测试驱动开发 (TDD) 的步骤，并介绍该主题的基本介绍。

什么是 TDD？

TDD 或测试驱动开发是在实现任何功能或代码之前为应用程序的每个单元编写质量保证测试用例的实践。

需要TDD

测试驱动开发是有益的，因为它具有以下优点：

生成最少的错误
识别早期阶段的错误
减少重复调试
通过重构使代码更可靠

测试类型

单元测试

进行单元测试是为了检查单个类、方法或函数的实现或功能。

小部件测试

进行小部件测试以检查用于构建屏幕的 UI 或小部件和组件。

集成测试

编写集成测试以检查应用程序的完整功能。它也称为端到端或 GUI 测试。

其他类型的测试

安全测试

安全测试旨在测试整个应用程序的身份验证、访问和代码注入。它使准备好部署的应用程序高度安全。

冒烟测试

编写冒烟测试是为了以精确的方式检查应用程序的完整或核心功能。

测试驱动开发过程

测试驱动开发的过程往往是迭代和循环的（即过程将处于循环中，直到所提到的条件或测试用例通过）。

TDD主要分为三个阶段：

红色阶段在这个阶段，开发者需要为需要创建的特性编写测试场景。最初，由于尚未创建功能或小部件，它将返回错误。
绿色阶段特性代码的实际开发或小部件的创建在此阶段完成。这一步是在有或没有最佳代码编写的情况下完成的；它仅确保创建了功能并且测试用例成功。
重构阶段为测试和实际功能代码编写的代码的重构或优化需要在此阶段完成。

为您的应用程序实施 TDD 的步骤

文件夹结构

删除默认 Flutter 项目创建的测试文件，即widget_test.dartFlutter 应用程序中的样板测试代码文件。
根据您的应用程序的要求创建一个子文件夹。如果您想实现测试驱动开发，请包括与创建子文件夹结构域层、数据层和表示层相关的所有逻辑和 UI 组件，否则会继续为每个案例创建单个文件。
应使用screen_name_test.dart如下图所示的命名模式创建测试文件：

完成应用程序所需的测试

根据您的要求（数据、域和演示或单元测试/小部件测试/集成/安全测试）确定您可能需要添加到项目中的测试类型

编写测试用例

这里我以atsign基金会的at_theme_flutter pub.dev包为例，详细演示实现步骤：

根据这里的包要求，我们决定只进行小部件测试，因为不需要任何单元或安全测试。因此，作为第一步，我们根据命名约定创建了一个文件夹。

测试用例

最初，我们采用了一个色卡小部件。在这里，我们需要编写一个测试用例来检查预期的颜色是否已传递给小部件。在控制台中输入以下代码：

void main() {
  Widget _wrapWidgetWithMaterialApp({required Widget colorCard}) {
    return TestMaterialApp(home: Builder(builder: (BuildContext context) {
      SizeConfig().init(context);
      return colorCard;
    }));
  }

import 'package:at_common_flutter/at_common_flutter.dart';
import 'package:at_theme_flutter/src/widgets/color_card.dart';

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

import '../test_material_app.dart';

void main() {
  Widget _wrapWidgetWithMaterialApp({required Widget colorCard}) {
    return TestMaterialApp(home: Builder(builder: (BuildContext context) {
      SizeConfig().init(context);
      return colorCard;
    }));
  }

  /// Functional test cases for Color Card Widget
  group('Color Card Widget Tests:', () {
    // Test Case to Check Color Card is displayed
    final colorCard = ColorCard(color: Colors.orange, isSelected: true);
    testWidgets("Color Card is displayed", (WidgetTester tester) async {
      await tester.pumpWidget(
          _wrapWidgetWithMaterialApp(colorCard: colorCard));
      expect(find.byType(ColorCard), findsOneWidget);
    });
  });
}

以下是一些重要的元素：