@hyphen/hyphen-components 2.9.0

package/src/components/Formik/FormikRadioGroup/FormikRadioGroup.test.tsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  act,
+} from '@testing-library/react';
+import { Formik, Form, Field, getIn, setIn, FormikValues } from 'formik';
+import { FormikRadioGroup } from './FormikRadioGroup';
+
+const testGroupName = 'colors';
+
+const groupOptions = [
+  {
+    id: 'purple',
+    value: 'purple',
+    label: 'Purple',
+  },
+  {
+    id: 'green',
+    value: 'green',
+    label: 'Green',
+  },
+  {
+    id: 'blue',
+    value: 'blue',
+    label: 'Blue',
+    disabled: true,
+  },
+];
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)
+    ? {}
+    : setIn({}, testValueKey, 'selection is required');
+
+const renderForm = (
+  initialValue: any,
+  props: any,
+  testValueKey = testGroupName
+) => (
+  <Formik
+    initialValues={{
+      [testGroupName]: initialValue,
+    }}
+    onSubmit={props.handleSubmit} // eslint-disable-line
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          options={groupOptions}
+          component={FormikRadioGroup}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikRadioGroup', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", () => {
+        let value = null;
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const blueRadioInput = getByLabelText('Blue');
+
+        act(() => {
+          fireEvent.click(blueRadioInput);
+        });
+
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+        expect(value).toBe('blue');
+      });
+
+      test('Standard Formik onChange modifies the target value', async () => {
+        const { getByLabelText, getByText, queryByText } = render(
+          renderForm(null, { isRequired: true })
+        );
+        const submitButton = getByText('submit');
+        const blueRadioInput = getByLabelText('Blue') as HTMLInputElement;
+        expect(blueRadioInput.checked).toBe(false);
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(getByText('selection is required')).toBeInTheDocument()
+        );
+
+        act(() => {
+          fireEvent.click(blueRadioInput);
+        });
+        expect(blueRadioInput.checked).toBe(true);
+        await waitFor(() =>
+          expect(queryByText('selection is required')).not.toBeInTheDocument()
+        );
+      });
+    });
+  });
+
+  describe('States', () => {
+    describe('Default', () => {
+      test('it renders 3 radio inputs', () => {
+        render(renderForm(null, {}));
+
+        const radioInputElements = screen.getAllByRole('radio');
+        expect(radioInputElements).toHaveLength(3);
+      });
+    });
+
+    describe('With Title', () => {
+      test('it renders the title', () => {
+        render(renderForm(null, { title: 'Mock Title' }));
+
+        const title = screen.getByText('Mock Title');
+        expect(title).toBeInTheDocument();
+      });
+    });
+
+    describe('With Title and Description', () => {
+      test('it renders the title and description', () => {
+        render(
+          renderForm(null, {
+            title: 'Mock Title',
+            description: 'Mock Description',
+          })
+        );
+
+        const title = screen.getByText('Mock Title');
+        const description = screen.getByText('Mock Description');
+        expect(title).toBeInTheDocument();
+        expect(description).toBeInTheDocument();
+      });
+    });
+
+    describe('Pre-Selected Option', () => {
+      test('an option is automatically selected', () => {
+        render(renderForm('green', {}));
+
+        const greenRadioInput = screen.getByLabelText('Green');
+        expect(greenRadioInput).toBeChecked();
+      });
+    });
+
+    describe('Disabled Option', () => {
+      test('the group contains a disabled option', () => {
+        render(renderForm(null, {}));
+
+        const disabledRadioInputElements = screen.getAllByRole('radio');
+        expect(disabledRadioInputElements[2]).toBeDisabled();
+      });
+    });
+
+    describe('Disabled Group', () => {
+      test('all options in the group are disabled', () => {
+        render(renderForm(null, { isDisabled: true }));
+
+        const disabledRadioInputElements = screen.getAllByRole('radio');
+        expect(disabledRadioInputElements[0]).toBeDisabled();
+        expect(disabledRadioInputElements[1]).toBeDisabled();
+        expect(disabledRadioInputElements[2]).toBeDisabled();
+      });
+    });
+
+    describe('Error with Validation Message', () => {
+      test('it renders a validation message', async () => {
+        const { getByText } = render(renderForm(null, { isRequired: true }));
+
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+
+        await waitFor(() =>
+          expect(getByText('selection is required')).toBeInTheDocument()
+        );
+      });
+
+      test('it renders a validation message with nested value', async () => {
+        const { getByText } = render(
+          renderForm(
+            { outer: { nested: null } },
+            { isRequired: true },
+            `${testGroupName}.outer.nested`
+          )
+        );
+        const submitButton = getByText('submit');
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(getByText('selection is required')).toBeInTheDocument()
+        );
+      });
+    });
+  });
+});

