如何模拟用于测试颤振屏幕小部件的导航参数

Question

我想为颤振中的屏幕小部件编写一个模拟测试。问题是，这个小部件使用导航参数中的一个变量，我不确定如何模拟这个变量。

这是示例屏幕：

class TestScreen extends StatefulWidget {
  static final routeName = Strings.contact;
  @override
  _TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
  Contact _contact;
  @override
  Widget build(BuildContext context) {
    _contact = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(title: Text(Strings.contact)),
      body: Text(_contact.name),
    );
  }
}

使用此命令打开屏幕

Navigator.pushNamed(context, TestScreen.routeName, arguments: contact);

通常我会模拟一些组件，但我不确定如何模拟屏幕参数。我希望它像这样工作。但是，我不知道我能嘲笑什么。

when(screenArgument.fetchData(any))
    .thenAnswer((_) async => expectedContact);

这是当前的测试，当然不起作用，因为_contact为空：

void main() {
  testWidgets('contact fields should be filled with data from argument', (WidgetTester tester) async {
    // GIVEN
    final testScreen = TestApp(widget: TestScreen());
    // WHEN
    await tester.pumpWidget(testScreen);
    // THEN
    expect(find.text("test"), findsOneWidget);
  });
}

一种丑陋的方法是仅将屏幕的构造函数参数用于测试，但我想避免这种情况。

也许你们中的某个人知道如何最好地测试此类屏幕小部件。

Answer 1

我发现的方式与颤振家伙测试它的方法相同：https://github.com/flutter/flutter/blob/d03aecab58f5f8b57a8cae4cf2fecba931f60673/packages/flutter/test/widgets/navigator_test.dart#L715

基本上他们创建一个 MaterialApp ，放一个按钮，按下后将导航到测试页面。

我修改后的解决方案：

Future<void> pumpArgumentWidget(
  WidgetTester tester, {
  @required Object args,
  @required Widget child,
}) async {
  final key = GlobalKey<NavigatorState>();
  await tester.pumpWidget(
    MaterialApp(
      navigatorKey: key,
      home: FlatButton(
        onPressed: () => key.currentState.push(
          MaterialPageRoute<void>(
            settings: RouteSettings(arguments: args),
            builder: (_) => child,
          ),
        ),
        child: const SizedBox(),
      ),
    ),
  );
  await tester.tap(find.byType(FlatButton));
  await tester.pumpAndSettle(); // Might need to be removed when testing infinite animations
}

这种方法工作正常，在测试进度指标时存在一些问题，因为即使显示它们debugDumpApp也无法找到它们。

Answer 2

如果您使用的是依赖关系注入器(如我(，则可能需要避免将上下文参数传递给构造函数(如果在实例化视图类时未生成视图(。否则，只需按照某人的建议使用视图构造函数。

因此，如果您不能像我一样使用构造函数，则可以直接在测试中使用 Navigator 解决此问题。导航器是一个小部件，因此只需使用它即可返回屏幕。顺便说一句，如上所述，进度指示器没有问题。

import 'package:commons/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mockito/mockito.dart';
class MyCustomArgumentsMock extends Mock implements MyCustomArguments {}
void main() {
  testWidgets('indicator is shown when screen is opened', (tester) async {
    final MyCustomArguments mock = MyCustomArgumentsMock();
    await tester.pumpWidget(MaterialApp(
      home: Navigator(
        onGenerateRoute: (_) {
          return MaterialPageRoute<Widget>(
            builder: (_) => TestScreen(),
            settings: RouteSettings(arguments: mock),
          );
        },
      ),
    ));
    expect(find.byType(CircularProgressIndicator), findsOneWidget);
  });
}