test(field): better field control cover

Author: samuel.gomez

package-lock.json

@@ -56,12 +56,12 @@
     "@types/downloadjs": "1.4.6",
     "@types/jest-axe": "3.5.9",
     "@types/lodash": "4.14.202",
+    "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.19.0",
     "@typescript-eslint/parser": "6.19.0",
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-istanbul": "^1.2.0",
     "@vitest/coverage-v8": "1.2.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.56.0",

package.json

@@ -1,7 +1,7 @@
-import { Controller } from 'react-hook-form';
 import { SelectInput } from '@axa-fr/react-toolkit-all';
 import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
 import { ComponentPropsWithoutRef } from 'react';
+import { Controller } from 'react-hook-form';
 import { DEFAULT_OPTION_LABEL } from 'shared/constants';
 import { onChangeValue } from './form.helper';
 
@@ -38,7 +38,7 @@ const FieldSelectInput = ({
         label={label}
         forceDisplayMessage={forceDisplayMessage}
         messageType={messageType}
-        message={fieldState.error?.message ?? null}
+        message={fieldState.error?.message}
         placeholder={placeholder}
         forceDisplayPlaceholder={forceDisplayPlaceholder}
         {...otherSelectInputProps}

src/shared/components/form/FieldSelectInput.tsx

@@ -1,7 +1,7 @@
-import { Controller } from 'react-hook-form';
 import { TextInput } from '@axa-fr/react-toolkit-all';
 import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
 import { ComponentPropsWithoutRef } from 'react';
+import { Controller } from 'react-hook-form';
 import { onChangeValue } from './form.helper';
 
 type TTextInput = ComponentPropsWithoutRef<typeof TextInput>;
@@ -34,7 +34,7 @@ const FieldTextInput = ({
         label={label}
         forceDisplayMessage={forceDisplayMessage}
         messageType={messageType}
-        message={fieldState.error?.message ?? null}
+        message={fieldState.error?.message}
         {...otherTextInputProps}
       />
     )}

src/shared/components/form/FieldTextInput.tsx

@@ -0,0 +1,56 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+import FieldSelectInput from '../FieldSelectInput';
+import { ERROR_MESSAGE, FieldInputWithControl, LABEL_SUBMIT } from './FieldWrapper.mock';
+
+export const LABEL_CIVILITY = 'Civilité';
+export const CIVILITY = 'civility';
+export const OPTIONS_CIVILITY = [
+  { label: 'M.', value: 'M', id: 'civility-m' },
+  { label: 'Mme', value: 'MME', id: 'civility-mme' },
+  { label: 'Other', value: 'OTHER', id: 'civility-other' },
+];
+
+const rules = {
+  [CIVILITY]: {
+    required: ERROR_MESSAGE,
+  },
+};
+
+describe('<FieldSelectInput/>', () => {
+  it('Should render FieldSelectInput', async () => {
+    render(
+      <FieldInputWithControl
+        renderField={control => (
+          <FieldSelectInput control={control} rules={rules[CIVILITY]} name={CIVILITY} label={LABEL_CIVILITY} options={OPTIONS_CIVILITY} />
+        )}
+      />,
+    );
+    const selectInput = screen.getByRole('combobox', { name: RegExp(LABEL_CIVILITY) });
+    const type = 'Mme';
+
+    expect(selectInput).toBeInTheDocument();
+    await act(async () => {
+      await waitFor(() => userEvent.selectOptions(selectInput, type));
+    });
+    await waitFor(() => expect(screen.getByDisplayValue(RegExp(type))).toBeInTheDocument());
+  });
+
+  it('Should render FieldSelectInput with error', async () => {
+    render(
+      <FieldInputWithControl
+        renderField={control => (
+          <FieldSelectInput control={control} rules={rules[CIVILITY]} name={CIVILITY} label={LABEL_CIVILITY} options={OPTIONS_CIVILITY} />
+        )}
+      />,
+    );
+    const selectInput = screen.getByRole('combobox', { name: RegExp(LABEL_CIVILITY) });
+    expect(selectInput).toBeInTheDocument();
+
+    await act(async () => {
+      await waitFor(() => userEvent.click(screen.getByText(LABEL_SUBMIT)));
+    });
+    await screen.findByText(RegExp(ERROR_MESSAGE));
+  });
+});

src/shared/components/form/__tests__/FieldSelectInput.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+import FieldTextInput from '../FieldTextInput';
+import { ERROR_MESSAGE, FieldInputWithControl, LABEL_SUBMIT } from './FieldWrapper.mock';
+
+export const LABEL_FIRSTNAME = 'Prénom';
+export const FIRSTNAME = 'firstname';
+
+const rules = {
+  [FIRSTNAME]: {
+    required: ERROR_MESSAGE,
+  },
+};
+
+describe('<FieldTextInput/>', () => {
+  it('Should render FieldTextInput', async () => {
+    render(
+      <FieldInputWithControl
+        renderField={control => <FieldTextInput control={control} rules={rules[FIRSTNAME]} name={FIRSTNAME} label={LABEL_FIRSTNAME} />}
+      />,
+    );
+
+    const textInput = screen.getByRole('textbox', { name: RegExp(LABEL_FIRSTNAME) });
+    const value = 'Samuel';
+
+    expect(textInput).toBeInTheDocument();
+    const user = userEvent.setup();
+    await act(async () => {
+      await waitFor(() => user.type(textInput, value));
+    });
+
+    await waitFor(() => expect(textInput).toHaveValue(value));
+  });
+
+  it('Should render FieldSelectInput with error', async () => {
+    render(
+      <FieldInputWithControl
+        renderField={control => <FieldTextInput control={control} rules={rules[FIRSTNAME]} name={FIRSTNAME} label={LABEL_FIRSTNAME} />}
+      />,
+    );
+    const textInput = screen.getByRole('textbox', { name: RegExp(LABEL_FIRSTNAME) });
+    expect(textInput).toBeInTheDocument();
+
+    await act(async () => {
+      await waitFor(() => userEvent.click(screen.getByText(LABEL_SUBMIT)));
+    });
+    await screen.findByText(RegExp(ERROR_MESSAGE));
+  });
+});

src/shared/components/form/__tests__/FieldTextInput.test.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@axa-fr/react-toolkit-all';
+import { ReactElement } from 'react';
+import { Control, FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+
+export const LABEL_SUBMIT = 'Valider';
+export const FORM_ADD_MEMBERS = 'form-add-members';
+export const ERROR_MESSAGE = 'Champ obligatoire';
+
+export const FieldInputWithControl = ({ renderField }: { renderField: (control: Control<FieldValues, unknown>) => ReactElement }) => {
+  const { handleSubmit, control } = useForm();
+  const onValid: SubmitHandler<FieldValues> = dataSubmitted => dataSubmitted;
+
+  return (
+    <form onSubmit={handleSubmit(onValid)} id={FORM_ADD_MEMBERS}>
+      {renderField(control)}
+
+      <Button type="submit" classModifier="hasiconRight">
+        <span className="af-btn__text">{LABEL_SUBMIT}</span>
+      </Button>
+    </form>
+  );
+};

src/shared/components/form/__tests__/FieldWrapper.mock.tsx

@@ -0,0 +1,9 @@
+import { onChangeValue } from '../form.helper';
+
+describe('onChangeValue', () => {
+  test('Should call onChange with target value', () => {
+    const onChange = vi.fn();
+    onChangeValue(onChange)({ value: 'test' });
+    expect(onChange).toHaveBeenCalledWith('test');
+  });
+});