Add tests for profile setting selector component

Author: zepheiryan

src/features/edit/components/EditSection/ProfileSettingsSelector.test.tsx

@@ -0,0 +1,98 @@
+import { setInitialGlobalState } from '@/test/__mocks__/store';
+
+import { MemoryRouter } from 'react-router-dom';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { useProfileStore } from '@/store';
+
+import { ProfileSettingsSelector } from './ProfileSettingsSelector';
+
+const mockGetRecordProfileId = jest.fn();
+
+jest.mock('@/common/helpers/record.helper', () => ({
+  getRecordProfileId: () => mockGetRecordProfileId(),
+}));
+
+describe('ProfileSettingsSelector', () => {
+  const mockProfileId = 'profile-id';
+  const mockSetSelectedProfileSettingsId = jest.fn();
+
+  const renderComponent = () => {
+    setInitialGlobalState([
+      {
+        store: useProfileStore,
+        state: {
+          selectedProfileSettingsId: '32',
+          setSelectedProfileSettingsId: mockSetSelectedProfileSettingsId,
+        },
+      },
+    ]);
+
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    queryClient.setQueryData(
+      ['profileSettingsMeta', mockProfileId],
+      [
+        {
+          id: 15,
+          name: 'fifteen',
+        },
+        {
+          id: 32,
+          name: 'thirty-two',
+        },
+      ],
+    );
+
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <ProfileSettingsSelector />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  };
+
+  it('renders the component', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('profile-settings-selector-button')).toBeInTheDocument();
+  });
+
+  it('clicking button shows menu', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
+
+    expect(screen.getByTestId('profile-settings-selector-menu')).toBeInTheDocument();
+  });
+
+  it('profile setting currently in use is disabled', async () => {
+    mockGetRecordProfileId.mockReturnValue(mockProfileId);
+
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
+
+    await waitFor(() => {
+      expect(screen.getByText('thirty-two')).toBeDisabled();
+    });
+  });
+
+  it('clicking a setting selects it', async () => {
+    mockGetRecordProfileId.mockReturnValue(mockProfileId);
+
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
+    fireEvent.click(screen.getByText('fifteen'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('profile-settings-selector-menu')).not.toBeInTheDocument();
+      expect(mockSetSelectedProfileSettingsId).toHaveBeenCalledWith('15');
+    });
+  });
+});

src/features/edit/components/EditSection/ProfileSettingsSelector.tsx