package/src/components/Formik/FormikRadioGroup/FormikRadioGroup.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import { RadioGroup, RadioGroupProps } from '../../RadioGroup/RadioGroup';
+
+export interface FormikRadioGroupProps
+  extends Omit<RadioGroupProps, 'onChange'> {
+  field: FieldAttributes<HTMLInputElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: RadioGroupProps['onChange'];
+}
+
+export const FormikRadioGroup: React.FC<FormikRadioGroupProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  options,
+  ...props
+}) => (
+  <RadioGroup
+    {...props}
+    options={options}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+  />
+);

package/src/components/Formik/FormikSelectInput/FormikSelectInput.test.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import selectEvent from 'react-select-event';
+import { Formik, Form, Field, getIn, setIn } from 'formik';
+import { FormikSelectInput } from './FormikSelectInput';
+import { SelectInput } from '../../SelectInput/SelectInput';
+
+const testLabelName = 'test select';
+
+const selectOptions = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+const handleValidation = (testValueKey: string | string[]) => (values: any) =>
+  getIn(values, testValueKey)?.length > 1
+    ? {}
+    : setIn({}, testValueKey as string, 'input is required');
+
+const renderForm = (
+  initialValue: any,
+  props: any,
+  testValueKey = testLabelName
+) => (
+  <Formik
+    initialValues={{
+      [testLabelName]: initialValue,
+    }}
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
+    onSubmit={async () => null}
+  >
+    {() => (
+      <Form>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          options={selectOptions}
+          component={FormikSelectInput}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikSelectInput', () => {
+  describe('States', () => {
+    describe('Hidden label, with a placeholder', () => {
+      test('it renders input without a visual label, and with a placeholder', () => {
+        render(
+          renderForm([], { placeholder: 'Test Placeholder', hideLabel: true })
+        );
+        expect(screen.queryByText(testLabelName)).toBeNull();
+        expect(screen.getByText('Test Placeholder')).toBeInTheDocument();
+      });
+    });
+
+    describe('No Aria-labelledby', () => {
+      test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
+        render(renderForm([], { hideLabel: true }));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).not.toHaveAttribute('aria-labelledby');
+      });
+    });
+
+    describe('With a label, and no custom placeholder', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        render(renderForm([], {}));
+
+        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        render(renderForm([], {}));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('Single select, pre-selected', () => {
+      test('it renders with value pre-selected', () => {
+        render(renderForm(selectOptions[2], {}));
+
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
+    });
+
+    describe('Multi select, no selection', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        render(renderForm([], { isMulti: true }));
+
+        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+    });
+
+    describe('Multi select, with multiple items selected', () => {
+      test('it renders input with a label, and with two items selected', () => {
+        render(
+          renderForm([selectOptions[0], selectOptions[2]], { isMulti: true })
+        );
+
+        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
+        expect(screen.queryByText('Select...')).toBeNull();
+        expect(screen.getByText('Chocolate')).toBeInTheDocument();
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        const { container } = render(renderForm([], { isDisabled: true }));
+
+        const combobox = container.querySelector(
+          '.react-select__control[aria-disabled="true"]'
+        );
+
+        expect(combobox).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', async () => {
+        const { getByText } = render(renderForm([], { isRequired: true }));
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+
+      test('it renders errors from nested objects', async () => {
+        const { getByText } = render(
+          renderForm(
+            { outer: { nested: [] } },
+            { isRequired: true },
+            `${testLabelName}.outer.nested`
+          )
+        );
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+    });
+  });
+
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", async () => {
+        let value: any[] = [];
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        const { getByLabelText, container, getByText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const selectInput = getByLabelText(testLabelName);
+        /**
+         * This class is specific to react-select, combined with our custom classNamePrefix prop.
+         * While this is an implementation detail there appears to be
+         * no clearer path to test our own component which depends on react-select
+         */
+        const selectInputWrapper = container.querySelector(
+          '.react-select__control'
+        );
+
+        fireEvent.focus(selectInput);
+        fireEvent.mouseDown(selectInputWrapper!);
+        const option = await waitFor(() => getByText('Vanilla'), { container });
+        fireEvent.click(option);
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+        expect(value).toStrictEqual({ label: 'Vanilla', value: 'vanilla' });
+      });
+
+      test('it fires onChange callback on change', async () => {
+        const mockedHandleChange = jest.fn();
+
+        const { getByLabelText } = render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            placeholder="Test Placeholder"
+            label="onchange test"
+            options={selectOptions}
+            value={null}
+          />
+        );
+
+        await selectEvent.select(getByLabelText('onchange test'), 'Vanilla');
+
+        expect(mockedHandleChange).toBeCalledTimes(1);
+      });
+    });
+  });
+});

