[PRME-170] Move startUpload call into the DocumentUploadingStage (#743)

* [PRME-170] Move start upload trigger to uploading page

* [PRME-170] rearrange tests accoding to updated logic

* clean up imports

---------

Co-authored-by: Adam Whiting <[email protected]>

Author: kamenbachvarov-nhs

app/src/components/blocks/_documentUpload/documentSelectOrderStage/DocumentSelectOrderStage.tsx

@@ -162,10 +162,10 @@ const DocumentSelectOrderStage = ({ documents, setDocuments, setMergedPdfBlob }:
 
     const submitDocuments = () => {
         updateDocumentPositions();
-        // if (documents.length === 1) {
-        //     navigate(routeChildren.DOCUMENT_UPLOAD_UPLOADING);
-        //     return;
-        // }
+        if (documents.length === 1) {
+            navigate(routeChildren.DOCUMENT_UPLOAD_UPLOADING);
+            return;
+        }
         navigate(routeChildren.DOCUMENT_UPLOAD_CONFIRMATION);
     };
 

app/src/components/blocks/_documentUpload/documentUploadConfirmStage/DocumentUploadConfirmStage.test.tsx

@@ -12,7 +12,7 @@ import {
 import * as ReactRouter from 'react-router-dom';
 import { MemoryHistory, createMemoryHistory } from 'history';
 import userEvent from '@testing-library/user-event';
-import { routes } from '../../../../types/generic/routes';
+import { routeChildren, routes } from '../../../../types/generic/routes';
 
 const mockedUseNavigate = vi.fn();
 vi.mock('../../../../helpers/hooks/usePatient');
@@ -34,8 +34,6 @@ let history = createMemoryHistory({
 });
 
 describe('DocumentUploadCompleteStage', () => {
-    const mockStartUpload = vi.fn();
-
     beforeEach(() => {
         vi.mocked(usePatient).mockReturnValue(patientDetails);
 
@@ -54,13 +52,13 @@ describe('DocumentUploadCompleteStage', () => {
         });
     });
 
-    it('should trigger start upload when confirm button is clicked', async () => {
+    it('should navigate to next screen when confirm button is clicked', async () => {
         renderApp(history, 1);
 
         userEvent.click(await screen.findByTestId('confirm-button'));
 
         await waitFor(() => {
-            expect(mockStartUpload).toHaveBeenCalled();
+            expect(mockedUseNavigate).toHaveBeenCalledWith(routeChildren.DOCUMENT_UPLOAD_UPLOADING);
         });
     });
 
@@ -130,7 +128,7 @@ describe('DocumentUploadCompleteStage', () => {
 
         return render(
             <ReactRouter.Router navigator={history} location={history.location}>
-                <DocumentUploadConfirmStage documents={documents} startUpload={mockStartUpload} />
+                <DocumentUploadConfirmStage documents={documents} />
             </ReactRouter.Router>,
         );
     };

app/src/components/blocks/_documentUpload/documentUploadConfirmStage/DocumentUploadConfirmStage.tsx

@@ -3,17 +3,16 @@ import useTitle from '../../../../helpers/hooks/useTitle';
 import { DOCUMENT_TYPE, UploadDocument } from '../../../../types/pages/UploadDocumentsPage/types';
 import BackButton from '../../../generic/backButton/BackButton';
 import { useNavigate } from 'react-router-dom';
-import { routes } from '../../../../types/generic/routes';
+import { routeChildren, routes } from '../../../../types/generic/routes';
 import { useState } from 'react';
 import Pagination from '../../../generic/pagination/Pagination';
 import PatientSummary, { PatientInfo } from '../../../generic/patientSummary/PatientSummary';
 
 type Props = {
     documents: UploadDocument[];
-    startUpload: () => Promise<void>;
 };
 
-const DocumentUploadConfirmStage = ({ documents, startUpload }: Props) => {
+const DocumentUploadConfirmStage = ({ documents }: Props) => {
     const [currentPage, setCurrentPage] = useState<number>(0);
     const navigate = useNavigate();
     const pageSize = 10;
@@ -103,7 +102,10 @@ const DocumentUploadConfirmStage = ({ documents, startUpload }: Props) => {
                 setCurrentPage={setCurrentPage}
             />
 
-            <Button data-testid="confirm-button" onClick={startUpload}>
+            <Button 
+                data-testid="confirm-button" 
+                onClick={() => navigate(routeChildren.DOCUMENT_UPLOAD_UPLOADING)}
+            >
                 Confirm file order and upload files
             </Button>
         </div>

app/src/components/blocks/_documentUpload/documentUploadingStage/DocumentUploadingStage.test.tsx

@@ -12,6 +12,7 @@ URL.createObjectURL = vi.fn();
 
 describe('DocumentUploadCompleteStage', () => {
     let documents: UploadDocument[];
+    const mockStartUpload = vi.fn();
     beforeEach(() => {
         import.meta.env.VITE_ENVIRONMENT = 'vitest';
         documents = [];
@@ -22,13 +23,21 @@ describe('DocumentUploadCompleteStage', () => {
 
     describe('Rendering', () => {
         it('renders', async () => {
-            render(<DocumentUploadingStage documents={documents} />);
+            render(<DocumentUploadingStage documents={documents} startUpload={mockStartUpload} />);
 
             await waitFor(async () => {
                 expect(
                     screen.queryAllByText('Your documents are uploading')[0],
                 ).toBeInTheDocument();
             });
         });
+
+        it('should trigger start upload when page is loaded', async () => {
+            render(<DocumentUploadingStage documents={documents} startUpload={mockStartUpload} />);
+    
+            await waitFor(() => {
+                expect(mockStartUpload).toHaveBeenCalledTimes(1);
+            });
+        });
     });
 });

app/src/components/blocks/_documentUpload/documentUploadingStage/DocumentUploadingStage.tsx

@@ -1,20 +1,25 @@
 import { Table, WarningCallout } from 'nhsuk-react-components';
 import useTitle from '../../../../helpers/hooks/useTitle';
-import { getUploadMessage } from '../../../../helpers/utils/uploadDocumentHelpers';
 import {
     DOCUMENT_TYPE,
     DOCUMENT_UPLOAD_STATE,
     UploadDocument,
 } from '../../../../types/pages/UploadDocumentsPage/types';
+import { useEffect } from 'react';
 
 type Props = {
     documents: UploadDocument[];
+    startUpload: () => Promise<void>;
 };
 
-const DocumentUploadingStage = ({ documents }: Props) => {
+const DocumentUploadingStage = ({ documents, startUpload }: Props) => {
     const pageHeader = 'Your documents are uploading';
     useTitle({ pageTitle: 'Uploading documents' });
 
+    useEffect(() => {
+        startUpload();
+    }, []);
+
     return (
         <>
             <h1 data-testid="arf-upload-uploading-stage-header">{pageHeader}</h1>

app/src/pages/documentUploadPage/DocumentUploadPage.tsx

@@ -37,8 +37,6 @@ import DocumentUploadCompleteStage from '../../components/blocks/_documentUpload
 import DocumentUploadRemoveFilesStage from '../../components/blocks/_documentUpload/documentUploadRemoveFilesStage/DocumentUploadRemoveFilesStage';
 import useConfig from '../../helpers/hooks/useConfig';
 import DocumentUploadInfectedStage from '../../components/blocks/_documentUpload/documentUploadInfectedStage/DocumentUploadInfectedStage';
-import { formatDateWithDashes } from '../../helpers/utils/formatDate';
-import { PatientDetails } from '../../types/generic/patientDetails';
 
 function DocumentUploadPage() {
     const patientDetails = usePatient();
@@ -152,7 +150,7 @@ function DocumentUploadPage() {
         return session;
     };
 
-    const submitDocuments = async () => {
+    const startUpload = async () => {
         try {
             let reducedDocuments = documents;
 
@@ -194,8 +192,6 @@ function DocumentUploadPage() {
 
             const updateStateInterval = startIntervalTimer(uploadingDocuments);
             setIntervalTimer(updateStateInterval);
-
-            navigate(routeChildren.DOCUMENT_UPLOAD_UPLOADING);
         } catch (e) {
             const error = e as AxiosError;
             if (error.response?.status === 403) {
@@ -207,6 +203,7 @@ function DocumentUploadPage() {
                         state: DOCUMENT_UPLOAD_STATE.SUCCEEDED,
                     })),
                 );
+                window.clearInterval(intervalTimer);
                 navigate(routeChildren.DOCUMENT_UPLOAD_COMPLETED);
             } else {
                 navigate(routes.SERVER_ERROR + errorToParams(error));
@@ -336,15 +333,12 @@ function DocumentUploadPage() {
                 <Route
                     path={getLastURLPath(routeChildren.DOCUMENT_UPLOAD_CONFIRMATION) + '/*'}
                     element={
-                        <DocumentUploadConfirmStage
-                            documents={documents}
-                            startUpload={submitDocuments}
-                        />
+                        <DocumentUploadConfirmStage documents={documents} />
                     }
                 />
                 <Route
                     path={getLastURLPath(routeChildren.DOCUMENT_UPLOAD_UPLOADING) + '/*'}
-                    element={<DocumentUploadingStage documents={documents} />}
+                    element={<DocumentUploadingStage documents={documents} startUpload={startUpload} />}
                 />
                 <Route
                     path={getLastURLPath(routeChildren.DOCUMENT_UPLOAD_COMPLETED) + '/*'}