testing - 如何在 flutter 中为 CachedNetworkImage 编写小部件测试

Question

我可以使用 HttpOverrides 小部件测试 Image.network 并尝试使用以下代码来测试 CachedNetworkImage 但没有成功 有人已经测试过这个包了吗？我也尝试使用 sqflite 使用 setMockMethodCallHandler 到 MethodChannel('com.tekartik.sqflite') 但只调用 getDatabasesPath 方法测试这个包的正确方法是什么？

import 'dart:async';
import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mockito/mockito.dart';

import '../unit_test/sqlcool.dart';

const List<int> kTransparentImage = <int>[
  0x89,
  0x50,
  0x4E,
  0x47,
  0x0D,
  0x0A,
  0x1A,
  0x0A,
  0x00,
  0x00,
  0x00,
  0x0D,
  0x49,
  0x48,
  0x44,
  0x52,
  0x00,
  0x00,
  0x00,
  0x01,
  0x00,
  0x00,
  0x00,
  0x01,
  0x08,
  0x06,
  0x00,
  0x00,
  0x00,
  0x1F,
  0x15,
  0xC4,
  0x89,
  0x00,
  0x00,
  0x00,
  0x0A,
  0x49,
  0x44,
  0x41,
  0x54,
  0x78,
  0x9C,
  0x63,
  0x00,
  0x01,
  0x00,
  0x00,
  0x05,
  0x00,
  0x01,
  0x0D,
  0x0A,
  0x2D,
  0xB4,
  0x00,
  0x00,
  0x00,
  0x00,
  0x49,
  0x45,
  0x4E,
  0x44,
  0xAE,
];
void main() async {
  TestWidgetsFlutterBinding.ensureInitialized();
  await setup();
  final MockHttpClient client = MockHttpClient();
  final MockHttpClientRequest request = MockHttpClientRequest();
  final MockHttpClientResponse response = MockHttpClientResponse();
  final MockHttpHeaders headers = MockHttpHeaders();

  testWidgets('Headers', (WidgetTester tester) async {
    HttpOverrides.runZoned<Future<void>>(() async {
      // await tester.pumpWidget(Image.network(
      //   'https://www.example.com/images/frame.png',
      //   headers: const <String, String>{'flutter': 'flutter'},
      // ));

      await tester.pumpWidget(CachedNetworkImage(
          imageUrl: 'https://www.example.com/images/frame.png',
          errorWidget: (context, err, o) {
            print(
                "===========>>>>> CachedNetworkImage error= $err <<<<=================");
          }));
    }, createHttpClient: (SecurityContext _) {
      when(client.getUrl(any)).thenAnswer((invocation) {
        print(
            "================>>>>>> getUrl = ${invocation.positionalArguments}  <<<<<===============");
        return Future<HttpClientRequest>.value(request);
      });
      when(request.headers).thenReturn(headers);
      when(request.close()).thenAnswer((invocation) {
        print(
            "================>>>>>> request.close = ${invocation.toString()}  <<<<<===============");
        return Future<HttpClientResponse>.value(response);
      });
      when(response.contentLength).thenReturn(kTransparentImage.length);
      when(response.statusCode).thenReturn(HttpStatus.ok);
      when(response.listen(any)).thenAnswer((Invocation invocation) {
        final void Function(List<int>) onData =
            invocation.positionalArguments[0] as void Function(List<int>);
        print(
            "================>>>>>> onData = ${onData}  <<<<<===============");
        final void Function() onDone =
            invocation.namedArguments[#onDone] as void Function();
        print(
            "================>>>>>> onDone = ${onDone}  <<<<<===============");
        final void Function(Object, [StackTrace]) onError = invocation
            .namedArguments[#onError] as void Function(Object, [StackTrace]);
        final bool cancelOnError =
            invocation.namedArguments[#cancelOnError] as bool;
        return Stream<List<int>>.fromIterable(<List<int>>[kTransparentImage])
            .listen(onData,
                onDone: onDone, onError: onError, cancelOnError: cancelOnError);
      });
      return client;
    });
  }, skip: isBrowser);
}

class MockHttpClient extends Mock implements HttpClient {}

class MockHttpClientRequest extends Mock implements HttpClientRequest {}

class MockHttpClientResponse extends Mock implements HttpClientResponse {}

class MockHttpHeaders extends Mock implements HttpHeaders {}

Directory directory;
const MethodChannel channel = MethodChannel('com.tekartik.sqflite');
final List<MethodCall> log = <MethodCall>[];
bool setupDone = false;

Future<void> setup() async {
  // WidgetsFlutterBinding.ensureInitialized();
  if (setupDone) {
    return;
  }
  directory = await Directory.systemTemp.createTemp();
  String response;
  channel.setMockMethodCallHandler((MethodCall methodCall) async {
    print("METHOD CALL: $methodCall");
    log.add(methodCall);
    switch (methodCall.method) {
      case "getDatabasesPath":
        return directory.path;
        break;
      case "query":
        return 1;
        break;
     }
    return response;
}

Answer 1

CachedNetworkImage 小部件接受可选的 cacheManager 属性(默认为 DefaultCacheManager 实例)。

想法是使用get_it在您的应用中注入(inject)一个 DefaultCacheManager 实例，并在测试中注入(inject)一个自定义实例。这个自定义缓存管理器可以返回一个测试 Assets 文件。

自定义缓存管理器

import 'dart:io';

import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_cache_manager/src/cache_store.dart';
import 'package:flutter_cache_manager/src/storage/non_storing_object_provider.dart';

class TestCacheManager extends BaseCacheManager {
  TestCacheManager()
      : super(
          null,
          cacheStore: CacheStore(
            Future.value(null),
            null,
            null,
            null,
            cacheRepoProvider: Future.value(NonStoringObjectProvider()),
          ),
        );

  @override
  Future<String> getFilePath() async {
    return null;
  }

  @override
  Stream<FileResponse> getFileStream(String url,
      {Map<String, String> headers, bool withProgress}) async* {
    if (url == 'https://myownservice.com/example') {
      yield FileInfo(
        File('test/assets/mock_image.jpg'),
        FileSource.Cache,
        DateTime(2050),
        url,
      );
    }
  }
}

您要测试的小部件:

class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: 'https://myownservice.com/example',
      cacheManager: GetIt.instance.get<BaseCacheManager>(),
    );
  }
}

应用 main():

GetIt.instance.registerSingleton<BaseCacheManager>(
  DefaultCacheManager(),
);

测试main():

GetIt.instance.registerSingleton<BaseCacheManager>(
  TestCacheManager(),
);

然后您应该能够提取 MyImage 小部件的实例:

await tester.pumpWidget(MyImage());

// Important: you need to pump an other frame so the CachedNetworkImage
// can replace the placeholder by the image received from the
// cache manager stream.
await tester.pump();

查看此 blog post完整的解释、代码示例和示例应用程序。