package/src/components/Formik/FormikSelectInput/FormikSelectInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import { SelectInput, SelectInputProps } from '../../SelectInput/SelectInput';
+
+export interface FormikSelectInputProps
+  extends Omit<SelectInputProps, 'onChange'> {
+  field: FieldAttributes<HTMLSelectElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: SelectInputProps['onChange'];
+}
+
+export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  id,
+  label,
+  options,
+  ...props
+}) => (
+  <SelectInput
+    {...props}
+    id={id}
+    label={label}
+    options={options}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+  />
+);

package/src/components/Formik/FormikSelectInputInset/FormikSelectInputInset.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Formik, Form, Field, getIn, setIn } from 'formik';
+import { SelectInputInset } from '../../SelectInputInset/SelectInputInset';
+import { FormikSelectInputInset } from './FormikSelectInputInset';
+
+const testLabelName = 'test select';
+
+const selectOptions = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+const handleValidation = (testValueKey: string | string[]) => (values: any) =>
+  getIn(values, testValueKey)?.length > 1
+    ? {}
+    : setIn({}, testValueKey as string, 'input is required');
+
+const renderForm = (
+  initialValue: any,
+  props: any,
+  testValueKey = testLabelName
+) => (
+  <Formik
+    initialValues={{
+      [testLabelName]: initialValue,
+    }}
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
+    onSubmit={async () => null}
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          options={selectOptions}
+          component={FormikSelectInputInset}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikSelectInputInset', () => {
+  describe('States', () => {
+    describe('With a label, and no custom placeholder', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        render(renderForm([], {}));
+
+        expect(screen.getByLabelText(testLabelName)).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        render(renderForm([], {}));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('Single select, pre-selected', () => {
+      test('it renders with value pre-selected', () => {
+        render(renderForm(selectOptions[2], {}));
+
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        const { getByRole } = render(renderForm([], { isDisabled: true }));
+
+        const combobox = getByRole('combobox');
+        expect(combobox).toBeDisabled();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', async () => {
+        const { getByText } = render(renderForm([], { isRequired: true }));
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+
+      test('it renders errors from nested objects', async () => {
+        const { getByText } = render(
+          renderForm(
+            { outer: { nested: [] } },
+            { isRequired: true },
+            `${testLabelName}.outer.nested`
+          )
+        );
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+    });
+  });
+
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", async () => {
+        let value = null;
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const selectInput = getByLabelText(testLabelName);
+
+        fireEvent.change(selectInput);
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+      });
+
+      test('it fires onChange callback on change', async () => {
+        const mockedHandleChange = jest.fn();
+
+        const { getByRole } = render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            placeholder="Test Placeholder"
+            label="onchange test"
+            options={selectOptions}
+            value={null}
+          />
+        );
+        const combobox = getByRole('combobox');
+        fireEvent.change(combobox, { target: { value: 'vanilla' } });
+        expect(mockedHandleChange).toBeCalledTimes(1);
+      });
+    });
+  });
+});

package/src/components/Formik/FormikSelectInputInset/FormikSelectInputInset.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import {
+  SelectInputInset,
+  SelectInputInsetProps,
+} from '../../SelectInputInset/SelectInputInset';
+
+export interface FormikSelectInputInsetProps
+  extends Omit<SelectInputInsetProps, 'onChange'> {
+  field: FieldAttributes<HTMLSelectElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: SelectInputInsetProps['onChange'];
+}
+
+export const FormikSelectInputInset: React.FC<FormikSelectInputInsetProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  id,
+  label,
+  options,
+  ...props
+}) => (
+  <SelectInputInset
+    {...props}
+    id={id}
+    label={label}
+    options={options}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+  />
+);