CDD-2366: updated all feedback fields tests to confirm the error mess…

…ages are displayed when required.

src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx

@@ -64,4 +64,13 @@ describe('CheckboxField', () => {
     // Ensure the checkbox input value matches defaultValue prop
     expect(checkbox).toHaveAttribute('value', mockProps.defaultValue)
   })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<CheckboxField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please check this field as it is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
+  })
 })

src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx

@@ -86,4 +86,13 @@ describe('CheckboxesField Component', () => {
     const checkboxes = screen.queryAllByRole('checkbox')
     expect(checkboxes).toHaveLength(0)
   })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<CheckboxesField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please select at least one of the below options'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
+  })
 })

src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx

@@ -19,7 +19,8 @@ export default function DropdownField({ label, helpText, cleanName, fieldHasErro
 
       {fieldHasError ? (
         <p id="multiline-error" className="govuk-error-message">
-          <span className="govuk-visually-hidden">Error:</span> Please select a value as this field is required
+          <span className="govuk-visually-hidden">Error:</span> Please select a value from the dropdown as this field is
+          required
         </p>
       ) : null}
 

src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx

@@ -70,4 +70,13 @@ describe('Dropdownfield Component', () => {
     expect(selectElement).toHaveAttribute('name', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
     expect(selectElement).toHaveAttribute('id', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
   })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<DropdownField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please select a value from the dropdown as this field is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
+  })
 })

src/app/components/cms/Feedback/Fields/Email/Emailfield.spec.tsx

@@ -3,22 +3,33 @@ import { render, screen } from '@/config/test-utils'
 import EmailField from './EmailField'
 
 describe('EmailField Component', () => {
-  it('should render the component with a label, helpText, and an email input', () => {
-    const label = 'Email address'
-    const helpText = 'Please enter a valid email address.'
-    const cleanName = 'email'
+  const mockProps = {
+    label: 'What is your email address?',
+    helpText: 'Please provide your email address.',
+    cleanName: 'email-address',
+  }
 
-    render(<EmailField label={label} helpText={helpText} cleanName={cleanName} />)
+  it('should render the component with a label, helpText, and an email input', () => {
+    render(<EmailField {...mockProps} />)
 
-    const labelElement = screen.getByLabelText(label)
+    const labelElement = screen.getByLabelText(mockProps.label)
     expect(labelElement).toBeInTheDocument()
 
-    const helpTextElement = screen.getByText(helpText)
+    const helpTextElement = screen.getByText(mockProps.helpText)
     expect(helpTextElement).toBeInTheDocument()
 
     const inputElement = screen.getByRole('textbox')
     expect(inputElement).toHaveAttribute('type', 'email')
-    expect(inputElement).toHaveAttribute('name', cleanName)
-    expect(inputElement).toHaveAttribute('id', cleanName)
+    expect(inputElement).toHaveAttribute('name', mockProps.cleanName)
+    expect(inputElement).toHaveAttribute('id', mockProps.cleanName)
+  })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<EmailField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please enter a value as this field is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
   })
 })

src/app/components/cms/Feedback/Fields/Number/Numberfield.spec.tsx

@@ -3,37 +3,44 @@ import { render, screen } from '@/config/test-utils'
 import NumberField from './NumberField'
 
 describe('NumberField', () => {
-  test('should render the component with a label, helpText, and numeric input field', () => {
-    const label = 'Phone Number'
-    const helpText = 'Please enter your phone number.'
-    const cleanName = 'phone-number'
+  const mockProps = {
+    label: 'Phone Number',
+    helpText: 'Please enter your phone number.',
+    cleanName: 'phone-number',
+  }
 
-    render(<NumberField label={label} helpText={helpText} cleanName={cleanName} />)
+  test('should render the component with a label, helpText, and numeric input field', () => {
+    render(<NumberField {...mockProps} />)
 
     // see if the label is rendered correctly
-    const labelElement = screen.getByLabelText(label)
+    const labelElement = screen.getByLabelText(mockProps.label)
     expect(labelElement).toBeInTheDocument()
 
     // help text rendered correctly
-    const helpTextElement = screen.getByText(helpText)
+    const helpTextElement = screen.getByText(mockProps.helpText)
     expect(helpTextElement).toBeInTheDocument()
 
     // input rendered with  correct attributes
     const inputElement = screen.getByRole('textbox')
-    expect(inputElement).toHaveAttribute('name', cleanName)
-    expect(inputElement).toHaveAttribute('id', cleanName)
+    expect(inputElement).toHaveAttribute('name', mockProps.cleanName)
+    expect(inputElement).toHaveAttribute('id', mockProps.cleanName)
     expect(inputElement).toHaveAttribute('inputMode', 'numeric')
   })
 
   test('should not render help text when helpText is an empty string', () => {
-    const label = 'Phone Number'
-    const helpText = ''
-    const cleanName = 'phone-number'
-
-    render(<NumberField label={label} helpText={helpText} cleanName={cleanName} />)
+    render(<NumberField {...{ ...mockProps, helpText: '' }} />)
 
     // Check that help text is not rendered
     const helpTextElement = screen.queryByText('Please enter your phone number.')
     expect(helpTextElement).not.toBeInTheDocument()
   })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<NumberField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please enter a value as this field is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
+  })
 })

