diff --git a/packages/components/src/__tests__/client/Mutation.test.tsx b/packages/components/src/__tests__/client/Mutation.test.tsx index 4fc423de2d..f2a0fed8e3 100644 --- a/packages/components/src/__tests__/client/Mutation.test.tsx +++ b/packages/components/src/__tests__/client/Mutation.test.tsx @@ -1,18 +1,18 @@ -import React, { useState } from 'react'; -import gql from 'graphql-tag'; -import { ApolloClient, ApolloError } from 'apollo-client'; -import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; -import { DataProxy } from 'apollo-cache'; -import { ExecutionResult, GraphQLError } from 'graphql'; -import { ApolloProvider } from '@apollo/react-common'; +import React, { useState } from "react"; +import gql from "graphql-tag"; +import { ApolloClient, ApolloError } from "apollo-client"; +import { InMemoryCache as Cache } from "apollo-cache-inmemory"; +import { DataProxy } from "apollo-cache"; +import { ExecutionResult, GraphQLError } from "graphql"; +import { ApolloProvider } from "@apollo/react-common"; import { MockedProvider, MockLink, mockSingleLink, stripSymbols -} from '@apollo/react-testing'; -import { render, cleanup, fireEvent, wait } from '@testing-library/react'; -import { Query, Mutation } from '@apollo/react-components'; +} from "@apollo/react-testing"; +import { render, cleanup, fireEvent, wait } from "@testing-library/react"; +import { Query, Mutation } from "@apollo/react-components"; const mutation = gql` mutation createTodo($text: String!) { @@ -38,22 +38,22 @@ type Data = { const data: Data = { createTodo: { - __typename: 'Todo', - id: '99', - text: 'This one was created with a mutation.', + __typename: "Todo", + id: "99", + text: "This one was created with a mutation.", completed: true }, - __typename: 'Mutation' + __typename: "Mutation" }; const data2: Data = { createTodo: { - __typename: 'Todo', - id: '100', - text: 'This one was created with a mutation.', + __typename: "Todo", + id: "100", + text: "This one was created with a mutation.", completed: true }, - __typename: 'Mutation' + __typename: "Mutation" }; const mocks = [ @@ -69,22 +69,22 @@ const mocks = [ const cache = new Cache({ addTypename: false }); -describe('General Mutation testing', () => { +describe("General Mutation testing", () => { afterEach(cleanup); - it('pick prop client over context client', async () => { + it("pick prop client over context client", async () => { const mock = (text: string) => [ { request: { query: mutation }, result: { data: { createTodo: { - __typename: 'Todo', - id: '99', + __typename: "Todo", + id: "99", text, completed: true }, - __typename: 'Mutation' + __typename: "Mutation" } } }, @@ -93,20 +93,20 @@ describe('General Mutation testing', () => { result: { data: { createTodo: { - __typename: 'Todo', - id: '100', + __typename: "Todo", + id: "100", text, completed: true }, - __typename: 'Mutation' + __typename: "Mutation" } } } ]; - const mocksProps = mock('This is the result of the prop client mutation.'); + const mocksProps = mock("This is the result of the prop client mutation."); const mocksContext = mock( - 'This is the result of the context client mutation.' + "This is the result of the context client mutation." ); function mockClient(m: any) { @@ -133,7 +133,7 @@ describe('General Mutation testing', () => { }; const { getByText, rerender } = render(); - const button = getByText('Create'); + const button = getByText("Create"); // context client mutation fireEvent.click(button); @@ -159,7 +159,7 @@ describe('General Mutation testing', () => { expect(spy).toHaveBeenCalledWith(mocksProps[1].result); }); - it('performs a mutation', async () => { + it("performs a mutation", async () => { let count = 0; const Component = () => ( @@ -191,7 +191,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('can bind only the mutation and not rerender by props', done => { + it("can bind only the mutation and not rerender by props", done => { let count = 0; const Component = () => ( @@ -206,7 +206,7 @@ describe('General Mutation testing', () => { }); }); } else if (count === 1) { - done.fail('rerender happened with ignoreResults turned on'); + done.fail("rerender happened with ignoreResults turned on"); } count++; return
; @@ -221,7 +221,7 @@ describe('General Mutation testing', () => { ); }); - it('returns a resolved promise when calling the mutation function', async () => { + it("returns a resolved promise when calling the mutation function", async () => { let called = false; const Component = () => ( @@ -247,14 +247,14 @@ describe('General Mutation testing', () => { await wait(); }); - it('returns rejected promise when calling the mutation function', async () => { + it("returns rejected promise when calling the mutation function", async () => { let called = false; const Component = () => ( {(createTodo: any) => { if (!called) { createTodo().catch((error: any) => { - expect(error).toEqual(new Error('Network error: Error 1')); + expect(error).toEqual(new Error("Network error: Error 1")); }); } @@ -267,7 +267,7 @@ describe('General Mutation testing', () => { const mocksWithErrors = [ { request: { query: mutation }, - error: new Error('Error 1') + error: new Error("Error 1") } ]; @@ -280,7 +280,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('only shows result for the latest mutation that is in flight', async () => { + it("only shows result for the latest mutation that is in flight", async () => { let count = 0; const onCompleted = (dataMutation: Data) => { @@ -321,14 +321,14 @@ describe('General Mutation testing', () => { await wait(); }); - it('only shows the error for the latest mutation in flight', async () => { + it("only shows the error for the latest mutation in flight", async () => { let count = 0; const onError = (error: Error) => { if (count === 1) { - expect(error).toEqual(new Error('Network error: Error 1')); + expect(error).toEqual(new Error("Network error: Error 1")); } else if (count === 3) { - expect(error).toEqual(new Error('Network error: Error 2')); + expect(error).toEqual(new Error("Network error: Error 2")); } }; const Component = () => ( @@ -346,7 +346,7 @@ describe('General Mutation testing', () => { expect(result.loading).toEqual(false); expect(result.data).toEqual(undefined); expect(result.called).toEqual(true); - expect(result.error).toEqual(new Error('Network error: Error 2')); + expect(result.error).toEqual(new Error("Network error: Error 2")); } count++; return
; @@ -357,11 +357,11 @@ describe('General Mutation testing', () => { const mocksWithErrors = [ { request: { query: mutation }, - error: new Error('Error 2') + error: new Error("Error 2") }, { request: { query: mutation }, - error: new Error('Error 2') + error: new Error("Error 2") } ]; @@ -374,7 +374,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('calls the onCompleted prop as soon as the mutation is complete', async () => { + it("calls the onCompleted prop as soon as the mutation is complete", async () => { let onCompletedCalled = false; class Component extends React.Component { @@ -417,7 +417,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('renders result of the children render prop', () => { + it("renders result of the children render prop", () => { const Component = () => ( {() =>
result
} ); @@ -427,23 +427,23 @@ describe('General Mutation testing', () => { ); - expect(getByText('result')).toBeTruthy(); + expect(getByText("result")).toBeTruthy(); }); - it('renders an error state', async () => { + it("renders an error state", async () => { let count = 0; const Component = () => ( {(createTodo: any, result: any) => { if (count === 0) { createTodo().catch((err: any) => { - expect(err).toEqual(new Error('Network error: error occurred')); + expect(err).toEqual(new Error("Network error: error occurred")); }); } else if (count === 1) { expect(result.loading).toBeTruthy(); } else if (count === 2) { expect(result.error).toEqual( - new Error('Network error: error occurred') + new Error("Network error: error occurred") ); } count++; @@ -455,7 +455,7 @@ describe('General Mutation testing', () => { const mockError = [ { request: { query: mutation }, - error: new Error('error occurred') + error: new Error("error occurred") } ]; @@ -468,11 +468,11 @@ describe('General Mutation testing', () => { await wait(); }); - it('renders an error state and throws when encountering graphql errors', async () => { + it("renders an error state and throws when encountering graphql errors", async () => { let count = 0; const expectedError = new ApolloError({ - graphQLErrors: [new GraphQLError('error occurred')] + graphQLErrors: [new GraphQLError("error occurred")] }); const Component = () => ( @@ -481,7 +481,7 @@ describe('General Mutation testing', () => { if (count === 0) { createTodo() .then(() => { - throw new Error('Did not expect a result'); + throw new Error("Did not expect a result"); }) .catch((e: any) => { expect(e).toEqual(expectedError); @@ -501,7 +501,7 @@ describe('General Mutation testing', () => { { request: { query: mutation }, result: { - errors: [new GraphQLError('error occurred')] + errors: [new GraphQLError("error occurred")] } } ]; @@ -515,7 +515,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('renders an error state and does not throw when encountering graphql errors when errorPolicy=all', async () => { + it("renders an error state and does not throw when encountering graphql errors when errorPolicy=all", async () => { let count = 0; const Component = () => ( @@ -526,7 +526,7 @@ describe('General Mutation testing', () => { if (fetchResult && fetchResult.errors) { expect(fetchResult.errors.length).toEqual(1); expect(fetchResult.errors[0]).toEqual( - new GraphQLError('error occurred') + new GraphQLError("error occurred") ); } else { throw new Error( @@ -542,7 +542,7 @@ describe('General Mutation testing', () => { } else if (count === 2) { expect(result.error).toEqual( new ApolloError({ - graphQLErrors: [new GraphQLError('error occurred')] + graphQLErrors: [new GraphQLError("error occurred")] }) ); } @@ -556,14 +556,14 @@ describe('General Mutation testing', () => { { request: { query: mutation }, result: { - errors: [new GraphQLError('error occurred')] + errors: [new GraphQLError("error occurred")] } } ]; render( @@ -573,10 +573,10 @@ describe('General Mutation testing', () => { await wait(); }); - it('renders an error state and throws when encountering network errors when errorPolicy=all', async () => { + it("renders an error state and throws when encountering network errors when errorPolicy=all", async () => { let count = 0; const expectedError = new ApolloError({ - networkError: new Error('network error') + networkError: new Error("network error") }); const Component = () => ( @@ -584,7 +584,7 @@ describe('General Mutation testing', () => { if (count === 0) { createTodo() .then(() => { - throw new Error('Did not expect a result'); + throw new Error("Did not expect a result"); }) .catch((e: any) => { expect(e).toEqual(expectedError); @@ -603,13 +603,13 @@ describe('General Mutation testing', () => { const mockError = [ { request: { query: mutation }, - error: new Error('network error') + error: new Error("network error") } ]; render( @@ -619,7 +619,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('calls the onError prop if the mutation encounters an error', async () => { + it("calls the onError prop if the mutation encounters an error", async () => { let onRenderCalled = false; class Component extends React.Component { @@ -628,7 +628,7 @@ describe('General Mutation testing', () => { }; onError = (error: Error) => { - expect(error.message).toMatch('Network error: error occurred'); + expect(error.message).toMatch("Network error: error occurred"); onRenderCalled = true; this.setState({ mutationError: true }); }; @@ -656,7 +656,7 @@ describe('General Mutation testing', () => { const mockError = [ { request: { query: mutation }, - error: new Error('error occurred') + error: new Error("error occurred") } ]; @@ -669,9 +669,9 @@ describe('General Mutation testing', () => { await wait(); }); - it('performs a mutation with variables prop', async () => { + it("performs a mutation with variables prop", async () => { const variables = { - text: 'play tennis' + text: "play tennis" }; let count = 0; @@ -710,9 +710,9 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows passing a variable to the mutate function', async () => { + it("allows passing a variable to the mutate function", async () => { const variables = { - text: 'play tennis' + text: "play tennis" }; let count = 0; @@ -751,7 +751,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows an optimistic response prop', async () => { + it("allows an optimistic response prop", async () => { const link = mockSingleLink(...mocks); const client = new ApolloClient({ link, @@ -760,12 +760,12 @@ describe('General Mutation testing', () => { const optimisticResponse = { createTodo: { - id: '99', - text: 'This is an optimistic response', + id: "99", + text: "This is an optimistic response", completed: false, - __typename: 'Todo' + __typename: "Todo" }, - __typename: 'Mutation' + __typename: "Mutation" }; let count = 0; @@ -775,7 +775,7 @@ describe('General Mutation testing', () => { if (count === 0) { createTodo(); const dataInStore = client.cache.extract(true); - expect(dataInStore['Todo:99']).toEqual( + expect(dataInStore["Todo:99"]).toEqual( optimisticResponse.createTodo ); } else if (count === 1) { @@ -801,7 +801,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows passing an optimistic response to the mutate function', async () => { + it("allows passing an optimistic response to the mutate function", async () => { const link = mockSingleLink(...mocks); const client = new ApolloClient({ link, @@ -810,12 +810,12 @@ describe('General Mutation testing', () => { const optimisticResponse = { createTodo: { - id: '99', - text: 'This is an optimistic response', + id: "99", + text: "This is an optimistic response", completed: false, - __typename: 'Todo' + __typename: "Todo" }, - __typename: 'Mutation' + __typename: "Mutation" }; let count = 0; @@ -825,7 +825,7 @@ describe('General Mutation testing', () => { if (count === 0) { createTodo({ optimisticResponse }); const dataInStore = client.cache.extract(true); - expect(dataInStore['Todo:99']).toEqual( + expect(dataInStore["Todo:99"]).toEqual( optimisticResponse.createTodo ); } else if (count === 2) { @@ -848,7 +848,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows a refetchQueries prop', async () => { + it("allows a refetchQueries prop", async () => { const query = gql` query getTodo { todo { @@ -863,12 +863,12 @@ describe('General Mutation testing', () => { const queryData = { todo: { - id: '1', - text: 'todo from query', + id: "1", + text: "todo from query", completed: false, - __typename: 'Todo' + __typename: "Todo" }, - __typename: 'Query' + __typename: "Query" }; const mocksWithQuery = [ @@ -927,7 +927,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows a refetchQueries prop as string and variables have updated', async () => { + it("allows a refetchQueries prop as string and variables have updated", async () => { const query = gql` query people($first: Int) { allPeople(first: $first) { @@ -940,20 +940,20 @@ describe('General Mutation testing', () => { const peopleData1 = { allPeople: { - people: [{ name: 'Luke Skywalker', __typename: 'Person' }], - __typename: 'People' + people: [{ name: "Luke Skywalker", __typename: "Person" }], + __typename: "People" } }; const peopleData2 = { allPeople: { - people: [{ name: 'Han Solo', __typename: 'Person' }], - __typename: 'People' + people: [{ name: "Han Solo", __typename: "Person" }], + __typename: "People" } }; const peopleData3 = { allPeople: { - people: [{ name: 'Lord Vader', __typename: 'Person' }], - __typename: 'People' + people: [{ name: "Lord Vader", __typename: "Person" }], + __typename: "People" } }; const peopleMocks = [ @@ -972,7 +972,7 @@ describe('General Mutation testing', () => { } ]; - const refetchQueries = ['people']; + const refetchQueries = ["people"]; let count = 0; @@ -1029,7 +1029,7 @@ describe('General Mutation testing', () => { }); }); - it('allows refetchQueries to be passed to the mutate function', async () => { + it("allows refetchQueries to be passed to the mutate function", async () => { const query = gql` query getTodo { todo { @@ -1044,12 +1044,12 @@ describe('General Mutation testing', () => { const queryData = { todo: { - id: '1', - text: 'todo from query', + id: "1", + text: "todo from query", completed: false, - __typename: 'Todo' + __typename: "Todo" }, - __typename: 'Query' + __typename: "Query" }; const mocksWithQuery = [ @@ -1112,7 +1112,7 @@ describe('General Mutation testing', () => { }); }); - it('has an update prop for updating the store after the mutation', async () => { + it("has an update prop for updating the store after the mutation", async () => { const update = (_proxy: DataProxy, response: ExecutionResult) => { expect(response.data).toEqual(data); }; @@ -1141,7 +1141,7 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows update to be passed to the mutate function', async () => { + it("allows update to be passed to the mutate function", async () => { const update = (_proxy: DataProxy, response: ExecutionResult) => { expect(response.data).toEqual(data); }; @@ -1170,13 +1170,13 @@ describe('General Mutation testing', () => { await wait(); }); - it('allows for overriding the options passed in the props by passing them in the mutate function', async () => { + it("allows for overriding the options passed in the props by passing them in the mutate function", async () => { const variablesProp = { - text: 'play tennis' + text: "play tennis" }; const variablesMutateFn = { - text: 'go swimming' + text: "go swimming" }; let count = 0; @@ -1188,6 +1188,7 @@ describe('General Mutation testing', () => { } else if (count === 2) { expect(result.loading).toEqual(false); expect(result.called).toEqual(true); + // flaky test here expect(result.data).toEqual(data2); } count++; @@ -1218,7 +1219,7 @@ describe('General Mutation testing', () => { }); }); - it('updates if the client changes', async () => { + it("updates if the client changes", async () => { const link1 = mockSingleLink({ request: { query: mutation }, result: { data } @@ -1230,12 +1231,12 @@ describe('General Mutation testing', () => { const data3 = { createTodo: { - __typename: 'Todo', - id: '100', - text: 'After updating client.', + __typename: "Todo", + id: "100", + text: "After updating client.", completed: false }, - __typename: 'Mutation' + __typename: "Mutation" }; const link2 = mockSingleLink({ @@ -1292,7 +1293,7 @@ describe('General Mutation testing', () => { }); }); - it('uses client from props instead of one provided by context', () => { + it("uses client from props instead of one provided by context", () => { const link1 = mockSingleLink({ request: { query: mutation }, result: { data } @@ -1337,7 +1338,7 @@ describe('General Mutation testing', () => { ); }); - it('errors if a query is passed instead of a mutation', () => { + it("errors if a query is passed instead of a mutation", () => { const query = gql` query todos { todos { @@ -1357,14 +1358,14 @@ describe('General Mutation testing', () => { ); }).toThrowError( - 'Running a Mutation requires a graphql Mutation, but a Query was used ' + - 'instead.' + "Running a Mutation requires a graphql Mutation, but a Query was used " + + "instead." ); console.log = errorLogger; }); - it('errors when changing from mutation to a query', done => { + it("errors when changing from mutation to a query", done => { const query = gql` query todos { todos { @@ -1381,8 +1382,8 @@ describe('General Mutation testing', () => { componentDidCatch(e: Error) { expect(e).toEqual( new Error( - 'Running a Mutation requires a graphql Mutation, but a Query ' + - 'was used instead.' + "Running a Mutation requires a graphql Mutation, but a Query " + + "was used instead." ) ); done(); @@ -1416,7 +1417,7 @@ describe('General Mutation testing', () => { console.log = errorLogger; }); - it('errors if a subscription is passed instead of a mutation', () => { + it("errors if a subscription is passed instead of a mutation", () => { const subscription = gql` subscription todos { todos { @@ -1436,14 +1437,14 @@ describe('General Mutation testing', () => { ); }).toThrowError( - 'Running a Mutation requires a graphql Mutation, but a Subscription ' + - 'was used instead.' + "Running a Mutation requires a graphql Mutation, but a Subscription " + + "was used instead." ); console.log = errorLogger; }); - it('errors when changing from mutation to a subscription', done => { + it("errors when changing from mutation to a subscription", done => { const subscription = gql` subscription todos { todos { @@ -1460,8 +1461,8 @@ describe('General Mutation testing', () => { componentDidCatch(e: Error) { expect(e).toEqual( new Error( - 'Running a Mutation requires a graphql Mutation, but a ' + - 'Subscription was used instead.' + "Running a Mutation requires a graphql Mutation, but a " + + "Subscription was used instead." ) ); done(); @@ -1496,8 +1497,8 @@ describe('General Mutation testing', () => { console.log = errorLogger; }); - describe('after it has been unmounted', () => { - it('calls the onCompleted prop after the mutation is complete', done => { + describe("after it has been unmounted", () => { + it("calls the onCompleted prop after the mutation is complete", done => { let success = false; const onCompletedFn = jest.fn(); const checker = () => { @@ -1540,15 +1541,15 @@ describe('General Mutation testing', () => { ); setTimeout(() => { - if (!success) done.fail('timeout passed'); + if (!success) done.fail("timeout passed"); }, 500); }); }); - it('calls the onError prop if the mutation encounters an error', async () => { + it("calls the onError prop if the mutation encounters an error", async () => { let onErrorCalled = false; function onError(error: ApolloError) { - expect(error.message).toEqual('Network error: error occurred'); + expect(error.message).toEqual("Network error: error occurred"); onErrorCalled = true; } @@ -1568,7 +1569,7 @@ describe('General Mutation testing', () => { const mockError = [ { request: { query: mutation }, - error: new Error('error occurred') + error: new Error("error occurred") } ]; diff --git a/packages/hoc/src/__tests__/__snapshots__/MockedProvider.test.tsx.snap b/packages/hoc/src/__tests__/__snapshots__/MockedProvider.test.tsx.snap index 6befcd0ce3..1dd9630d7d 100644 --- a/packages/hoc/src/__tests__/__snapshots__/MockedProvider.test.tsx.snap +++ b/packages/hoc/src/__tests__/__snapshots__/MockedProvider.test.tsx.snap @@ -25,23 +25,23 @@ exports[`General use errors if the query in the mock and component do not match `; exports[`General use errors if the variables do not deep equal 1`] = ` -[Error: Network error: No more mocked responses for the query: query GetUser($username: String!) { +[Error: Network error: Mocked variable mismatch for the query: query GetUser($username: String!) { user(username: $username) { id __typename } } -, variables: {"username":"some_user","age":42}] +, request variables: {"username":"some_user","age":42}, mocked response variables: {"age":13,"username":"some_user"}] `; exports[`General use 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!) { +[Error: Network error: Mocked variable mismatch for the query: query GetUser($username: String!) { user(username: $username) { id __typename } } -, variables: {"username":"other_user"}] +, request variables: {"username":"other_user"}, mocked response variables: {"username":"mock_username"}] `; exports[`General use mocks the data 1`] = ` diff --git a/packages/hoc/src/__tests__/queries/skip.test.tsx b/packages/hoc/src/__tests__/queries/skip.test.tsx index 76dbed3ce2..48552bac73 100644 --- a/packages/hoc/src/__tests__/queries/skip.test.tsx +++ b/packages/hoc/src/__tests__/queries/skip.test.tsx @@ -1,18 +1,18 @@ -import React from 'react'; -import { render, cleanup, wait } from '@testing-library/react'; -import gql from 'graphql-tag'; -import ApolloClient from 'apollo-client'; -import { ApolloLink } from 'apollo-link'; -import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; -import { mockSingleLink, stripSymbols } from '@apollo/react-testing'; -import { ApolloProvider } from '@apollo/react-common'; -import { DocumentNode } from 'graphql'; -import { graphql, ChildProps } from '@apollo/react-hoc'; - -describe('[queries] skip', () => { +import React from "react"; +import { render, cleanup, wait } from "@testing-library/react"; +import gql from "graphql-tag"; +import ApolloClient from "apollo-client"; +import { ApolloLink } from "apollo-link"; +import { InMemoryCache as Cache } from "apollo-cache-inmemory"; +import { mockSingleLink, stripSymbols } from "@apollo/react-testing"; +import { ApolloProvider } from "@apollo/react-common"; +import { DocumentNode } from "graphql"; +import { graphql, ChildProps } from "@apollo/react-hoc"; + +describe("[queries] skip", () => { afterEach(cleanup); - it('allows you to skip a query without running it', done => { + it("allows you to skip a query without running it", done => { const query: DocumentNode = gql` query people { allPeople(first: 1) { @@ -22,7 +22,7 @@ describe('[queries] skip', () => { } } `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; + const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; const link = mockSingleLink({ request: { query }, result: { data } @@ -61,11 +61,11 @@ describe('[queries] skip', () => { done(); return; } - fail(new Error('query ran even though skip present')); + fail(new Error("query ran even though skip present")); }, 25); }); - it('continues to not subscribe to a skipped query when props change', done => { + it("continues to not subscribe to a skipped query when props change", done => { const query: DocumentNode = gql` query people { allPeople(first: 1) { @@ -77,7 +77,7 @@ describe('[queries] skip', () => { `; const link = new ApolloLink((o, f) => { - done.fail(new Error('query ran even though skip present')); + done.fail(new Error("query ran even though skip present")); return f ? f(o) : null; }).concat(mockSingleLink()); // const oldQuery = link.query; @@ -119,7 +119,7 @@ describe('[queries] skip', () => { ); }); - it('supports using props for skipping which are used in options', done => { + it("supports using props for skipping which are used in options", done => { const query: DocumentNode = gql` query people($id: ID!) { allPeople(first: $id) { @@ -213,7 +213,7 @@ describe('[queries] skip', () => { } } `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; + const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; const link = mockSingleLink({ request: { query }, result: { data } @@ -272,10 +272,10 @@ describe('[queries] skip', () => { return; } if (optionsCalled) { - fail(new Error('options ran even though skip present')); + fail(new Error("options ran even though skip present")); return; } - fail(new Error('query ran even though skip present')); + fail(new Error("query ran even though skip present")); }, 25); }); @@ -328,9 +328,9 @@ describe('[queries] skip', () => { ); class Parent extends React.Component<{}, { foo: string }> { - state = { foo: 'bar' }; + state = { foo: "bar" }; componentDidMount() { - this.setState({ foo: 'baz' }); + this.setState({ foo: "baz" }); } render() { return ; @@ -344,7 +344,7 @@ describe('[queries] skip', () => { ); }); - it('allows you to skip a query without running it (alternate syntax)', done => { + it("allows you to skip a query without running it (alternate syntax)", done => { const query: DocumentNode = gql` query people { allPeople(first: 1) { @@ -354,7 +354,7 @@ describe('[queries] skip', () => { } } `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; + const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; const link = mockSingleLink({ request: { query }, result: { data } @@ -388,13 +388,13 @@ describe('[queries] skip', () => { done(); return; } - fail(new Error('query ran even though skip present')); + fail(new Error("query ran even though skip present")); }, 25); }); // test the case of skip:false -> skip:true -> skip:false to make sure things // are cleaned up properly - it('allows you to skip then unskip a query with top-level syntax', done => { + it("allows you to skip then unskip a query with top-level syntax", done => { const query: DocumentNode = gql` query people { allPeople(first: 1) { @@ -404,7 +404,7 @@ describe('[queries] skip', () => { } } `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; + const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; const link = mockSingleLink({ request: { query }, result: { data } @@ -460,7 +460,7 @@ describe('[queries] skip', () => { ); }); - it('allows you to skip then unskip a query with new options (top-level syntax)', done => { + it("allows you to skip then unskip a query with new options (top-level syntax)", done => { const query: DocumentNode = gql` query people($first: Int) { allPeople(first: $first) { @@ -470,8 +470,8 @@ describe('[queries] skip', () => { } } `; - const dataOne = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; - const dataTwo = { allPeople: { people: [{ name: 'Leia Skywalker' }] } }; + const dataOne = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; + const dataTwo = { allPeople: { people: [{ name: "Leia Skywalker" }] } }; type Data = typeof dataOne; type Vars = { first: number }; @@ -500,7 +500,7 @@ describe('[queries] skip', () => { interface Props { skip: boolean; first: number; - setState: ( + setState: ( state: Pick<{ skip: boolean; first: number }, K> ) => void; } @@ -555,7 +555,7 @@ describe('[queries] skip', () => { ); }); - it('allows you to skip then unskip a query with opts syntax', async () => { + it("allows you to skip then unskip a query with opts syntax", async () => { const query: DocumentNode = gql` query people { allPeople(first: 1) { @@ -566,8 +566,8 @@ describe('[queries] skip', () => { } `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; - const nextData = { allPeople: { people: [{ name: 'Anakin Skywalker' }] } }; + const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; + const nextData = { allPeople: { people: [{ name: "Anakin Skywalker" }] } }; let ranQuery = 0; @@ -595,7 +595,7 @@ describe('[queries] skip', () => { let count = 0; const Container = graphql(query, { options: { - fetchPolicy: 'network-only', + fetchPolicy: "network-only", notifyOnNetworkStatusChange: true }, skip: ({ skip }) => skip @@ -659,7 +659,8 @@ describe('[queries] skip', () => { }); }); - it('removes the injected props if skip becomes true', async () => { + // flaky test here as well + it("removes the injected props if skip becomes true", async () => { let count = 0; const query: DocumentNode = gql` query people($first: Int) { @@ -671,13 +672,13 @@ describe('[queries] skip', () => { } `; - const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; + const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } }; const variables1 = { first: 1 }; - const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } }; + const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } }; const variables2 = { first: 2 }; - const data3 = { allPeople: { people: [{ name: 'Anakin Skywalker' }] } }; + const data3 = { allPeople: { people: [{ name: "Anakin Skywalker" }] } }; const variables3 = { first: 3 }; type Data = typeof data1; @@ -744,7 +745,7 @@ describe('[queries] skip', () => { }); }); - it('allows you to unmount a skipped query', done => { + it("allows you to unmount a skipped query", done => { const query: DocumentNode = gql` query people { allPeople(first: 1) { diff --git a/packages/testing/src/mocks/mockLink.ts b/packages/testing/src/mocks/mockLink.ts index 4f352c86da..96dfd62e78 100644 --- a/packages/testing/src/mocks/mockLink.ts +++ b/packages/testing/src/mocks/mockLink.ts @@ -4,18 +4,18 @@ import { ApolloLink, FetchResult, Observable -} from 'apollo-link'; +} from "apollo-link"; import { addTypenameToDocument, removeClientSetsFromDocument, removeConnectionDirectiveFromDocument, cloneDeep, isEqual -} from 'apollo-utilities'; -import { print } from 'graphql/language/printer'; -import stringify from 'fast-json-stable-stringify'; +} from "apollo-utilities"; +import { print } from "graphql/language/printer"; +import stringify from "fast-json-stable-stringify"; -import { MockedResponse, ResultFunction } from './types'; +import { MockedResponse, ResultFunction } from "./types"; function requestToKey(request: GraphQLRequest, addTypename: Boolean): string { const queryString = @@ -58,26 +58,36 @@ export class MockLink extends ApolloLink { } public request(operation: Operation): Observable | null { + console.log(JSON.stringify(operation, null, 2)); const key = requestToKey(operation, this.addTypename); let responseIndex; const response = (this.mockedResponsesByKey[key] || []).find( (res, index) => { const requestVariables = operation.variables || {}; const mockedResponseVariables = res.request.variables || {}; + console.log(requestVariables, mockedResponseVariables); if ( !isEqual( stringify(requestVariables), stringify(mockedResponseVariables) ) ) { - return false; + throw new Error( + `Mocked variable mismatch for the query: ${print( + operation.query + )}, request variables: ${JSON.stringify( + requestVariables + )}, mocked response variables: ${JSON.stringify( + mockedResponseVariables + )}` + ); } responseIndex = index; return true; } ); - if (!response || typeof responseIndex === 'undefined') { + if (!response || typeof responseIndex === "undefined") { throw new Error( `No more mocked responses for the query: ${print( operation.query @@ -110,7 +120,7 @@ export class MockLink extends ApolloLink { } else { if (result) { observer.next( - typeof result === 'function' + typeof result === "function" ? (result as ResultFunction)() : result ); @@ -151,7 +161,7 @@ export function mockSingleLink(...mockedResponses: Array): ApolloLink { let maybeTypename = mockedResponses[mockedResponses.length - 1]; let mocks = mockedResponses.slice(0, mockedResponses.length - 1); - if (typeof maybeTypename !== 'boolean') { + if (typeof maybeTypename !== "boolean") { mocks = mockedResponses; maybeTypename = true; }