-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EES-5047: Move input/textarea useWatch usage to parent components and…
… update tests.
- Loading branch information
Tom Jones
committed
Dec 11, 2024
1 parent
22a94f2
commit 6be80fa
Showing
6 changed files
with
221 additions
and
231 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
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
32 changes: 2 additions & 30 deletions
32
src/explore-education-statistics-common/src/components/form/FormTextArea.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 |
|---|---|---|
| @@ -1,36 +1,8 @@ | ||
| import FormGroup from '@common/components/form/FormGroup'; | ||
| import FormCharacterCount from '@common/components/form/FormCharacterCount'; | ||
| import FormBaseTextArea, { | ||
| FormTextAreaProps, | ||
| } from '@common/components/form/FormBaseTextArea'; | ||
| import React from 'react'; | ||
| import { useWatch } from 'react-hook-form'; | ||
|
|
||
| export default function FormTextArea({ | ||
| id, | ||
| maxLength, | ||
| name, | ||
| ...props | ||
| }: FormTextAreaProps) { | ||
| const value = useWatch({ name }); | ||
|
|
||
| if (!!maxLength && maxLength > 0) { | ||
| return ( | ||
| <div className="govuk-character-count"> | ||
| <FormGroup> | ||
| <FormBaseTextArea | ||
| {...props} | ||
| id={id} | ||
| maxLength={maxLength} | ||
| name={name} | ||
| /> | ||
| </FormGroup> | ||
| <FormCharacterCount id={id} maxLength={maxLength} value={value} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <FormBaseTextArea {...props} id={id} maxLength={maxLength} name={name} /> | ||
| ); | ||
| export default function FormTextArea(props: FormTextAreaProps) { | ||
| return <FormBaseTextArea {...props} />; | ||
| } |
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
136 changes: 136 additions & 0 deletions
136
...lore-education-statistics-common/src/components/form/__tests__/FormFieldTextArea.test.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,136 @@ | ||
| import FormFieldTextArea from '@common/components/form/FormFieldTextArea'; | ||
| import FormProvider from '@common/components/form/FormProvider'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import noop from 'lodash/noop'; | ||
| import React from 'react'; | ||
|
|
||
| describe('FormFieldTextArea', () => { | ||
| describe('maxLength', () => { | ||
| test('shows a character count message when `maxLength` is above 0', () => { | ||
| render( | ||
| <FormProvider> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={10} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText('You have 10 characters remaining'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('aria-describedby contains the character count message id when `maxLength` is above 0', () => { | ||
| render( | ||
| <FormProvider> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={10} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| const ariaDescribedBy = screen | ||
| .getByLabelText('Test input') | ||
| .getAttribute('aria-describedby'); | ||
|
|
||
| expect( | ||
| screen.getByText('You have 10 characters remaining'), | ||
| ).toHaveAttribute('id', 'test-input-info'); | ||
| expect(ariaDescribedBy).toContain('test-input-info'); | ||
| }); | ||
|
|
||
| test('does not show a character count message when `maxLength` is below 0', () => { | ||
| render( | ||
| <FormProvider> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={-1} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.queryByText(/You have .+ characters remaining/), | ||
| ).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('does not show a character count message when `maxLength` is 0', () => { | ||
| render( | ||
| <FormProvider> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={0} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.queryByText(/You have .+ characters remaining/), | ||
| ).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('shows correct character count message when difference to `maxLength` is 1', () => { | ||
| render( | ||
| <FormProvider initialValues={{ testInput: 'aaa' }}> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={4} | ||
| onChange={noop} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText('You have 1 character remaining'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('shows correct character count message when difference to `maxLength` is 0', () => { | ||
| render( | ||
| <FormProvider initialValues={{ testInput: 'aaaa' }}> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={4} | ||
| onChange={noop} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText('You have 0 characters remaining'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('shows correct character count message when difference to `maxLength` is -1', () => { | ||
| render( | ||
| <FormProvider initialValues={{ testInput: 'aaaaa' }}> | ||
| <FormFieldTextArea | ||
| id="test-input" | ||
| label="Test input" | ||
| name="testInput" | ||
| maxLength={4} | ||
| onChange={noop} | ||
| /> | ||
| </FormProvider>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText('You have 1 character too many'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.