src/app/components/cms/Feedback/Fields/Radio/Radiofield.spec.tsx

@@ -58,4 +58,13 @@ describe('RadioField Component', () => {
     const radioButtons = screen.queryAllByRole('radio')
     expect(radioButtons).toHaveLength(0)
   })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<RadioField {...{ ...mockProps, choicesList: [], fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please enter a value as this field is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
+  })
 })

src/app/components/cms/Feedback/Fields/Singleline/SinglelineField.tsx

@@ -20,7 +20,7 @@ export default function SinglelineField({ label, helpText, cleanName, fieldHasEr
 
       {fieldHasError ? (
         <p id="multiline-error" className="govuk-error-message">
-          <span className="govuk-visually-hidden">Error:</span> Please select a value as this field is required
+          <span className="govuk-visually-hidden">Error:</span> Please enter a value as this field is required
         </p>
       ) : null}
 

src/app/components/cms/Feedback/Fields/Singleline/Singlelinefield.spec.tsx

@@ -43,4 +43,13 @@ describe('SinglelineField', () => {
     expect(textarea).toHaveAttribute('id', mockProps.cleanName)
     expect(textarea).toHaveAttribute('rows', '1') // Ensure rows attribute is set to 1
   })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<SinglelineField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please enter a value as this field is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
+  })
 })

src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx

@@ -3,60 +3,60 @@ import { render, screen } from '@/config/test-utils'
 import UrlField from './UrlField'
 
 describe('UrlField', () => {
-  test('renders label correctly', () => {
-    const label = 'https://ukhsa-dashboard.data.gov.uk'
-    const helpText = 'Please enter a valid URL.'
-    const cleanName = 'website-url'
+  const mockProps = {
+    label: 'https://ukhsa-dashboard.data.gov.uk',
+    helpText: 'Please enter a valid URL.',
+    cleanName: 'website-url',
+    fieldHasError: false,
+  }
 
-    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+  test('renders label correctly', () => {
+    render(<UrlField {...mockProps} />)
 
-    const labelElement = screen.getByLabelText(label)
+    const labelElement = screen.getByLabelText(mockProps.label)
     expect(labelElement).toBeInTheDocument()
     expect(labelElement).toHaveAttribute('type', 'url')
   })
 
   test('should render the component with a label, helpText, and an email input', () => {
-    const label = 'Email Address'
-    const helpText = 'https://ukhsa-dashboard.data.gov.uk'
-    const cleanName = 'email-address'
-
-    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+    render(<UrlField {...mockProps} />)
 
     // Check
-    const labelElement = screen.getByLabelText(label)
+    const labelElement = screen.getByLabelText(mockProps.label)
     expect(labelElement).toBeInTheDocument()
 
-    const helpTextElement = screen.getByText(helpText)
+    const helpTextElement = screen.getByText(mockProps.helpText)
     expect(helpTextElement).toBeInTheDocument()
 
     const inputElement = screen.getByRole('textbox')
     expect(inputElement).toHaveAttribute('type', 'url')
-    expect(inputElement).toHaveAttribute('name', cleanName)
-    expect(inputElement).toHaveAttribute('id', cleanName)
+    expect(inputElement).toHaveAttribute('name', mockProps.cleanName)
+    expect(inputElement).toHaveAttribute('id', mockProps.cleanName)
   })
 
   test('renders help text if provided', () => {
-    const label = 'https://ukhsa-dashboard.data.gov.uk'
-    const helpText = 'Please enter a valid URL.'
-    const cleanName = 'website-url'
-
-    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+    render(<UrlField {...mockProps} />)
 
     // Check if the help text is rendered correctly
-    const helpTextElement = screen.getByText(helpText)
+    const helpTextElement = screen.getByText(mockProps.helpText)
     expect(helpTextElement).toBeInTheDocument()
   })
 
   test('renders input with correct name and id attributes', () => {
-    const label = 'Website URL'
-    const helpText = 'https://ukhsa-dashboard.data.gov.uk'
-    const cleanName = 'website-url'
-
-    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+    render(<UrlField {...mockProps} />)
 
     // Check if the input has the correct name and id
     const inputElement = screen.getByRole('textbox')
-    expect(inputElement).toHaveAttribute('name', cleanName)
-    expect(inputElement).toHaveAttribute('id', cleanName)
+    expect(inputElement).toHaveAttribute('name', mockProps.cleanName)
+    expect(inputElement).toHaveAttribute('id', mockProps.cleanName)
+  })
+
+  it('should render the error message text if the field is required and not completed', () => {
+    render(<UrlField {...{ ...mockProps, fieldHasError: true }} />)
+
+    const expectedErrorText = 'Please enter a value as this field is required'
+
+    // Check if no radio buttons are rendered
+    expect(screen.getByText(expectedErrorText)).toBeInTheDocument()
   })
 })