Prmdr 397: Incorrect Given name format (#143)

* added additional required space in patient summary given name display

---------

Co-authored-by: Scott Alexander <scott.alexander@madetech.com>

app/src/components/generic/patientSummary/PatientSummary.test.tsx

@@ -19,4 +19,18 @@ describe('PatientSummary', () => {
         expect(screen.getByText(mockDetails.familyName)).toBeInTheDocument();
         //expect(screen.getByText(mockDetails.givenName)).toBeInTheDocument()
     });
+
+    it('renders multiple given names with correct spacing', () => {
+        const mockDetails = buildPatientDetails({
+            familyName: 'Jones',
+            nhsNumber: '0000222000',
+            givenName: ['Comfort', 'Zulu'],
+        });
+
+        render(<PatientSummary patientDetails={mockDetails} />);
+
+        // Using hard coded expected value instead of duplicating the expected logic
+        const expectedGivenName = 'Comfort Zulu';
+        expect(screen.getByText(expectedGivenName)).toBeInTheDocument();
+    });
 });

app/src/components/generic/patientSummary/PatientSummary.tsx

@@ -23,7 +23,7 @@ const PatientSummary = ({ patientDetails }: Props) => {
             <SummaryList.Row>
                 <SummaryList.Key>First name</SummaryList.Key>
                 <SummaryList.Value id="patient-summary-given-name">
-                    {patientDetails?.givenName?.map((name) => `${name}`)}
+                    {patientDetails?.givenName?.map((name) => `${name} `)}
                 </SummaryList.Value>
             </SummaryList.Row>
             <SummaryList.Row>