@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,470 +0,0 @@
-import { graphql } from 'msw';
-import { setupServer } from 'msw/node';
-import { Formik } from 'formik';
-import {
-  screen,
-  fireEvent,
-  renderAppWithRedux,
-  waitFor,
-  within,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import {
-  ProductType,
-  AttributeDefinition,
-} from '@commercetools-local/test-data';
-import { LocalizedString } from '@commercetools-test-data/commons';
-import CustomFields from '../../custom-fields';
-
-const fieldDefinitions = [
-  {
-    name: 'nested-fields-level-0',
-    required: true,
-    label: { en: 'Nested Fields Level 0' },
-    type: {
-      name: 'nested',
-      typeRef: {
-        __typename: 'Reference',
-        typeId: 'product-type',
-        id: 'nested-product-type-level-0',
-      },
-      __typename: 'NestedAttributeDefinitionType',
-    },
-  },
-];
-
-const buildNestedProductType = (nestingLevel = 0) =>
-  ProductType.random()
-    .id(`nested-product-type-level-${nestingLevel}`)
-    .name(`Nested Product Type (Level ${nestingLevel})`)
-    .attributes([
-      AttributeDefinition.presets
-        .number()
-        .name(`numeric-field-level-${nestingLevel}`)
-        .isRequired(false)
-        .label(
-          LocalizedString.presets
-            .empty()
-            .en(`Numeric Field Level ${nestingLevel}`)
-        ),
-      AttributeDefinition.presets
-        .nested(`nested-product-type-level-${nestingLevel + 1}`)
-        .name(`nested-fields-level-${nestingLevel + 1}`)
-        .isRequired(false)
-        .label(
-          LocalizedString.presets
-            .empty()
-            .en(`Nested Fields Level ${nestingLevel + 1}`)
-        ),
-    ])
-    .buildGraphql();
-
-const mockServer = setupServer(
-  graphql.query('FetchProductTypeQuery', (req, res, ctx) => {
-    const id = req.body.variables.id;
-    const match = id.match(/nested-product-type-level-(\d)/);
-    const nestingLevel = parseInt(match?.[1], 10);
-    const productType = do {
-      if (Number.isNaN(nestingLevel)) null;
-      else buildNestedProductType(nestingLevel);
-    };
-
-    return res(ctx.data({ productType }));
-  })
-);
-
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-
-beforeAll(() => mockServer.listen({ onUnhandledRequest: 'warn' }));
-afterAll(() => mockServer.close());
-
-const render = (component, opts) => {
-  let formikValues = opts.initialValues;
-
-  renderAppWithRedux(
-    <Formik initialValues={opts.initialValues}>
-      {({ values }) => {
-        formikValues = values;
-        return component;
-      }}
-    </Formik>
-  );
-
-  return { getFormikValues: () => formikValues };
-};
-
-const waitInputToBeRendered = async () =>
-  screen.findByText(/Product type referenced: Nested Product Type/);
-
-const startEditingNestedField = async (name) => {
-  const container = await screen.findByTestId(
-    name.split(' ').join('-').toLowerCase()
-  );
-  const editButton = within(container).getByLabelText('Edit');
-  fireEvent.click(editButton);
-};
-
-const enterFieldValue = async (fieldName, value) => {
-  const input = await screen.findByLabelText(fieldName);
-  fireEvent.change(input, { target: { value } });
-};
-
-const saveNestedFields = async (dialogName) => {
-  const dialog = screen.getByRole('dialog', { name: dialogName });
-  const saveButton = within(dialog).getByText('Update Attribute');
-  fireEvent.click(saveButton);
-  await screen.findByText(
-    /Attributes on this level have been successfully updated/i
-  );
-  const hideNotificationButton = screen.getByLabelText('Hide notification');
-  fireEvent.click(hideNotificationButton);
-};
-
-const revertChanges = (dialogName) => {
-  const dialog = screen.getByRole('dialog', { name: dialogName });
-  const revertChangesButton = within(dialog).getByRole('button', {
-    name: 'Cancel',
-  });
-  fireEvent.click(revertChangesButton);
-};
-
-const leaveNestedAttributesForm = (dialogName) => {
-  const dialog = screen.getByRole('dialog', { name: dialogName });
-  const goBackLink = within(dialog).getByText(/Go back/i);
-  fireEvent.click(goBackLink);
-};
-
-const waitForDiscardConfirmation = () =>
-  screen.findByText(
-    'By leaving this page, attributes on this level will not be updated. Would you like to proceed?'
-  );
-
-const confirmChangesDiscard = () => {
-  const confirmButton = screen.getByText('Proceed without updating level');
-  fireEvent.click(confirmButton);
-};
-
-const cancelChangesDiscard = () => {
-  const discardChangesDialog = screen.getByLabelText('Discard changes');
-  const dialogCancelButton = within(discardChangesDialog).getByText('Cancel');
-  fireEvent.click(dialogCancelButton);
-};
-
-it('should show an error when nested attribute product type fetching failed', async () => {
-  mockServer.use(
-    graphql.query('FetchProductTypeQuery', (req, res, ctx) => {
-      return res.status(503);
-    })
-  );
-
-  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
-    initialValues: {},
-  });
-
-  await screen.findByText(
-    'Unable to load resource. Check the connection and try again.'
-  );
-});
-
-it('should not fail when nested attribute product type fetching failed', async () => {
-  const initialValues = {
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
-  };
-
-  mockServer.use(
-    graphql.query('FetchProductTypeQuery', (req, res, ctx) =>
-      res.once(ctx.status(500))
-    )
-  );
-
-  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
-    initialValues,
-  });
-
-  await screen.findByText(/Nested Fields Level 0/);
-});
-
-it('should let user edit attribute', async () => {
-  const initialValues = {
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
-  };
-
-  const { getFormikValues } = render(
-    <CustomFields fieldDefinitions={fieldDefinitions} />,
-    { initialValues }
-  );
-
-  await waitInputToBeRendered();
-  await startEditingNestedField('Nested Fields Level 0');
-  await enterFieldValue('Numeric Field Level 0', 20);
-  await saveNestedFields('Nested Fields Level 0');
-
-  await waitFor(() =>
-    expect(getFormikValues()).toStrictEqual({
-      'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 20 }],
-    })
-  );
-});
-
-it('should disable revert button if form is not dirty', async () => {
-  const initialValues = {
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
-  };
-
-  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
-    initialValues,
-  });
-
-  await waitInputToBeRendered();
-  await startEditingNestedField('Nested Fields Level 0');
-  const revertChangesButton = screen.getByRole('button', { name: 'Cancel' });
-  await waitFor(() => expect(revertChangesButton).toBeDisabled());
-});
-
-it('should let user revert changes', async () => {
-  const initialValues = {
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
-  };
-
-  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
-    initialValues,
-  });
-
-  await waitInputToBeRendered();
-  await startEditingNestedField('Nested Fields Level 0');
-  await enterFieldValue('Numeric Field Level 0', 20);
-  revertChanges('Nested Fields Level 0');
-  await screen.findByDisplayValue('10');
-
-  const revertChangesButton = screen.getByRole('button', { name: 'Cancel' });
-  await waitFor(() => expect(revertChangesButton).toBeDisabled());
-});
-
-it('should not let user go to attribute editing view if input is disabled', async () => {
-  const initialValues = {
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
-  };
-
-  render(<CustomFields isDisabled fieldDefinitions={fieldDefinitions} />, {
-    initialValues,
-  });
-
-  await waitInputToBeRendered();
-
-  const editButton = screen.getByLabelText('Edit');
-  expect(editButton).toBeDisabled();
-});
-
-it('should not let user go to attribute editing view if nested product type has no attributes', async () => {
-  const initialValues = {
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
-  };
-
-  mockServer.use(
-    graphql.query('FetchProductTypeQuery', (req, res, ctx) =>
-      res.once(
-        ctx.data({
-          productType: ProductType.random()
-            .id(`nested-product-type-level-0`)
-            .name(`Nested Product Type (Level 0)`)
-            .attributeDefinitions(
-              buildGraphqlList([], { name: 'AttributeDefinitions', total: 2 })
-            )
-            .buildGraphql(),
-        })
-      )
-    )
-  );
-
-  render(<CustomFields isDisabled fieldDefinitions={fieldDefinitions} />, {
-    initialValues,
-  });
-
-  await waitInputToBeRendered();
-
-  const editButton = screen.queryByLabelText('Edit');
-  expect(editButton).not.toBeInTheDocument();
-
-  const reasonText = screen.getByText(
-    /the product type referenced does not contain any attribute/i
-  );
-  expect(reasonText).toBeInTheDocument();
-});
-
-it('should mark nested field not having values', async () => {
-  const initialValues = {};
-
-  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
-    initialValues,
-  });
-
-  await waitInputToBeRendered();
-
-  const emptyMessage = screen.getByText(/Empty/);
-  expect(emptyMessage).toBeInTheDocument();
-});
-
-it('should work fine with empty value', async () => {
-  const initialValues = {};
-
-  const { getFormikValues } = render(
-    <CustomFields fieldDefinitions={fieldDefinitions} />,
-    { initialValues }
-  );
-
-  await waitInputToBeRendered();
-  await startEditingNestedField('Nested Fields Level 0');
-  await enterFieldValue('Numeric Field Level 0', 20);
-  await saveNestedFields('Nested Fields Level 0');
-
-  expect(getFormikValues()).toStrictEqual({
-    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 20 }],
-  });
-});
-
-it('should warn user about dropping unsaved changes', async () => {
-  const initialValues = {};
-
-  const { getFormikValues } = render(
-    <CustomFields fieldDefinitions={fieldDefinitions} />,
-    { initialValues }
-  );
-
-  await waitInputToBeRendered();
-  await startEditingNestedField('Nested Fields Level 0');
-  await enterFieldValue('Numeric Field Level 0', 20);
-  leaveNestedAttributesForm('Nested Fields Level 0');
-  await waitForDiscardConfirmation();
-  confirmChangesDiscard();
-
-  expect(
-    screen.queryByLabelText('Numeric Field Level 0')
-  ).not.toBeInTheDocument();
-
-  expect(getFormikValues()).toBe(initialValues);
-});
-
-it('should stay on editing screen if user do not confirm leaving it', async () => {
-  const initialValues = {};
-
-  const { getFormikValues } = render(
-    <CustomFields fieldDefinitions={fieldDefinitions} />,
-    { initialValues }
-  );
-
-  await waitInputToBeRendered();
-  await startEditingNestedField('Nested Fields Level 0');
-  await enterFieldValue('Numeric Field Level 0', 20);
-  leaveNestedAttributesForm('Nested Fields Level 0');
-  await waitForDiscardConfirmation();
-  cancelChangesDiscard();
-
-  expect(screen.getByLabelText('Numeric Field Level 0')).toBeInTheDocument();
-  expect(getFormikValues()).toBe(initialValues);
-});
-
-describe('when nested field itself has nested fields', () => {
-  const initialValues = {};
-
-  it('should prevent editing more than 5 levels deep', async () => {
-    render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
-      initialValues,
-    });
-    await waitInputToBeRendered();
-    await startEditingNestedField('Nested Fields Level 0');
-    await startEditingNestedField('Nested Fields Level 1');
-    await startEditingNestedField('Nested Fields Level 2');
-    await startEditingNestedField('Nested Fields Level 3');
-    await startEditingNestedField('Nested Fields Level 4');
-
-    const nextLevelNestedField = await screen.findByTestId(
-      'nested-fields-level-5'
-    );
-    within(nextLevelNestedField).getByText(
-      'The Merchant Center currently supports the edition of nested attributes up to five levels only.'
-    );
-    const editButton = within(nextLevelNestedField).queryByLabelText('Edit');
-    expect(editButton).not.toBeInTheDocument();
-  });
-
-  it('should propagate changes to the top level <CustomFields /> from deeper nested attributes', async () => {
-    // ... because we don't want to force user to approve changes on every level of nesting
-    const { getFormikValues } = render(
-      <CustomFields fieldDefinitions={fieldDefinitions} />,
-      { initialValues }
-    );
-
-    await waitInputToBeRendered();
-    await startEditingNestedField('Nested Fields Level 0');
-    await startEditingNestedField('Nested Fields Level 1');
-    await enterFieldValue('Numeric Field Level 1', 30);
-    await saveNestedFields('Nested Fields Level 1');
-
-    expect(getFormikValues()).toStrictEqual({
-      'nested-fields-level-0': [
-        {
-          name: 'nested-fields-level-1',
-          value: [
-            {
-              name: 'numeric-field-level-1',
-              value: 30,
-            },
-          ],
-        },
-      ],
-    });
-  });
-
-  it('should apply changes from the sub-nested fields', async () => {
-    const { getFormikValues } = render(
-      <CustomFields fieldDefinitions={fieldDefinitions} />,
-      { initialValues }
-    );
-
-    await waitInputToBeRendered();
-    await startEditingNestedField('Nested Fields Level 0');
-    await startEditingNestedField('Nested Fields Level 1');
-    await enterFieldValue('Numeric Field Level 1', 30);
-    await saveNestedFields('Nested Fields Level 1');
-    await enterFieldValue('Numeric Field Level 0', 20);
-    await saveNestedFields('Nested Fields Level 0');
-
-    expect(getFormikValues()).toStrictEqual({
-      'nested-fields-level-0': [
-        {
-          name: 'nested-fields-level-1',
-          value: [{ name: 'numeric-field-level-1', value: 30 }],
-        },
-        { name: 'numeric-field-level-0', value: 20 },
-      ],
-    });
-  });
-
-  it('should discard changes made on intermediate nesting level without dropping changes from deeper levels', async () => {
-    const { getFormikValues } = render(
-      <CustomFields fieldDefinitions={fieldDefinitions} />,
-      { initialValues }
-    );
-
-    await waitInputToBeRendered();
-    await startEditingNestedField('Nested Fields Level 0');
-    await startEditingNestedField('Nested Fields Level 1');
-    await enterFieldValue('Numeric Field Level 1', 30);
-    await saveNestedFields('Nested Fields Level 1');
-    await enterFieldValue('Numeric Field Level 0', 20);
-    await revertChanges('Nested Fields Level 0');
-
-    await waitFor(() =>
-      expect(getFormikValues()).toStrictEqual({
-        'nested-fields-level-0': [
-          {
-            name: 'nested-fields-level-1',
-            value: [{ name: 'numeric-field-level-1', value: 30 }],
-          },
-        ],
-      })
-    );
-  });
-});

