Flutter Test Mock GraphQL Mutation 结果

Question

我正在尝试使用 GraphQL 为 flutter 应用程序创建小部件测试。我想做的是测试应用程序的行为，这取决于用户操作的 GraphQL 突变结果。

这是一个非常简单的应用示例:

class FirstScreen extends StatelessWidget {
  @override
  Widget return Container(
    child: Mutation(
      options: myMutationOptions,
      onCompleted: (dynamic result) {
        final bool myBool = result['bool'] as bool;
        if (myBool) {
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondScreen()));
        } else {
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => ThirdScreen()));
        }
      },
      builder: (RunMutation runMutation, QueryResult queryResult) {
       return FlatButton(
         child: Text('Button'),
         onPressed: () async {
           await runMutation(myParameters).networkResult;
         },
       );
      },
    ),
  );
}

我想做的是模拟突变的结果，所以在我的小部件测试中，我可以测试按钮是否重定向到 SecondScreen 或 ThirdScreen，具体取决于结果 myBool。

我该怎么做？

Answer 1

我终于成功地模拟了 GraphQL Mutation。这是我的做法，它的灵感来自于@Gpack 的评论，但我不得不添加一些修改和细节。

为了便于使用，我创建了一个包装器小部件GraphQLMutationMocker:

class MockClient extends Mock implements Client {
  MockClient({
    this.mockedResult,
    this.mockedStatus = 200,
  });
  final Map<String, dynamic> mockedResult;
  final int mockedStatus;

  @override
  Future<StreamedResponse> send(BaseRequest request) {
    return Future<StreamedResponse>.value(
      StreamedResponse(
        Stream.value(utf8.encode(jsonEncode(mockedResult))),
        mockedStatus,
      ),
    );
  }
}

class GraphQLMutationMocker extends StatelessWidget {
  const GraphQLMutationMocker({
    @required this.child,
    this.mockedResult = const {},
    this.mockedStatus = 200,
    this.url = 'http://url',
    this.storagePrefix = 'test',
  });
  final Widget child;

  final Map<String, dynamic> mockedResult;

  final int mockedStatus;

  final String url;

  final String storagePrefix;

  @override
  Widget build(BuildContext context) {
    final mockClient = MockClient(
      mockedResult: mockedResult,
      mockedStatus: mockedStatus,
    );
    final httpLink = HttpLink(
      uri: url,
      httpClient: mockClient,
    );
    final graphQLClient = ValueNotifier(
      GraphQLClient(
        cache: InMemoryCache(storagePrefix: storagePrefix),
        link: httpLink,
      ),
    );
    return GraphQLProvider(
      client: graphQLClient,
      child: child,
    );
  }
}

然后编写测试就很容易了

group('Test mutation', () {
  
  testWidgets('It should redirect to SecondScreen', (WidgetTester tester) async {

    await tester.pumpWidget(GraphQLMutationMocker(
      mockedResult: <String, dynamic>{
        'data': {
          'bool': true,
        },
      },
      child: FirstScreen(),
    ));
    // Click on button
    await tester.tap(find.text('Button'));
    await tester.pumpAndSettle();

    // Check I'm on the right screen
    expect(find.byType(SecondScreen), findsOneWidget);
    expect(find.byType(ThirdScreen), findsNothing);
  });

  testWidgets('It should redirect to ThirdScreen', (WidgetTester tester) async {

    await tester.pumpWidget(GraphQLMutationMocker(
      mockedResult: <String, dynamic>{
        'data': {
          'bool': false,
        },
      },
      child: FirstScreen(),
    ));
    // Click on button
    await tester.tap(find.text('Button'));
    await tester.pumpAndSettle();
    
    // Check I'm on the right screen
    expect(find.byType(SecondScreen), findsNothing);
    expect(find.byType(ThirdScreen), findsOneWidget);
  });
})