mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
TWNTY-3381 - Add tests for modules/apollo
(#3530)
Add tests for `modules/apollo` Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com>
This commit is contained in:
parent
aa8d689e3e
commit
d8c9a94e14
@ -240,6 +240,7 @@
|
||||
"http-server": "^14.1.1",
|
||||
"jest": "29.7.0",
|
||||
"jest-environment-jsdom": "29.7.0",
|
||||
"jest-fetch-mock": "^3.0.3",
|
||||
"msw": "^2.0.11",
|
||||
"msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
|
||||
"nx": "^17.2.8",
|
||||
|
@ -0,0 +1,96 @@
|
||||
import { MemoryRouter, useLocation } from 'react-router-dom';
|
||||
import { ApolloError, gql } from '@apollo/client';
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useApolloFactory } from '../useApolloFactory';
|
||||
|
||||
enableFetchMocks();
|
||||
|
||||
const mockNavigate = jest.fn();
|
||||
|
||||
jest.mock('react-router-dom', () => {
|
||||
const initialRouter = jest.requireActual('react-router-dom');
|
||||
|
||||
return {
|
||||
...initialRouter,
|
||||
useNavigate: () => mockNavigate,
|
||||
};
|
||||
});
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<MemoryRouter
|
||||
initialEntries={['/sign-in', '/verify', '/opportunities']}
|
||||
initialIndex={2}
|
||||
>
|
||||
{children}
|
||||
</MemoryRouter>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
describe('useApolloFactory', () => {
|
||||
it('should work as expected', () => {
|
||||
const { result } = renderHook(() => useApolloFactory(), {
|
||||
wrapper: Wrapper,
|
||||
});
|
||||
|
||||
const res = result.current;
|
||||
|
||||
expect(res).toBeDefined();
|
||||
expect(res).toHaveProperty('link');
|
||||
expect(res).toHaveProperty('cache');
|
||||
expect(res).toHaveProperty('query');
|
||||
});
|
||||
|
||||
it('should navigate to /sign-in on unauthenticated error', async () => {
|
||||
const errors = [
|
||||
{
|
||||
extensions: {
|
||||
code: 'UNAUTHENTICATED',
|
||||
},
|
||||
},
|
||||
];
|
||||
fetchMock.mockResponse(() =>
|
||||
Promise.resolve({
|
||||
body: JSON.stringify({
|
||||
data: {},
|
||||
errors,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const location = useLocation();
|
||||
return { factory: useApolloFactory(), location };
|
||||
},
|
||||
{
|
||||
wrapper: Wrapper,
|
||||
},
|
||||
);
|
||||
|
||||
expect(result.current.location.pathname).toBe('/opportunities');
|
||||
|
||||
try {
|
||||
await act(async () => {
|
||||
await result.current.factory.mutate({
|
||||
mutation: gql`
|
||||
mutation CreateEvent($type: String!, $data: JSON!) {
|
||||
createEvent(type: $type, data: $data) {
|
||||
success
|
||||
}
|
||||
}
|
||||
`,
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
expect(error).toBeInstanceOf(ApolloError);
|
||||
expect((error as ApolloError).message).toBe('Error message not found.');
|
||||
|
||||
expect(mockNavigate).toHaveBeenCalled();
|
||||
expect(mockNavigate).toHaveBeenCalledWith('/sign-in');
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,100 @@
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
|
||||
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
|
||||
import { optimisticEffectState } from '@/apollo/optimistic-effect/states/optimisticEffectState';
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<MockedProvider addTypename={false}>
|
||||
<RecoilRoot>{children}</RecoilRoot>
|
||||
</MockedProvider>
|
||||
);
|
||||
|
||||
describe('useOptimisticEffect', () => {
|
||||
it('should work as expected', async () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const optimisticEffect = useRecoilValue(optimisticEffectState);
|
||||
const client = useApolloClient();
|
||||
const { findManyRecordsQuery } = useObjectMetadataItem({
|
||||
objectNameSingular: 'person',
|
||||
});
|
||||
return {
|
||||
...useOptimisticEffect({ objectNameSingular: 'person' }),
|
||||
optimisticEffect,
|
||||
cache: client.cache,
|
||||
findManyRecordsQuery,
|
||||
};
|
||||
},
|
||||
{
|
||||
wrapper: Wrapper,
|
||||
},
|
||||
);
|
||||
|
||||
const {
|
||||
registerOptimisticEffect,
|
||||
unregisterOptimisticEffect,
|
||||
triggerOptimisticEffects,
|
||||
optimisticEffect,
|
||||
findManyRecordsQuery,
|
||||
} = result.current;
|
||||
|
||||
expect(registerOptimisticEffect).toBeDefined();
|
||||
expect(typeof registerOptimisticEffect).toBe('function');
|
||||
expect(optimisticEffect).toEqual({});
|
||||
|
||||
const optimisticEffectDefinition = {
|
||||
variables: {},
|
||||
definition: {
|
||||
typename: 'Person',
|
||||
resolver: () => ({
|
||||
people: [],
|
||||
pageInfo: {
|
||||
endCursor: '',
|
||||
hasNextPage: false,
|
||||
hasPreviousPage: false,
|
||||
startCursor: '',
|
||||
},
|
||||
edges: [],
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
act(() => {
|
||||
registerOptimisticEffect(optimisticEffectDefinition);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.optimisticEffect).toHaveProperty('Person-{}');
|
||||
});
|
||||
|
||||
expect(
|
||||
result.current.cache.readQuery({ query: findManyRecordsQuery }),
|
||||
).toBeNull();
|
||||
|
||||
act(() => {
|
||||
triggerOptimisticEffects({
|
||||
typename: 'Person',
|
||||
createdRecords: [{ id: 'id-0' }],
|
||||
});
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
result.current.cache.readQuery({ query: findManyRecordsQuery }),
|
||||
).toHaveProperty('people');
|
||||
});
|
||||
|
||||
act(() => {
|
||||
unregisterOptimisticEffect(optimisticEffectDefinition);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.optimisticEffect).not.toHaveProperty('Person-{}');
|
||||
expect(result.current.optimisticEffect).toEqual({});
|
||||
});
|
||||
});
|
||||
});
|
@ -0,0 +1,50 @@
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<MockedProvider addTypename={false}>
|
||||
<RecoilRoot>{children}</RecoilRoot>
|
||||
</MockedProvider>
|
||||
);
|
||||
|
||||
describe('useOptimisticEvict', () => {
|
||||
it('should perform cache eviction', async () => {
|
||||
const mockedData = {
|
||||
'someType:1': { __typename: 'someType', id: '1', fieldName: 'value1' },
|
||||
'someType:2': { __typename: 'someType', id: '2', fieldName: 'value2' },
|
||||
'otherType:1': { __typename: 'otherType', id: '1', fieldName: 'value3' },
|
||||
};
|
||||
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const { cache } = useApolloClient();
|
||||
cache.restore(mockedData);
|
||||
|
||||
return {
|
||||
...useOptimisticEvict(),
|
||||
cache,
|
||||
};
|
||||
},
|
||||
{
|
||||
wrapper: Wrapper,
|
||||
},
|
||||
);
|
||||
|
||||
const { performOptimisticEvict, cache } = result.current;
|
||||
|
||||
act(() => {
|
||||
performOptimisticEvict('someType', 'fieldName', 'value1');
|
||||
});
|
||||
|
||||
const cacheSnapshot = cache.extract();
|
||||
|
||||
expect(cacheSnapshot).toEqual({
|
||||
'someType:2': { __typename: 'someType', id: '2', fieldName: 'value2' },
|
||||
'otherType:1': { __typename: 'otherType', id: '1', fieldName: 'value3' },
|
||||
});
|
||||
});
|
||||
});
|
@ -0,0 +1,141 @@
|
||||
import { ApolloError, gql, InMemoryCache } from '@apollo/client';
|
||||
import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
|
||||
|
||||
import { ApolloFactory, Options } from '../apollo.factory';
|
||||
|
||||
enableFetchMocks();
|
||||
|
||||
jest.mock('@/auth/services/AuthService', () => {
|
||||
const initialAuthService = jest.requireActual('@/auth/services/AuthService');
|
||||
return {
|
||||
...initialAuthService,
|
||||
renewToken: jest.fn().mockReturnValue(
|
||||
Promise.resolve({
|
||||
accessToken: { token: 'newAccessToken', expiresAt: '' },
|
||||
refreshToken: { token: 'newRefreshToken', expiresAt: '' },
|
||||
}),
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const mockOnError = jest.fn();
|
||||
const mockOnNetworkError = jest.fn();
|
||||
|
||||
const createMockOptions = (): Options<any> => ({
|
||||
uri: 'http://localhost:3000',
|
||||
initialTokenPair: {
|
||||
accessToken: { token: 'mockAccessToken', expiresAt: '' },
|
||||
refreshToken: { token: 'mockRefreshToken', expiresAt: '' },
|
||||
},
|
||||
cache: new InMemoryCache(),
|
||||
isDebugMode: true,
|
||||
onError: mockOnError,
|
||||
onNetworkError: mockOnNetworkError,
|
||||
});
|
||||
|
||||
const makeRequest = async () => {
|
||||
const options = createMockOptions();
|
||||
const apolloFactory = new ApolloFactory(options);
|
||||
|
||||
const client = apolloFactory.getClient();
|
||||
|
||||
await client.mutate({
|
||||
mutation: gql`
|
||||
mutation CreateEvent($type: String!, $data: JSON!) {
|
||||
createEvent(type: $type, data: $data) {
|
||||
success
|
||||
}
|
||||
}
|
||||
`,
|
||||
});
|
||||
};
|
||||
|
||||
describe('xApolloFactory', () => {
|
||||
it('should create an instance of ApolloFactory', () => {
|
||||
const options = createMockOptions();
|
||||
const apolloFactory = new ApolloFactory(options);
|
||||
expect(apolloFactory).toBeInstanceOf(ApolloFactory);
|
||||
});
|
||||
|
||||
it('should call onError when encountering "Unauthorized" error', async () => {
|
||||
const errors = [{ message: 'Unauthorized' }];
|
||||
fetchMock.mockResponse(() =>
|
||||
Promise.resolve({
|
||||
body: JSON.stringify({
|
||||
data: {},
|
||||
errors,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
try {
|
||||
await makeRequest();
|
||||
} catch (error) {
|
||||
expect(error).toBeInstanceOf(ApolloError);
|
||||
expect((error as ApolloError).message).toBe('Unauthorized');
|
||||
expect(mockOnError).toHaveBeenCalledWith(errors);
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
it('should call onError when encountering "UNAUTHENTICATED" error', async () => {
|
||||
const errors = [
|
||||
{
|
||||
extensions: {
|
||||
code: 'UNAUTHENTICATED',
|
||||
},
|
||||
},
|
||||
];
|
||||
fetchMock.mockResponse(() =>
|
||||
Promise.resolve({
|
||||
body: JSON.stringify({
|
||||
data: {},
|
||||
errors,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
try {
|
||||
await makeRequest();
|
||||
} catch (error) {
|
||||
expect(error).toBeInstanceOf(ApolloError);
|
||||
expect((error as ApolloError).message).toBe('Error message not found.');
|
||||
expect(mockOnError).toHaveBeenCalledWith(errors);
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
it('should call onNetworkError when encountering a network error', async () => {
|
||||
const errors = [
|
||||
{
|
||||
message: 'Unknown error',
|
||||
},
|
||||
];
|
||||
fetchMock.mockResponse(() =>
|
||||
Promise.resolve({
|
||||
body: JSON.stringify({
|
||||
data: {},
|
||||
errors,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
try {
|
||||
await makeRequest();
|
||||
} catch (error) {
|
||||
expect(error).toBeInstanceOf(ApolloError);
|
||||
expect((error as ApolloError).message).toBe('Unknown error');
|
||||
expect(mockOnError).toHaveBeenCalledWith(errors);
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
it('should call renewToken when encountering any error', async () => {
|
||||
const mockError = { message: 'Unknown error' };
|
||||
fetchMock.mockReject(() => Promise.reject(mockError));
|
||||
|
||||
try {
|
||||
await makeRequest();
|
||||
} catch (error) {
|
||||
expect(error).toBeInstanceOf(ApolloError);
|
||||
expect((error as ApolloError).message).toBe('Unknown error');
|
||||
expect(mockOnNetworkError).toHaveBeenCalledWith(mockError);
|
||||
}
|
||||
}, 10000);
|
||||
});
|
20
yarn.lock
20
yarn.lock
@ -21095,7 +21095,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cross-fetch@npm:^3.1.5":
|
||||
"cross-fetch@npm:^3.0.4, cross-fetch@npm:^3.1.5":
|
||||
version: 3.1.8
|
||||
resolution: "cross-fetch@npm:3.1.8"
|
||||
dependencies:
|
||||
@ -28901,6 +28901,16 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jest-fetch-mock@npm:^3.0.3":
|
||||
version: 3.0.3
|
||||
resolution: "jest-fetch-mock@npm:3.0.3"
|
||||
dependencies:
|
||||
cross-fetch: "npm:^3.0.4"
|
||||
promise-polyfill: "npm:^8.1.3"
|
||||
checksum: 21ffe8c902ca5adafa7ed61760e100e4c290e99b0b487645f5bb92938ea64c2d1d9dc8af46e65fb7917d6237586067d53af756583a77330dbb4fbda079a63c29
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jest-get-type@npm:^29.6.3":
|
||||
version: 29.6.3
|
||||
resolution: "jest-get-type@npm:29.6.3"
|
||||
@ -36887,6 +36897,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"promise-polyfill@npm:^8.1.3":
|
||||
version: 8.3.0
|
||||
resolution: "promise-polyfill@npm:8.3.0"
|
||||
checksum: 97141f07a31a6be135ec9ed53700a3423a771cabec0ba5e08fcb2bf8cfda855479ff70e444fceb938f560be42b450cd032c14f4a940ed2ad1e5b4dcb78368dce
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"promise-retry@npm:^2.0.1":
|
||||
version: 2.0.1
|
||||
resolution: "promise-retry@npm:2.0.1"
|
||||
@ -42560,6 +42577,7 @@ __metadata:
|
||||
immer: "npm:^10.0.2"
|
||||
jest: "npm:29.7.0"
|
||||
jest-environment-jsdom: "npm:29.7.0"
|
||||
jest-fetch-mock: "npm:^3.0.3"
|
||||
jest-mock-extended: "npm:^3.0.4"
|
||||
js-cookie: "npm:^3.0.5"
|
||||
js-levenshtein: "npm:^1.1.6"
|
||||
|
Loading…
Reference in New Issue
Block a user