From 6be80fa1a5e4f14b026fe24dd88b06201d167ebb Mon Sep 17 00:00:00 2001
From: Tom Jones <tomjones@hiveit.co.uk>
Date: Wed, 11 Dec 2024 13:32:49 +0000
Subject: [PATCH] EES-5047: Move input/textarea useWatch usage to parent
 components and update tests.

---
 .../src/components/form/FormFieldTextArea.tsx |  28 ++-
 .../components/form/FormFieldTextInput.tsx    |  28 ++-
 .../src/components/form/FormTextArea.tsx      |  32 +--
 .../src/components/form/FormTextInput.tsx     |  18 --
 .../form/__tests__/FormFieldTextArea.test.tsx | 136 ++++++++++++
 .../form/__tests__/FormTextArea.test.tsx      | 210 +++---------------
 6 files changed, 221 insertions(+), 231 deletions(-)
 create mode 100644 src/explore-education-statistics-common/src/components/form/__tests__/FormFieldTextArea.test.tsx

diff --git a/src/explore-education-statistics-common/src/components/form/FormFieldTextArea.tsx b/src/explore-education-statistics-common/src/components/form/FormFieldTextArea.tsx
index 246ba3837e1..72369488537 100644
--- a/src/explore-education-statistics-common/src/components/form/FormFieldTextArea.tsx
+++ b/src/explore-education-statistics-common/src/components/form/FormFieldTextArea.tsx
@@ -4,15 +4,35 @@ import FormField, {
 import FormTextArea from '@common/components/form/FormTextArea';
 import { FormTextAreaProps } from '@common/components/form/FormBaseTextArea';
 import React from 'react';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues, useWatch } from 'react-hook-form';
+import FormCharacterCount from '@common/components/form/FormCharacterCount';
+import FormGroup from './FormGroup';
 
 type Props<TFormValues extends FieldValues> = FormFieldComponentProps<
   FormTextAreaProps,
   TFormValues
 >;
 
-export default function FormFieldTextArea<TFormValues extends FieldValues>(
-  props: Props<TFormValues>,
-) {
+export default function FormFieldTextArea<TFormValues extends FieldValues>({
+  maxLength,
+  ...props
+}: Props<TFormValues>) {
+  const watchedValue = useWatch({ name: props.name });
+
+  if (!!maxLength && maxLength > 0) {
+    return (
+      <div className="govuk-character-count">
+        <FormGroup>
+          <FormField {...props} maxLength={maxLength} as={FormTextArea} />
+          <FormCharacterCount
+            id={props.id ?? ''}
+            maxLength={maxLength}
+            value={watchedValue}
+          />
+        </FormGroup>
+      </div>
+    );
+  }
+
   return <FormField {...props} as={FormTextArea} />;
 }
diff --git a/src/explore-education-statistics-common/src/components/form/FormFieldTextInput.tsx b/src/explore-education-statistics-common/src/components/form/FormFieldTextInput.tsx
index abc58788276..90aba48798d 100644
--- a/src/explore-education-statistics-common/src/components/form/FormFieldTextInput.tsx
+++ b/src/explore-education-statistics-common/src/components/form/FormFieldTextInput.tsx
@@ -5,15 +5,35 @@ import FormTextInput, {
   FormTextInputProps,
 } from '@common/components/form/FormTextInput';
 import React from 'react';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues, useWatch } from 'react-hook-form';
+import FormCharacterCount from '@common/components/form/FormCharacterCount';
+import FormGroup from './FormGroup';
 
 type Props<TFormValues extends FieldValues> = FormFieldComponentProps<
   FormTextInputProps,
   TFormValues
 >;
 
