@commercetools-frontend/experimental-components 0.0.2

package/src/custom-fields/custom-fields/test-utils.jsx

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import {
+  renderApp,
+  renderAppWithRedux,
+  screen,
+  fireEvent,
+  act,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { CartDiscountsCount } from '../../actions/reference-search/cart-discount/cart-discount.ctp.graphql';
+import CustomFields from './custom-fields';
+
+// TODO(pa3): cosider moving all the helpers (or at least parts of their logic) to packages-shared/test-utils/select-input.js
+export const renderCustomFields = ({
+  fieldDefinitions,
+  initialValues = {},
+  initialTouched = {},
+  name,
+  isDisabled = false,
+  isReadOnly = false,
+}) => {
+  let formikValues = initialValues;
+  let submitForm = () => {};
+  let touchedFields = initialTouched;
+  let resetForm = () => {};
+  let setInitialValues = () => {};
+
+  const Wrapper = ({ children }) => {
+    const [internalInitialValues, setInternalInitialValues] =
+      useState(initialValues);
+
+    setInitialValues = setInternalInitialValues;
+
+    return (
+      <Formik
+        enableReinitialize
+        initialValues={internalInitialValues}
+        initialTouched={initialTouched}
+        onSubmit={() => {}}
+      >
+        {(formikBag) => {
+          formikValues = formikBag.values;
+          submitForm = formikBag.handleSubmit;
+          touchedFields = formikBag.touched;
+          resetForm = formikBag.resetForm;
+
+          return children;
+        }}
+      </Formik>
+    );
+  };
+  Wrapper.displayName = 'Wrapper';
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  renderApp(
+    <CustomFields
+      name={name}
+      isDisabled={isDisabled}
+      isReadOnly={isReadOnly}
+      fieldDefinitions={fieldDefinitions}
+    />,
+    {
+      wrapper: Wrapper,
+      mocks: [
+        {
+          request: {
+            query: CartDiscountsCount,
+            context: {
+              target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+            },
+          },
+          result: {
+            data: {
+              cartDiscounts: {
+                __typename: 'CartDiscountQueryResult',
+                total: 100,
+              },
+            },
+          },
+        },
+      ],
+    }
+  );
+
+  return {
+    getFormikValues: () => formikValues,
+    getTouchedFields: () => touchedFields,
+    submitForm: () => act(() => submitForm()),
+    resetForm: () => act(() => resetForm()),
+    setInitialValues: (values) => act(() => setInitialValues(values)),
+  };
+};
+
+export const renderCustomFieldsWithGraphqlMock = ({
+  fieldDefinitions,
+  initialValues = {},
+  name,
+  isDisabled = false,
+  isReadOnly = false,
+}) => {
+  let formikValues = initialValues;
+
+  renderAppWithRedux(
+    <Formik initialValues={initialValues}>
+      {({ values }) => {
+        formikValues = values;
+        return (
+          <CustomFields
+            name={name}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            fieldDefinitions={fieldDefinitions}
+          />
+        );
+      }}
+    </Formik>
+  );
+
+  return { getFormikValues: () => formikValues };
+};
+
+export const selectValue = (name, value) => {
+  const input = screen.getByLabelText(name);
+  fireEvent.focus(input);
+  fireEvent.blur(input);
+  fireEvent.keyDown(input, {
+    key: 'ArrowDown',
+  });
+  const optionToSelect = screen.getByText(value);
+  fireEvent.click(optionToSelect);
+};
+
+export const enterValue = (name, value) => {
+  const input = screen.getByLabelText(name);
+  input.focus();
+  fireEvent.change(input, {
+    target: {
+      value,
+    },
+  });
+  fireEvent.keyDown(input, {
+    key: 'Enter',
+  });
+};
+
+export const clearValue = async (name) => {
+  const input = screen.getByLabelText(name);
+  fireEvent.focus(input);
+  fireEvent.keyDown(input, { key: 'Backspace' });
+  fireEvent.change(input, {
+    target: {
+      value: '',
+    },
+  });
+  fireEvent.keyDown(input, {
+    key: 'Enter',
+  });
+};
+
+export const clickClearButton = async () => {
+  const clearButton = await screen.findByLabelText(/clear/i);
+  fireEvent.click(clearButton);
+};

package/src/custom-fields/custom-fields/types/custom-boolean-input.jsx

@@ -0,0 +1,49 @@
+import isNil from 'lodash.isnil';
+import PropTypes from 'prop-types';
+import { SelectInput } from '@commercetools-frontend/ui-kit';
+import { makeChangeHandler } from '../utils';
+
+const options = [
+  { value: 'true', label: 'YES' },
+  { value: 'false', label: 'NO' },
+];
+
+export default function CustomBooleanInput(props) {
+  const value = isNil(props.value) ? props.value : String(props.value);
+
+  const handleChange = makeChangeHandler((rawValue) =>
+    props.setFieldValue(
+      props.name,
+      isNil(rawValue) ? undefined : rawValue === 'true'
+    )
+  );
+
+  return (
+    <SelectInput
+      id={props.name}
+      name={props.name}
+      value={value}
+      options={options}
+      onChange={handleChange}
+      onBlur={props.onBlur}
+      isClearable={!props.fieldDefinition.required}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+      hasError={props.hasError}
+    />
+  );
+}
+
+CustomBooleanInput.displayName = 'CustomBooleanInput';
+CustomBooleanInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-boolean-input.spec.js

@@ -0,0 +1,51 @@
+import {
+  screen,
+  waitFor,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { renderCustomFields, selectValue, clearValue } from '../test-utils';
+
+const fieldDefinitions = [
+  {
+    name: 'booleanAttr',
+    type: {
+      name: 'boolean',
+    },
+  },
+];
+
+describe('CustomBooleanInput', () => {
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFields({ fieldDefinitions });
+    await screen.findByText('Select...');
+  });
+
+  it('should render `YES` for true value', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { booleanAttr: true },
+    });
+    await screen.findByText('YES');
+  });
+
+  it('should render `NO` for false value', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { booleanAttr: false },
+    });
+    await screen.findByText('NO');
+  });
+
+  it('should let user change values', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { booleanAttr: false },
+    });
+    await screen.findByText('NO');
+
+    selectValue('booleanAttr', 'YES');
+    expect(getFormikValues()).toStrictEqual({ booleanAttr: true });
+
+    await clearValue('booleanAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-date-time-input.jsx

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { DateInput, DateTimeInput } from '@commercetools-frontend/ui-kit';
+import { makeChangeHandler } from '../utils';
+
+export default function CustomDateTimeInput(props) {
+  const timeZone = useApplicationContext(
+    (applicationContext) => applicationContext.user.timeZone
+  );
+
+  const value = props.value || '';
+
+  const typeName = props.fieldDefinition.type.name.toLowerCase();
+
+  const handleChange = makeChangeHandler((rawValue) => {
+    props.setFieldValue(props.name, rawValue || undefined);
+  });
+
+  const InputComponent = do {
+    if (typeName === 'date') DateInput;
+    else DateTimeInput;
+  };
+
+  return (
+    <InputComponent
+      id={props.name}
+      name={props.name}
+      value={value}
+      onChange={handleChange}
+      onBlur={props.onBlur}
+      timeZone={timeZone}
+      hasError={props.hasError}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+    />
+  );
+}
+
+CustomDateTimeInput.displayName = 'CustomDateTimeInput';
+CustomDateTimeInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-date-time-input.spec.js

@@ -0,0 +1,116 @@
+import {
+  screen,
+  fireEvent,
+  waitFor,
+} from '@commercetools-frontend/application-shell/test-utils';
+import {
+  renderCustomFields,
+  enterValue,
+  clickClearButton,
+} from '../test-utils';
+
+describe('CustomDateTimeInput', () => {
+  describe('when field is of type `date`', () => {
+    const fieldDefinitions = [
+      {
+        name: 'datetimeAttr',
+        type: {
+          name: 'date',
+        },
+      },
+    ];
+
+    it('should show empty input when value is empty', async () => {
+      renderCustomFields({ fieldDefinitions });
+      const input = await screen.findByLabelText('datetimeAttr');
+      expect(input.value).toBe('');
+    });
+
+    it('should render provided date value', async () => {
+      renderCustomFields({
+        fieldDefinitions,
+        initialValues: { datetimeAttr: '2021-12-21' },
+      });
+      await screen.findByDisplayValue('12/21/2021');
+    });
+
+    it('should let user change value', async () => {
+      const { getFormikValues } = renderCustomFields({
+        fieldDefinitions,
+        initialValues: { datetimeAttr: '2021-12-21' },
+      });
+      await screen.findByDisplayValue('12/21/2021');
+      enterValue('datetimeAttr', '10/22/2021 3pm');
+      const openCalendarButton = await screen.findByLabelText('open menu');
+      fireEvent.click(openCalendarButton);
+      const dayButton = await screen.findByText('22');
+      fireEvent.click(dayButton);
+      await waitFor(() =>
+        expect(getFormikValues()).toStrictEqual({ datetimeAttr: '2021-10-22' })
+      );
+    });
+
+    it('should drop empty value from formik values', async () => {
+      const { getFormikValues } = renderCustomFields({
+        fieldDefinitions,
+        initialValues: { datetimeAttr: '2021-12-21' },
+      });
+      await screen.findByDisplayValue('12/21/2021');
+      await clickClearButton();
+      await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+    });
+  });
+
+  describe('when field is of type `datetime`', () => {
+    const fieldDefinitions = [
+      {
+        name: 'datetimeAttr',
+        type: {
+          name: 'datetime',
+        },
+      },
+    ];
+
+    it('should show empty input when value is empty', async () => {
+      renderCustomFields({ fieldDefinitions });
+      const input = await screen.findByLabelText('datetimeAttr');
+      expect(input.value).toBe('');
+    });
+
+    it('should render provided datetime value', async () => {
+      renderCustomFields({
+        fieldDefinitions,
+        initialValues: { datetimeAttr: '2021-12-21 10:00' },
+      });
+      await screen.findByDisplayValue('12/21/2021 10:00 AM');
+    });
+
+    it('should let user change value', async () => {
+      const { getFormikValues } = renderCustomFields({
+        fieldDefinitions,
+        initialValues: { datetimeAttr: '2021-12-21 10:00' },
+      });
+      await screen.findByDisplayValue('12/21/2021 10:00 AM');
+
+      enterValue('datetimeAttr', '12/23/2021 3:00 PM');
+      await screen.findByDisplayValue('12/23/2021 3:00 PM');
+
+      await waitFor(() =>
+        expect(getFormikValues()).toStrictEqual({
+          datetimeAttr: '2021-12-23T15:00:00.000Z',
+        })
+      );
+    });
+
+    it('should drop empty value from formik values', async () => {
+      const { getFormikValues } = renderCustomFields({
+        fieldDefinitions,
+        initialValues: { datetimeAttr: '2021-12-21 10:00' },
+      });
+      await screen.findByDisplayValue('12/21/2021 10:00 AM');
+
+      await clickClearButton();
+      await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+    });
+  });
+});

package/src/custom-fields/custom-fields/types/custom-enum-input.jsx

@@ -0,0 +1,61 @@
+import { SelectInput } from '@commercetools-frontend/ui-kit';
+import PropTypes from 'prop-types';
+import { defaultMemoize } from 'reselect';
+import CustomFieldTooltip from '../custom-field-tooltip';
+import { makeChangeHandler } from '../utils';
+
+const convertTypeValuesToOptions = defaultMemoize((typeValues) =>
+  typeValues.map((typeValue) => ({
+    label: typeValue.label || `${typeValue.key} (key)`,
+    value: typeValue.key,
+  }))
+);
+export default function CustomEnumInput(props) {
+  const options = convertTypeValuesToOptions(props.fieldDefinition.type.values);
+
+  const handleChange = makeChangeHandler((rawValue) =>
+    props.setFieldValue(props.name, rawValue)
+  );
+
+  const tooltipTitle = props.value
+    ? options.find((option) => option.value === props.value)?.label ?? ''
+    : '';
+
+  return (
+    <CustomFieldTooltip title={tooltipTitle}>
+      <SelectInput
+        isClearable={!props.fieldDefinition.required}
+        id={props.name}
+        name={props.name}
+        value={props.value}
+        onChange={handleChange}
+        onBlur={props.onBlur}
+        options={options}
+        hasError={props.hasError}
+        isDisabled={props.isDisabled}
+        isReadOnly={props.isReadOnly}
+      />
+    </CustomFieldTooltip>
+  );
+}
+CustomEnumInput.displayName = 'CustomEnumInput';
+CustomEnumInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string.isRequired,
+          key: PropTypes.string.isRequired,
+        }).isRequired
+      ),
+    }).isRequired,
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-enum-input.spec.js