@@ -46,7 +46,12 @@ export const ProfileSettingsSelector = () => {
 
   return (
     <div className="profile-settings-selector" ref={ref}>
-      <Button ariaHaspopup="menu" ariaExpanded={isMenuEnabled} onClick={toggleIsMenuEnabled}>
+      <Button
+        data-testid="profile-settings-selector-button"
+        ariaHaspopup="menu"
+        ariaExpanded={isMenuEnabled}
+        onClick={toggleIsMenuEnabled}
+      >
         <Settings />
       </Button>
       {isMenuEnabled && (

src/features/edit/hooks/useEditPage.test.ts

@@ -26,6 +26,7 @@ jest.mock('react-router-dom', () => ({
 
 const mockProcessResource = jest.fn();
 const mockFetchQuery = jest.fn();
+const mockGenerateRecord = jest.fn();
 const mockResourceQueryOptions = jest.fn((id: string) => ({ queryKey: ['resource', id] }));
 
 jest.mock('@tanstack/react-query', () => ({
@@ -36,6 +37,7 @@ jest.mock('@tanstack/react-query', () => ({
 
 jest.mock('@/features/resources', () => ({
   generateResourceQueryOptions: (id: string) => mockResourceQueryOptions(id),
+  useRecordGeneration: () => ({ generateRecord: mockGenerateRecord }),
   useResourceProcessing: () => ({ processResource: mockProcessResource }),
 }));
 
@@ -409,4 +411,54 @@ describe('useEditPage', () => {
       expect(mockSetRecord).toHaveBeenCalledWith(mockRecord);
     });
   });
+
+  describe('applyUpdatedSettingsToResource', () => {
+    const mockProfileSettingsId = 'settings-id';
+    it('calls generateRecord, processResource and applies result to stores on success', async () => {
+      mockProcessResource.mockResolvedValue(mockProcessedResource);
+      mockGenerateRecord.mockReturnValue(null);
+
+      const { result } = renderHook(() => useEditPage());
+
+      await act(async () => {
+        await result.current.applyUpdatedSettingsToResource(mockProfileSettingsId);
+      });
+
+      expect(mockSetIsLoading).toHaveBeenCalledWith(true);
+      expect(mockGenerateRecord).toHaveBeenCalledWith({});
+      expect(mockProcessResource).toHaveBeenCalledWith({ profileSettingsId: mockProfileSettingsId });
+      expect(mockSetSchema).toHaveBeenCalledWith(mockProcessedResource.schema);
+      expect(mockSetUserValues).toHaveBeenCalledWith(mockProcessedResource.userValues);
+      expect(mockSetIsLoading).toHaveBeenCalledWith(false);
+    });
+
+    it('does not apply to stores when processResource returns null', async () => {
+      mockProcessResource.mockResolvedValue(null);
+
+      const { result } = renderHook(() => useEditPage());
+
+      await act(async () => {
+        await result.current.applyUpdatedSettingsToResource(mockProfileSettingsId);
+      });
+
+      expect(mockSetSchema).not.toHaveBeenCalled();
+    });
+
+    it('reports error status message when processResource throws', async () => {
+      mockProcessResource.mockRejectedValue(new Error('load error'));
+
+      const { result } = renderHook(() => useEditPage());
+
+      await act(async () => {
+        await result.current.applyUpdatedSettingsToResource(mockProfileSettingsId);
+      });
+
+      expect(UserNotificationFactory.createMessage).toHaveBeenCalledWith(
+        StatusType.error,
+        'ld.errorApplyingProfileSettings',
+      );
+      expect(mockAddStatusMessagesItem).toHaveBeenCalled();
+      expect(mockSetIsLoading).toHaveBeenCalledWith(false);
+    });
+  });
 });

src/test/__mocks__/features/edit/hooks/useEditPage.mock.ts

@@ -1,9 +1,11 @@
 export const initNewResource = jest.fn();
 export const loadResource = jest.fn();
+export const applyUpdatedSettingsToResource = jest.fn();
 
 jest.mock('@/features/edit/hooks/useEditPage', () => ({
   useEditPage: () => ({
     initNewResource,
     loadResource,
+    applyUpdatedSettingsToResource,
   }),
 }));

src/views/Edit/Edit.test.tsx

@@ -1,12 +1,16 @@
 import { getMockedImportedConstant } from '@/test/__mocks__/common/constants/constants.mock';
 import '@/test/__mocks__/common/helpers/pageScrolling.helper.mock';
-import { initNewResource, loadResource } from '@/test/__mocks__/features/edit/hooks/useEditPage.mock';
+import {
+  applyUpdatedSettingsToResource,
+  initNewResource,
+  loadResource,
+} from '@/test/__mocks__/features/edit/hooks/useEditPage.mock';
 import { clearRecordState } from '@/test/__mocks__/features/resources/hooks/useRecordNavigation.mock';
-import { setInitialGlobalState } from '@/test/__mocks__/store';
+import { setInitialGlobalState, setUpdatedGlobalState } from '@/test/__mocks__/store';
 
 import * as Router from 'react-router-dom';
 
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 
 import * as BibframeConstants from '@/common/constants/bibframe.constants';
 import { Edit } from '@/views';
@@ -52,7 +56,10 @@ describe('Edit', () => {
       setInitialGlobalState([
         {
           store: useProfileStore,
-          state: { selectedProfile: recordState },
+          state: {
+            selectedProfile: recordState,
+            selectedProfileSettingsId: null,
+          },
         },
       ]);
 
@@ -101,4 +108,23 @@ describe('Edit', () => {
 
     expect(initNewResource).not.toHaveBeenCalled();
   });
+
+  test('changing profile settings ID applies settings', async () => {
+    jest.spyOn(Router, 'useParams').mockReturnValue({ resourceId: 'testResourceId' });
+
+    await renderComponent(null);
+
+    setUpdatedGlobalState([
+      {
+        store: useProfileStore,
+        updatedState: {
+          selectedProfileSettingsId: 'changed',
+        },
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(applyUpdatedSettingsToResource).toHaveBeenCalled();
+    });
+  });
 });