flutter - Flutter Test Mock GraphQL Mutation 结果

Question

我正在尝试使用 GraphQL 为颤振应用程序创建小部件测试。我想要做的是测试应用程序的行为，这取决于用户操作上的 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;
         },
       );
      },
    ),
  );
}

我想做的是模拟突变的结果，因此在我的小部件测试中，我可以测试按钮是否重定向到SecondScreenorThirdScreen取决于 result myBool。

我怎样才能做到这一点？

score 4 · Accepted Answer

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

score 4 · Accepted Answer

像在颤振文档中一样创建一个 http.Client 的模拟
在您的测试中，将您包装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.
  });
})

flutter - Flutter Test Mock GraphQL Mutation 结果

2 回答 2

Related

Reference