@@ -0,0 +1,113 @@
+import '@commercetools-local/test-utils/src/ui-kit-mocks';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { renderCustomFields, selectValue, clearValue } from '../test-utils';
+
+describe('CustomEnumInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'enumAttr',
+      type: {
+        name: 'enum',
+        values: [
+          { label: 'label-1', key: 'key-1' },
+          { label: 'label-2', key: 'key-2' },
+          { label: '', key: 'key-3' },
+          {
+            label: 'this is a test label which is forty plus chars',
+            key: 'key-4',
+          },
+        ],
+      },
+    },
+  ];
+
+  it('should show empty input when value is empty', async () => {
+    renderCustomFields({ fieldDefinitions });
+    await screen.findByText('Select...');
+  });
+
+  it('should render provided enum value', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { enumAttr: 'key-1' },
+    });
+    await screen.findByText('label-1');
+    expect(screen.getAllByText('label-1')).toHaveLength(1);
+  });
+
+  it('should fallback to key if enum label is missing', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { enumAttr: 'key-3' },
+    });
+    await screen.findByText('key-3 (key)');
+  });
+
+  it('should not let user clear required field', async () => {
+    const requiredFieldDefinitions = [
+      {
+        name: 'enumAttr',
+        required: true,
+        type: {
+          name: 'enum',
+          values: [
+            { label: 'label-1', key: 'key-1' },
+            { label: 'label-2', key: 'key-2' },
+          ],
+        },
+      },
+    ];
+
+    renderCustomFields({
+      fieldDefinitions: requiredFieldDefinitions,
+      initialValues: { enumAttr: 'key-1' },
+    });
+    await screen.findByText('label-1');
+    expect(screen.queryByLabelText('Clear')).not.toBeInTheDocument();
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { enumAttr: 'key-1' },
+    });
+    await screen.findByText('label-1');
+    selectValue('enumAttr', 'label-2');
+    await screen.findByText('label-2');
+
+    expect(getFormikValues()).toStrictEqual({ enumAttr: 'key-2' });
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { enumAttr: 'key-1' },
+    });
+
+    await clearValue('enumAttr');
+
+    // TODO(pa3): that's not how clearing this input is suppossed to work by design.
+    // Empty value should be removed from formik values to ease prevent keeping
+    // form `dirty` when user add change initially empty value, but then clear it.
+    // But that (broken) behaviour is here for quite some time and maybe some
+    // parts of application are reling on it already. Find out and fix.
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({ enumAttr: null })
+    );
+  });
+
+  it('should show the tooltip on hover when the value is greater than 40 characters', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { enumAttr: 'key-4' },
+    });
+    fireEvent.mouseOver(screen.getByLabelText('enumAttr'));
+    expect(
+      screen.getAllByText(fieldDefinitions[0].type.values[3].label)
+    ).toHaveLength(2);
+  });
+});

