add deBounce to update-code-list-function

Altinn · Nov 26, 2024 · efd46f2 · efd46f2
1 parent 49c22a1
commit efd46f2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { AppContentLibrary } from './AppContentLibrary';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { renderWithProviders } from '../../test/mocks';
@@ -11,11 +11,13 @@ import type { UserEvent } from '@testing-library/user-event';
 import userEvent from '@testing-library/user-event';
 import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
 import type { CodeList } from '@studio/components';
+import { AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS } from 'app-shared/constants';
 
 const uploadCodeListButtonTextMock = 'Upload Code List';
 const updateCodeListButtonTextMock = 'Update Code List';
 const codeListNameMock = 'codeListNameMock';
 const codeListMock: CodeList = [{ value: '', label: '' }];
+jest.useFakeTimers({ advanceTimers: true });
 jest.mock(
   '../../../libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList',
   () => ({
@@ -81,6 +83,7 @@ describe('AppContentLibrary', () => {
     await goToLibraryPage(user, 'code_lists');
     const updateCodeListButton = screen.getByRole('button', { name: updateCodeListButtonTextMock });
     await user.click(updateCodeListButton);
+    await waitFor(() => jest.advanceTimersByTime(AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS));
     expect(queriesMock.updateOptionList).toHaveBeenCalledTimes(1);
     expect(queriesMock.updateOptionList).toHaveBeenCalledWith(
       org,
@@ -89,6 +92,18 @@ describe('AppContentLibrary', () => {
       codeListMock,
     );
   });
+
+  it('deBounces the onUpdateOptionList function', async () => {
+    const user = userEvent.setup();
+    renderAppContentLibrary(optionListsMock);
+    await goToLibraryPage(user, 'code_lists');
+    const updateCodeListButton = screen.getByRole('button', { name: updateCodeListButtonTextMock });
+    await user.click(updateCodeListButton);
+    expect(queriesMock.updateOptionList).not.toHaveBeenCalled();
+
+    await waitFor(() => jest.advanceTimersByTime(AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS));
+    expect(queriesMock.updateOptionList).toHaveBeenCalledTimes(1);
+  });
 });
 
 const getLibraryPageTile = (libraryPage: string) =>

diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
@@ -7,6 +7,8 @@ import { convertOptionListsToCodeLists } from './utils/convertOptionListsToCodeL
 import { StudioPageSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { useAddOptionListMutation, useUpdateOptionListMutation } from 'app-shared/hooks/mutations';
+import { AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS } from 'app-shared/constants';
+import { useDebounce } from '@studio/hooks';
 
 export function AppContentLibrary(): React.ReactElement {
   const { org, app } = useStudioEnvironmentParams();
@@ -18,6 +20,7 @@ export function AppContentLibrary(): React.ReactElement {
   } = useOptionListsQuery(org, app);
   const { mutate: uploadOptionList } = useAddOptionListMutation(org, app);
   const { mutate: updateOptionList } = useUpdateOptionListMutation(org, app);
+  const { debounce } = useDebounce({ debounceTimeInMs: AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS });
 
   if (optionListsPending)
     return <StudioPageSpinner spinnerTitle={t('general.loading')}></StudioPageSpinner>;
@@ -29,7 +32,7 @@ export function AppContentLibrary(): React.ReactElement {
   };
 
   const handleUpdate = ({ title, codeList }: CodeListWithMetadata) => {
-    updateOptionList({ optionListId: title, optionsList: codeList });
+    debounce(() => updateOptionList({ optionListId: title, optionsList: codeList }));
   };
 
   const { getContentResourceLibrary } = new ResourceContentLibraryImpl({