-export default function FormFieldTextInput<TFormValues extends FieldValues>(
-  props: Props<TFormValues>,
-) {
+export default function FormFieldTextInput<TFormValues extends FieldValues>({
+  maxLength,
+  ...props
+}: Props<TFormValues>) {
+  const watchedValue = useWatch({ name: props.name });
+
+  if (!!maxLength && maxLength > 0) {
+    return (
+      <div className="govuk-character-count">
+        <FormGroup>
+          <FormField {...props} maxLength={maxLength} as={FormTextInput} />
+          <FormCharacterCount
+            id={props.id ?? ''}
+            maxLength={maxLength}
+            value={watchedValue}
+          />
+        </FormGroup>
+      </div>
+    );
+  }
+
   return <FormField {...props} as={FormTextInput} />;
 }
diff --git a/src/explore-education-statistics-common/src/components/form/FormTextArea.tsx b/src/explore-education-statistics-common/src/components/form/FormTextArea.tsx
index 6aa385bf9bf..2ebf6b27e5f 100644
--- a/src/explore-education-statistics-common/src/components/form/FormTextArea.tsx
+++ b/src/explore-education-statistics-common/src/components/form/FormTextArea.tsx
@@ -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} />;
 }
diff --git a/src/explore-education-statistics-common/src/components/form/FormTextInput.tsx b/src/explore-education-statistics-common/src/components/form/FormTextInput.tsx
index 81e8bc82b37..0108fa1f1e0 100644
--- a/src/explore-education-statistics-common/src/components/form/FormTextInput.tsx
+++ b/src/explore-education-statistics-common/src/components/form/FormTextInput.tsx
@@ -1,8 +1,6 @@
 import FormBaseInput, {
   FormBaseInputProps,
 } from '@common/components/form/FormBaseInput';
-import FormCharacterCount from '@common/components/form/FormCharacterCount';
-import FormGroup from '@common/components/form/FormGroup';
 import React from 'react';
 
 export interface FormTextInputProps extends FormBaseInputProps {
@@ -13,24 +11,8 @@ export interface FormTextInputProps extends FormBaseInputProps {
 
 export default function FormTextInput({
   id,
-  maxLength,
   value,
   ...props
 }: FormTextInputProps) {
-  if (!!maxLength && maxLength > 0) {
-    return (
-      <div className="govuk-character-count">
-        <FormGroup>
-          <FormBaseInput
-            {...props}
-            id={id}
-            maxLength={maxLength}
-            value={value}
-          />
-          <FormCharacterCount id={id} maxLength={maxLength} value={value} />
-        </FormGroup>
-      </div>
-    );
-  }
   return <FormBaseInput id={id} {...props} value={value} />;
 }
diff --git a/src/explore-education-statistics-common/src/components/form/__tests__/FormFieldTextArea.test.tsx b/src/explore-education-statistics-common/src/components/form/__tests__/FormFieldTextArea.test.tsx
new file mode 100644
index 00000000000..733ba544071
--- /dev/null
+++ b/src/explore-education-statistics-common/src/components/form/__tests__/FormFieldTextArea.test.tsx
@@ -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();
+    });
+  });
+});
diff --git a/src/explore-education-statistics-common/src/components/form/__tests__/FormTextArea.test.tsx b/src/explore-education-statistics-common/src/components/form/__tests__/FormTextArea.test.tsx
index 9b86fd200ab..138eb0a23d7 100644
--- a/src/explore-education-statistics-common/src/components/form/__tests__/FormTextArea.test.tsx
+++ b/src/explore-education-statistics-common/src/components/form/__tests__/FormTextArea.test.tsx
@@ -1,5 +1,4 @@
 import FormTextArea from '@common/components/form/FormTextArea';
-import FormProvider from '@common/components/form/FormProvider';
 import { render, screen } from '@testing-library/react';
 import noop from 'lodash/noop';
 import React from 'react';
