fix: add test that cache is updated in useUpdateOptionListMutation (#…

…14117) Co-authored-by: Tomas Engebretsen <[email protected]>
Altinn · Nov 22, 2024 · 460ceec · 460ceec
1 parent 77e8aa2
commit 460ceec
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts
@@ -1,16 +1,21 @@
 import { app, org } from '@studio/testing/testids';
-import { queriesMock } from 'app-shared/mocks/queriesMock';
-import { renderHookWithProviders } from 'app-shared/mocks/renderHookWithProviders';
+import { queriesMock } from '../../mocks/queriesMock';
+import { renderHookWithProviders } from '../../mocks/renderHookWithProviders';
 import {
   type UpdateOptionListMutationArgs,
   useUpdateOptionListMutation,
 } from './useUpdateOptionListMutation';
-import type { Option } from 'app-shared/types/Option';
+import type { Option } from '../../types/Option';
+import { createQueryClientMock } from '../../mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
 
 // Test data:
 const optionListId = 'test';
-const optionsList: Option[] = [{ value: 'test', label: 'test' }];
-const args: UpdateOptionListMutationArgs = { optionListId: optionListId, optionsList: optionsList };
+const option1: Option = { value: 'test', label: 'test' };
+const optionsList: Option[] = [option1];
+const updatedOptionsList: Option[] = [{ ...option1, description: 'description' }];
+const args: UpdateOptionListMutationArgs = { optionListId, optionsList };
+const updateOptionList = jest.fn().mockImplementation(() => Promise.resolve(updatedOptionsList));
 
 describe('useUpdateOptionListMutation', () => {
   test('Calls useUpdateOptionList with correct parameters', async () => {
@@ -21,4 +26,16 @@ describe('useUpdateOptionListMutation', () => {
     expect(queriesMock.updateOptionList).toHaveBeenCalledTimes(1);
     expect(queriesMock.updateOptionList).toHaveBeenCalledWith(org, app, optionListId, optionsList);
   });
+
+  test('Sets the updated option list on the cache', async () => {
+    const queryClient = createQueryClientMock();
+    const renderUpdateOptionListMutationResult = renderHookWithProviders(
+      () => useUpdateOptionListMutation(org, app),
+      { queries: { updateOptionList }, queryClient },
+    ).result;
+    await renderUpdateOptionListMutationResult.current.mutateAsync(args);
+    expect(queryClient.getQueryData([QueryKey.OptionLists, org, app])).toEqual({
+      test: updatedOptionsList,
+    });
+  });
 });
diff --git a/frontend/packages/shared/src/mocks/mocks.ts b/frontend/packages/shared/src/mocks/mocks.ts
@@ -26,7 +26,6 @@ import type { Organization } from 'app-shared/types/Organization';
 import type { KubernetesDeployment } from 'app-shared/types/api/KubernetesDeployment';
 import type { DeploymentsResponse } from 'app-shared/types/api/DeploymentsResponse';
 import type { AppRelease } from 'app-shared/types/AppRelease';
-import type { Option } from 'app-shared/types/Option';
 
 export const build: Build = {
   id: '',
@@ -245,7 +244,3 @@ export const searchRepositoryResponse: SearchRepositoryResponse = {
   totalCount: 0,
   totalPages: 0,
 };
-
-export const updateOptionListResponse: Option[] = [
-  { value: '', label: '', description: '', helpText: '' },
-];
diff --git a/frontend/packages/shared/src/mocks/queriesMock.ts b/frontend/packages/shared/src/mocks/queriesMock.ts
@@ -63,15 +63,13 @@ import {
   textResourcesWithLanguage,
   user,
   validation,
-  updateOptionListResponse,
 } from './mocks';
 import type { FormLayoutsResponseV3 } from 'app-shared/types/api/FormLayoutsResponseV3';
 import type { DeploymentsResponse } from 'app-shared/types/api/DeploymentsResponse';
 import type { RepoDiffResponse } from 'app-shared/types/api/RepoDiffResponse';
 import type { ExternalImageUrlValidationResponse } from 'app-shared/types/api/ExternalImageUrlValidationResponse';
 import type { MaskinportenScope } from 'app-shared/types/MaskinportenScope';
 import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
-import type { Option } from 'app-shared/types/Option';
 
 export const queriesMock: ServicesContextProps = {
   // Queries
@@ -221,9 +219,7 @@ export const queriesMock: ServicesContextProps = {
   updateAppPolicy: jest.fn().mockImplementation(() => Promise.resolve()),
   updateAppMetadata: jest.fn().mockImplementation(() => Promise.resolve()),
   updateAppConfig: jest.fn().mockImplementation(() => Promise.resolve()),
-  updateOptionList: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve<Option[]>(updateOptionListResponse)),
+  updateOptionList: jest.fn().mockImplementation(() => Promise.resolve()),
   uploadDataModel: jest.fn().mockImplementation(() => Promise.resolve<JsonSchema>({})),
   uploadOptionList: jest.fn().mockImplementation(() => Promise.resolve()),
   upsertTextResources: jest

diff --git a/...mponents/config/editModal/EditOptions/OptionTabs/EditOptionList/OptionListEditor.test.tsx b/...mponents/config/editModal/EditOptions/OptionTabs/EditOptionList/OptionListEditor.test.tsx
@@ -7,11 +7,14 @@ import { textMock } from '@studio/testing/mocks/i18nMock';
 import { renderWithProviders } from '../../../../../../testing/mocks';
 import userEvent, { type UserEvent } from '@testing-library/user-event';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
-import { queriesMock } from 'app-shared/mocks/queriesMock';
 import { app, org } from '@studio/testing/testids';
 
 // Test data:
 const mockComponentOptionsId = 'options';
+const getOptionLists = jest.fn().mockImplementation(() => Promise.resolve<OptionsLists>(apiResult));
+const updateOptionList = jest
+  .fn()
+  .mockImplementation(() => Promise.resolve<Option[]>([{ value: '', label: '' }]));
 
 const apiResult: OptionsLists = {
   options: [
@@ -22,9 +25,7 @@ const apiResult: OptionsLists = {
 };
 
 describe('OptionListEditor', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+  afterEach(jest.clearAllMocks);
 
   it('should render a spinner when there is no data', () => {
     renderOptionListEditor({
@@ -110,8 +111,8 @@ describe('OptionListEditor', () => {
     });
     await user.type(textBox, 'test');
 
-    await waitFor(() => expect(queriesMock.updateOptionList).toHaveBeenCalledTimes(1));
-    expect(queriesMock.updateOptionList).toHaveBeenCalledWith(
+    await waitFor(() => expect(updateOptionList).toHaveBeenCalledTimes(1));
+    expect(updateOptionList).toHaveBeenCalledWith(
       org,
       app,
       mockComponentOptionsId,
@@ -129,20 +130,15 @@ const openModal = async (user: UserEvent) => {
 
 const renderOptionListEditor = ({ previewContextProps = {}, queries = {} } = {}) => {
   return renderWithProviders(<OptionListEditor optionsId={mockComponentOptionsId} />, {
-    queries: {
-      getOptionLists: jest.fn().mockImplementation(() => Promise.resolve<OptionsLists>(apiResult)),
-      ...queries,
-    },
+    queries: { getOptionLists, updateOptionList, ...queries },
     queryClient: createQueryClientMock(),
     previewContextProps,
   });
 };
 
 const renderOptionListEditorAndWaitForSpinnerToBeRemoved = async ({
   previewContextProps = {},
-  queries = {
-    getOptionLists: jest.fn().mockImplementation(() => Promise.resolve<OptionsLists>(apiResult)),
-  },
+  queries = {},
 } = {}) => {
   const view = renderOptionListEditor({ previewContextProps, queries });
   await waitForElementToBeRemoved(() => {