package/src/custom-fields/custom-fields/types/custom-nested-input/index.js

@@ -1 +0,0 @@
-export { default } from './custom-nested-input';

package/src/custom-fields/custom-fields/types/custom-nested-input/messages.js

@@ -1,82 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  updateButton: {
-    id: 'NestedAttributes.Details.updateButton',
-    description: 'Update button label',
-    defaultMessage: 'Update Attribute',
-  },
-  cancelButton: {
-    id: 'NestedAttributes.Details.cancelButton',
-    description: 'Cancel button label',
-    defaultMessage: 'Cancel',
-  },
-  attributeUpdateSucceeded: {
-    id: 'NestedAttributes.Details.attributeUpdateSucceeded',
-    description: 'Message for successful notification (update)',
-    defaultMessage: 'Attributes on this level have been successfully updated',
-  },
-  nestedAttributesConfirmLabel: {
-    id: 'NestedAttributes.Details.nestedAttributesConfirmLabel',
-    description: 'Text for confirmation button',
-    defaultMessage: 'Proceed without updating level',
-  },
-  confirmationDialogTitle: {
-    id: 'NestedAttributes.Details.confirmationDialogTitle',
-    description: 'Title for confirmation dialog',
-    defaultMessage: 'Discard changes',
-  },
-  confirmationDialogBody: {
-    id: 'NestedAttributes.Details.confirmationDialogBody',
-    description: 'Body text for confirmation dialog',
-    defaultMessage:
-      'By leaving this page, attributes on this level will not be updated. Would you like to proceed?',
-  },
-  editAttributeWarning: {
-    id: 'NestedAttributes.editAttributeWarning',
-    description: 'Warning message shown when nested attribute cannot be edited',
-    defaultMessage:
-      'Please create your product first in order to be able to edit this attribute',
-  },
-  hideSetItems: {
-    id: 'NestedAttributes.tooltip.hideSetItems',
-    description: 'Hide set items bottom',
-    defaultMessage: 'Hide set items ({countOfSetItem})',
-  },
-  showSetItems: {
-    id: 'NestedAttributes.tooltip.showSetItems',
-    description: 'Show set items bottom',
-    defaultMessage: 'Show set items ({countOfSetItem})',
-  },
-  editTooltip: {
-    id: 'NestedAttributes.tooltip.edit',
-    description: 'NestedAttributes edit tooltip',
-    defaultMessage: 'Edit Attributes',
-  },
-  deleteSetItemTooltip: {
-    id: 'NestedAttributes.tooltip.deleteSetItem',
-    description: 'NestedAttributes delete SetItem tooltip',
-    defaultMessage: 'Delete set item',
-  },
-  addSetItemTooltip: {
-    id: 'NestedAttributes.tooltip.addSetItem',
-    description: 'NestedAttributes add SetItem tooltip',
-    defaultMessage: 'Add set item',
-  },
-  addSetItemTooltipDisabled: {
-    id: 'NestedAttributes.tooltip.addSetItemTooltipDisabled',
-    description: 'NestedAttributes add SetItem tooltip (disabled)',
-    defaultMessage: 'Multiple empty set items cannot be added',
-  },
-  emptyProductType: {
-    id: 'NestedAttributes.emptyProductType',
-    description: 'message that shows when product type is empty',
-    defaultMessage:
-      'The product type referenced does not contain any attribute.',
-  },
-  referencedProductType: {
-    id: 'NestedAttributes.referencedProductType',
-    description: 'Product type referenced hint',
-    defaultMessage: 'Product type referenced: {productTypeName}',
-  },
-});

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