@@ -7,9 +6,7 @@ import React from 'react';
 describe('FormTextArea', () => {
   test('renders correctly with required props', () => {
     const { container } = render(
-      <FormProvider>
-        <FormTextArea id="test-input" label="Test input" name="testInput" />
-      </FormProvider>,
+      <FormTextArea id="test-input" label="Test input" name="testInput" />,
     );
 
     expect(screen.getByLabelText('Test input')).toBeDefined();
@@ -18,14 +15,12 @@ describe('FormTextArea', () => {
 
   test('renders correctly with hint', () => {
     const { container } = render(
-      <FormProvider>
-        <FormTextArea
-          id="test-input"
-          label="Test input"
-          name="testInput"
-          hint="Fill me in"
-        />
-      </FormProvider>,
+      <FormTextArea
+        id="test-input"
+        label="Test input"
+        name="testInput"
+        hint="Fill me in"
+      />,
     );
 
     const hint = screen.getByText('Fill me in');
@@ -36,15 +31,13 @@ describe('FormTextArea', () => {
 
   test('renders correctly with error', () => {
     const { container } = render(
-      <FormProvider>
-        <FormTextArea
-          id="test-input"
-          label="Test input"
-          name="testInput"
-          error="Field is required"
-          onChange={noop}
-        />
-      </FormProvider>,
+      <FormTextArea
+        id="test-input"
+        label="Test input"
+        name="testInput"
+        error="Field is required"
+        onChange={noop}
+      />,
     );
 
     const error = screen.getByText('Field is required');
@@ -55,15 +48,13 @@ describe('FormTextArea', () => {
 
   test('aria-describedby is equal to the hint id', () => {
     render(
-      <FormProvider>
-        <FormTextArea
-          id="test-input"
-          label="Test input"
-          name="testInput"
-          hint="Fill me in"
-          onChange={noop}
-        />
-      </FormProvider>,
+      <FormTextArea
+        id="test-input"
+        label="Test input"
+        name="testInput"
+        hint="Fill me in"
+        onChange={noop}
+      />,
     );
 
     expect(screen.getByText('Fill me in')).toHaveAttribute(
@@ -78,15 +69,13 @@ describe('FormTextArea', () => {
 
   test('aria-describedby is equal to the error id', () => {
     render(
-      <FormProvider>
-        <FormTextArea
-          id="test-input"
-          label="Test input"
-          name="testInput"
-          error="Field is required"
-          onChange={noop}
-        />
-      </FormProvider>,
+      <FormTextArea
+        id="test-input"
+        label="Test input"
+        name="testInput"
+        error="Field is required"
+        onChange={noop}
+      />,
     );
 
     expect(screen.getByText('Field is required')).toHaveAttribute(
@@ -101,15 +90,13 @@ describe('FormTextArea', () => {
 
   test('aria-describedby contains both hint and error ids', () => {
     render(
-      <FormProvider>
-        <FormTextArea
-          id="test-input"
-          label="Test input"
-          name="testInput"
-          hint="Fill me in"
-          error="Field is required"
-        />
-      </FormProvider>,
+      <FormTextArea
+        id="test-input"
+        label="Test input"
+        name="testInput"
+        hint="Fill me in"
+        error="Field is required"
+      />,
     );
 
     expect(screen.getByText('Fill me in')).toHaveAttribute(
@@ -128,131 +115,4 @@ describe('FormTextArea', () => {
     expect(ariaDescribedBy).toContain('test-input-error');
     expect(ariaDescribedBy).toContain('test-input-hint');
   });
-
-  test('shows a character count message when `maxLength` is above 0', () => {
-    render(
-      <FormProvider>
-        <FormTextArea
-          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>
-        <FormTextArea
-          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>
-        <FormTextArea
-          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>
-        <FormTextArea
-          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' }}>
-        <FormTextArea
-          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' }}>
-        <FormTextArea
-          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' }}>
-        <FormTextArea
-          id="test-input"
-          label="Test input"
-          name="testInput"
-          maxLength={4}
-          onChange={noop}
-        />
-      </FormProvider>,
-    );
-
-    expect(
-      screen.getByText('You have 1 character too many'),
-    ).toBeInTheDocument();
-  });
 });