diff --git a/Changelog.md b/Changelog.md index 73afa27bbf..f283a8a72a 100644 --- a/Changelog.md +++ b/Changelog.md @@ -2,6 +2,8 @@ ### vNext +* Simplified the MockedProvider API [#1882](https://github.com/apollographql/react-apollo/pull/1882) + ### 2.1.1 * Fix uneccesary rerender on cache hit diff --git a/src/test-utils.tsx b/src/test-utils.tsx index ce7c0c511b..61b262496b 100644 --- a/src/test-utils.tsx +++ b/src/test-utils.tsx @@ -11,22 +11,16 @@ export class MockedProvider extends React.Component { constructor(props: any, context: any) { super(props, context); - if (this.props.client) return; - const addTypename = !this.props.removeTypename; const link = mockSingleLink.apply(null, this.props.mocks); this.client = new ApolloClient({ link, - cache: new Cache({ addTypename }), + cache: new Cache({ addTypename: false }), defaultOptions: this.props.defaultOptions, }); } render() { - return ( - - {this.props.children} - - ); + return {this.props.children}; } } diff --git a/test/__snapshots__/test-utils.test.tsx.snap b/test/__snapshots__/test-utils.test.tsx.snap index 37aafca361..882624044c 100644 --- a/test/__snapshots__/test-utils.test.tsx.snap +++ b/test/__snapshots__/test-utils.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`allows for passing a custom client 1`] = ` +exports[`allows for querying with the typename 1`] = ` Object { "__typename": "User", "id": "user_id", @@ -8,27 +8,27 @@ Object { } `; -exports[`errors if the variables in the mock and component do not match 1`] = ` +exports[`errors if the query in the mock and component do not match 1`] = ` [Error: Network error: No more mocked responses for the query: query GetUser($username: String!) { user(username: $username) { id - __typename } } -, variables: {"username":"other_user"}] +, variables: {"username":"mock_username"}] `; -exports[`mocks the data and adds the typename to the query 1`] = ` -Object { - "__typename": "User", - "id": "user_id", - Symbol(id): "User:user_id", +exports[`errors if the variables in the mock and component do not match 1`] = ` +[Error: Network error: No more mocked responses for the query: query GetUser($username: String!) { + user(username: $username) { + id + } } +, variables: {"username":"other_user"}] `; -exports[`mocks the data without adding the typename 1`] = ` +exports[`mocks the data 1`] = ` Object { "id": "user_id", - Symbol(id): "$ROOT_QUERY.user({\\"username\\":\\"mock_username\\"})", + Symbol(id): "User:user_id", } `; diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx index 39f74be641..c4c76cfbcb 100644 --- a/test/client/Query.test.tsx +++ b/test/client/Query.test.tsx @@ -91,7 +91,7 @@ describe('Query component', () => { const Component = () => {_ =>
}; wrapper = mount( - + , ); @@ -142,7 +142,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -172,7 +172,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -271,7 +271,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -341,7 +341,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -403,7 +403,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -462,7 +462,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -524,7 +524,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -547,7 +547,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -571,7 +571,6 @@ describe('Query component', () => { , @@ -624,7 +623,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -677,7 +676,7 @@ describe('Query component', () => { ); wrapper = mount( - + , ); @@ -814,7 +813,7 @@ describe('Query component', () => { } wrapper = mount( - + , ); @@ -883,7 +882,7 @@ describe('Query component', () => { } wrapper = mount( - + , ); @@ -1018,7 +1017,7 @@ describe('Query component', () => { } wrapper = mount( - + , ); @@ -1069,7 +1068,7 @@ describe('Query component', () => { } wrapper = mount( - + , ); diff --git a/test/test-utils.test.tsx b/test/test-utils.test.tsx index 4fdd5b2ca1..d28f24c9da 100644 --- a/test/test-utils.test.tsx +++ b/test/test-utils.test.tsx @@ -25,14 +25,14 @@ const query: DocumentNode = gql` query GetUser($username: String!) { user(username: $username) { id - __typename } } `; -const queryWithoutTypename: DocumentNode = gql` +const queryWithTypename: DocumentNode = gql` query GetUser($username: String!) { user(username: $username) { id + __typename } } `; @@ -47,21 +47,27 @@ interface Variables { username: string; } -const withUser = graphql(queryWithoutTypename, { +const withUser = graphql(query, { options: props => ({ variables: props, }), }); -it('mocks the data and adds the typename to the query', done => { +const mocks = [ + { + request: { + query, + variables, + }, + result: { data: { user } }, + }, +]; + +it('mocks the data', done => { class Container extends React.Component> { componentWillReceiveProps(nextProps: ChildProps) { - try { - expect(nextProps.data!.user).toMatchSnapshot(); - done(); - } catch (e) { - done.fail(e); - } + expect(nextProps.data!.user).toMatchSnapshot(); + done(); } render() { @@ -71,10 +77,37 @@ it('mocks the data and adds the typename to the query', done => { const ContainerWithData = withUser(Container); - const mocks = [ + renderer.create( + + + , + ); +}); + +it('allows for querying with the typename', done => { + class Container extends React.Component> { + componentWillReceiveProps(nextProps: ChildProps) { + expect(nextProps.data!.user).toMatchSnapshot(); + done(); + } + + render() { + return null; + } + } + + const withUserAndTypename = graphql(queryWithTypename, { + options: props => ({ + variables: props, + }), + }); + + const ContainerWithData = withUserAndTypename(Container); + + const mocksWithTypename = [ { request: { - query, + query: queryWithTypename, variables, }, result: { data: { user } }, @@ -82,7 +115,7 @@ it('mocks the data and adds the typename to the query', done => { ]; renderer.create( - + , ); @@ -107,16 +140,6 @@ it('errors if the variables in the mock and component do not match', done => { const ContainerWithData = withUser(Container); - const mocks = [ - { - request: { - query, - variables, - }, - result: { data: { user } }, - }, - ]; - const variables2 = { username: 'other_user', }; @@ -146,7 +169,7 @@ it('mocks a network error', done => { const ContainerWithData = withUser(Container); - const mocks = [ + const mocksError = [ { request: { query, @@ -157,17 +180,18 @@ it('mocks a network error', done => { ]; renderer.create( - + , ); }); -it('mocks the data without adding the typename', done => { +it('errors if the query in the mock and component do not match', done => { class Container extends React.Component> { componentWillReceiveProps(nextProps: ChildProps) { try { - expect(nextProps.data!.user).toMatchSnapshot(); + expect(nextProps.data!.user).toBeUndefined(); + expect(nextProps.data!.error).toMatchSnapshot(); done(); } catch (e) { done.fail(e); @@ -181,55 +205,24 @@ it('mocks the data without adding the typename', done => { const ContainerWithData = withUser(Container); - const mocks = [ + const mocksDifferentQuery = [ { request: { - query: queryWithoutTypename, + query: gql` + query OtherQuery { + otherQuery { + id + } + } + `, variables, }, - result: { data: { user: userWithoutTypeName } }, + result: { data: { user } }, }, ]; renderer.create( - - - , - ); -}); - -it('allows for passing a custom client', done => { - const link = mockSingleLink({ - request: { - query, - variables, - }, - result: { data: { user } }, - }); - const client = new ApolloClient({ - link, - cache: new InMemoryCache(), - }); - - class Container extends React.Component> { - componentWillReceiveProps(nextProps: ChildProps) { - try { - expect(nextProps.data!.user).toMatchSnapshot(); - done(); - } catch (e) { - done.fail(e); - } - } - - render() { - return null; - } - } - - const ContainerWithData = withUser(Container); - - renderer.create( - + , );