package/src/custom-fields/custom-fields/types/custom-localized-enum-input.jsx

@@ -0,0 +1,70 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { SelectInput } from '@commercetools-frontend/ui-kit';
+import PropTypes from 'prop-types';
+import { defaultMemoize } from 'reselect';
+import CustomFieldTooltip from '../custom-field-tooltip';
+import { makeChangeHandler } from '../utils';
+
+const convertTypeValuesToOptions = defaultMemoize((type, language) =>
+  type.values.map((value) => ({
+    label: value.label?.[language] || `${value.key} (key)`,
+    value: value.key,
+  }))
+);
+
+export default function CustomLocalizedEnumInput(props) {
+  const language = useApplicationContext(
+    (applicationContext) => applicationContext.dataLocale
+  );
+
+  const options = convertTypeValuesToOptions(
+    props.fieldDefinition.type,
+    language
+  );
+
+  const handleChange = makeChangeHandler((rawValue) =>
+    props.setFieldValue(props.name, rawValue)
+  );
+
+  const tooltipTitle = props.value
+    ? options.find((option) => option.value === props.value)?.label ?? ''
+    : '';
+
+  return (
+    <CustomFieldTooltip title={tooltipTitle}>
+      <SelectInput
+        id={props.name}
+        name={props.name}
+        value={props.value}
+        onChange={handleChange}
+        onBlur={props.onBlur}
+        options={options}
+        isClearable={!props.fieldDefinition.required}
+        hasError={props.hasError}
+        isDisabled={props.isDisabled}
+        isReadOnly={props.isReadOnly}
+      />
+    </CustomFieldTooltip>
+  );
+}
+CustomLocalizedEnumInput.displayName = 'CustomLocalizedEnumInput';
+CustomLocalizedEnumInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.object,
+          key: PropTypes.string.isRequired,
+        }).isRequired
+      ),
+    }).isRequired,
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};