PRMDR-506 Refactor UI Tests

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) => (
-            <ConfigProvider config={config}>
-                <PatientDetailsProvider patientDetails={{ ...buildPatientDetails() }}>
-                    <MemoryRouter initialEntries={['/']}>
-                        <div
-                            className="nhsuk-width-container"
-                            style={{
-                                margin: `0 auto`,
-                                maxWidth: 960,
-                                padding: `0 1.0875rem 1.45rem`,
-                                minHeight: '75vh',
-                            }}
+            <PatientDetailsProvider patientDetails={{ ...buildPatientDetails() }}>
+                <MemoryRouter initialEntries={['/']}>
+                    <div
+                        className="nhsuk-width-container"
+                        style={{
+                            margin: `0 auto`,
+                            maxWidth: 960,
+                            padding: `0 1.0875rem 1.45rem`,
+                            minHeight: '75vh',
+                        }}
+                    >
+                        <main
+                            className="nhsuk-main-wrapper app-homepage"
+                            id="maincontent"
+                            role="main"
                         >
-                            <main
-                                className="nhsuk-main-wrapper app-homepage"
-                                id="maincontent"
-                                role="main"
-                            >
-                                <section className="app-homepage-content">
-                                    <div>
-                                        <Story />
-                                    </div>
-                                </section>
-                            </main>
-                        </div>
-                    </MemoryRouter>
-                </PatientDetailsProvider>
-            </ConfigProvider>
+                            <section className="app-homepage-content">
+                                <div>
+                                    <Story />
+                                </div>
+                            </section>
+                        </main>
+                    </div>
+                </MemoryRouter>
+            </PatientDetailsProvider>
         ),
     ],
 };

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 (
-        <ConfigProvider config={config}>
-            <SessionProvider>
-                <PatientDetailsProvider>
-                    <AppRouter />
-                </PatientDetailsProvider>
-            </SessionProvider>
-        </ConfigProvider>
+        <SessionProvider>
+            <PatientDetailsProvider>
+                <AppRouter />
+            </PatientDetailsProvider>
+        </SessionProvider>
     );
 }
 

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('<CompleteStage />', () => {
+    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('<CompleteStage />', () => {
             // @ts-ignore
             useNavigate.mockImplementation(() => navigateMock);
             const documents: Array<UploadDocument> = [documentOne, documentTwo, documentThree];
-            render(<CompleteStage patientDetails={mockPatientDetails} documents={documents} />);
+            render(<CompleteStage documents={documents} />);
             expect(
                 await screen.findByRole('heading', { name: 'Upload Summary' }),
             ).toBeInTheDocument();

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<UploadDocument>;
-    patientDetails: PatientDetails;
 }
 
-function CompleteStage({ documents, patientDetails }: Props) {
+function CompleteStage({ documents }: Props) {
     const navigate = useNavigate();
 
     return (
         <>
-            <UploadSummary patientDetails={patientDetails} documents={documents} />
+            <UploadSummary documents={documents} />
             <p style={{ fontWeight: '600' }}>
                 If you want to upload another patient&apos;s health record
             </p>

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', () => () => (
+    <div>Deletion complete</div>
+));
 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<typeof axios>;
+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<Props, 'setStage' | 'setIsDeletingDocuments' | 'setDownloadStage'> = {
-        patientDetails: mockPatientDetails,
         numberOfFiles: mockLgSearchResult.number_of_files,
         docType,
     };
 
     render(
-        <ReactRouter.Router navigator={history} location={homeRoute}>
-            <DeleteDocumentsStage
-                {...props}
-                setStage={mockSetStage}
-                setIsDeletingDocuments={mockSetIsDeletingDocuments}
-                setDownloadStage={mockSetDownloadStage}
-            />
-        </ReactRouter.Router>,
+        <DeleteDocumentsStage
+            {...props}
+            setStage={mockSetStage}
+            setIsDeletingDocuments={mockSetIsDeletingDocuments}
+            setDownloadStage={mockSetDownloadStage}
+        />,
     );
 };

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<SetStateAction<LG_RECORD_STAGE>>;
     setIsDeletingDocuments?: Dispatch<SetStateAction<boolean>>;
     setDownloadStage?: Dispatch<SetStateAction<DOWNLOAD_STAGE>>;
@@ -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({
             </form>
         </>
     ) : (
-        <DeletionConfirmationStage
-            numberOfFiles={numberOfFiles}
-            patientDetails={patientDetails}
-            setStage={setStage}
-        />
+        <DeletionConfirmationStage numberOfFiles={numberOfFiles} setStage={setStage} />
     );
 }
 export default DeleteDocumentsStage;