PSP-7209 Fix research container race condition

source/frontend/src/features/mapSideBar/research/ResearchContainer.test.tsx

@@ -3,15 +3,17 @@ import MockAdapter from 'axios-mock-adapter';
 import { createMemoryHistory } from 'history';
 
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
+import { FileTypes } from '@/constants';
 import { Claims } from '@/constants/claims';
+import { mockAcquisitionFileResponse } from '@/mocks/acquisitionFiles.mock';
 import { mockLookups } from '@/mocks/lookups.mock';
 import { mapMachineBaseMock } from '@/mocks/mapFSM.mock';
 import { getMockResearchFile } from '@/mocks/researchFile.mock';
 import { Api_ResearchFile } from '@/models/api/ResearchFile';
 import { lookupCodesSlice } from '@/store/slices/lookupCodes';
 import { render, RenderOptions, waitForElementToBeRemoved } from '@/utils/test-utils';
 
-import { SideBarContextProvider } from '../context/sidebarContext';
+import { SideBarContextProvider, TypedFile } from '../context/sidebarContext';
 import ResearchContainer, { IResearchContainerProps } from './ResearchContainer';
 
 const history = createMemoryHistory();
@@ -35,9 +37,13 @@ const onClose = jest.fn();
 
 describe('ResearchContainer component', () => {
   // render component under test
-  const setup = (props: Partial<IResearchContainerProps>, renderOptions: RenderOptions = {}) => {
+  const setup = (
+    renderOptions: RenderOptions & { props?: Partial<IResearchContainerProps> } & {
+      context?: { file?: TypedFile };
+    } = {},
+  ) => {
     const utils = render(
-      <SideBarContextProvider>
+      <SideBarContextProvider {...renderOptions?.context}>
         <ResearchContainer researchFileId={getMockResearchFile().id as number} onClose={onClose} />
       </SideBarContextProvider>,
       {
@@ -55,87 +61,86 @@ describe('ResearchContainer component', () => {
     };
   };
 
+  const mockResearchFile = getMockResearchFile();
+
   beforeEach(() => {
     mockAxios.resetHistory();
     mockAxios.reset();
     mockAxios.onGet(/users\/info.*?/).reply(200, {});
+
+    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}`).reply(200, {
+      ...mockResearchFile,
+      fileProperties: [{ id: 1 }],
+    } as Api_ResearchFile);
+    mockAxios
+      .onGet(`/researchFiles/${mockResearchFile?.id}/properties`)
+      .reply(200, [{ id: 1, property: { pid: '123-456-789' } }]);
   });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders as expected', async () => {
-    const mockResearchFile = getMockResearchFile();
-    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}`).reply(200, getMockResearchFile());
-    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}/properties`).reply(200, []);
-    const { getByTestId } = setup({});
-
+    const { getByTestId } = setup();
     await waitForElementToBeRemoved(getByTestId('filter-backdrop-loading'));
     expect(document.body).toMatchSnapshot();
   });
 
-  it('displays a properties pid if that is the only valid identifier', async () => {
-    const mockResearchFile = getMockResearchFile();
-    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}`).reply(200, {
-      ...mockResearchFile,
-      fileProperties: [{ id: 1 }],
-    } as Api_ResearchFile);
-    mockAxios
-      .onGet(`/researchFiles/${mockResearchFile?.id}/properties`)
-      .reply(200, [{ id: 1, property: { pid: '123-456-789' } }]);
-    const { getByTestId, findByText } = setup({});
+  it('renders a spinner while loading', async () => {
+    const { findByTestId } = setup();
+    const spinner = await findByTestId('filter-backdrop-loading');
+    expect(spinner).toBeVisible();
+  });
 
-    await waitForElementToBeRemoved(getByTestId('filter-backdrop-loading'));
+  it('renders research details when file is in context', async () => {
+    const typedFile: TypedFile = { ...getMockResearchFile(), fileType: FileTypes.Research };
+    const { findByText } = setup({ context: { file: typedFile } });
+    expect(await findByText('File Summary')).toBeVisible();
+  });
 
+  it(`doesn't render research details when wrong file type is in context`, async () => {
+    const typedFile: TypedFile = {
+      ...mockAcquisitionFileResponse(),
+      fileType: FileTypes.Acquisition,
+    };
+    const { findByTestId } = setup({ context: { file: typedFile } });
+    expect(await findByTestId('filter-backdrop-loading')).toBeVisible();
+  });
+
+  it('displays a properties pid if that is the only valid identifier', async () => {
+    const { getByTestId, findByText } = setup();
+    await waitForElementToBeRemoved(getByTestId('filter-backdrop-loading'));
     expect(await findByText('123-456-789')).toBeVisible();
   });
 
   it('displays a properties pin if that is the only valid identifier', async () => {
-    const mockResearchFile = getMockResearchFile();
-    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}`).reply(200, {
-      ...mockResearchFile,
-      fileProperties: [{ id: 1 }],
-    } as Api_ResearchFile);
     mockAxios
       .onGet(`/researchFiles/${mockResearchFile?.id}/properties`)
       .reply(200, [{ id: 1, property: { pin: 123456 } }]);
-    const { getByTestId, findByText } = setup({});
 
+    const { getByTestId, findByText } = setup();
     await waitForElementToBeRemoved(getByTestId('filter-backdrop-loading'));
-
     expect(await findByText('123456')).toBeVisible();
   });
 
   it('displays a properties plan number if that is the only valid identifier', async () => {
-    const mockResearchFile = getMockResearchFile();
-    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}`).reply(200, {
-      ...mockResearchFile,
-      fileProperties: [{ id: 1 }],
-    } as Api_ResearchFile);
     mockAxios
       .onGet(`/researchFiles/${mockResearchFile?.id}/properties`)
       .reply(200, [{ id: 1, property: { planNumber: 'EPP92028' } }]);
-    const { getByTestId, findByText } = setup({});
 
+    const { getByTestId, findByText } = setup();
     await waitForElementToBeRemoved(getByTestId('filter-backdrop-loading'));
-
     expect(await findByText('EPP92028')).toBeVisible();
   });
 
   it('displays a properties lat/lng if that is the only valid identifier', async () => {
-    const mockResearchFile = getMockResearchFile();
-    mockAxios.onGet(`/researchFiles/${mockResearchFile?.id}`).reply(200, {
-      ...mockResearchFile,
-      fileProperties: [{ id: 1 }],
-    } as Api_ResearchFile);
     mockAxios
       .onGet(`/researchFiles/${mockResearchFile?.id}/properties`)
       .reply(200, [{ id: 1, property: { latitude: 1, longitude: 2 } }]);
-    const { getByTestId, findByText } = setup({});
 
+    const { getByTestId, findByText } = setup();
     await waitForElementToBeRemoved(getByTestId('filter-backdrop-loading'));
-
     expect(await findByText('2.000000, 1.000000')).toBeVisible();
   });
 });

