Page MenuHomePhabricator

ApolloTestProvider
ClosedPublic

Authored by dish on Mon, Oct 26, 11:56 PM.

Details

Summary

Introduce ApolloTestProvider, a provider component that generates a mocked (and overridable) Apollo Client object.

Ideally, we'll be able to use this to quickly create tests with mocked GraphQL data. IIRC there will be some things to iron out as we expand usage.

Also introduce @testing-library/react and other useful things.

Test Plan

yarn jest

Diff Detail

Repository
R1 dagster
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

Once this is in place and I can update App.test accordingly, I have a branch that upgrades our Apollo usage.

Also worth noting: this new provider should be usable on Storybook once I wire it up.

js_modules/dagit/src/testing/defaultMocks.ts
8

This is where we can populate types and fields with static mocks to be used across tests, rather than Apollo's fallbacks (hello world for String`, etc.). Overrides can then be used on top of these.

Harbormaster returned this revision to the author for changes because remote builds failed.Tue, Oct 27, 12:02 AM
Harbormaster failed remote builds in B20191: Diff 24505!
js_modules/dagit/package.json
115–117

This should be temporary. I'll upgrade to @apollo/client 3 in a followup, which should allow removing this and other Apollo dependencies.

dish requested review of this revision.Tue, Oct 27, 3:09 PM

This looks good to me - I guess it replaces the MockedProvider we already have in place in App.test.tsx?

I think that our current implementation of the graphql mocking is a bit unusual but it was designed to replace defaultMocks with query results loaded from a folder of JSON files. (At the time, Apollo seemed to suggest maintaining "defaultMocks" by hand, and for our queries that'd be crazy.) The current setup allows you to run the actual GraphQL server and pull down real data to generate the folder of mocks, and then run the tests against those files. It's definitely not ideal because changes to the demo pipelines change the GraphQL mocks which change the snapshots, but it seemed like maintaining the mocks by hand was untenable.

This revision is now accepted and ready to land.Tue, Oct 27, 9:04 PM

This looks good to me - I guess it replaces the MockedProvider we already have in place in App.test.tsx?

I think that our current implementation of the graphql mocking is a bit unusual but it was designed to replace defaultMocks with query results loaded from a folder of JSON files. (At the time, Apollo seemed to suggest maintaining "defaultMocks" by hand, and for our queries that'd be crazy.) The current setup allows you to run the actual GraphQL server and pull down real data to generate the folder of mocks, and then run the tests against those files. It's definitely not ideal because changes to the demo pipelines change the GraphQL mocks which change the snapshots, but it seemed like maintaining the mocks by hand was untenable.

Yeah, this is intended to make it so that we don't have to have entire mocks generated, and so that we no longer need a custom MockedProvider wrapper -- like the current one -- that has to do so much work.

Instead, all queries are populated entirely with mocked data, which can then be given default values (defaultMocks) or overridden as necessary, with no dependency on real data at all. Also, no requirement that all request/response pairs are exact and in order, as the default MockedProvider requires. For a given component tree, if there are queries that we don't care about at all, we don't need to think about them or include them implicitly in our test.

Basically just trying to replicate what we'd done at Stripe, described here: https://www.freecodecamp.org/news/a-new-approach-to-mocking-graphql-data-1ef49de3d491/. :) There will be some things that need to get ironed out as they arise, especially around nondeterministic random values, but this should give us a lot more flexibility to write lightweight tests on GraphQLful component trees.

This revision was automatically updated to reflect the committed changes.