From 382f895f85f031764f2f81154da1a4463dbd20f8 Mon Sep 17 00:00:00 2001 From: Dirk-Jan Rutten Date: Mon, 2 Apr 2018 11:57:21 +0200 Subject: [PATCH 1/3] Simplified the MockedProvider --- src/test-utils.tsx | 10 +- test/__snapshots__/test-utils.test.tsx.snap | 22 ++-- test/client/Query.test.tsx | 31 +++--- test/test-utils.test.tsx | 111 +++++++++++--------- 4 files changed, 90 insertions(+), 84 deletions(-) diff --git a/src/test-utils.tsx b/src/test-utils.tsx index cbdc244399..369b29c668 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..cee3c167d0 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() { @@ -88,16 +94,11 @@ it('mocks the data and adds the typename to the query', done => { ); }); -it('errors if the variables in the mock and component do not match', done => { +it('allows for querying with the typename', done => { class Container extends React.Component> { componentWillReceiveProps(nextProps: ChildProps) { - try { - expect(nextProps.data!.user).toBeUndefined(); - expect(nextProps.data!.error).toMatchSnapshot(); - done(); - } catch (e) { - done.fail(e); - } + expect(nextProps.data!.user).toMatchSnapshot(); + done(); } render() { @@ -105,34 +106,37 @@ it('errors if the variables in the mock and component do not match', done => { } } - const ContainerWithData = withUser(Container); + const withUserAndTypename = graphql(queryWithTypename, { + options: props => ({ + variables: props, + }), + }); + + const ContainerWithData = withUserAndTypename(Container); const mocks = [ { request: { - query, + query: queryWithTypename, variables, }, result: { data: { user } }, }, ]; - const variables2 = { - username: 'other_user', - }; - renderer.create( - + , ); }); -it('mocks a network error', done => { +it('errors if the variables in the mock and component do not match', done => { class Container extends React.Component> { componentWillReceiveProps(nextProps: ChildProps) { try { - expect(nextProps.data!.error).toEqual(new Error('Network error: something went wrong')); + expect(nextProps.data!.user).toBeUndefined(); + expect(nextProps.data!.error).toMatchSnapshot(); done(); } catch (e) { done.fail(e); @@ -152,22 +156,26 @@ it('mocks a network error', done => { query, variables, }, - error: new Error('something went wrong'), + result: { data: { user } }, }, ]; + const variables2 = { + username: 'other_user', + }; + renderer.create( - + , ); }); -it('mocks the data without adding the typename', done => { +it('mocks a network error', done => { class Container extends React.Component> { componentWillReceiveProps(nextProps: ChildProps) { try { - expect(nextProps.data!.user).toMatchSnapshot(); + expect(nextProps.data!.error).toEqual(new Error('Network error: something went wrong')); done(); } catch (e) { done.fail(e); @@ -184,37 +192,26 @@ it('mocks the data without adding the typename', done => { const mocks = [ { request: { - query: queryWithoutTypename, + query, variables, }, - result: { data: { user: userWithoutTypeName } }, + error: new Error('something went wrong'), }, ]; 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(), - }); - +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); @@ -228,8 +225,24 @@ it('allows for passing a custom client', done => { const ContainerWithData = withUser(Container); + const mocksError = [ + { + request: { + query: gql` + query OtherQuery { + otherQuery { + id + } + } + `, + variables, + }, + result: { data: { user } }, + }, + ]; + renderer.create( - + , ); From 35b08f986b54fc67005f2612f555fc74fa48b100 Mon Sep 17 00:00:00 2001 From: Dirk-Jan Rutten Date: Mon, 2 Apr 2018 12:34:37 +0200 Subject: [PATCH 2/3] Fixed linter errors --- test/test-utils.test.tsx | 32 ++++++-------------------------- 1 file changed, 6 insertions(+), 26 deletions(-) diff --git a/test/test-utils.test.tsx b/test/test-utils.test.tsx index cee3c167d0..d28f24c9da 100644 --- a/test/test-utils.test.tsx +++ b/test/test-utils.test.tsx @@ -77,16 +77,6 @@ it('mocks the data', done => { const ContainerWithData = withUser(Container); - const mocks = [ - { - request: { - query, - variables, - }, - result: { data: { user } }, - }, - ]; - renderer.create( @@ -114,7 +104,7 @@ it('allows for querying with the typename', done => { const ContainerWithData = withUserAndTypename(Container); - const mocks = [ + const mocksWithTypename = [ { request: { query: queryWithTypename, @@ -125,7 +115,7 @@ it('allows for querying with the typename', done => { ]; renderer.create( - + , ); @@ -150,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', }; @@ -189,7 +169,7 @@ it('mocks a network error', done => { const ContainerWithData = withUser(Container); - const mocks = [ + const mocksError = [ { request: { query, @@ -200,7 +180,7 @@ it('mocks a network error', done => { ]; renderer.create( - + , ); @@ -225,7 +205,7 @@ it('errors if the query in the mock and component do not match', done => { const ContainerWithData = withUser(Container); - const mocksError = [ + const mocksDifferentQuery = [ { request: { query: gql` @@ -242,7 +222,7 @@ it('errors if the query in the mock and component do not match', done => { ]; renderer.create( - + , ); From 0e2cc76d6092d683f8c915583cdeddc5634639be Mon Sep 17 00:00:00 2001 From: Dirk-Jan Rutten Date: Mon, 2 Apr 2018 12:35:32 +0200 Subject: [PATCH 3/3] Added changelog --- Changelog.md | 2 ++ 1 file changed, 2 insertions(+) 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