Flutter网络模拟与Mock数据插件http_miracle_mock的使用

Flutter网络模拟与Mock数据插件http_miracle_mock的使用

标题

Flutter网络模拟与Mock数据插件http_miracle_mock的使用

内容

• 简体中文 | English

  • 简体中文 | English

• 

• 

http_miracle_mock

• 设计用于Flutter单元测试，此库允许轻松模拟/拦截业务逻辑中的网络请求和图片。

现有框架

• mockito: 不够简洁，需要大量代码。
• http_mock_adapter: 只支持Dio库。
• network_image_mock: 只支持图片。

目标解决的问题

1. 使用简单。
2. 兼容主流网络框架，如dio和http。
3. 处理网络相关问题，如常见网络请求和图片资源。

Getting Started

添加依赖

dev_dependencies:
  http_miracle_mock: any

简单使用

• 模拟GET请求

void main() async {
  TestWidgetsFlutterBinding.ensureInitialized();
  final HttpMiracleMock httpMiracleMock = HttpMiracleMock();
  final httpClient = HttpClient();
  test('test getUrl', () async {
    var url = 'https://example.com/create';
    var data = "resultGetUrl";
    var uri = Uri.parse(url);
    httpMiracleMock.open(url).reply(data);
    final request = await httpClient.getUrl(uri);
    final response = await request.close();
    var responseData = await response.transform(utf8.decoder).join();
    expect(responseData, data);
  });
}

• 模拟图片

testWidgets('test image using url png', (WidgetTester tester) async {
  var data = File(path.join(Utils.currentPath, 'test', 'assets', 'test.png'));
  var url = 'http://example.com/image.png';
  httpMiracleMock.open(url).reply(data.readAsBytesSync());
  await Utils.pumpWidgetWithImages(
    tester,
    Column(
      children: [
        Container(
            child: Image.network(
          url,
          width: 100,
          height: 100,
        )),
      ],
    ),
  );
  await tester.pumpAndSettle();
  await expectLater(
    find.byType(Column),
    matchesGoldenFile('snapshots/net_work_image_1.png'),
  );
});

• 初始化HttpMiracleMock，然后使用httpMiracleMock.open提供需要拦截网络请求的信息，如请求URL和参数，并 使用reply进入请求结果。

API

• 库仅提供HttpMiracleMock对象，提供open接口。

open

• open方法主要用于定义要拦截的请求信息，参数如下：

  • url: 必需，要拦截的请求URL，可以传递为String、RegExp或Uri。
  • method: 可选，要拦截的请求方法（GET/POST）。
  • data: 可选，请求参数。
  • dataTransform: 可选，用于请求参数转换，如果某些请求由于兼容性问题无法解析参数，此回调可以用于自定义转换。

• 返回ResponseData。

reply

• body: 必需，返回的数据内容。
• statusCode: 可选，返回的状态码。
• headers: 返回的头部信息。

示例代码

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:http_miracle_mock/http_miracle_mock.dart';
import 'package:path/path.dart' as path;

void main() async {
  TestWidgetsFlutterBinding.ensureInitialized();
  final HttpMiracleMock httpMiracleMock = HttpMiracleMock();
  final httpClient = HttpClient();

  test('test getUrl', () async {
    var url = 'https://example.com/create';
    var data = "resultGetUrl";
    var uri = Uri.parse(url);
    httpMiracleMock.open(url).reply(data);
    final request = await httpClient.getUrl(uri);
    final response = await request.close();
    var responseData = await response.transform(utf8.decoder).join();
    expect(responseData, data);
  });

  testWidgets('test image using url png', (WidgetTester tester) async {
    var data = File(path.join(currentPath, 'test', 'assets', 'test.png'));
    var url = 'http://example.com/image.png';
    httpMiracleMock.open(url).reply(data.readAsBytesSync());
    await pumpWidgetWithImages(
      tester,
      Column(
        children: [
          Container(
              child: Image.network(
            url,
            width: 100,
            height: 100,
          )),
        ],
      ),
    );
    await tester.pumpAndSettle();
    await expectLater(
      find.byType(Column),
      matchesGoldenFile('snapshots/net_work_image_1.png'),
    );
  });
}

String currentPath = path.join(Platform.environment['PWD']!);

Future<void> pumpWidgetWithImages(
  WidgetTester tester,
  Widget widget,
  List<ImageProvider> providers,
) async {
  Future<void>? precacheFuture;
  await tester.pumpWidget(
    Builder(builder: (buildContext) {
      precacheFuture = tester.runAsync(() async {
        await Future.wait([
          for (final provider in providers)
            precacheImage(
              provider,
              buildContext,
            ),
        ]);
      });
      return widget;
    }),
  );
  await precacheFuture;
}