@hyphen/hyphen-components 2.9.0

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Formik, Form, Field, getIn, setIn, FormikValues } from 'formik';
+import { FormikSelectInputNative } from './FormikSelectInputNative';
+
+const testLabelName = 'test select';
+
+const selectOptions = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)?.length > 1
+    ? {}
+    : setIn({}, testValueKey, 'input is required');
+
+const renderForm = (
+  initialValue: any,
+  props: any,
+  testValueKey = testLabelName
+) => (
+  <Formik
+    initialValues={{
+      [testLabelName]: initialValue,
+    }}
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined}
+    onSubmit={() => {}}
+  >
+    {() => (
+      <Form data-testid="form">
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          options={selectOptions}
+          component={FormikSelectInputNative}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('SelectInputNative', () => {
+  describe('States', () => {
+    describe('Hidden label, with a placeholder', () => {
+      test('it renders input without a visual label, and with a placeholder', () => {
+        render(
+          renderForm(null, { 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(null, { 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(null, {}));
+
+        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(null, {}));
+        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].value, {}));
+
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Required', () => {
+      test('it sets aria-required on the input', () => {
+        render(renderForm(undefined, { isRequired: true }));
+        const inputElement = screen.getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        render(renderForm(null, { isDisabled: true }));
+
+        expect(screen.getByLabelText('test select')).toBeDisabled();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', async () => {
+        render(renderForm(null, { isRequired: true }));
+        const form = screen.getByTestId('form');
+        // const submitButton = getByText('submit').closest('button');
+
+        fireEvent.submit(form);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+
+      test('it renders the error message from nested object', async () => {
+        render(
+          renderForm(
+            { outer: { nested: null } },
+            { isRequired: true },
+            `${testLabelName}.outer.nested`
+          )
+        );
+        const form = screen.getByTestId('form');
+        // const submitButton = getByText('submit').closest('button');
+
+        fireEvent.submit(form);
+        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);
+      });
+    });
+  });
+});

package/src/components/Formik/FormikSelectInputNative/FormikSelectInputNative.tsx

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

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Formik, Field, Form, setIn, getIn, FormikValues } from 'formik';
+import { FormikTextInput } from './FormikTextInput';
+
+const testLabelName = 'textInput';
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)
+    ? {}
+    : setIn({}, testValueKey, '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={() => {}}
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          component={FormikTextInput}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikTextInput', () => {
+  describe('States', () => {
+    describe('Autofocused', () => {
+      test('Input autofocuses if "autoFocus" prop is set to true', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoFocus: true })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(document.activeElement).toEqual(inputElement);
+      });
+
+      test('Input correctly assigns autocomplete value of "on" when bool true is provided', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoComplete: true })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'on');
+      });
+    });
+
+    describe('With Autocomplete', () => {
+      test('Input correctly assigns autocomplete value of "off" when bool false is provided', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoComplete: false })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+
+      test('Input correctly assigns autocomplete value of "off" when incorrect type is provided', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoComplete: ['a', 'random', 'array'] })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+    });
+
+    describe('Required', () => {
+      test('Input correctly assigns the "aria-required" attribute when "isRequired" prop is true', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { isRequired: true })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+    });
+
+    describe('With Error', () => {
+      test('Input correctly displays error message if provided', async () => {
+        const { getByText } = render(renderForm('', { isRequired: true }));
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+
+      test('Input correctly displays error message in nested object', 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('With Max Length', () => {
+      test('Input correctly passes maxlength property if prop is passed', async () => {
+        const { getByLabelText } = render(renderForm('', { maxLength: '3' }));
+        const inputElement = getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute('maxlength');
+        expect(inputElement.getAttribute('maxlength')).toBe('3');
+      });
+    });
+
+    describe('Aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        const { getByLabelText } = render(renderForm('', {}));
+        const inputElement = getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+
+      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('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", () => {
+        let value = '';
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const input = getByLabelText(testLabelName);
+
+        fireEvent.change(input, { target: { value: 'hello' } });
+
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+        expect(value).toBe('hello');
+      });
+    });
+  });
+
+  describe('Children props', () => {
+    describe('Form Label', () => {
+      test('Input correctly passes props to dependency label component', async () => {
+        const { getByText } = render(renderForm('', { isRequired: true }));
+        const labelElement = getByText(`${testLabelName}`);
+        expect(labelElement).toHaveAttribute('for', testLabelName);
+      });
+    });
+  });
+});

