fix: tests with useRelation

This commit is contained in:
Josh 2022-10-18 10:27:44 +01:00
parent 1861f182e9
commit 15ba42a49e
3 changed files with 34 additions and 32 deletions

View File

@ -232,22 +232,6 @@ describe('RelationInputDataManager', () => {
expect(container.querySelector('input')).toHaveAttribute('disabled'); expect(container.querySelector('input')).toHaveAttribute('disabled');
}); });
/**
* TODO: this needs to be moved to `useRelation` hook.
*/
test.skip('Stores the loaded relations in the store', async () => {
const { loadRelation } = useCMEditViewDataManager();
setup();
expect(loadRelation).toBeCalledWith({
target: {
name: 'relation',
value: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })],
},
});
});
test('Renders <NotAllowedInput /> if entity is created and field is not allowed', async () => { test('Renders <NotAllowedInput /> if entity is created and field is not allowed', async () => {
useCMEditViewDataManager.mockReturnValueOnce({ useCMEditViewDataManager.mockReturnValueOnce({
isCreatingEntry: true, isCreatingEntry: true,

View File

@ -33,13 +33,14 @@ const ComponentFixture = ({ children }) => (
<QueryClientProvider client={client}>{children}</QueryClientProvider> <QueryClientProvider client={client}>{children}</QueryClientProvider>
); );
function setup(name = 'test', args) { function setup(args, name = 'test') {
return new Promise((resolve) => { return new Promise((resolve) => {
act(() => { act(() => {
resolve( resolve(
renderHook( renderHook(
() => () =>
useRelation(name, { useRelation(name, {
name,
relation: { relation: {
enabled: true, enabled: true,
endpoint: '/', endpoint: '/',
@ -47,6 +48,11 @@ function setup(name = 'test', args) {
limit: 10, limit: 10,
...(args?.relation?.pageParams ?? {}), ...(args?.relation?.pageParams ?? {}),
}, },
normalizeArguments: {
mainFieldName: 'name',
shouldAddLink: false,
targetModel: 'api::tag.tag',
},
...(args?.relation ?? {}), ...(args?.relation ?? {}),
}, },
@ -71,19 +77,31 @@ describe('useRelation', () => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
test('fetch relations', async () => { test('fetch relations and calls onLoadRelationsCallback', async () => {
const { result, waitForNextUpdate } = await setup(undefined); const onLoadRelationsCallbackMock = jest.fn();
const { waitFor } = await setup({
relation: {
onLoadRelationsCallback: onLoadRelationsCallbackMock,
},
});
await waitForNextUpdate(); await waitFor(() => expect(axiosInstance.get).toBeCalledTimes(1));
expect(result.current.relations.isSuccess).toBe(true);
expect(axiosInstance.get).toBeCalledTimes(1);
expect(axiosInstance.get).toBeCalledWith('/', { expect(axiosInstance.get).toBeCalledWith('/', {
params: { params: {
limit: 10, limit: 10,
page: 1, page: 1,
}, },
}); });
await waitFor(() =>
expect(onLoadRelationsCallbackMock).toBeCalledWith({
target: {
name: 'test',
value: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })],
},
})
);
}); });
test('fetch and normalize relations for xToOne', async () => { test('fetch and normalize relations for xToOne', async () => {
@ -98,7 +116,7 @@ describe('useRelation', () => {
}, },
}); });
const { result, waitForNextUpdate } = await setup(undefined); const { result, waitForNextUpdate } = await setup();
await waitForNextUpdate(); await waitForNextUpdate();
@ -108,7 +126,7 @@ describe('useRelation', () => {
}); });
test('fetch relations with different limit', async () => { test('fetch relations with different limit', async () => {
const { waitForNextUpdate } = await setup(undefined, { const { waitForNextUpdate } = await setup({
relation: { pageParams: { limit: 5 } }, relation: { pageParams: { limit: 5 } },
}); });
@ -123,7 +141,7 @@ describe('useRelation', () => {
}); });
test('does not fetch relations if it was not enabled', async () => { test('does not fetch relations if it was not enabled', async () => {
await setup(undefined, { relation: { enabled: false } }); await setup({ relation: { enabled: false } });
expect(axiosInstance.get).not.toBeCalled(); expect(axiosInstance.get).not.toBeCalled();
}); });
@ -154,7 +172,7 @@ describe('useRelation', () => {
}, },
}); });
const { result, waitForNextUpdate } = await setup(undefined); const { result, waitForNextUpdate } = await setup();
await waitForNextUpdate(); await waitForNextUpdate();
@ -190,7 +208,7 @@ describe('useRelation', () => {
}, },
}); });
const { result, waitForNextUpdate } = await setup(undefined); const { result, waitForNextUpdate } = await setup();
await waitForNextUpdate(); await waitForNextUpdate();
@ -232,7 +250,7 @@ describe('useRelation', () => {
}); });
test('does fetch search results with a different limit', async () => { test('does fetch search results with a different limit', async () => {
const { result, waitForNextUpdate } = await setup(undefined, { const { result, waitForNextUpdate } = await setup({
search: { pageParams: { limit: 5 } }, search: { pageParams: { limit: 5 } },
}); });
@ -260,7 +278,7 @@ describe('useRelation', () => {
}); });
test('fetch search next page, if there is one', async () => { test('fetch search next page, if there is one', async () => {
const { result, waitForNextUpdate } = await setup(undefined); const { result, waitForNextUpdate } = await setup();
const spy = jest const spy = jest
.fn() .fn()
@ -297,7 +315,7 @@ describe('useRelation', () => {
}); });
test("does not fetch search next page, if there isn't one", async () => { test("does not fetch search next page, if there isn't one", async () => {
const { result, waitForNextUpdate } = await setup(undefined); const { result, waitForNextUpdate } = await setup();
const spy = jest.fn().mockResolvedValueOnce({ const spy = jest.fn().mockResolvedValueOnce({
data: { results: [], pagination: { page: 1, pageCount: 1 } }, data: { results: [], pagination: { page: 1, pageCount: 1 } },

View File

@ -42,7 +42,7 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
} }
}; };
const { onLoadRelationsCallback, normalizeArguments } = relation; const { onLoadRelationsCallback, normalizeArguments = {} } = relation;
const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, { const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
cacheTime: 0, cacheTime: 0,
@ -91,7 +91,7 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
const { status, data } = relationsRes; const { status, data } = relationsRes;
useEffect(() => { useEffect(() => {
if (status === 'success' && data && data.pages?.at(-1)?.results) { if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
// everytime we fetch, we normalize prior to adding to redux // everytime we fetch, we normalize prior to adding to redux
const normalizedResults = normalizeRelations(data.pages?.at(-1)?.results, normalizeArguments); const normalizedResults = normalizeRelations(data.pages?.at(-1)?.results, normalizeArguments);