diff --git a/src/test-links.ts b/src/test-links.ts index ed00a63008..7223b06a87 100644 --- a/src/test-links.ts +++ b/src/test-links.ts @@ -135,7 +135,8 @@ function requestToKey(request: GraphQLRequest): string { variables: request.variables || {}, query: queryString, }; - return JSON.stringify(requestKey, Object.keys(requestKey).sort()); + + return JSON.stringify(requestKey); } // Pass in multiple mocked responses, so that you can test flows that end up diff --git a/test/__snapshots__/test-utils.test.tsx.snap b/test/__snapshots__/test-utils.test.tsx.snap index 51d9305a35..37aafca361 100644 --- a/test/__snapshots__/test-utils.test.tsx.snap +++ b/test/__snapshots__/test-utils.test.tsx.snap @@ -8,6 +8,16 @@ Object { } `; +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 + __typename + } +} +, variables: {"username":"other_user"}] +`; + exports[`mocks the data and adds the typename to the query 1`] = ` Object { "__typename": "User", diff --git a/test/client/graphql/mutations/index.test.tsx b/test/client/graphql/mutations/index.test.tsx index 2430da3026..1c8eeb4985 100644 --- a/test/client/graphql/mutations/index.test.tsx +++ b/test/client/graphql/mutations/index.test.tsx @@ -126,8 +126,17 @@ describe('graphql(mutation)', () => { }); it('can execute a mutation with variables from props', done => { - client = createClient(expectedData, query, { id: 1 }); - @graphql(query) + const queryWithVariables = gql` + mutation addPerson($first: Int) { + allPeople(first: $first) { + people { + name + } + } + } + `; + client = createClient(expectedData, queryWithVariables, { first: 1 }); + @graphql(queryWithVariables) class Container extends React.Component { componentDidMount() { this.props.mutate().then(result => { @@ -142,7 +151,7 @@ describe('graphql(mutation)', () => { renderer.create( - + , ); }); diff --git a/test/client/graphql/mutations/lifecycle.test.tsx b/test/client/graphql/mutations/lifecycle.test.tsx index c7da53f7fa..75cebfeb10 100644 --- a/test/client/graphql/mutations/lifecycle.test.tsx +++ b/test/client/graphql/mutations/lifecycle.test.tsx @@ -4,6 +4,7 @@ import gql from 'graphql-tag'; import { ApolloProvider, graphql } from '../../../../src'; import stripSymbols from '../../../test-utils/stripSymbols'; import createClient from '../../../test-utils/createClient'; +import { MockedProvider } from '../../../../src/test-utils'; const query = gql` mutation addPerson($id: Int) { @@ -58,10 +59,15 @@ describe('graphql(mutation) lifecycle', () => { }); it('rebuilds the mutation on prop change when using `options`', done => { - const client = createClient(expectedData, query); + const client = createClient(expectedData, query, { + id: null, + }); function options(props) { - // expect(props.listId).toBe(2); - return {}; + return { + variables: { + id: null, + }, + }; } @graphql(query, { options }) diff --git a/test/client/graphql/mutations/queries.test.tsx b/test/client/graphql/mutations/queries.test.tsx index 3580e214e1..0a45f614fb 100644 --- a/test/client/graphql/mutations/queries.test.tsx +++ b/test/client/graphql/mutations/queries.test.tsx @@ -126,7 +126,7 @@ describe('graphql(mutation) query integration', () => { const link = mockSingleLink( { - request: { query, variables: { id: '123' } }, + request: { query }, result: { data: expectedData }, }, { request: { query: mutation }, result: { data: mutationData } }, @@ -173,7 +173,7 @@ describe('graphql(mutation) query integration', () => { renderer.create( - + , ); }); diff --git a/test/client/graphql/mutations/recycled-queries.test.tsx b/test/client/graphql/mutations/recycled-queries.test.tsx index b594fbca46..7ee91ecb0c 100644 --- a/test/client/graphql/mutations/recycled-queries.test.tsx +++ b/test/client/graphql/mutations/recycled-queries.test.tsx @@ -75,7 +75,7 @@ describe('graphql(mutation) update queries', () => { const link = mockSingleLink( { - request: { query, variables: { id: '123' } }, + request: { query }, result: { data: expectedData }, }, { request: { query: mutation }, result: { data: mutationData } }, @@ -198,7 +198,7 @@ describe('graphql(mutation) update queries', () => { const wrapperQuery1 = renderer.create( - + , ); diff --git a/test/client/graphql/queries/index.test.tsx b/test/client/graphql/queries/index.test.tsx index d211932328..0909141d6e 100644 --- a/test/client/graphql/queries/index.test.tsx +++ b/test/client/graphql/queries/index.test.tsx @@ -8,6 +8,7 @@ import { mockSingleLink } from '../../../../src/test-utils'; import { ApolloProvider, graphql, DataProps } from '../../../../src'; import stripSymbols from '../../../test-utils/stripSymbols'; +import catchAsyncError from '../../../test-utils/catchAsyncError'; describe('queries', () => { let error; @@ -271,7 +272,7 @@ describe('queries', () => { } `; const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; - const variables = { first: 1, jedi: true }; + const variables = { jedi: true, first: 1 }; const mocks = [ { request: { @@ -300,9 +301,11 @@ describe('queries', () => { @graphql(query, options) class Container extends React.Component { componentWillReceiveProps(props) { - expect(props.data.loading).toBeFalsy(); - expect(stripSymbols(props.data.allPeople)).toEqual(data.allPeople); - done(); + catchAsyncError(done, () => { + expect(props.data.loading).toBeFalsy(); + expect(stripSymbols(props.data.allPeople)).toEqual(data.allPeople); + done(); + }); } render() { return null; diff --git a/test/client/graphql/queries/observableQuery.test.tsx b/test/client/graphql/queries/observableQuery.test.tsx index 6d4542a7af..f5412c0b2e 100644 --- a/test/client/graphql/queries/observableQuery.test.tsx +++ b/test/client/graphql/queries/observableQuery.test.tsx @@ -406,8 +406,8 @@ describe('[queries] observableQuery', () => { } } `; - const variables1 = { id: 1 }; - const variables2 = { id: 2 }; + const variables1 = { first: 1 }; + const variables2 = { first: 2 }; const data = { allPeople: { people: [{ name: 'Luke Skywalker', friends: [{ name: 'r2d2' }] }], @@ -451,7 +451,7 @@ describe('[queries] observableQuery', () => { render() { if (!this.state.showChildren) return null; const Thing = this.props.render; - return ; + return ; } } @@ -463,8 +463,9 @@ describe('[queries] observableQuery', () => { // first variable render if (variables.first === 1) { if (loading) expect(allPeople).toBeUndefined(); - if (!loading) + if (!loading) { expect(stripSymbols(allPeople)).toEqual(data.allPeople); + } } if (variables.first === 2) { diff --git a/test/client/graphql/queries/skip.test.tsx b/test/client/graphql/queries/skip.test.tsx index 126c6409c1..57838e7323 100644 --- a/test/client/graphql/queries/skip.test.tsx +++ b/test/client/graphql/queries/skip.test.tsx @@ -8,6 +8,7 @@ import { mockSingleLink } from '../../../../src/test-utils'; import { ApolloProvider, graphql } from '../../../../src'; import stripSymbols from '../../../test-utils/stripSymbols'; +import catchAsyncError from '../../../test-utils/catchAsyncError'; describe('[queries] skip', () => { it('allows you to skip a query without running it', done => { @@ -619,22 +620,19 @@ describe('[queries] skip', () => { @graphql(query, { skip: () => count === 1, - options: props => ({ variables: props }), }) class Container extends React.Component { componentWillReceiveProps({ data }) { - try { + catchAsyncError(done, () => { // loading is true, but data still there if (count === 0) expect(stripSymbols(data.allPeople)).toEqual(data1.allPeople); if (count === 1) expect(data).toBeUndefined(); if (count === 2 && !data.loading) { - expect(stripSymbols(data.allPeople)).toEqual(data2.allPeople); + expect(stripSymbols(data.allPeople)).toEqual(data3.allPeople); done(); } - } catch (e) { - console.log({ e }); // tslint:disable-line - } + }); } render() { return null; diff --git a/test/test-utils.test.tsx b/test/test-utils.test.tsx index 4152a3ee7b..d94c2aad64 100644 --- a/test/test-utils.test.tsx +++ b/test/test-utils.test.tsx @@ -37,7 +37,9 @@ const queryWithoutTypename = gql` `; const withUser = graphql(queryWithoutTypename, { - options: () => ({ variables }), + options: props => ({ + variables: props, + }), }); it('mocks the data and adds the typename to the query', done => { @@ -75,6 +77,46 @@ 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 => { + class Container extends React.Component { + componentWillReceiveProps(nextProps) { + try { + expect(nextProps.data.user).toBeUndefined(); + expect(nextProps.data.error).toMatchSnapshot(); + done(); + } catch (e) { + done.fail(e); + } + } + + render() { + return null; + } + } + + const ContainerWithData = withUser(Container); + + const mocks = [ + { + request: { + query, + variables, + }, + result: { data: { user } }, + }, + ]; + + const variables2 = { + username: 'other_user', + }; + + renderer.create( + + + , + ); +}); + it('mocks a network error', done => { class Container extends React.Component { componentWillReceiveProps(nextProps) {