Skip to content

Commit

Permalink
PSP-7209 Fix research container race condition (#3581)
Browse files Browse the repository at this point in the history 
* Fix warnings

* Apply PSP-7209 fix to research container
  • Loading branch information
@asanchezr
asanchezr authored Nov 9, 2023
1 parent c6c1620 commit dd9d052
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 49 deletions.
85 changes: 45 additions & 40 deletions source/frontend/src/features/mapSideBar/research/ResearchContainer.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>,
{
Expand All @@ -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();
});
});
13 changes: 7 additions & 6 deletions source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
4 changes: 3 additions & 1 deletion ...e/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -549,7 +549,9 @@ exports[`ResearchContainer component renders as expected 1`] = `
</div>
<div
class="col"
/>
>
123-456-789
</div>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...rontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit dd9d052

Please sign in to comment.