source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx

@@ -206,12 +206,13 @@ export const ResearchContainer: React.FunctionComponent<
     setIsShowingPropertySelector(true);
   };
 
-  if (researchFile === undefined && (loadingResearchFile || loadingResearchFileProperties)) {
-    return (
-      <>
-        <LoadingBackdrop show={true} parentScreen={true}></LoadingBackdrop>
-      </>
-    );
+  if (
+    loadingResearchFile ||
+    (loadingResearchFileProperties && !isShowingPropertySelector) ||
+    researchFile?.fileType !== FileTypes.Research ||
+    researchFile?.id !== researchFileId
+  ) {
+    return <LoadingBackdrop show={true} parentScreen={true}></LoadingBackdrop>;
   }
 
   if (isShowingPropertySelector && researchFile) {

source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap

@@ -549,7 +549,9 @@ exports[`ResearchContainer component renders as expected 1`] = `
                 </div>
                 <div
                   class="col"
-                />
+                >
+                  123-456-789
+                </div>
               </div>
             </div>
           </div>

source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx

@@ -99,8 +99,8 @@ const ResearchSummaryView: React.FunctionComponent<IResearchSummaryViewProps> =
       </StyledEditWrapper>
       <Section header="Project">
         <SectionField label="Ministry project">
-          {detail.researchFileProjects.map(formattedName => (
-            <div>{formattedName}</div>
+          {detail.researchFileProjects.map((formattedName, i) => (
+            <div key={`project-key-${i}`}>{formattedName}</div>
           ))}
         </SectionField>
       </Section>