Chore/tests

package.json

@@ -23,6 +23,7 @@
     "axios": "^1.6.0",
     "env-cmd": "^10.1.0",
     "lodash": "^4.17.21",
+    "msal-react-tester": "^0.3.1",
     "openapi-fetch": "^0.7.2",
     "openapi-typescript-codegen": "^0.25.0",
     "react": "^18.2.0",

src/components/ImageView/ImageView.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import Img from '../../features/ModelView/image.png';
+import { ImageView } from './ImageView';
+
+test('check if img is rendered', () => {
+  render(<ImageView text="test" img={Img} altText="Alt test" />);
+  const image = screen.getByRole('img');
+
+  expect(image).toBeVisible();
+});

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -6,16 +6,9 @@ import {
 } from '@equinor/eds-core-react';
 import { ErrorType } from '../AddModelDialog/AddModelDialog';
 
-import { useMsal } from '@azure/msal-react';
-import { useQuery } from '@tanstack/react-query';
-import {
-  AnalogueModelDetail,
-  AnaloguesService,
-  MetadataDto,
-  MetadataService,
-  OpenAPI,
-} from '../../../api/generated';
-import { useAccessToken } from '../../../hooks/useAccessToken';
+import { AnalogueModelDetail, MetadataDto } from '../../../api/generated';
+import { useFetchAnalogues } from '../../../hooks/useFetchAnalogues';
+import { useFetchMetadata } from '../../../hooks/useFethcMetadata';
 import { AnalogueSelect } from './AnalogueSelect/AnalogueSelect';
 import { MetadataSelect } from './MetadataSelect/MetadataSelect';
 import * as Styled from './ModelMetadata.styled';
