test: Test render and area select in AreaCoordinate component.

src/components/AreaCoordinates/AreaCoordinates.tsx

@@ -287,7 +287,7 @@ export const AreaCoordinates = ({
             ></Autocomplete>
           </Styled.CoordinateGroup>
 
-          {activeArea.modelAreaTypeId !== '' && (
+          {activeArea.name !== '' && (
             <Styled.CoordinateFields>
               <Styled.CoordinateGroup>
                 <Typography variant="h6">Top Left Corner</Typography>

src/components/AreaCoordinates/tests/AreaCoordinates.components.test.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable max-lines-per-function */
+import { MsalProvider } from '@azure/msal-react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { MsalReactTester } from 'msal-react-tester';
+import { AreaCoordinates } from '../AreaCoordinates';
+
+import { useFetchCases } from '../../../hooks/useFetchCases';
+import { useFetchModel } from '../../../hooks/useFetchModel';
+import { useFetchModelAreas } from '../../../hooks/useFetchModelAreas';
+import { useModelResults } from '../hooks/useModelResults';
+
+import {
+  mockAnalogueModelDetail,
+  mockedActiveComputeCase,
+  mockedComputeCase,
+  mockedModelAreaType,
+} from './mockedData';
+
+let msalTester: MsalReactTester;
+
+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/useFetchCases');
+jest.mock('../../../hooks/useFetchModel');
+jest.mock('../../../hooks/useFetchModelAreas');
+jest.mock('../hooks/useModelResults');
+
+const Render = () => {
+  const testQueryClient = new QueryClient();
+
+  // @ts-ignore because of error
+  useFetchCases.mockReturnValue({
+    data: mockedComputeCase,
+    success: true,
+    isLoading: false,
+    isSuccess: true,
+    isError: false,
+  });
+
+  // @ts-ignore because of error
+  useFetchModel.mockReturnValue({
+    data: mockAnalogueModelDetail,
+    success: true,
+    isLoading: false,
+    isSuccess: true,
+    isError: false,
+  });
+
+  // @ts-ignore because of error
+  useFetchModelAreas.mockReturnValue({
+    data: mockedModelAreaType,
+    success: true,
+    isLoading: false,
+    isSuccess: true,
+    isError: false,
+  });
+
+  // @ts-ignore because of error
+  useModelResults.mockReturnValue(mockedActiveComputeCase);
+
+  return (
+    <MsalProvider instance={msalTester.client}>
+      <QueryClientProvider client={testQueryClient}>
+        <AreaCoordinates setSaveAlert={jest.fn()} />
+      </QueryClientProvider>
+    </MsalProvider>
+  );
+};
+
+test('renders Area Coordinates component after loading in an empty state', async () => {
+  render(<Render />);
+
+  const nameLable = screen.getByLabelText('Select area', {
+    selector: 'input',
+  });
+  expect(nameLable).toBeInTheDocument();
+  expect(nameLable).toHaveValue('');
+
+  expect(screen.queryByText('Top Left Corner')).not.toBeInTheDocument();
+  expect(screen.queryByText('Edit coordinates')).not.toBeInTheDocument();
+});
+
+test('Select area Autocomplete updates correct on model area select', async () => {
+  render(<Render />);
+
+  const nameLable = screen.getByLabelText('Select area', {
+    selector: 'input',
+  });
+
+  expect(nameLable).toHaveValue('');
+
+  fireEvent.change(nameLable, {
+    target: {
+      value: mockedModelAreaType[0].name,
+    },
+  });
+  fireEvent.keyDown(nameLable, { key: 'Enter', code: 'Enter' });
+  expect(nameLable).toHaveValue(mockedModelAreaType[0].name);
+
+  fireEvent.change(nameLable, {
+    target: {
+      value: mockedModelAreaType[1].name,
+    },
+  });
+  fireEvent.keyDown(nameLable, { key: 'Enter', code: 'Enter' });
+  expect(nameLable).toHaveValue(mockedModelAreaType[1].name);
+});

src/components/AreaCoordinates/tests/mockedData.ts

@@ -36,16 +36,39 @@ export const mockedComputeCase = {
   jobStatus: ComputeJobStatus.SUCCEEDED,
 };
 
+export const mockedActiveComputeCase = [
+  {
+    computeCaseId: '1111-1111-1111',
+    computeMethod: {
+      computeMethodId: '1111-1111',
+      name: 'TestArea1',
+    },
+    modelArea: {
+      modelAreaId: 'string',
+      name: 'Test area',
+    },
+    inputSettings: [
+      {
+        inputSettingValueId: 'string',
+        inputSettingTypeId: 'string',
+        valueName: 'string',
+        typeName: 'string',
+      },
+    ],
+    jobStatus: ComputeJobStatus.SUCCEEDED,
+  },
+];
+
 export const mockedModelAreaType = [
   {
-    modelAreaTypeId: 'string',
-    name: 'string',
-    description: 'string',
+    description: 'a test area',
+    modelAreaTypeId: '1111-1111',
+    name: 'TestArea1',
   },
   {
-    modelAreaTypeId: 'string1',
-    name: 'string1',
-    description: 'string1',
+    description: 'a test area2',
+    modelAreaTypeId: '1111-2222',
+    name: 'TestArea2',
   },
 ];
 
@@ -89,8 +112,24 @@ export const mockAnalogueModelDetail = {
   ],
   modelAreas: [
     {
-      modelAreaId: 'string',
-      modelAreaType: 'string',
+      modelAreaId: '1111-1111',
+      modelAreaType: 'TestArea1',
+      coordinates: [
+        {
+          x: 100,
+          y: 200,
+          m: 0,
+        },
+        {
+          x: 100,
+          y: 200,
+          m: 1,
+        },
+      ],
+    },
+    {
+      modelAreaId: '1111-2222',
+      modelAreaType: 'TestArea2',
       coordinates: [
         {
           x: 100,