diff --git a/app/.storybook/preview.tsx b/app/.storybook/preview.tsx index 616e77939..9c57a4316 100644 --- a/app/.storybook/preview.tsx +++ b/app/.storybook/preview.tsx @@ -3,8 +3,6 @@ import type { Preview } from '@storybook/react'; import '../src/styles/App.scss'; import { MemoryRouter } from 'react-router'; import PatientDetailsProvider from '../src/providers/patientProvider/PatientProvider'; -import ConfigProvider from '../src/providers/configProvider/ConfigProvider'; -import config from '../src/config'; import { buildPatientDetails } from '../src/helpers/test/testBuilders'; const preview: Preview = { @@ -19,33 +17,31 @@ const preview: Preview = { }, decorators: [ (Story) => ( - - - -
+ +
+
-
-
-
- -
-
-
-
- - - +
+
+ +
+
+ +
+ + ), ], }; diff --git a/app/src/App.tsx b/app/src/App.tsx index 80d97f430..fe2d405b8 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,20 +1,16 @@ import React from 'react'; import './styles/App.scss'; -import ConfigProvider from './providers/configProvider/ConfigProvider'; -import config from './config'; import PatientDetailsProvider from './providers/patientProvider/PatientProvider'; import SessionProvider from './providers/sessionProvider/SessionProvider'; import AppRouter from './router/AppRouter'; function App() { return ( - - - - - - - + + + + + ); } diff --git a/app/src/components/blocks/completeStage/CompleteStage.test.tsx b/app/src/components/blocks/completeStage/CompleteStage.test.tsx index 6220663b6..b5c3ba682 100644 --- a/app/src/components/blocks/completeStage/CompleteStage.test.tsx +++ b/app/src/components/blocks/completeStage/CompleteStage.test.tsx @@ -8,10 +8,23 @@ import { import { buildPatientDetails, buildTextFile } from '../../../helpers/test/testBuilders'; import CompleteStage from './CompleteStage'; import { useNavigate } from 'react-router'; +import usePatient from '../../../helpers/hooks/usePatient'; jest.mock('react-router'); +jest.mock('../../../helpers/hooks/usePatient'); + +const mockedUsePatient = usePatient as jest.Mock; const mockPatientDetails = buildPatientDetails(); + describe('', () => { + beforeEach(() => { + process.env.REACT_APP_ENVIRONMENT = 'jest'; + mockedUsePatient.mockReturnValue(mockPatientDetails); + }); + afterEach(() => { + jest.clearAllMocks(); + }); + describe('Show complete stage', () => { it('with successfully uploaded docs', async () => { const navigateMock = jest.fn(); @@ -40,7 +53,7 @@ describe('', () => { // @ts-ignore useNavigate.mockImplementation(() => navigateMock); const documents: Array = [documentOne, documentTwo, documentThree]; - render(); + render(); expect( await screen.findByRole('heading', { name: 'Upload Summary' }), ).toBeInTheDocument(); diff --git a/app/src/components/blocks/completeStage/CompleteStage.tsx b/app/src/components/blocks/completeStage/CompleteStage.tsx index 42dafbdff..c1ac70498 100644 --- a/app/src/components/blocks/completeStage/CompleteStage.tsx +++ b/app/src/components/blocks/completeStage/CompleteStage.tsx @@ -3,18 +3,16 @@ import { Button } from 'nhsuk-react-components'; import { useNavigate } from 'react-router'; import { UploadDocument } from '../../../types/pages/UploadDocumentsPage/types'; import UploadSummary from '../uploadSummary/UploadSummary'; -import { PatientDetails } from '../../../types/generic/patientDetails'; interface Props { documents: Array; - patientDetails: PatientDetails; } -function CompleteStage({ documents, patientDetails }: Props) { +function CompleteStage({ documents }: Props) { const navigate = useNavigate(); return ( <> - +

If you want to upload another patient's health record

diff --git a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx index 2135edca9..4b463c01b 100644 --- a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx +++ b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx @@ -6,18 +6,27 @@ import { act } from 'react-dom/test-utils'; import userEvent from '@testing-library/user-event'; import { DOCUMENT_TYPE } from '../../../types/pages/UploadDocumentsPage/types'; import axios from 'axios/index'; -import * as ReactRouter from 'react-router'; -import { createMemoryHistory } from 'history'; import useRole from '../../../helpers/hooks/useRole'; import { REPOSITORY_ROLE, authorisedRoles } from '../../../types/generic/authRole'; import { routes } from '../../../types/generic/routes'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; +import usePatient from '../../../helpers/hooks/usePatient'; +jest.mock('../deletionConfirmationStage/DeletionConfirmationStage', () => () => ( +
Deletion complete
+)); jest.mock('../../../helpers/hooks/useBaseAPIHeaders'); jest.mock('../../../helpers/hooks/useRole'); +jest.mock('../../../helpers/hooks/usePatient'); jest.mock('axios'); +const mockedUseNavigate = jest.fn(); +jest.mock('react-router', () => ({ + useNavigate: () => mockedUseNavigate, +})); + const mockedUseRole = useRole as jest.Mock; const mockedAxios = axios as jest.Mocked; +const mockedUsePatient = usePatient as jest.Mock; const mockPatientDetails = buildPatientDetails(); const mockLgSearchResult = buildLgSearchResult(); @@ -29,6 +38,7 @@ const mockSetDownloadStage = jest.fn(); describe('DeleteDocumentsStage', () => { beforeEach(() => { process.env.REACT_APP_ENVIRONMENT = 'jest'; + mockedUsePatient.mockReturnValue(mockPatientDetails); }); afterEach(() => { @@ -178,11 +188,6 @@ describe('DeleteDocumentsStage', () => { describe('Navigation', () => { it('navigates to home page when API call returns 403', async () => { - const history = createMemoryHistory({ - initialEntries: ['/example'], - initialIndex: 1, - }); - const errorResponse = { response: { status: 403, @@ -192,9 +197,7 @@ describe('Navigation', () => { mockedAxios.delete.mockImplementation(() => Promise.reject(errorResponse)); mockedUseRole.mockReturnValue(REPOSITORY_ROLE.PCSE); - renderComponent(DOCUMENT_TYPE.ALL, history); - - expect(history.location.pathname).toBe('/example'); + renderComponent(DOCUMENT_TYPE.ALL); expect(screen.getByRole('radio', { name: 'Yes' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument(); @@ -205,32 +208,23 @@ describe('Navigation', () => { }); await waitFor(() => { - expect(history.location.pathname).toBe(routes.HOME); + expect(mockedUseNavigate).toHaveBeenCalledWith(routes.HOME); }); }); }); -const homeRoute = '/example'; -const renderComponent = ( - docType: DOCUMENT_TYPE, - history = createMemoryHistory({ - initialEntries: [homeRoute], - }), -) => { +const renderComponent = (docType: DOCUMENT_TYPE) => { const props: Omit = { - patientDetails: mockPatientDetails, numberOfFiles: mockLgSearchResult.number_of_files, docType, }; render( - - - , + , ); }; diff --git a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx index ef7140969..43fa542d4 100644 --- a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx +++ b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx @@ -2,10 +2,8 @@ import React, { Dispatch, SetStateAction, useState } from 'react'; import { FieldValues, useForm } from 'react-hook-form'; import { Button, Fieldset, Radios } from 'nhsuk-react-components'; import { getFormattedDate } from '../../../helpers/utils/formatDate'; -import { PatientDetails } from '../../../types/generic/patientDetails'; import DeletionConfirmationStage from '../deletionConfirmationStage/DeletionConfirmationStage'; import deleteAllDocuments, { DeleteResponse } from '../../../helpers/requests/deleteAllDocuments'; -import { useBaseAPIUrl } from '../../../providers/configProvider/ConfigProvider'; import useBaseAPIHeaders from '../../../helpers/hooks/useBaseAPIHeaders'; import { DOCUMENT_TYPE } from '../../../types/pages/UploadDocumentsPage/types'; import { DOWNLOAD_STAGE } from '../../../types/generic/downloadStage'; @@ -19,11 +17,12 @@ import { useNavigate } from 'react-router-dom'; import useRole from '../../../helpers/hooks/useRole'; import { REPOSITORY_ROLE } from '../../../types/generic/authRole'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; +import useBaseAPIUrl from '../../../helpers/hooks/useBaseAPIUrl'; +import usePatient from '../../../helpers/hooks/usePatient'; export type Props = { docType: DOCUMENT_TYPE; numberOfFiles: number; - patientDetails: PatientDetails; setStage?: Dispatch>; setIsDeletingDocuments?: Dispatch>; setDownloadStage?: Dispatch>; @@ -37,11 +36,11 @@ enum DELETE_DOCUMENTS_OPTION { function DeleteDocumentsStage({ docType, numberOfFiles, - patientDetails, setStage, setIsDeletingDocuments, setDownloadStage, }: Props) { + const patientDetails = usePatient(); const role = useRole(); const { register, handleSubmit } = useForm(); const { ref: deleteDocsRef, ...radioProps } = register('deleteDocs'); @@ -155,11 +154,7 @@ function DeleteDocumentsStage({ ) : ( - + ); } export default DeleteDocumentsStage; diff --git a/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.test.tsx b/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.test.tsx index d1615ad66..d34f0566a 100644 --- a/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.test.tsx +++ b/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.test.tsx @@ -3,14 +3,26 @@ import { buildLgSearchResult, buildPatientDetails } from '../../../helpers/test/ import DeletionConfirmationStage from './DeletionConfirmationStage'; import { act } from 'react-dom/test-utils'; import userEvent from '@testing-library/user-event'; -import * as ReactRouter from 'react-router'; -import { createMemoryHistory } from 'history'; import { routes } from '../../../types/generic/routes'; import useRole from '../../../helpers/hooks/useRole'; import { REPOSITORY_ROLE } from '../../../types/generic/authRole'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; +import { LinkProps } from 'react-router-dom'; +import usePatient from '../../../helpers/hooks/usePatient'; + +const mockedUseNavigate = jest.fn(); jest.mock('../../../helpers/hooks/useRole'); +jest.mock('../../../helpers/hooks/usePatient'); +jest.mock('react-router-dom', () => ({ + __esModule: true, + Link: (props: LinkProps) => , +})); +jest.mock('react-router', () => ({ + useNavigate: () => mockedUseNavigate, +})); + const mockedUseRole = useRole as jest.Mock; +const mockedUsePatient = usePatient as jest.Mock; const mockPatientDetails = buildPatientDetails(); const mockLgSearchResult = buildLgSearchResult(); @@ -19,6 +31,7 @@ const mockSetStage = jest.fn(); describe('DeletionConfirmationStage', () => { beforeEach(() => { process.env.REACT_APP_ENVIRONMENT = 'jest'; + mockedUsePatient.mockReturnValue(mockPatientDetails); }); afterEach(() => { jest.clearAllMocks(); @@ -32,7 +45,12 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = mockLgSearchResult.number_of_files; mockedUseRole.mockReturnValue(role); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); @@ -55,22 +73,22 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = 1; mockedUseRole.mockReturnValue(REPOSITORY_ROLE.PCSE); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); }); + expect( + screen.queryByText(`${numberOfFiles} files from the Lloyd George record of:`), + ).not.toBeInTheDocument(); expect( screen.getByText(`${numberOfFiles} file from the record of:`), ).toBeInTheDocument(); expect(screen.getByText(patientName)).toBeInTheDocument(); expect(screen.getByText(/NHS number/)).toBeInTheDocument(); - expect( - screen.getByRole('link', { - name: 'Start Again', - }), - ).toBeInTheDocument(); }); it.each([REPOSITORY_ROLE.GP_ADMIN, REPOSITORY_ROLE.GP_CLINICAL])( @@ -79,7 +97,12 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = mockLgSearchResult.number_of_files; mockedUseRole.mockReturnValue(role); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); @@ -97,7 +120,9 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = mockLgSearchResult.number_of_files; mockedUseRole.mockReturnValue(REPOSITORY_ROLE.PCSE); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); @@ -114,7 +139,9 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = 7; mockedUseRole.mockReturnValue(REPOSITORY_ROLE.PCSE); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); @@ -133,7 +160,12 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = 7; mockedUseRole.mockReturnValue(role); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); @@ -153,7 +185,12 @@ describe('DeletionConfirmationStage', () => { const numberOfFiles = mockLgSearchResult.number_of_files; mockedUseRole.mockReturnValue(role); - renderComponent(numberOfFiles); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); @@ -176,49 +213,24 @@ describe('DeletionConfirmationStage', () => { describe('Navigation', () => { it('navigates to Home page when link is clicked when user role is PCSE', async () => { - const history = createMemoryHistory({ - initialEntries: ['/'], - initialIndex: 0, - }); - const numberOfFiles = 7; mockedUseRole.mockReturnValue(REPOSITORY_ROLE.PCSE); - renderComponent(numberOfFiles, history); + render( + , + ); await waitFor(async () => { expect(screen.getByText('Deletion complete')).toBeInTheDocument(); }); act(() => { - userEvent.click( - screen.getByRole('link', { - name: 'Start Again', - }), - ); + userEvent.click(screen.getByRole('link')); }); await waitFor(() => { - expect(history.location.pathname).toBe(routes.HOME); + expect(mockedUseNavigate).toHaveBeenCalledWith(routes.HOME); }); }); }); }); - -const renderComponent = ( - numberOfFiles: number, - history = createMemoryHistory({ - initialEntries: ['/'], - initialIndex: 0, - }), -) => { - render( - - - , - ); -}; diff --git a/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.tsx b/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.tsx index aec4bd13b..1e795d56b 100644 --- a/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.tsx +++ b/app/src/components/blocks/deletionConfirmationStage/DeletionConfirmationStage.tsx @@ -1,6 +1,5 @@ import React, { Dispatch, SetStateAction } from 'react'; import { ButtonLink, Card } from 'nhsuk-react-components'; -import { PatientDetails } from '../../../types/generic/patientDetails'; import { routes } from '../../../types/generic/routes'; import { Link } from 'react-router-dom'; import { useNavigate } from 'react-router'; @@ -8,15 +7,16 @@ import { formatNhsNumber } from '../../../helpers/utils/formatNhsNumber'; import useRole from '../../../helpers/hooks/useRole'; import { REPOSITORY_ROLE } from '../../../types/generic/authRole'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; +import usePatient from '../../../helpers/hooks/usePatient'; export type Props = { numberOfFiles: number; - patientDetails: PatientDetails; setStage?: Dispatch>; }; -function DeletionConfirmationStage({ numberOfFiles, patientDetails, setStage }: Props) { +function DeletionConfirmationStage({ numberOfFiles, setStage }: Props) { const navigate = useNavigate(); + const patientDetails = usePatient(); const nhsNumber: string = patientDetails?.nhsNumber || ''; const formattedNhsNumber = formatNhsNumber(nhsNumber); const role = useRole(); diff --git a/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.test.tsx b/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.test.tsx index 28b2f6e76..c282ca2ed 100644 --- a/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.test.tsx +++ b/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.test.tsx @@ -1,19 +1,21 @@ import { createMemoryHistory } from 'history'; -import * as ReactRouter from 'react-router'; -import { buildPatientDetails, buildUserAuth } from '../../../helpers/test/testBuilders'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import axios from 'axios'; import DocumentSearchResultsOptions from './DocumentSearchResultsOptions'; import { SUBMISSION_STATE } from '../../../types/pages/documentSearchResultsPage/types'; -import { PatientDetails } from '../../../types/generic/patientDetails'; import { routes } from '../../../types/generic/routes'; -import SessionProvider, { Session } from '../../../providers/sessionProvider/SessionProvider'; -jest.mock('axios'); +import { buildPatientDetails } from '../../../helpers/test/testBuilders'; +const mockedUseNavigate = jest.fn(); +jest.mock('../../../helpers/hooks/useBaseAPIHeaders'); +jest.mock('../../../helpers/hooks/useBaseAPIUrl'); +jest.mock('axios'); +jest.mock('react-router', () => ({ + useNavigate: () => mockedUseNavigate, +})); const mockedAxios = axios as jest.Mocked; const updateDownloadState = jest.fn(); -const mockPatientDetails = buildPatientDetails(); const mockSetIsDeletingDocuments = jest.fn(); describe('DocumentSearchResultsOptions', () => { @@ -142,49 +144,28 @@ describe('DocumentSearchResultsOptions', () => { }; mockedAxios.get.mockImplementation(() => Promise.reject(errorResponse)); - renderDocumentSearchResultsOptions(SUBMISSION_STATE.INITIAL, {}, history); + renderDocumentSearchResultsOptions(SUBMISSION_STATE.INITIAL); expect(history.location.pathname).toBe('/example'); userEvent.click(screen.getByRole('button', { name: 'Download All Documents' })); await waitFor(() => { - expect(history.location.pathname).toBe(routes.HOME); + expect(mockedUseNavigate).toHaveBeenCalledWith(routes.HOME); }); }); }); }); -const homeRoute = '/example'; -const renderDocumentSearchResultsOptions = ( - downloadState: SUBMISSION_STATE, - patientOverride: Partial = {}, - history = createMemoryHistory({ - initialEntries: [homeRoute], - initialIndex: 1, - }), -) => { - const auth: Session = { - auth: buildUserAuth(), - isLoggedIn: true, - }; - const patient: PatientDetails = { - ...buildPatientDetails(), - ...patientOverride, - }; - +const renderDocumentSearchResultsOptions = (downloadState: SUBMISSION_STATE) => { + const patient = buildPatientDetails(); render( - - - - - , + , ); }; diff --git a/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx b/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx index 8eaba8a26..6a75a7de2 100644 --- a/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx +++ b/app/src/components/blocks/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx @@ -5,18 +5,16 @@ import { SUBMISSION_STATE } from '../../../types/pages/documentSearchResultsPage import { useNavigate } from 'react-router-dom'; import getPresignedUrlForZip from '../../../helpers/requests/getPresignedUrlForZip'; import { AxiosError } from 'axios'; -import { useBaseAPIUrl } from '../../../providers/configProvider/ConfigProvider'; import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'; import useBaseAPIHeaders from '../../../helpers/hooks/useBaseAPIHeaders'; import { DOCUMENT_TYPE } from '../../../types/pages/UploadDocumentsPage/types'; -import { PatientDetails } from '../../../types/generic/patientDetails'; +import useBaseAPIUrl from '../../../helpers/hooks/useBaseAPIUrl'; type Props = { nhsNumber: string; downloadState: string; updateDownloadState: (newState: SUBMISSION_STATE) => void; numberOfFiles: number; - patientDetails: PatientDetails; setIsDeletingDocuments: Dispatch>; }; diff --git a/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.test.tsx b/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.test.tsx index 2c7953c4d..188c31954 100644 --- a/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.test.tsx +++ b/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.test.tsx @@ -1,15 +1,27 @@ import { render, screen, waitFor } from '@testing-library/react'; import LgDownloadAllStage, { Props } from './LloydGeorgeDownloadAllStage'; import { buildLgSearchResult, buildPatientDetails } from '../../../helpers/test/testBuilders'; -import { createMemoryHistory } from 'history'; -import * as ReactRouter from 'react-router'; import axios from 'axios'; import { act } from 'react-dom/test-utils'; import userEvent from '@testing-library/user-event'; - +import usePatient from '../../../helpers/hooks/usePatient'; +import { LinkProps } from 'react-router-dom'; + +const mockedUseNavigate = jest.fn(); +jest.mock('react-router', () => ({ + useNavigate: () => mockedUseNavigate, +})); +jest.mock('react-router-dom', () => ({ + __esModule: true, + Link: (props: LinkProps) => , +})); jest.mock('axios'); jest.mock('../../../helpers/hooks/useBaseAPIHeaders'); +jest.mock('../../../helpers/hooks/usePatient'); + const mockedAxios = axios as jest.Mocked; +const mockedUsePatient = usePatient as jest.Mock; + const mockPdf = buildLgSearchResult(); const mockPatient = buildPatientDetails(); const mockSetStage = jest.fn(); @@ -17,6 +29,7 @@ const mockSetStage = jest.fn(); describe('LloydGeorgeDownloadAllStage', () => { beforeEach(() => { process.env.REACT_APP_ENVIRONMENT = 'jest'; + mockedUsePatient.mockReturnValue(mockPatient); }); afterEach(() => { jest.clearAllMocks(); @@ -85,24 +98,11 @@ describe('LloydGeorgeDownloadAllStage', () => { }); }); -const TestApp = (props: Omit) => { - const history = createMemoryHistory({ - initialEntries: ['/example'], - initialIndex: 0, - }); - return ( - - - - ); -}; - const renderComponent = (propsOverride?: Partial) => { const props: Omit = { numberOfFiles: mockPdf.number_of_files, - patientDetails: mockPatient, ...propsOverride, }; - return render(); + return render(); }; diff --git a/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.tsx b/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.tsx index d5c0dbbae..33c8dd509 100644 --- a/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.tsx +++ b/app/src/components/blocks/lloydGeorgeDownloadAllStage/LloydGeorgeDownloadAllStage.tsx @@ -9,19 +9,18 @@ import React, { } from 'react'; import { Card } from 'nhsuk-react-components'; import { Link } from 'react-router-dom'; -import { PatientDetails } from '../../../types/generic/patientDetails'; -import { useBaseAPIUrl } from '../../../providers/configProvider/ConfigProvider'; import useBaseAPIHeaders from '../../../helpers/hooks/useBaseAPIHeaders'; import getPresignedUrlForZip from '../../../helpers/requests/getPresignedUrlForZip'; import { DOCUMENT_TYPE } from '../../../types/pages/UploadDocumentsPage/types'; import LgDownloadComplete from '../lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; +import useBaseAPIUrl from '../../../helpers/hooks/useBaseAPIUrl'; +import usePatient from '../../../helpers/hooks/usePatient'; const FakeProgress = require('fake-progress'); export type Props = { numberOfFiles: number; setStage: Dispatch>; - patientDetails: PatientDetails; }; type DownloadLinkAttributes = { @@ -29,7 +28,7 @@ type DownloadLinkAttributes = { filename: string; }; -function LloydGeorgeDownloadAllStage({ numberOfFiles, setStage, patientDetails }: Props) { +function LloydGeorgeDownloadAllStage({ numberOfFiles, setStage }: Props) { const timeToComplete = 600; const [progress, setProgress] = useState(0); const baseUrl = useBaseAPIUrl(); @@ -42,8 +41,8 @@ function LloydGeorgeDownloadAllStage({ numberOfFiles, setStage, patientDetails } const linkRef = useRef(null); const mounted = useRef(false); - const { nhsNumber } = patientDetails; - + const patientDetails = usePatient(); + const nhsNumber = patientDetails?.nhsNumber ?? ''; const [delayTimer, setDelayTimer] = useState(); const progressTimer = useMemo(() => { @@ -103,8 +102,8 @@ function LloydGeorgeDownloadAllStage({ numberOfFiles, setStage, patientDetails }

Downloading documents

-

{patientDetails.givenName + ' ' + patientDetails.familyName}

-

NHS number: {patientDetails.nhsNumber}

+

{patientDetails?.givenName + ' ' + patientDetails?.familyName}

+

NHS number: {patientDetails?.nhsNumber}

Preparing download for {numberOfFiles} files

@@ -146,7 +145,7 @@ function LloydGeorgeDownloadAllStage({ numberOfFiles, setStage, patientDetails }
) : ( - + ); } diff --git a/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.test.tsx b/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.test.tsx index bfbbee83d..b01759fdc 100644 --- a/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.test.tsx +++ b/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.test.tsx @@ -1,16 +1,28 @@ +import usePatient from '../../../helpers/hooks/usePatient'; import { buildPatientDetails } from '../../../helpers/test/testBuilders'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; -import { PatientDetails } from '../../../types/generic/patientDetails'; -import LgDownloadComplete, { Props } from './LloydGeorgeDownloadComplete'; +import LgDownloadComplete from './LloydGeorgeDownloadComplete'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { act } from 'react-dom/test-utils'; +jest.mock('../../../helpers/hooks/usePatient'); + const mockSetStage = jest.fn(); const mockPatient = buildPatientDetails(); +const mockedUsePatient = usePatient as jest.Mock; + describe('LloydGeorgeDownloadComplete', () => { + beforeEach(() => { + process.env.REACT_APP_ENVIRONMENT = 'jest'; + mockedUsePatient.mockReturnValue(mockPatient); + }); + afterEach(() => { + jest.clearAllMocks(); + }); + it('renders the component', () => { - renderComponent(mockPatient); + render(); expect(screen.getByRole('heading', { name: 'Download complete' })).toBeInTheDocument(); expect(screen.getByText('Documents from the Lloyd George record of:')).toBeInTheDocument(); @@ -23,7 +35,7 @@ describe('LloydGeorgeDownloadComplete', () => { }); it('updates the download stage view when return to medical records is clicked', async () => { - renderComponent(mockPatient); + render(); expect(screen.getByRole('heading', { name: 'Download complete' })).toBeInTheDocument(); expect(screen.getByText('Documents from the Lloyd George record of:')).toBeInTheDocument(); @@ -45,11 +57,3 @@ describe('LloydGeorgeDownloadComplete', () => { }); }); }); - -const TestApp = ({ patientDetails }: Omit) => { - return ; -}; - -const renderComponent = (patientDetails: PatientDetails) => { - render(); -}; diff --git a/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.tsx b/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.tsx index ad8246e1a..185e10776 100644 --- a/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.tsx +++ b/app/src/components/blocks/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.tsx @@ -1,14 +1,14 @@ import React, { Dispatch, SetStateAction } from 'react'; -import { PatientDetails } from '../../../types/generic/patientDetails'; import { Button, Card } from 'nhsuk-react-components'; import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages'; +import usePatient from '../../../helpers/hooks/usePatient'; export type Props = { - patientDetails: PatientDetails; setStage: Dispatch>; }; -function LloydGeorgeDownloadComplete({ patientDetails, setStage }: Props) { +function LloydGeorgeDownloadComplete({ setStage }: Props) { + const patientDetails = usePatient(); return (
@@ -19,10 +19,10 @@ function LloydGeorgeDownloadComplete({ patientDetails, setStage }: Props) { Documents from the Lloyd George record of:
- {patientDetails.givenName + ' ' + patientDetails.familyName} + {patientDetails?.givenName + ' ' + patientDetails?.familyName}
-
{`(NHS number: ${patientDetails.nhsNumber})`}
+
{`(NHS number: ${patientDetails?.nhsNumber})`}