From 15ba42a49e4d355e114eedd0ff4d19eba9a2e3ca Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Tue, 18 Oct 2022 10:27:44 +0100 Subject: [PATCH] fix: tests with useRelation --- .../tests/RelationInputDataManger.test.js | 16 ------- .../useRelation/tests/useRelation.test.js | 46 +++++++++++++------ .../hooks/useRelation/useRelation.js | 4 +- 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js b/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js index 785c82375b..e5234fee63 100644 --- a/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js +++ b/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js @@ -232,22 +232,6 @@ describe('RelationInputDataManager', () => { 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 if entity is created and field is not allowed', async () => { useCMEditViewDataManager.mockReturnValueOnce({ isCreatingEntry: true, diff --git a/packages/core/admin/admin/src/content-manager/hooks/useRelation/tests/useRelation.test.js b/packages/core/admin/admin/src/content-manager/hooks/useRelation/tests/useRelation.test.js index ca75f69580..2204d19c56 100644 --- a/packages/core/admin/admin/src/content-manager/hooks/useRelation/tests/useRelation.test.js +++ b/packages/core/admin/admin/src/content-manager/hooks/useRelation/tests/useRelation.test.js @@ -33,13 +33,14 @@ const ComponentFixture = ({ children }) => ( {children} ); -function setup(name = 'test', args) { +function setup(args, name = 'test') { return new Promise((resolve) => { act(() => { resolve( renderHook( () => useRelation(name, { + name, relation: { enabled: true, endpoint: '/', @@ -47,6 +48,11 @@ function setup(name = 'test', args) { limit: 10, ...(args?.relation?.pageParams ?? {}), }, + normalizeArguments: { + mainFieldName: 'name', + shouldAddLink: false, + targetModel: 'api::tag.tag', + }, ...(args?.relation ?? {}), }, @@ -71,19 +77,31 @@ describe('useRelation', () => { jest.clearAllMocks(); }); - test('fetch relations', async () => { - const { result, waitForNextUpdate } = await setup(undefined); + test('fetch relations and calls onLoadRelationsCallback', async () => { + 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('/', { params: { limit: 10, 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 () => { @@ -98,7 +116,7 @@ describe('useRelation', () => { }, }); - const { result, waitForNextUpdate } = await setup(undefined); + const { result, waitForNextUpdate } = await setup(); await waitForNextUpdate(); @@ -108,7 +126,7 @@ describe('useRelation', () => { }); test('fetch relations with different limit', async () => { - const { waitForNextUpdate } = await setup(undefined, { + const { waitForNextUpdate } = await setup({ relation: { pageParams: { limit: 5 } }, }); @@ -123,7 +141,7 @@ describe('useRelation', () => { }); 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(); }); @@ -154,7 +172,7 @@ describe('useRelation', () => { }, }); - const { result, waitForNextUpdate } = await setup(undefined); + const { result, waitForNextUpdate } = await setup(); await waitForNextUpdate(); @@ -190,7 +208,7 @@ describe('useRelation', () => { }, }); - const { result, waitForNextUpdate } = await setup(undefined); + const { result, waitForNextUpdate } = await setup(); await waitForNextUpdate(); @@ -232,7 +250,7 @@ describe('useRelation', () => { }); 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 } }, }); @@ -260,7 +278,7 @@ describe('useRelation', () => { }); test('fetch search next page, if there is one', async () => { - const { result, waitForNextUpdate } = await setup(undefined); + const { result, waitForNextUpdate } = await setup(); const spy = jest .fn() @@ -297,7 +315,7 @@ describe('useRelation', () => { }); 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({ data: { results: [], pagination: { page: 1, pageCount: 1 } }, diff --git a/packages/core/admin/admin/src/content-manager/hooks/useRelation/useRelation.js b/packages/core/admin/admin/src/content-manager/hooks/useRelation/useRelation.js index f6efe75f1d..e2622087d1 100644 --- a/packages/core/admin/admin/src/content-manager/hooks/useRelation/useRelation.js +++ b/packages/core/admin/admin/src/content-manager/hooks/useRelation/useRelation.js @@ -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, { cacheTime: 0, @@ -91,7 +91,7 @@ export const useRelation = (cacheKey, { name, relation, search }) => { const { status, data } = relationsRes; 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 const normalizedResults = normalizeRelations(data.pages?.at(-1)?.results, normalizeArguments);