fixes jest tests through mocking doProcessNext with jest

Author: cammiida

src/components/message/ErrorReport.test.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import type { AxiosError } from 'axios';
 
 import { defaultMockDataElementId } from 'src/__mocks__/getInstanceDataMock';
 import { defaultDataTypeMock } from 'src/__mocks__/getLayoutSetsMock';
 import { Form } from 'src/components/form/Form';
 import { type BackendValidationIssue, BackendValidationSeverity } from 'src/features/validation';
+import { doProcessNext } from 'src/queries/queries';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 
 describe('ErrorReport', () => {
@@ -69,14 +69,11 @@ describe('ErrorReport', () => {
   });
 
   it('should list task errors as unclickable', async () => {
-    const { mutations } = await render();
-
-    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
-
-    mutations.doProcessNext.reject({
-      name: 'AxiosError',
-      message: 'Request failed with status code 409',
-      response: {
+    jest.mocked(doProcessNext).mockImplementationOnce(async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const error = new Error('Request failed with status code 409') as any;
+      error.name = 'AxiosError';
+      error.response = {
         status: 409,
         data: {
           validationIssues: [
@@ -87,8 +84,13 @@ describe('ErrorReport', () => {
             } as BackendValidationIssue,
           ],
         },
-      },
-    } as AxiosError);
+      };
+      throw error;
+    });
+    const user = userEvent.setup();
+    await render();
+
+    await user.click(screen.getByRole('button', { name: 'Submit' }));
 
     await screen.findByTestId('ErrorReport');
 
@@ -99,14 +101,11 @@ describe('ErrorReport', () => {
   });
 
   it('should list unbound mapped error as unclickable', async () => {
-    const { mutations } = await render();
-
-    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
-
-    mutations.doProcessNext.reject({
-      name: 'AxiosError',
-      message: 'Request failed with status code 409',
-      response: {
+    jest.mocked(doProcessNext).mockImplementationOnce(async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const error = new Error('Request failed with status code 409') as any;
+      error.name = 'AxiosError';
+      error.response = {
         status: 409,
         data: {
           validationIssues: [
@@ -119,8 +118,12 @@ describe('ErrorReport', () => {
             } as BackendValidationIssue,
           ],
         },
-      },
-    } as AxiosError);
+      };
+      throw error;
+    });
+    await render();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
 
     await screen.findByTestId('ErrorReport');
 

src/features/instance/useProcessNext.tsx

@@ -3,7 +3,6 @@ import { toast } from 'react-toastify';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { useAppMutations } from 'src/core/contexts/AppQueriesProvider';
 import { ContextNotProvided } from 'src/core/contexts/context';
 import { useDisplayError } from 'src/core/errorHandling/DisplayErrorProvider';
 import { useApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
@@ -18,6 +17,7 @@ import { appSupportsIncrementalValidationFeatures } from 'src/features/validatio
 import { useOnFormSubmitValidation } from 'src/features/validation/callbacks/onFormSubmitValidation';
 import { Validation } from 'src/features/validation/validationContext';
 import { TaskKeys, useNavigateToTask } from 'src/hooks/useNavigatePage';
+import { doProcessNext } from 'src/queries/queries';
 import { isAtLeastVersion } from 'src/utils/versionCompare';
 import type { ApplicationMetadata } from 'src/features/applicationMetadata/types';
 import type { BackendValidationIssue } from 'src/features/validation';
@@ -29,7 +29,6 @@ interface ProcessNextProps {
 }
 
 export function useProcessNext() {
-  const { doProcessNext } = useAppMutations();
   const reFetchInstanceData = useStrictInstanceRefetch();
   const language = useCurrentLanguage();
   const { refetch: refetchProcessData } = useProcessQuery();

src/features/processEnd/confirm/containers/ConfirmPage.test.tsx

@@ -2,15 +2,22 @@ import React from 'react';
 
 import { jest } from '@jest/globals';
 import { screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 
 import { getApplicationMetadataMock } from 'src/__mocks__/getApplicationMetadataMock';
 import { getInstanceDataMock } from 'src/__mocks__/getInstanceDataMock';
 import { getPartyMock, getPartyWithSubunitMock } from 'src/__mocks__/getPartyMock';
-import { getProcessDataMock } from 'src/__mocks__/getProcessDataMock';
 import { ConfirmPage, type IConfirmPageProps } from 'src/features/processEnd/confirm/containers/ConfirmPage';
-import { fetchProcessState } from 'src/queries/queries';
+import { doProcessNext } from 'src/queries/queries';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
+import { IProcess } from 'src/types/shared';
+
+jest.mock('src/features/instance/useProcessQuery', () => ({
+  ...jest.requireActual<typeof import('src/features/instance/useProcessQuery')>(
+    'src/features/instance/useProcessQuery',
+  ),
+  useIsAuthorized: jest.fn().mockReturnValue(() => true),
+}));
 
 describe('ConfirmPage', () => {
   const personParty = getPartyMock();
@@ -73,30 +80,24 @@ describe('ConfirmPage', () => {
     expect(contentLoader).not.toBeInTheDocument();
   });
 
-  it('should show loading when clicking submit', async () => {
-    jest.mocked(fetchProcessState).mockImplementation(async () =>
-      getProcessDataMock((p) => {
-        p.currentTask!.actions = {
-          confirm: true,
-        };
-      }),
-    );
+  it('should show loading when clicking submit and process/next has not resolved', async () => {
+    const user = userEvent.setup();
+    jest.mocked(doProcessNext).mockImplementation(() => new Promise(() => {}) as Promise<IProcess>);
 
-    const { mutations } = await renderWithInstanceAndLayout({
+    await renderWithInstanceAndLayout({
       renderer: () => <ConfirmPage {...props} />,
     });
-
     const submitBtnText = /send inn/i;
     const loadingText = /laster innhold/i;
 
     const submitBtn = screen.getByRole('button', { name: submitBtnText });
 
-    expect(mutations.doProcessNext.mock).toHaveBeenCalledTimes(0);
+    expect(doProcessNext).toHaveBeenCalledTimes(0);
     expect(screen.queryByText(loadingText)).not.toBeInTheDocument();
     expect(submitBtn).toBeInTheDocument();
-    await userEvent.click(submitBtn);
+    await user.click(submitBtn);
 
-    expect(mutations.doProcessNext.mock).toHaveBeenCalledTimes(1);
+    expect(doProcessNext).toHaveBeenCalledTimes(1);
     expect(screen.getByRole('button', { name: submitBtnText })).toBeInTheDocument();
 
     await waitFor(() => {

src/queries/types.ts

@@ -1,12 +1,15 @@
 import type * as queries from 'src/queries/queries';
 
-type IgnoredQueries = keyof Pick<typeof queries, 'fetchApplicationMetadata' | 'fetchExternalApi' | 'fetchProcessState'>;
-
-export type AppQueriesContext = Omit<typeof queries, IgnoredQueries>;
+type IgnoredQueriesAndMutations = keyof Pick<
+  typeof queries,
+  'fetchApplicationMetadata' | 'fetchExternalApi' | 'fetchProcessState' | 'doProcessNext'
+>;
 
 type KeysStartingWith<T, U extends string> = {
   [K in keyof T as K extends `${U}${string}` ? K : never]: T[K];
 };
 
-export type AppQueries = Omit<KeysStartingWith<AppQueriesContext, 'fetch'>, IgnoredQueries>;
-export type AppMutations = KeysStartingWith<AppQueriesContext, 'do'>;
+export type AppQueries = Omit<KeysStartingWith<typeof queries, 'fetch'>, IgnoredQueriesAndMutations>;
+export type AppMutations = Omit<KeysStartingWith<typeof queries, 'do'>, IgnoredQueriesAndMutations>;
+
+export type AppQueriesContext = AppQueries & AppMutations;

src/setupTests.ts

@@ -16,7 +16,7 @@ import { TextDecoder, TextEncoder } from 'util';
 
 import { getIncomingApplicationMetadataMock } from 'src/__mocks__/getApplicationMetadataMock';
 import { getProcessDataMock } from 'src/__mocks__/getProcessDataMock';
-import type { fetchApplicationMetadata, fetchProcessState } from 'src/queries/queries';
+import type { doProcessNext, fetchApplicationMetadata, fetchProcessState } from 'src/queries/queries';
 import type { AppQueries } from 'src/queries/types';
 
 // Importing CSS for jest-preview to look nicer
@@ -110,6 +110,7 @@ jest.mock('src/queries/queries', () => ({
     .fn<typeof fetchApplicationMetadata>()
     .mockImplementation(async () => getIncomingApplicationMetadataMock()),
   fetchProcessState: jest.fn<typeof fetchProcessState>(async () => getProcessDataMock()),
+  doProcessNext: jest.fn<typeof doProcessNext>(async () => getProcessDataMock()),
 }));
 
 jest.mock('react-helmet-async', () => ({