@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import { NumberInput } from '@commercetools-frontend/ui-kit';
-import { makeChangeHandler } from '../utils';
-
-export default function CustomNumberInput(props) {
-  const value = props.value ?? '';
-
-  const handleChange = makeChangeHandler((rawValue) =>
-    props.setFieldValue(props.name, !rawValue ? undefined : Number(rawValue))
-  );
-
-  return (
-    <NumberInput
-      id={props.name}
-      name={props.name}
-      value={value}
-      onChange={handleChange}
-      onBlur={props.onBlur}
-      hasError={props.hasError}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-    />
-  );
-}
-CustomNumberInput.displayName = 'CustomNumberInput';
-CustomNumberInput.propTypes = {
-  name: PropTypes.string.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-number-input.spec.js

@@ -1,42 +0,0 @@
-import {
-  screen,
-  waitFor,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { renderCustomFields, enterValue } from '../test-utils';
-
-const fieldDefinitions = [
-  {
-    name: 'numberAttr',
-    type: {
-      name: 'number',
-    },
-  },
-];
-
-describe('CustomNumberInput', () => {
-  it('should show placeholder when value is empty', async () => {
-    renderCustomFields({ fieldDefinitions });
-    await screen.findByDisplayValue('');
-  });
-
-  it('should render provided value', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { numberAttr: 10 },
-    });
-    await screen.findByDisplayValue('10');
-  });
-
-  it('should let user change values', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-    });
-    await screen.findByDisplayValue('');
-
-    enterValue('numberAttr', '10');
-    expect(getFormikValues()).toStrictEqual({ numberAttr: 10 });
-
-    enterValue('numberAttr', '');
-    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-  });
-});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-cart-discount-reference-input.jsx

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import { CartDiscountReferenceSearch } from '../../../../components/attribute-definitions/reference-search';
-
-export default function CustomCartDiscountReferenceInput(props) {
-  const handleBlur = () => {
-    props.onBlur({
-      target: {
-        name: props.name,
-      },
-    });
-  };
-
-  const handleChange = (id) =>
-    props.onChange({
-      target: {
-        name: props.name,
-        value: id,
-      },
-    });
-
-  return (
-    <CartDiscountReferenceSearch
-      id={props.name}
-      value={props.value}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      hasError={props.hasError}
-      isDisabled={props.isDisabled || props.isReadOnly}
-      isClearable={!props.fieldDefinition.required}
-    />
-  );
-}
-CustomCartDiscountReferenceInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    required: PropTypes.bool,
-  }).isRequired,
-  value: PropTypes.any,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};