diff --git a/source/frontend/src/features/mapSideBar/research/ResearchContainer.test.tsx b/source/frontend/src/features/mapSideBar/research/ResearchContainer.test.tsx index 91634acfba..11cf4b0965 100644 --- a/source/frontend/src/features/mapSideBar/research/ResearchContainer.test.tsx +++ b/source/frontend/src/features/mapSideBar/research/ResearchContainer.test.tsx @@ -3,7 +3,9 @@ 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'; @@ -11,7 +13,7 @@ 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, renderOptions: RenderOptions = {}) => { + const setup = ( + renderOptions: RenderOptions & { props?: Partial } & { + context?: { file?: TypedFile }; + } = {}, + ) => { const utils = render( - + , { @@ -55,10 +61,20 @@ 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(() => { @@ -66,76 +82,65 @@ describe('ResearchContainer component', () => { }); 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(); }); }); diff --git a/source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx b/source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx index 3f9fafc076..a35594da40 100644 --- a/source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx +++ b/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 ( - <> - - - ); + if ( + loadingResearchFile || + (loadingResearchFileProperties && !isShowingPropertySelector) || + researchFile?.fileType !== FileTypes.Research || + researchFile?.id !== researchFileId + ) { + return ; } if (isShowingPropertySelector && researchFile) { diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap index 67c16bccea..08a2300152 100644 --- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap @@ -549,7 +549,9 @@ exports[`ResearchContainer component renders as expected 1`] = `
+ > + 123-456-789 +
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx index 530c0220ed..9edb91a9b0 100644 --- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx +++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx @@ -99,8 +99,8 @@ const ResearchSummaryView: React.FunctionComponent =
- {detail.researchFileProjects.map(formattedName => ( -
{formattedName}
+ {detail.researchFileProjects.map((formattedName, i) => ( +
{formattedName}
))}