The mocks now take into account the specific variables used. Fixes ap…

…ollographql#1412
excitement-engineer · Dec 31, 2017 · 4561e55 · 4561e55
1 parent 177ccad
commit 4561e55
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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<any, any> {
       componentDidMount() {
         this.props.mutate().then(result => {
@@ -142,7 +151,7 @@ describe('graphql(mutation)', () => {
 
     renderer.create(
       <ApolloProvider client={client}>
-        <Container id={1} />
+        <Container first={1} />
       </ApolloProvider>,
     );
   });

diff --git 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
@@ -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(
       <ApolloProvider client={client}>
-        <Container id={'123'} />
+        <Container />
       </ApolloProvider>,
     );
   });

diff --git 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(
         <ApolloProvider client={client}>
-          <MyQuery id="123" />
+          <MyQuery />
         </ApolloProvider>,
       );
 

diff --git 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<any, any> {
       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
@@ -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 <Thing first={this.state.variables.id} />;
+        return <Thing first={this.state.variables.first} />;
       }
     }
 
@@ -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
@@ -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<any, any> {
       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
@@ -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(
+    <MockedProvider mocks={mocks}>
+      <ContainerWithData {...variables2} />
+    </MockedProvider>,
+  );
+});
+
 it('mocks a network error', done => {
   class Container extends React.Component {
     componentWillReceiveProps(nextProps) {