fixes jest tests

Author: cammiida

src/components/form/Form.test.tsx

@@ -7,6 +7,7 @@ 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 { fetchFormData } from 'src/queries/queries';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import type { CompExternal, ILayout } from 'src/layout/layout';
 import type { CompSummaryExternal } from 'src/layout/Summary/config.generated';
@@ -224,19 +225,20 @@ describe('Form', () => {
   });
 
   async function render(layout = mockComponents, validationIssues: BackendValidationIssue[] = []) {
+    jest.mocked(fetchFormData).mockImplementation(async () => ({
+      Group: [
+        {
+          prop1: 'value1',
+          prop2: 'value2',
+          prop3: 'value3',
+        },
+      ],
+    }));
+
     await renderWithInstanceAndLayout({
       renderer: () => <Form />,
       initialPage: 'FormLayout',
       queries: {
-        fetchFormData: async () => ({
-          Group: [
-            {
-              prop1: 'value1',
-              prop2: 'value2',
-              prop3: 'value3',
-            },
-          ],
-        }),
         fetchLayouts: () =>
           Promise.resolve({
             FormLayout: {

src/features/expressions/shared-context.test.tsx

@@ -6,7 +6,7 @@ import { screen } from '@testing-library/react';
 import { getApplicationMetadataMock } from 'src/__mocks__/getApplicationMetadataMock';
 import { getInstanceDataMock } from 'src/__mocks__/getInstanceDataMock';
 import { getSharedTests } from 'src/features/expressions/shared';
-import { fetchApplicationMetadata } from 'src/queries/queries';
+import { fetchApplicationMetadata, fetchFormData } from 'src/queries/queries';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import { splitDashedKey } from 'src/utils/splitDashedKey';
@@ -93,6 +93,8 @@ describe('Expressions shared context tests', () => {
 
         const applicationMetadata = getApplicationMetadataMock(instance ? {} : { onEntry: { show: 'stateless' } });
         jest.mocked(fetchApplicationMetadata).mockImplementation(async () => applicationMetadata);
+        // TODO(Datamodels): add support for multiple data models
+        jest.mocked(fetchFormData).mockImplementation(async () => dataModel ?? {});
 
         if (instanceDataElements) {
           for (const element of instanceDataElements) {
@@ -111,8 +113,6 @@ describe('Expressions shared context tests', () => {
           renderer: () => <TestContexts />,
           queries: {
             fetchLayouts: async () => layouts!,
-            // TODO(Datamodels): add support for multiple data models
-            fetchFormData: async () => dataModel ?? {},
             ...(instance ? { fetchInstanceData: async () => instance } : {}),
             ...(frontendSettings ? { fetchApplicationSettings: async () => frontendSettings } : {}),
           },

src/features/expressions/shared-functions.test.tsx

@@ -20,7 +20,13 @@ import {
   isRepeatingComponent,
   RepeatingComponents,
 } from 'src/features/form/layout/utils/repeating';
-import { fetchApplicationMetadata, fetchInstanceData, fetchProcessState, fetchUserProfile } from 'src/queries/queries';
+import {
+  fetchApplicationMetadata,
+  fetchFormData,
+  fetchInstanceData,
+  fetchProcessState,
+  fetchUserProfile,
+} from 'src/queries/queries';
 import { renderWithInstanceAndLayout, renderWithoutInstanceAndLayout } from 'src/test/renderWithProviders';
 import { DataModelLocationProvider } from 'src/utils/layout/DataModelLocation';
 import { useEvalExpression } from 'src/utils/layout/generator/useEvalExpression';
@@ -287,23 +293,6 @@ describe('Expressions shared function tests', () => {
         profile.profileSettingPreference.language = profileSettings.language;
       }
 
-      async function fetchFormData(url: string) {
-        if (!dataModels) {
-          return dataModel ?? {};
-        }
-
-        const statelessDataType = url.match(/dataType=([\w-]+)&/)?.[1];
-        const statefulDataElementId = url.match(/data\/([a-f0-9-]+)\?/)?.[1];
-
-        const model = dataModels.find(
-          (dm) => dm.dataElement.dataType === statelessDataType || dm.dataElement.id === statefulDataElementId,
-        );
-        if (model) {
-          return model.data;
-        }
-        throw new Error(`Datamodel ${url} not found in ${JSON.stringify(dataModels)}`);
-      }
-
       // Clear localstorage, because LanguageProvider uses it to cache selected languages
       localStorage.clear();
 
@@ -327,6 +316,22 @@ describe('Expressions shared function tests', () => {
         }
         return instanceData;
       });
+      jest.mocked(fetchFormData).mockImplementation(async (url: string) => {
+        if (!dataModels) {
+          return dataModel ?? {};
+        }
+
+        const statelessDataType = url.match(/dataType=([\w-]+)&/)?.[1];
+        const statefulDataElementId = url.match(/data\/([a-f0-9-]+)\?/)?.[1];
+
+        const model = dataModels.find(
+          (dm) => dm.dataElement.dataType === statelessDataType || dm.dataElement.id === statefulDataElementId,
+        );
+        if (model) {
+          return model.data;
+        }
+        throw new Error(`Datamodel ${url} not found in ${JSON.stringify(dataModels)}`);
+      });
 
       const renderFunc = stateless ? renderWithoutInstanceAndLayout : renderWithInstanceAndLayout;
       const { rerender } = await renderFunc({
@@ -343,7 +348,6 @@ describe('Expressions shared function tests', () => {
             sets: [{ id: 'layout-set', dataType: 'default', tasks: ['Task_1'] }, getSubFormLayoutSetMock()],
           }),
           fetchLayouts: async () => layouts,
-          fetchFormData,
           ...(frontendSettings ? { fetchApplicationSettings: async () => frontendSettings } : {}),
           fetchTextResources: async () => ({
             language: 'nb',

src/features/formData/FormData.test.tsx

@@ -22,7 +22,7 @@ import { GlobalFormDataReadersProvider } from 'src/features/formData/FormDataRea
 import { FD, FormDataWriteProvider } from 'src/features/formData/FormDataWrite';
 import { FormDataWriteProxyProvider } from 'src/features/formData/FormDataWriteProxies';
 import { useDataModelBindings } from 'src/features/formData/useDataModelBindings';
-import { fetchApplicationMetadata } from 'src/queries/queries';
+import { fetchApplicationMetadata, fetchFormData } from 'src/queries/queries';
 import {
   makeFormDataMethodProxies,
   renderWithInstanceAndLayout,
@@ -158,7 +158,6 @@ async function statelessRender(props: RenderProps) {
       ),
       queries: {
         fetchDataModelSchema: async () => mockSchema,
-        fetchFormData: async () => ({}),
         fetchLayouts: async () => ({}),
         ...props.queries,
       },
@@ -175,7 +174,6 @@ async function statefulRender(props: RenderProps) {
     alwaysRouteToChildren: true,
     queries: {
       fetchDataModelSchema: async () => mockSchema,
-      fetchFormData: async () => ({}),
       fetchLayouts: async () => ({}),
       ...props.queries,
     },
@@ -216,6 +214,16 @@ describe('FormData', () => {
     }
 
     async function render(props: MinimalRenderProps = {}) {
+      jest.mocked(fetchFormData).mockImplementationOnce(async () => ({
+        obj1: {
+          prop1: 'value1',
+          prop2: 'value2',
+        },
+        obj2: {
+          prop1: 'value3',
+        },
+      }));
+
       const renderCounts: RenderCounts = {
         ReaderObj1Prop1: 0,
         ReaderObj1Prop2: 0,
@@ -262,15 +270,6 @@ describe('FormData', () => {
           </>
         ),
         queries: {
-          fetchFormData: async () => ({
-            obj1: {
-              prop1: 'value1',
-              prop2: 'value2',
-            },
-            obj2: {
-              prop1: 'value3',
-            },
-          }),
           ...props.queries,
         },
         ...props,
@@ -382,6 +381,11 @@ describe('FormData', () => {
     }
 
     async function render(props: MinimalRenderProps = {}) {
+      jest.mocked(fetchFormData).mockImplementationOnce(async () => ({
+        obj1: {
+          prop1: 'value1',
+        },
+      }));
       return statefulRender({
         renderer: (
           <>
@@ -409,11 +413,6 @@ describe('FormData', () => {
           </>
         ),
         queries: {
-          fetchFormData: async () => ({
-            obj1: {
-              prop1: 'value1',
-            },
-          }),
           ...props.queries,
         },
         ...props,
@@ -611,7 +610,6 @@ describe('FormData', () => {
           </>
         ),
         queries: {
-          fetchFormData: async () => ({}),
           ...props.queries,
         },
         ...props,
@@ -649,13 +647,12 @@ describe('FormData', () => {
 
     it('Navigating away and back again should restore the form data', async () => {
       const user = userEvent.setup({ delay: null });
-      const { mutations, queries } = await render();
+      const { mutations } = await render();
 
       await user.type(screen.getByTestId('obj2.prop1'), 'a');
       expect(screen.getByTestId('obj2.prop1')).toHaveValue('a');
       expect(screen.getByTestId('hasUnsavedChanges')).toHaveTextContent('true');
 
-      expect(queries.fetchFormData).toHaveBeenCalledTimes(1);
       await user.click(screen.getByRole('button', { name: 'Navigate to a different page' }));
       await screen.findByText('something different');
 
@@ -668,11 +665,6 @@ describe('FormData', () => {
       await user.click(screen.getByRole('button', { name: 'Navigate back' }));
       await screen.findByTestId('obj2.prop1');
 
-      // We tried to cache the form data, however that broke back button functionality for some apps.
-      // See this issue: https://github.com/Altinn/app-frontend-react/issues/2564
-      // Also see src/features/formData/useFormDataQuery.tsx where we prevent caching for statless apps
-      expect(queries.fetchFormData).toHaveBeenCalledTimes(2);
-
       // Our mock fetchFormData returns an empty object, so the form data should be reset. Realistically, the form data
       // would be restored when fetching it from the server, as we asserted that it was saved before navigating away.
       expect(screen.getByTestId('obj2.prop1')).toHaveValue('');
@@ -719,14 +711,15 @@ describe('FormData', () => {
     }
 
     async function render(props: MinimalRenderProps = {}) {
+      jest.mocked(fetchFormData).mockImplementationOnce(async () => ({
+        obj3: {
+          prop1: null,
+        },
+      }));
+
       const utils = await statelessRender({
         renderer: <InvalidReadWrite path='obj3.prop1' />,
         queries: {
-          fetchFormData: async () => ({
-            obj3: {
-              prop1: null,
-            },
-          }),
           ...props.queries,
         },
         ...props,

src/features/formData/FormDataReaders.test.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 
 import { beforeAll, expect, jest } from '@jest/globals';
 import { screen, waitFor } from '@testing-library/react';
+import { AxiosError } from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 
 import { getIncomingApplicationMetadataMock } from 'src/__mocks__/getApplicationMetadataMock';
 import { getInstanceDataMock } from 'src/__mocks__/getInstanceDataMock';
 import { getLayoutSetsMock } from 'src/__mocks__/getLayoutSetsMock';
 import { DataModelFetcher } from 'src/features/formData/FormDataReaders';
 import { Lang } from 'src/features/language/Lang';
-import { fetchApplicationMetadata, fetchInstanceData } from 'src/queries/queries';
+import { fetchApplicationMetadata, fetchFormData, fetchInstanceData } from 'src/queries/queries';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import type { IRawTextResource } from 'src/features/language/textResources';
 import type { IData, IDataType } from 'src/types/shared';
@@ -57,6 +58,20 @@ async function render(props: TestProps) {
     }),
   );
   jest.mocked(fetchInstanceData).mockImplementationOnce(async () => instanceData);
+  jest.mocked(fetchFormData).mockImplementation(async (url) => {
+    const path = new URL(url).pathname;
+    const id = path.split('/').pop();
+    const modelName = idToNameMap[id!];
+    const formData = props.dataModels[modelName];
+    if (formData instanceof Error) {
+      return Promise.reject(formData);
+    }
+    if (!formData) {
+      throw new Error(`No form data mocked for testing (modelName = ${modelName})`);
+    }
+
+    return formData;
+  });
 
   function generateDataElements(instanceId: string): IData[] {
     return dataModelNames.map((name) => {
@@ -124,19 +139,6 @@ async function render(props: TestProps) {
         resources: props.textResources,
         language: 'nb',
       }),
-      fetchFormData: async (url) => {
-        const path = new URL(url).pathname;
-        const id = path.split('/').pop();
-        const modelName = idToNameMap[id!];
-        const formData = props.dataModels[modelName];
-        if (formData instanceof Error) {
-          return Promise.reject(formData);
-        }
-        if (!formData) {
-          throw new Error(`No form data mocked for testing (modelName = ${modelName})`);
-        }
-        return formData;
-      },
     },
   });
 
@@ -162,7 +164,7 @@ describe('FormDataReaders', () => {
   it.each<string>(['someModel', 'someModel1.0'])(
     'simple, should render a resource with a variable lookup - %s',
     async (modelName: string) => {
-      const { queries, urlFor } = await render({
+      await render({
         ids: ['test'],
         textResources: [
           {
@@ -186,9 +188,6 @@ describe('FormDataReaders', () => {
 
       await waitFor(() => expect(screen.getByTestId('test')).toHaveTextContent('Hello World'));
 
-      expect(queries.fetchFormData).toHaveBeenCalledTimes(1);
-      expect(queries.fetchFormData).toHaveBeenCalledWith(urlFor(modelName), {});
-
       expect(window.logError).not.toHaveBeenCalled();
       expect(window.logErrorOnce).not.toHaveBeenCalled();
     },
@@ -197,13 +196,13 @@ describe('FormDataReaders', () => {
   it('advanced, should fetch data from multiple models, handle failures', async () => {
     jest.useFakeTimers();
     const missingError = new Error('This should fail when fetching');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (missingError as any).isAxiosError = true;
+
+    (missingError as AxiosError).isAxiosError = true;
 
     const model2Promise = new Promise((resolve) => {
       setTimeout(() => resolve({ name: 'Universe' }), 100);
     });
-    const { queries, urlFor } = await render({
+    await render({
       ids: ['test1', 'test2', 'test3', 'testDefault', 'testMissing', 'testMissingWithDefault'],
       textResources: [
         {
@@ -310,11 +309,6 @@ describe('FormDataReaders', () => {
     await waitFor(() => expect(screen.getByTestId('test2')).toHaveTextContent('Hello Universe'));
     expect(screen.getByTestId('test3')).toHaveTextContent('You are [missing] year(s) old');
 
-    expect(queries.fetchFormData).toHaveBeenCalledTimes(3);
-    expect(queries.fetchFormData).toHaveBeenCalledWith(urlFor('model1'), {});
-    expect(queries.fetchFormData).toHaveBeenCalledWith(urlFor('model2'), {});
-    expect(queries.fetchFormData).toHaveBeenCalledWith(urlFor('modelMissing'), {});
-
     expect(window.logError).toHaveBeenCalledTimes(1);
     expect(window.logError).toHaveBeenCalledWith('Fetching form data failed:\n', missingError);
 

src/features/formData/useDataModelBindings.test.tsx

@@ -7,6 +7,7 @@ import { userEvent } from '@testing-library/user-event';
 import { defaultDataTypeMock } from 'src/__mocks__/getLayoutSetsMock';
 import { FD } from 'src/features/formData/FormDataWrite';
 import { useDataModelBindings } from 'src/features/formData/useDataModelBindings';
+import { fetchFormData } from 'src/queries/queries';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import type { IDataModelPatchResponse } from 'src/features/formData/types';
 
@@ -92,10 +93,10 @@ describe('useDataModelBindings', () => {
   }
 
   async function render({ formData = {} }: { formData?: object } = {}) {
+    jest.mocked(fetchFormData).mockImplementationOnce(async () => formData);
     return await renderWithInstanceAndLayout({
       renderer: <DummyComponent />,
       queries: {
-        fetchFormData: async () => formData,
         fetchDataModelSchema: async () => ({
           type: 'object',
           properties: {