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

像 flutter 一样创建 http.Client 的 mock docs
在您的测试中，将您的 FirstScreen 包裹在 GraphqlProvider 中，如下所示：

class MockHttpClient extends Mock implements Client {}

group('Test mutation', () {
  MockHttpClient mockHttpClient;
  HttpLink httpLink;
  ValueNotifier<GraphQLClient> client;

  setUp(() async {
    mockHttpClient = MockHttpClient();
    httpLink = HttpLink(
      uri: 'https://unused/graphql',
      httpClient: mockHttpClient,
    );
    client = ValueNotifier(
      GraphQLClient(
        cache: InMemoryCache(storagePrefix: 'test'),
        link: httpLink,
      ),
    );
  });

  testWidgets('redirects to SecondScreen', (WidgetTester tester) async {
    when(client.send(captureAny)).thenAnswer(/* ... */);
    await tester.pumpWidget(GraphQLProvider(
      client: client,
      child: FirstScreen(),
    ));
    // Click on button
    verify(mockHttpClient.send(any)).called(1);
    // etc.
  });
})

Answer 2

我终于成功模拟了 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);
  });
})

Flutter Test Mock GraphQL Mutation 结果

Flutter Test Mock GraphQL Mutation result

dart

graphql

flutter

flutter-test

flutter-graphql