CCM-8354: NHS App test message details

frontend/src/__tests__/components/molecules/LetterRender/CombinedLetterErrorSummary.test.tsx

@@ -76,6 +76,9 @@ describe('CombinedLetterErrorSummary', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('error-summary')).toBeInTheDocument();
+      expect(screen.getByTestId('error-summary')).toHaveTextContent(
+        'There is a problem'
+      );
       expect(
         screen.getByRole('link', { name: 'Field is required' })
       ).toBeInTheDocument();
@@ -89,12 +92,39 @@ describe('CombinedLetterErrorSummary', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('error-summary')).toBeInTheDocument();
+      expect(screen.getByTestId('error-summary')).toHaveTextContent(
+        'There is a problem'
+      );
       expect(
         screen.getByRole('link', { name: 'Render failed' })
       ).toBeInTheDocument();
     });
   });
 
+  it('displays recipient validation error in summary banner with the correct link target', async () => {
+    renderWithLetterRenderError({
+      formErrors: [],
+      fieldErrors: {
+        'system-personalisation-pack-id-shortFormRender': [
+          'Select an example recipient',
+        ],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-summary')).toHaveTextContent(
+        'There is a problem'
+      );
+
+      expect(
+        screen.getByRole('link', { name: 'Select an example recipient' })
+      ).toHaveAttribute(
+        'href',
+        '#system-personalisation-pack-id-shortFormRender'
+      );
+    });
+  });
+
   it('prefers parentErrorState over letterRenderErrorState when both are set', async () => {
     mockUseNHSNotifyForm.mockReturnValue([
       {

frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx

@@ -276,7 +276,7 @@ describe('LetterRenderForm', () => {
           formErrors: [],
           fieldErrors: {
             'system-personalisation-pack-id-shortFormRender': [
-              'Choose example recipient',
+              'Choose an example recipient',
             ],
           },
         },
@@ -287,18 +287,20 @@ describe('LetterRenderForm', () => {
         initialState
       );
 
-      expect(screen.getByText('Choose example recipient')).toBeInTheDocument();
+      expect(
+        screen.getByTestId(
+          'error-system-personalisation-pack-id-shortFormRender'
+        )
+      ).toHaveTextContent('Choose an example recipient');
 
       const formGroup = screen
-        .getByText('Choose example recipient')
+        .getByTestId('error-system-personalisation-pack-id-shortFormRender')
         .closest('.nhsuk-form-group');
-
       expect(formGroup).toHaveClass('nhsuk-form-group--error');
 
       const select = screen.getByRole('combobox', {
         name: 'Example recipient',
       });
-
       expect(select).toHaveClass('nhsuk-select--error');
     });
 
@@ -308,7 +310,7 @@ describe('LetterRenderForm', () => {
           formErrors: [],
           fieldErrors: {
             'system-personalisation-pack-id-longFormRender': [
-              'Choose example recipient',
+              'Choose an example recipient',
             ],
           },
         },
@@ -319,18 +321,20 @@ describe('LetterRenderForm', () => {
         initialState
       );
 
-      expect(screen.getByText('Choose example recipient')).toBeInTheDocument();
+      expect(
+        screen.getByTestId(
+          'error-system-personalisation-pack-id-longFormRender'
+        )
+      ).toHaveTextContent('Choose an example recipient');
 
       const formGroup = screen
-        .getByText('Choose example recipient')
+        .getByTestId('error-system-personalisation-pack-id-longFormRender')
         .closest('.nhsuk-form-group');
-
       expect(formGroup).toHaveClass('nhsuk-form-group--error');
 
       const select = screen.getByRole('combobox', {
         name: 'Example recipient',
       });
-
       expect(select).toHaveClass('nhsuk-select--error');
     });
 
@@ -450,7 +454,7 @@ describe('LetterRenderForm', () => {
           formErrors: [],
           fieldErrors: {
             'system-personalisation-pack-id-shortFormRender': [
-              'Choose example recipient',
+              'Choose an example recipient',
             ],
             'custom-appointmentDate-shortFormRender': [
               'Enter example data for appointmentDate',
@@ -481,7 +485,7 @@ describe('LetterRenderForm', () => {
           formErrors: [],
           fieldErrors: {
             'system-personalisation-pack-id-longFormRender': [
-              'Choose example recipient',
+              'Choose an example recipient',
             ],
             'custom-appointmentDate-longFormRender': [
               'Enter example data for appointmentDate',

frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx

@@ -530,7 +530,7 @@ describe('LetterRenderTab', () => {
       );
     });
 
-    it('displays validation error when no recipient selected', async () => {
+    it('displays inline validation error and sets error state when no recipient selected', async () => {
       mockUpdateLetterPreview.mockResolvedValue(
         createMockState({
           errorState: {
@@ -561,8 +561,19 @@ describe('LetterRenderTab', () => {
       });
 
       expect(
-        await screen.findByText('Select an example recipient')
-      ).toBeInTheDocument();
+        await screen.findByTestId(
+          'error-system-personalisation-pack-id-shortFormRender'
+        )
+      ).toHaveTextContent('Select an example recipient');
+
+      expect(mockSetLetterRenderErrorState).toHaveBeenCalledWith({
+        formErrors: [],
+        fieldErrors: {
+          'system-personalisation-pack-id-shortFormRender': [
+            'Select an example recipient',
+          ],
+        },
+      });
     });
 
     it('forwards error state to LetterRenderErrorProvider after submission', async () => {