From 7a401a70bda9d8ef6a7852ccdd1763adaffec723 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 5 Aug 2021 10:23:17 -0400 Subject: [PATCH] copy some tests from Query --- src/react/hooks/__tests__/useQuery.test.tsx | 131 +++++++++++++++++++- 1 file changed, 128 insertions(+), 3 deletions(-) diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index 24621971e22..c207a7acf26 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -1187,6 +1187,66 @@ describe('useQuery Hook', () => { expect(catchFn.mock.calls[0][0]).toBeInstanceOf(ApolloError); expect(catchFn.mock.calls[0][0].message).toBe('same error'); }); + + it('should call onCompleted when variables change', async () => { + const query = gql` + query people($first: Int) { + allPeople(first: $first) { + people { + name + } + } + } + `; + + const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; + const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } }; + const mocks = [ + { + request: { query, variables: { first: 1 } }, + result: { data: data1 }, + }, + { + request: { query, variables: { first: 2 } }, + result: { data: data2 }, + }, + ]; + + const onCompleted = jest.fn(); + + const { result, rerender, waitForNextUpdate } = renderHook( + ({ variables }) => useQuery(query, { variables, onCompleted }), + { + wrapper: ({ children }) => ( + + {children} + + ), + initialProps: { + variables: { first: 1 }, + }, + }, + ); + + expect(result.current.loading).toBe(true); + + await waitForNextUpdate(); + expect(result.current.loading).toBe(false); + expect(result.current.data).toEqual(data1); + + rerender({ variables: { first: 2 } }); + expect(result.current.loading).toBe(true); + + await waitForNextUpdate(); + expect(result.current.loading).toBe(false); + expect(result.current.data).toEqual(data2); + + rerender({ variables: { first: 1 } }); + expect(result.current.loading).toBe(false); + expect(result.current.data).toEqual(data1); + + expect(onCompleted).toHaveBeenCalledTimes(3); + }); }); describe('Pagination', () => { @@ -1443,6 +1503,71 @@ describe('useQuery Hook', () => { expect(result.current.data).toEqual({ hello: 'world 2' }); }); + it('refetching after an error', async () => { + const query = gql`{ hello }`; + const mocks = [ + { + request: { query }, + result: { data: { hello: 'world 1' } }, + }, + { + request: { query }, + error: new Error('This is an error!'), + delay: 10, + }, + { + request: { query }, + result: { data: { hello: 'world 2' } }, + delay: 10, + }, + ]; + + const cache = new InMemoryCache(); + + const { result, waitForNextUpdate } = renderHook( + () => useQuery(query, { + notifyOnNetworkStatusChange: true, + }), + { + wrapper: ({ children }) => ( + + {children} + + ), + }, + ); + + expect(result.current.loading).toBe(true); + expect(result.current.data).toBe(undefined); + + await waitForNextUpdate(); + expect(result.current.loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toEqual({ hello: 'world 1' }); + + result.current.refetch(); + await waitForNextUpdate(); + expect(result.current.loading).toBe(true); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toEqual({ hello: 'world 1' }); + + await waitForNextUpdate(); + expect(result.current.loading).toBe(false); + expect(result.current.error).toBeInstanceOf(ApolloError); + expect(result.current.data).toEqual({ hello: 'world 1' }); + + result.current.refetch(); + await waitForNextUpdate(); + expect(result.current.loading).toBe(true); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toEqual({ hello: 'world 1' }); + + await waitForNextUpdate(); + expect(result.current.loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toEqual({ hello: 'world 2' }); + }); + describe('refetchWritePolicy', () => { const query = gql` query GetPrimes ($min: number, $max: number) { @@ -2048,7 +2173,7 @@ describe('useQuery Hook', () => { request: { query, variables: { - someVar: 'abc123' + name: 'Luke' } }, result: { data: undefined }, @@ -2057,7 +2182,7 @@ describe('useQuery Hook', () => { request: { query, variables: { - someVar: 'abc123' + name: 'Luke' } }, result: { data: peopleData }, @@ -2078,7 +2203,7 @@ describe('useQuery Hook', () => { const { result, waitForNextUpdate } = renderHook( () => useQuery(query, { - variables: { someVar: 'abc123' }, + variables: { name: 'Luke' }, partialRefetch: true, notifyOnNetworkStatusChange: true, }),