@@ -29,21 +22,8 @@ export const ModelMetadata = ({
   metadata: AnalogueModelDetail;
   setMetadata: (metadata: AnalogueModelDetail) => void;
 }) => {
-  const { instance, accounts } = useMsal();
-  const token = useAccessToken(instance, accounts[0]);
-  if (token) OpenAPI.TOKEN = token;
-
-  const { isLoading, data } = useQuery({
-    queryKey: ['metadata'],
-    queryFn: () => MetadataService.getApiMetadata(),
-    enabled: !!token,
-  });
-
-  const analougeData = useQuery({
-    queryKey: ['apiParameters'],
-    queryFn: () => AnaloguesService.getApiAnalogues(),
-    enabled: !!token,
-  });
+  const { isLoading, data } = useFetchMetadata();
+  const analougeData = useFetchAnalogues();
 
   function handleAddMetadata(
     e: AutocompleteChanges<MetadataDto>,

src/features/AddModel/ModelMetadata/ModelMetadataComponent.test.tsx

@@ -0,0 +1,181 @@
+/* eslint-disable max-lines-per-function */
+import { MsalProvider } from '@azure/msal-react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen } from '@testing-library/react';
+import { MsalReactTester } from 'msal-react-tester';
+import { AnalogueModelSourceType } from '../../../api/generated';
+import { useFetchAnalogues } from '../../../hooks/useFetchAnalogues';
+import { useFetchMetadata } from '../../../hooks/useFethcMetadata';
+import { ModelMetadata } from './ModelMetadata';
+
+let msalTester: MsalReactTester;
+const mockMetadata = {
+  analogueModelId: '',
+  name: '',
+  description: '',
+  isProcessed: false,
+  sourceType: AnalogueModelSourceType.DELTARES,
+  fileUploads: [],
+  parameters: [],
+  metadata: [],
+  analogues: [],
+  modelAreas: [],
+};
+const errors = {};
+
+beforeEach(() => {
+  // new instance of msal tester for each test
+  msalTester = new MsalReactTester();
+  // spy all required msal things
+  msalTester.spyMsal();
+});
+
+afterEach(() => {
+  cleanup();
+  msalTester.resetSpyMsal();
+  jest.clearAllMocks();
+});
+
+jest.mock('../../../hooks/useFethcMetadata');
+jest.mock('../../../hooks/useFetchAnalogues');
+
+const Render = () => {
+  const testQueryClient = new QueryClient();
+
+  // @ts-ignore because of error
+  useFetchMetadata.mockReturnValue({
+    data: {
+      data: [
+        {
+          metadataId: 'test1',
+          metadataType: 'Field',
+          value: 'string11',
+        },
+        {
+          metadataId: 'test2',
+          metadataType: 'Field',
+          value: 'string12',
+        },
+        {
+          metadataId: 'test5',
+          metadataType: 'Formation',
+          value: 'string55',
+        },
+        {
+          metadataId: 'test6',
+          metadataType: 'Zone',
+          value: 'string66',
+        },
+      ],
+      success: true,
+    },
+    isLoading: false,
+    isSuccess: true,
+    isError: false,
+  });
+
+  // @ts-ignore because of error
+  useFetchAnalogues.mockReturnValue({
+    data: {
+      data: [
+        {
+          analogueId: 'test12',
+          description: 'string122',
+          name: 'stringA1',
+        },
+        {
+          analogueId: 'test13',
+          description: 'string123',
+          name: 'stringA2',
+        },
+      ],
+      success: true,
+    },
+    isLoading: false,
+    isSuccess: true,
+    isError: false,
+  });
+
+  return (
+    <MsalProvider instance={msalTester.client}>
+      <QueryClientProvider client={testQueryClient}>
+        <ModelMetadata
+          errors={errors}
+          metadata={mockMetadata}
+          setMetadata={jest.fn()}
+        />
+      </QueryClientProvider>
+    </MsalProvider>
+  );
+};
+
+test('renders modelMetadata after loading', () => {
+  render(<Render />);
+
+  const nameLable = screen.getByLabelText('Model Name');
+  expect(nameLable).toBeInTheDocument();
+  expect(nameLable).toHaveValue('');
+});
+
+test('Name field to be present and empty after render', async () => {
+  render(<Render />);
+
+  const nameLable = screen.getByLabelText('Model Name');
+  expect(nameLable).toBeInTheDocument();
+  expect(nameLable).toHaveValue('');
+});
+
+test('Description field to be present after render', async () => {
+  render(<Render />);
+
+  const descriptionLable = screen.getByLabelText('Model description');
+  expect(descriptionLable).toBeInTheDocument();
+});
+
+test('Field dropdown to be present after render', async () => {
+  render(<Render />);
+
+  const labeledNodes = await screen.findAllByLabelText('Field');
+  const input = labeledNodes[1];
+  const optionsList = labeledNodes[0];
+
+  expect(input).toBeDefined();
+  expect(input).toHaveAccessibleName('Field');
+  expect(input.nodeName).toBe('INPUT');
+
+  expect(optionsList).toBeDefined();
+  expect(optionsList.nodeName).toBe('UL');
+});
+
+test('Zone dropdown to be present after render', async () => {
+  render(<Render />);
+
+  const labeledNodes = await screen.findAllByLabelText('Zone');
+  const input = labeledNodes[1];
+
+  expect(input).toBeDefined();
+  expect(input).toHaveAccessibleName('Zone');
+  expect(input.nodeName).toBe('INPUT');
+});
+
+test('Formation dropdown to be present after render', async () => {
+  render(<Render />);
+
+  const labeledNodes = await screen.findAllByLabelText('Formation');
+  const input = labeledNodes[1];
+
+  expect(input).toBeDefined();
+  expect(input).toHaveAccessibleName('Formation');
+  expect(input.nodeName).toBe('INPUT');
+});
+
+test('Analogue dropdown to be present after render', async () => {
+  render(<Render />);
+
+  const labeledNodes = await screen.findAllByLabelText('Analogue');
+  const input = labeledNodes[1];
+
+  expect(input).toBeDefined();
+  expect(input).toHaveAccessibleName('Analogue');
+  expect(input.nodeName).toBe('INPUT');
+});

src/features/AddModel/ModelMetadata/ModelMetadataHooks.test.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+/* eslint-disable max-lines-per-function */
+import { MsalProvider } from '@azure/msal-react';
+import * as ReactQuery from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, renderHook, screen, waitFor } from '@testing-library/react';
+import { MsalReactTester } from 'msal-react-tester';
+import { AnalogueModelSourceType } from '../../../api/generated';
+import { useFetchAnalogues } from '../../../hooks/useFetchAnalogues';
+import { useFetchMetadata } from '../../../hooks/useFethcMetadata';
+import { ModelMetadata } from './ModelMetadata';
+
+let msalTester: MsalReactTester;
+const mockMetadata = {
+  analogueModelId: '',
+  name: '',
+  description: '',
+  isProcessed: false,
+  sourceType: AnalogueModelSourceType.DELTARES,
+  fileUploads: [],
+  parameters: [],
+  metadata: [],
+  analogues: [],
+  modelAreas: [],
+};
+const errors = {};
+function wrapper(props: { children: React.ReactNode }) {
+  const testQueryClient = new QueryClient();
+  return (
+    <MsalProvider instance={msalTester.client}>
+      <QueryClientProvider client={testQueryClient}>
+        {props.children}
+        <ModelMetadata
+          errors={errors}
+          metadata={mockMetadata}
+          setMetadata={jest.fn()}
+        />
+      </QueryClientProvider>
+    </MsalProvider>
+  );
+}
+
+const mockMetadataDto = {
+  metadataId: 'test',
+  metadataType: 'string',
+  value: 'string',
+  success: true,
+};
+
+const mockAnalogueList = {
+  analogueId: 'test2',
+  name: 'string',
+  description: 'string',
+  success: true,
+};
+
+const mockGetData = async (data: any) => {
+  const mock = jest.spyOn(ReactQuery, 'useQuery');
+
+  // @ts-ignore because of error
+  mock.mockImplementation(() => {
+    return data
+      ? Promise.resolve({
+          data: data,
+          isLoading: false,
+          isSuccess: true,
+          isError: false,
+        })
+      : Promise.reject('error');
+  });
+
+  return mock;
+};
+
+beforeEach(() => {
+  // new instance of msal tester for each test
+  msalTester = new MsalReactTester();
+
+  // spy all required msal things
+  msalTester.spyMsal();
+});
+
+afterEach(() => {
+  cleanup();
+  msalTester.resetSpyMsal();
+  jest.clearAllMocks();
+});
+
+test('Calls Mocked metadata api with mock data', async () => {
+  const mock = await mockGetData(mockMetadataDto);
+
+  const { result } = renderHook(() => useFetchMetadata(), { wrapper });
+
+  const res = await result.current;
+
+  await waitFor(() => expect(mock).toHaveBeenCalled());
+  await waitFor(() => expect(res.data).toBe(mockMetadataDto));
+});
+
+test('Calls Mocked analogue api with mock data', async () => {
+  const mock = await mockGetData(mockAnalogueList);
+
+  const { result } = renderHook(() => useFetchAnalogues(), { wrapper });
+
+  const res = await result.current;
+
+  await waitFor(() => expect(mock).toHaveBeenCalled());
+  await waitFor(() => expect(res.data).toBe(mockAnalogueList));
+});
+
+test('renders ModelMetadata component in loading state', async () => {
+  await mockGetData(mockMetadataDto);
+
+  const { result } = renderHook(() => useFetchMetadata(), { wrapper });
+  await result.current;
+
+  const loading = screen.getByText('Loading ...');
+  expect(loading).toBeVisible();
+});

src/features/Compute/CaseGroup/CaseGroup.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable max-lines-per-function */
 import { useMsal } from '@azure/msal-react';
 import { Button, Icon, Tooltip } from '@equinor/eds-core-react';
-import { add as ADD, play as PLAY } from '@equinor/eds-icons';
+import { add as ADD } from '@equinor/eds-icons';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -335,19 +335,6 @@ export const CaseGroup = ({
               </Button>
             </Tooltip>
           </Styled.ButtonGroup>
-          <Styled.ButtonGroup>
-            <Tooltip title="Functionality not implemented yet.">
-              <Button
-                variant="outlined"
-                // eslint-disable-next-line no-console
-                onClick={() => console.log('Running all')}
-                disabled
-              >
-                <Icon data={PLAY} size={18}></Icon>
-                Run all
-              </Button>
-            </Tooltip>
-          </Styled.ButtonGroup>
         </Styled.ButtonDiv>
       )}