From 54f46cb595bbf0f55a6b1b8271b3de367c8f5904 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 5 Aug 2021 18:23:13 -0400 Subject: [PATCH] TEMP COMMIT DO NOT MERGE --- .../__tests__/client/Query.test.tsx | 271 +++++++++++------- .../client/__snapshots__/Query.test.tsx.snap | 61 ---- 2 files changed, 165 insertions(+), 167 deletions(-) delete mode 100644 src/react/components/__tests__/client/__snapshots__/Query.test.tsx.snap diff --git a/src/react/components/__tests__/client/Query.test.tsx b/src/react/components/__tests__/client/Query.test.tsx index c3fa0a77422..e3396e466a5 100644 --- a/src/react/components/__tests__/client/Query.test.tsx +++ b/src/react/components/__tests__/client/Query.test.tsx @@ -8,7 +8,7 @@ import { ApolloError } from '../../../../errors'; import { ApolloLink } from '../../../../link/core'; import { InMemoryCache } from '../../../../cache'; import { ApolloProvider } from '../../../context'; -import { itAsync, MockedProvider, mockSingleLink, withErrorSpy } from '../../../../testing'; +import { itAsync, MockedProvider, mockSingleLink } from '../../../../testing'; import { Query } from '../../Query'; const allPeopleQuery: DocumentNode = gql` @@ -53,16 +53,49 @@ describe('Query component', () => { const Component = () => ( {(result: any) => { - const { client: clientResult, ...rest } = result; - if (result.loading) { - expect(rest).toMatchSnapshot( - 'result in render prop while loading' - ); - expect(clientResult).toBe(client); - } else { - expect(rest).toMatchSnapshot( - 'result in render prop' - ); + const { + client: clientResult, + fetchMore, + refetch, + startPolling, + stopPolling, + subscribeToMore, + updateQuery, + ...rest + } = result; + try { + if (result.loading) { + expect(rest).toEqual({ + called: true, + data: undefined, + error: undefined, + loading: true, + networkStatus: 1, + previousData: undefined, + variables: {}, + }); + expect(clientResult).toBe(client); + } else { + expect(rest).toEqual({ + called: true, + data: { + allPeople: { + people: [ + { + name: "Luke Skywalker", + }, + ], + }, + }, + error: undefined, + loading: false, + networkStatus: 7, + previousData: undefined, + variables: {}, + }); + } + } catch (err) { + reject(err); } return null; }} @@ -994,16 +1027,6 @@ describe('Query component', () => { }, }; - componentDidMount() { - setTimeout(() => { - this.setState({ - variables: { - first: 2, - }, - }); - }, 50); - } - render() { const { variables } = this.state; @@ -1013,14 +1036,28 @@ describe('Query component', () => { if (result.loading) { return null; } + try { - if (count === 0) { - expect(variables).toEqual({ first: 1 }); - expect(result.data).toEqual(data1); - } - if (count === 1) { - expect(variables).toEqual({ first: 2 }); - expect(result.data).toEqual(data2); + switch (count) { + case 0: + expect(variables).toEqual({ first: 1 }); + expect(result.data).toEqual(data1); + setTimeout(() => { + this.setState({ + variables: { + first: 2, + }, + }); + }); + break; + case 1: + expect(variables).toEqual({ first: 2 }); + expect(result.data).toEqual(data1); + break; + case 2: + expect(variables).toEqual({ first: 2 }); + expect(result.data).toEqual(data2); + break; } } catch (error) { reject(error); @@ -1040,7 +1077,7 @@ describe('Query component', () => { ); - return wait(() => expect(count).toBe(2)).then(resolve, reject); + return wait(() => expect(count).toBe(3)).then(resolve, reject); }); itAsync('if the query changes', (resolve, reject) => { @@ -1084,14 +1121,22 @@ describe('Query component', () => { {(result: any) => { if (result.loading) return null; try { - if (count === 0) { - expect(result.data).toEqual(data1); - setTimeout(() => { - this.setState({ query: query2 }); - }); - } - if (count === 1) { - expect(result.data).toEqual(data2); + switch (count) { + case 0: + expect(query).toEqual(query1); + expect(result.data).toEqual(data1); + setTimeout(() => { + this.setState({ query: query2 }); + }); + break; + case 1: + expect(query).toEqual(query2); + expect(result.data).toEqual(data1); + break; + case 2: + expect(query).toEqual(query2); + expect(result.data).toEqual(data2); + break; } } catch (error) { reject(error); @@ -1111,7 +1156,7 @@ describe('Query component', () => { ); - return wait(() => expect(count).toBe(2)).then(resolve, reject); + return wait(() => expect(count).toBe(3)).then(resolve, reject); }); itAsync('with data while loading', (resolve, reject) => { @@ -1153,35 +1198,42 @@ describe('Query component', () => { }, }; - componentDidMount() { - setTimeout(() => { - this.setState({ variables: { first: 2 } }); - }, 10); - } - render() { const { variables } = this.state; return ( {(result: any) => { - if (count === 0) { - expect(result.loading).toBe(true); - expect(result.data).toBeUndefined(); - expect(result.networkStatus).toBe(NetworkStatus.loading); - } else if (count === 1) { - expect(result.loading).toBe(false); - expect(result.data).toEqual(data1); - expect(result.networkStatus).toBe(NetworkStatus.ready); - } else if (count === 2) { - expect(result.loading).toBe(true); - expect(result.data).toBeUndefined(); - expect(result.networkStatus).toBe(NetworkStatus.setVariables); - } else if (count === 3) { - expect(result.loading).toBe(false); - expect(result.data).toEqual(data2); - expect(result.networkStatus).toBe(NetworkStatus.ready); + try { + switch (count) { + case 0: + expect(result.loading).toBe(true); + expect(result.data).toBeUndefined(); + expect(result.networkStatus).toBe(NetworkStatus.loading); + break; + case 1: + setTimeout(() => { + this.setState({ variables: { first: 2 } }); + }); + // fallthrough + case 2: + expect(result.loading).toBe(false); + expect(result.data).toEqual(data1); + expect(result.networkStatus).toBe(NetworkStatus.ready); + break; + case 3: + expect(result.loading).toBe(true); + expect(result.networkStatus).toBe(NetworkStatus.setVariables); + break; + case 4: + expect(result.data).toEqual(data2); + expect(result.networkStatus).toBe(NetworkStatus.ready); + break; + } + } catch (err) { + reject(err); } + count++; return null; }} @@ -1196,7 +1248,7 @@ describe('Query component', () => { ); - return wait(() => expect(count).toBe(4)).then(resolve, reject); + return wait(() => expect(count).toBe(5)).then(resolve, reject); }); itAsync('should update if a manual `refetch` is triggered after a state change', (resolve, reject) => { @@ -1381,7 +1433,7 @@ describe('Query component', () => { const link = mockSingleLink( { request: { query }, result: { data } }, { request: { query }, error: new Error('This is an error!') }, - { request: { query }, result: { data: dataTwo } } + { request: { query }, result: { data: dataTwo }, delay: 10 }, ); const client = new ApolloClient({ link, @@ -1395,22 +1447,18 @@ describe('Query component', () => { function Container() { return ( - + {(result: any) => { try { switch (count++) { case 0: // Waiting for the first result to load - expect(result.loading).toBeTruthy(); + expect(result.loading).toBe(true); break; case 1: - if (!result.data!.allPeople) { - reject('Should have data by this point'); - break; - } // First result is loaded, run a refetch to get the second result // which is an error. - expect(result.data!.allPeople).toEqual( + expect(result.data.allPeople).toEqual( data.allPeople ); setTimeout(() => { @@ -1421,33 +1469,28 @@ describe('Query component', () => { break; case 2: // Waiting for the second result to load - expect(result.loading).toBeTruthy(); + expect(result.loading).toBe(true); break; case 3: - // The error arrived, run a refetch to get the third result - // which should now contain valid data. - expect(result.loading).toBeFalsy(); - expect(result.error).toBeTruthy(); setTimeout(() => { result.refetch().catch(() => { reject('Expected good data on second refetch.'); }); }, 0); + // fallthrough + // The error arrived, run a refetch to get the third result + // which should now contain valid data. + expect(result.loading).toBe(false); + expect(result.error).toBeTruthy(); break; case 4: - expect(result.loading).toBeTruthy(); + expect(result.loading).toBe(true); expect(result.error).toBeFalsy(); break; case 5: - expect(result.loading).toBeFalsy(); + expect(result.loading).toBe(false); expect(result.error).toBeFalsy(); - if (!result.data) { - reject('Should have data by this point'); - break; - } - expect(result.data.allPeople).toEqual( - dataTwo.allPeople - ); + expect(result.data.allPeople).toEqual(dataTwo.allPeople); break; default: throw new Error('Unexpected fall through'); @@ -1620,8 +1663,6 @@ describe('Query component', () => { let renderCount = 0; let onCompletedCallCount = 0; - let unmount: any; - class Component extends React.Component { state = { variables: { @@ -1650,26 +1691,30 @@ describe('Query component', () => { {({ loading, data }: any) => { switch (renderCount) { case 0: - expect(loading).toBeTruthy(); + expect(loading).toBe(true); break; case 1: - expect(loading).toBeFalsy(); - expect(data).toEqual(data1); - break; case 2: - expect(loading).toBeTruthy(); + expect(loading).toBe(false); + expect(data).toEqual(data1); break; case 3: - expect(loading).toBeFalsy(); - expect(data).toEqual(data2); - setTimeout(() => this.setState({ variables: { first: 1 } })); + expect(loading).toBe(true); break; case 4: - expect(loading).toBeFalsy(); + expect(loading).toBe(false); + expect(data).toEqual(data2); + setTimeout(() => { + this.setState({ variables: { first: 1 } }); + }); + case 5: + expect(loading).toBe(false); + expect(data).toEqual(data2); + break; + case 6: + expect(loading).toBe(false); expect(data).toEqual(data1); - setTimeout(unmount); break; - default: } renderCount += 1; return null; @@ -1679,11 +1724,11 @@ describe('Query component', () => { } } - unmount = render( + render( - ).unmount; + ); return wait(() => { expect(onCompletedCallCount).toBe(3); @@ -1750,16 +1795,18 @@ describe('Query component', () => { console.warn = origConsoleWarn; }); - withErrorSpy(itAsync, + itAsync( 'should attempt a refetch when the query result was marked as being ' + 'partial, the returned data was reset to an empty Object by the ' + 'Apollo Client QueryManager (due to a cache miss), and the ' + '`partialRefetch` prop is `true`', (resolve, reject) => { - const query = allPeopleQuery; + const errorSpy = jest.spyOn(console, 'error') + .mockImplementation(() => {}); + const query = gql`{ hello }`; const link = mockSingleLink( { request: { query }, result: { data: {} } }, - { request: { query }, result: { data: allPeopleData } } + { request: { query }, result: { data: { hello: 'world' } } } ); const client = new ApolloClient({ @@ -1768,11 +1815,19 @@ describe('Query component', () => { }); const Component = () => ( - + {(result: any) => { - const { data, loading } = result; - if (!loading) { - expect(data).toEqual(allPeopleData); + const { data, loading, error } = result; + if (error) { + console.log(error.clientErrors); + } + + try { + if (!loading) { + expect(data).toEqual({ hello: 'world' }); + } + } catch (err) { + reject(err); } return null; }} @@ -1785,7 +1840,11 @@ describe('Query component', () => { ); - return wait().then(resolve, reject); + return wait().then(() => { + expect(errorSpy).toHaveBeenCalledTimes(1); + expect(errorSpy.mock.calls[0][0]).toMatch('Missing field'); + errorSpy.mockRestore(); + }).then(resolve, reject); } ); diff --git a/src/react/components/__tests__/client/__snapshots__/Query.test.tsx.snap b/src/react/components/__tests__/client/__snapshots__/Query.test.tsx.snap deleted file mode 100644 index 895c6167e70..00000000000 --- a/src/react/components/__tests__/client/__snapshots__/Query.test.tsx.snap +++ /dev/null @@ -1,61 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Query component Partial refetching should attempt a refetch when the query result was marked as being partial, the returned data was reset to an empty Object by the Apollo Client QueryManager (due to a cache miss), and the \`partialRefetch\` prop is \`true\` 1`] = ` -[MockFunction] { - "calls": Array [ - Array [ - "Missing field 'allPeople' while writing result {}", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - ], -} -`; - -exports[`Query component calls the children prop: result in render prop 1`] = ` -Object { - "called": true, - "data": Object { - "allPeople": Object { - "people": Array [ - Object { - "name": "Luke Skywalker", - }, - ], - }, - }, - "error": undefined, - "fetchMore": [Function], - "loading": false, - "networkStatus": 7, - "previousData": undefined, - "refetch": [Function], - "startPolling": [Function], - "stopPolling": [Function], - "subscribeToMore": [Function], - "updateQuery": [Function], - "variables": Object {}, -} -`; - -exports[`Query component calls the children prop: result in render prop while loading 1`] = ` -Object { - "called": true, - "data": undefined, - "error": undefined, - "fetchMore": [Function], - "loading": true, - "networkStatus": 1, - "previousData": undefined, - "refetch": [Function], - "startPolling": [Function], - "stopPolling": [Function], - "subscribeToMore": [Function], - "updateQuery": [Function], - "variables": Object {}, -} -`;