[PRME-177] fix dob and nhs number formatting on upload complete stage (#740)

* [PRME-177] fix dob and nhs number formatting on upload complete stage

* [PRME-177] add UT for testing the actual patient details

* cleanup

* [PRME-177] export getFormattedDateFromString functionality

Author: kamenbachvarov-nhs

app/src/components/blocks/_documentUpload/documentUploadCompleteStage/DocumentUploadCompleteStage.test.tsx

@@ -3,6 +3,10 @@ import DocumentUploadCompleteStage from './DocumentUploadCompleteStage';
 import userEvent from '@testing-library/user-event';
 import { routes } from '../../../../types/generic/routes';
 import { LinkProps } from 'react-router-dom';
+import { buildPatientDetails } from '../../../../helpers/test/testBuilders';
+import { getFormattedDate } from '../../../../helpers/utils/formatDate';
+import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
+import usePatient from '../../../../helpers/hooks/usePatient';
 
 const mockNavigate = vi.fn();
 vi.mock('../../../../helpers/hooks/usePatient');
@@ -13,8 +17,11 @@ vi.mock('react-router-dom', () => ({
 
 URL.createObjectURL = vi.fn();
 
+const patientDetails = buildPatientDetails();
+
 describe('DocumentUploadCompleteStage', () => {
     beforeEach(() => {
+        vi.mocked(usePatient).mockReturnValue(patientDetails);
         import.meta.env.VITE_ENVIRONMENT = 'vitest';
     });
     afterEach(() => {
@@ -24,13 +31,21 @@ describe('DocumentUploadCompleteStage', () => {
     it('renders', async () => {
         render(<DocumentUploadCompleteStage />);
 
-        await waitFor(async () => {
-            expect(
-                screen.getByText(
-                    'You have successfully uploaded a digital Lloyd George record for:',
-                ),
-            ).toBeInTheDocument();
-        });
+        expect(
+            screen.getByText(
+                'You have successfully uploaded a digital Lloyd George record for:',
+            ),
+        ).toBeInTheDocument();
+
+        const expectedFullName = `${patientDetails.familyName}, ${patientDetails.givenName}`;
+        expect(screen.getByTestId("patient-name").textContent).toEqual("Patient name: " + expectedFullName)
+
+        const expectedNhsNumber = formatNhsNumber(patientDetails.nhsNumber);
+        expect(screen.getByTestId("nhs-number").textContent).toEqual("NHS Number: " + expectedNhsNumber)
+
+        const expectedDob = getFormattedDate(new Date(patientDetails.birthDate));
+        expect(screen.getByTestId("dob").textContent).toEqual("Date of birth: " + expectedDob)
+
     });
 
     it('should navigate to search when clicking the search link', async () => {

app/src/components/blocks/_documentUpload/documentUploadCompleteStage/DocumentUploadCompleteStage.tsx

@@ -3,13 +3,20 @@ import { routes } from '../../../../types/generic/routes';
 import { Link, useNavigate } from 'react-router-dom';
 import useTitle from '../../../../helpers/hooks/useTitle';
 import usePatient from '../../../../helpers/hooks/usePatient';
+import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
+import { getFormattedDateFromString } from '../../../../helpers/utils/formatDate';
 
 const DocumentUploadCompleteStage = () => {
     const navigate = useNavigate();
     const patientDetails = usePatient();
+    const nhsNumber: string = patientDetails?.nhsNumber ?? '';
+    const formattedNhsNumber = formatNhsNumber(nhsNumber);
+    const dob: string = getFormattedDateFromString(patientDetails?.birthDate)
 
     useTitle({ pageTitle: 'Record upload complete' });
 
+    const patientName = `${patientDetails?.familyName}, ${patientDetails?.givenName}`
+
     return (
         <div className="lloydgeorge_upload-complete" data-testid="upload-complete-page">
             <div className="nhsuk-panel" data-testid="upload-complete-card">
@@ -19,13 +26,13 @@ const DocumentUploadCompleteStage = () => {
                 </div>
                 <br />
                 <div className="nhsuk-panel__body">
-                    <strong>
-                        Patient name: {patientDetails?.familyName}, {patientDetails?.givenName}
+                    <strong data-testid="patient-name">
+                        Patient name: {patientName}
                     </strong>
                     <br />
-                    <span>NHS Number: {patientDetails?.nhsNumber}</span>
+                    <span data-testid="nhs-number">NHS Number: {formattedNhsNumber}</span>
                     <br />
-                    <span>Date of birth: {patientDetails?.birthDate}</span>
+                    <span data-testid="dob">Date of birth: {dob}</span>
                 </div>
             </div>
 

app/src/helpers/utils/formatDate.ts

@@ -9,3 +9,10 @@ export const formatDateWithDashes = (date: Date): string => {
 
     return `${day}-${month}-${year}`;
 };
+
+export const getFormattedDateFromString = (dateString: string | undefined): string => {
+  if (!dateString) {
+    return '';
+  }
+  return getFormattedDate(new Date(dateString));
+};