-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #553 from UKHSA-Internal/feat/CDD-2298-feedback-ad…
…ditional-field-type ADD FEEDBACK ADDITIONAL FIELDS
- Loading branch information
Showing
20 changed files
with
915 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Fieldtype } from '../../Feedback' | ||
|
|
||
| export default function CheckboxField({ label, helpText, cleanName, defaultValue }: Fieldtype) { | ||
| return ( | ||
| <div className="govuk-form-group govuk-!-margin-bottom-9"> | ||
| {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null} | ||
| <div className="govuk-checkboxes__item"> | ||
| <input | ||
| className="govuk-checkboxes__input" | ||
| name={cleanName} | ||
| value={defaultValue} | ||
| type="checkbox" | ||
| id={cleanName} | ||
| /> | ||
| <label className="govuk-label govuk-checkboxes__label" htmlFor={cleanName}> | ||
| {label} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
67 changes: 67 additions & 0 deletions
67
src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { render, screen } from '@/config/test-utils' | ||
|
|
||
| import CheckboxField from './CheckboxField' | ||
|
|
||
| describe('CheckboxField', () => { | ||
| const mockProps = { | ||
| label: 'Accept terms and conditions', | ||
| helpText: 'Please read the terms carefully.', | ||
| cleanName: 'terms_and_conditions', | ||
| defaultValue: 'true', // Testing with a string value | ||
| } | ||
|
|
||
| test('renders checkbox field with label and help text when provided', () => { | ||
| render(<CheckboxField {...mockProps} />) | ||
|
|
||
| // Check if the label is rendered correctly | ||
| const label = screen.getByLabelText(mockProps.label) | ||
| expect(label).toBeInTheDocument() | ||
|
|
||
| // Check if the help text is rendered correctly | ||
| const helpText = screen.getByText(mockProps.helpText) | ||
| expect(helpText).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('does not render help text when not provided', () => { | ||
| render(<CheckboxField {...{ ...mockProps, helpText: '' }} />) | ||
|
|
||
| // Ensure help text is not rendered if it's an empty string | ||
| const helpText = screen.queryByText(mockProps.helpText) | ||
| expect(helpText).toBeNull() | ||
| }) | ||
|
|
||
| test('checkbox is unchecked by default when defaultValue is an empty string', () => { | ||
| render(<CheckboxField {...{ ...mockProps, defaultValue: '' }} />) | ||
|
|
||
| // Check if the checkbox is unchecked when defaultValue is an empty string | ||
| const checkbox = screen.getByRole('checkbox') | ||
| expect(checkbox).not.toBeChecked() | ||
| }) | ||
|
|
||
| test('checkbox is unchecked by default when defaultValue is a falsy string ("false")', () => { | ||
| render(<CheckboxField {...{ ...mockProps, defaultValue: 'false' }} />) | ||
|
|
||
| // Check if the checkbox is unchecked when defaultValue is "false" | ||
| const checkbox = screen.getByRole('checkbox') | ||
| expect(checkbox).not.toBeChecked() | ||
| }) | ||
|
|
||
| test('checkbox input has the correct name and id', () => { | ||
| render(<CheckboxField {...mockProps} />) | ||
|
|
||
| const checkbox = screen.getByRole('checkbox') | ||
|
|
||
| // Check if the checkbox has the correct name and id | ||
| expect(checkbox).toHaveAttribute('name', mockProps.cleanName) | ||
| expect(checkbox).toHaveAttribute('id', mockProps.cleanName) | ||
| }) | ||
|
|
||
| test('checkbox input value matches the defaultValue prop', () => { | ||
| render(<CheckboxField {...mockProps} />) | ||
|
|
||
| const checkbox = screen.getByRole('checkbox') | ||
|
|
||
| // Ensure the checkbox input value matches defaultValue prop | ||
| expect(checkbox).toHaveAttribute('value', mockProps.defaultValue) | ||
| }) | ||
| }) |
46 changes: 46 additions & 0 deletions
46
src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Fieldtype } from '../../Feedback' | ||
|
|
||
| export default function CheckboxesField({ | ||
| label, | ||
| helpText, | ||
| cleanName, | ||
| choicesList = [], | ||
| defaultValuesList = [], | ||
| }: Fieldtype) { | ||
| return ( | ||
| <div className="govuk-form-group govuk-!-margin-bottom-9"> | ||
| <fieldset className="govuk-fieldset govuk-!-margin-bottom-9"> | ||
| <legend className="govuk-fieldset__legend govuk-fieldset__legend--m"> | ||
| <h2 className="govuk-fieldset__heading"> | ||
| <label className="govuk-label govuk-label--m" htmlFor={cleanName}> | ||
| {label} | ||
| </label> | ||
| </h2> | ||
| </legend> | ||
|
|
||
| {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null} | ||
|
|
||
| <div className="govuk-checkboxes" data-module="govuk-checkboxes"> | ||
| {choicesList.map((choiceVal, key) => { | ||
| const uniqueId = `${cleanName}-${key}` // Generate a unique ID for each checkbox | ||
| return ( | ||
| <div key={key} className="govuk-checkboxes__item"> | ||
| <input | ||
| className="govuk-checkboxes__input" | ||
| id={uniqueId} | ||
| name={cleanName} | ||
| type="checkbox" | ||
| value={choiceVal} | ||
| defaultChecked={defaultValuesList.includes(choiceVal)} | ||
| /> | ||
| <label className="govuk-label govuk-checkboxes__label" htmlFor={uniqueId}> | ||
| {choiceVal} | ||
| </label> | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.
c565765There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unit tests coverage