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

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);
  });
}