package/src/components/Formik/FormikTextInput/FormikTextInput.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import { TextInput, TextInputProps } from '../../TextInput/TextInput';
+
+export interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
+  field: FieldAttributes<HTMLInputElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: TextInputProps['onChange'];
+}
+
+export const FormikTextInput: React.FC<FormikTextInputProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  id,
+  label,
+  ...props
+}) => (
+  <TextInput
+    {...props}
+    id={id}
+    label={label}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+  />
+);

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Formik, Field, Form, setIn, getIn, FormikValues } from 'formik';
+import { FormikTextInputInset } from './FormikTextInputInset';
+
+const testLabelName = 'textInput';
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)
+    ? {}
+    : setIn({}, testValueKey, '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={() => {}}
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          component={FormikTextInputInset}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikTextInputInset', () => {
+  describe('States', () => {
+    describe('Autofocused', () => {
+      test('Input autofocuses if "autoFocus" prop is set to true', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoFocus: true })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(document.activeElement).toEqual(inputElement);
+      });
+
+      test('Input correctly assigns autocomplete value of "on" when bool true is provided', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoComplete: true })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'on');
+      });
+    });
+
+    describe('With Autocomplete', () => {
+      test('Input correctly assigns autocomplete value of "off" when bool false is provided', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoComplete: false })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+
+      test('Input correctly assigns autocomplete value of "off" when incorrect type is provided', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { autoComplete: ['a', 'random', 'array'] })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+    });
+
+    describe('Required', () => {
+      test('Input correctly assigns the "aria-required" attribute when "isRequired" prop is true', () => {
+        const { getByDisplayValue } = render(
+          renderForm('hello', { isRequired: true })
+        );
+        const inputElement = getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+    });
+
+    describe('With Error', () => {
+      test('Input correctly displays error message if provided', async () => {
+        const { getByText } = render(renderForm('', { isRequired: true }));
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('input is required')).toBeInTheDocument()
+        );
+      });
+
+      test('Input correctly displays error message in nested object', 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('With Max Length', () => {
+      test('Input correctly passes maxlength property if prop is passed', async () => {
+        const { getByLabelText } = render(renderForm('', { maxLength: '3' }));
+        const inputElement = getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute('maxlength');
+        expect(inputElement.getAttribute('maxlength')).toBe('3');
+      });
+    });
+
+    describe('Aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        const { getByLabelText } = render(renderForm('', {}));
+        const inputElement = getByLabelText(testLabelName);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", () => {
+        let value = '';
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const input = getByLabelText(testLabelName);
+
+        fireEvent.change(input, { target: { value: 'hello' } });
+
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+        expect(value).toBe('hello');
+      });
+    });
+  });
+
+  describe('Children props', () => {
+    describe('Form Label', () => {
+      test('Input correctly passes props to dependency label component', async () => {
+        const { getByText } = render(renderForm('', { isRequired: true }));
+        const labelElement = getByText(`${testLabelName}`);
+        expect(labelElement).toHaveAttribute('for', testLabelName);
+      });
+    });
+  });
+});

package/src/components/Formik/FormikTextInputInset/FormikTextInputInset.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import {
+  TextInputInset,
+  TextInputInsetProps,
+} from '../../TextInputInset/TextInputInset';
+
+export interface FormikTextInputInsetProps
+  extends Omit<TextInputInsetProps, 'onChange'> {
+  field: FieldAttributes<HTMLInputElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: TextInputInsetProps['onChange'];
+}
+
+export const FormikTextInputInset: React.FC<FormikTextInputInsetProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  id,
+  label,
+  ...props
+}) => (
+  <TextInputInset
+    {...props}
+    id={id}
+    label={label}
+    name={name}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange}
+    value={value}
+    error={getIn(touched, name) && getIn(errors, name)}
+  />
+);