@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,132 @@
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import { LocalizedString } from '@commercetools-test-data/commons';
+import { CartDiscount } from '@commercetools-local/test-data';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  clearValue,
+} from '../../test-utils';
+
+const cartDiscount = CartDiscount.random()
+  .id('cart-discount-id')
+  .name(LocalizedString.random().en('Cart Discount Name'));
+
+const mockServer = setupServer(
+  graphql.query('CartDiscountsCount', (req, res, ctx) =>
+    res(
+      ctx.data({
+        cartDiscounts: {
+          total: 1,
+          __typename: 'CartDiscountsResult',
+        },
+      })
+    )
+  ),
+  graphql.query('SearchCartDiscount', (req, res, ctx) =>
+    res(
+      ctx.data({
+        cartDiscounts: buildGraphqlList([cartDiscount], {
+          total: 1,
+          name: 'CartDiscounts',
+        }),
+      })
+    )
+  ),
+  graphql.query('FetchCartDiscountById', (req, res, ctx) =>
+    res(
+      ctx.data({
+        cartDiscount: cartDiscount.buildGraphql(),
+      })
+    )
+  )
+);
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => {
+  mockServer.listen({ onUnhandledRequest: 'error' });
+});
+afterAll(() => {
+  mockServer.close();
+});
+
+describe('CustomCartDiscountReferenceInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'referenceAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'cart-discount',
+      },
+    },
+  ];
+
+  it('should show reference type name but not complement it with a hint that ID should be entered', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText('Cart-discount');
+    expect(screen.queryByText('Cart-discount ID')).not.toBeInTheDocument();
+  });
+
+  it('should not let user clear required field', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions: [
+        {
+          name: 'referenceAttr',
+          required: true,
+          type: {
+            name: 'reference',
+            referenceTypeId: 'cart-discount',
+          },
+        },
+      ],
+      initialValues: { referenceAttr: { id: 'cart-discount-id' } },
+    });
+    await screen.findByText('Cart-discount');
+    expect(screen.queryByLabelText('Clear')).not.toBeInTheDocument();
+  });
+
+  it('should render provided value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { referenceAttr: { id: 'cart-discount-id' } },
+    });
+    await screen.findByText('Cart Discount Name');
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+    });
+    const input = await screen.findByDisplayValue('');
+    fireEvent.change(input, {
+      target: { name: 'referenceAttr', value: 'cart' },
+    });
+    const cartDiscountOption = await screen.findByText('Cart Discount Name');
+    fireEvent.click(cartDiscountOption);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        referenceAttr: {
+          id: 'cart-discount-id',
+          typeId: 'cart-discount',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { referenceAttr: { id: 'cart-discount-id' } },
+    });
+    await screen.findByText('Cart Discount Name');
+    await clearValue('referenceAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-category-reference-input.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import { CategoryReferenceSearch } from '../../../../components/attribute-definitions/reference-search';
+
+export default function CustomCategoryReferenceInput(props) {
+  const handleBlur = () => {
+    props.onBlur({
+      target: {
+        name: props.name,
+      },
+    });
+  };
+
+  const handleChange = (id) =>
+    props.onChange({
+      target: {
+        name: props.name,
+        value: id,
+      },
+    });
+
+  return (
+    <CategoryReferenceSearch
+      id={props.name}
+      value={props.value}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      hasError={props.hasError}
+      isReadOnly={props.isReadOnly}
+      isDisabled={props.isDisabled}
+      isClearable={!props.fieldDefinition.required}
+    />
+  );
+}
+CustomCategoryReferenceInput.displayName = 'CustomCategoryReferenceInput';
+CustomCategoryReferenceInput.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,
+};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-category-reference-input.spec.js

@@ -0,0 +1,134 @@
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import { LocalizedString } from '@commercetools-test-data/commons';
+import { Category, CategorySearch } from '@commercetools-local/test-data';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  clearValue,
+} from '../../test-utils';
+
+const category = Category.random()
+  .id('category-id')
+  .name(LocalizedString.random().en('Category Name'));
+
+const categorySearch = CategorySearch.random()
+  .id('category-id')
+  .name(LocalizedString.random().en('Category Name'));
+
+const mockServer = setupServer(
+  graphql.query('SearchCategoryReference', (req, res, ctx) =>
+    res(
+      ctx.data({
+        categories: buildGraphqlList([categorySearch], {
+          total: 1,
+          name: 'CategorySearch',
+        }),
+      })
+    )
+  ),
+  graphql.query('FetchCategoriesByIds', (req, res, ctx) =>
+    res(
+      ctx.data({
+        categories: buildGraphqlList([category], {
+          total: 1,
+          name: 'Categories',
+        }),
+      })
+    )
+  )
+);
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => {
+  mockServer.listen({ onUnhandledRequest: 'error' });
+});
+afterAll(() => {
+  mockServer.close();
+});
+
+describe('CustomReferenceInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'referenceAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'category',
+      },
+    },
+  ];
+
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByDisplayValue('');
+  });
+
+  it('should show reference type name but not complement it with a hint that ID should be entered', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText('Category');
+    expect(screen.queryByText('Category ID')).not.toBeInTheDocument();
+  });
+
+  it('should not let user clear required field', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions: [
+        {
+          name: 'referenceAttr',
+          required: true,
+          type: {
+            name: 'reference',
+            referenceTypeId: 'category',
+          },
+        },
+      ],
+      initialValues: { referenceAttr: { id: 'category-id' } },
+    });
+    await screen.findByText('Category Name');
+    expect(screen.queryByLabelText('Clear')).not.toBeInTheDocument();
+  });
+
+  it('should render provided value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { referenceAttr: { id: 'category-id' } },
+    });
+    await screen.findByText('Category Name');
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+    });
+    const input = await screen.findByDisplayValue('');
+    fireEvent.change(input, {
+      target: { name: 'referenceAttr', value: 'cate' },
+    });
+    const categoryOption = await screen.findByText('Category Name');
+    fireEvent.click(categoryOption);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        referenceAttr: {
+          id: 'category-id',
+          typeId: 'category',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { referenceAttr: { id: 'category-id' } },
+    });
+    await screen.findByText('Category Name');
+    await clearValue('referenceAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-channel-reference-input.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { ChannelPickerInput } from '../../../../internal-index';
+
+export default function CustomChannelReferenceInput(props) {
+  const value = props.value?.id || '';
+
+  return (
+    <ChannelPickerInput
+      value={value}
+      name={props.name}
+      isClearable={!props.fieldDefinition.required}
+      isReadOnly={props.isReadOnly}
+      isDisabled={props.isDisabled}
+      onBlur={props.onBlur}
+      onChange={props.onChange}
+      hasError={props.hasError}
+      onError={() => null}
+    />
+  );
+}
+CustomChannelReferenceInput.displayName = 'CustomChannelReferenceInput';
+CustomChannelReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      referenceTypeId: PropTypes.string.isRequired,
+    }).isRequired,
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-channel-reference-input.spec.js

@@ -0,0 +1,130 @@
+import '@commercetools-local/test-utils/src/ui-kit-mocks';
+import * as Channel from '@commercetools-test-data/channel';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  clearValue,
+} from '../../test-utils';
+
+const foodStoreChannel = Channel.presets.foodStore().buildGraphql();
+const clothesStoreChannel = Channel.presets.clothesStore();
+
+const mockServer = setupServer(
+  graphql.query('GetChannelQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        channel: foodStoreChannel,
+      })
+    )
+  ),
+  graphql.query('GetChannelsQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        channels: buildGraphqlList([clothesStoreChannel], {
+          name: 'Channel',
+          total: 2,
+        }),
+      })
+    )
+  )
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
+
+afterAll(() => mockServer.close());
+
+describe('CustomChannelReferenceInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'channelRefAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'channel',
+      },
+    },
+  ];
+
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText(/Search by name, key or type an ID/);
+  });
+
+  it('should load a channel by provided channel id value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        channelRefAttr: { id: foodStoreChannel.id, typeId: 'channel' },
+      },
+    });
+    await screen.findByText(/Food Store/);
+  });
+
+  it('should behave fine if channel was not found', async () => {
+    mockServer.use(
+      graphql.query('GetChannelQuery', (req, res, ctx) =>
+        res.once(
+          ctx.data({
+            channel: null,
+          })
+        )
+      )
+    );
+
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        channelRefAttr: { id: foodStoreChannel.id, typeId: 'channel' },
+      },
+    });
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        channelRefAttr: { id: foodStoreChannel.id, typeId: 'channel' },
+      },
+    });
+    await screen.findByText(/Food Store/);
+
+    const input = screen.getByLabelText('channelRefAttr');
+    fireEvent.change(input, { target: { value: 'Clothes' } });
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    const option = await screen.findByText('Clothes Store');
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        channelRefAttr: {
+          id: clothesStoreChannel.buildGraphql().id,
+          typeId: 'channel',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        channelRefAttr: { id: foodStoreChannel.id, typeId: 'channel' },
+      },
+    });
+    await screen.findByText(/Food Store/);
+    await clearValue('channelRefAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-product-reference-input.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import ProductPickerInput from '../../../../components/product-picker-input';
+
+export default function CustomProductReferenceInput(props) {
+  const value = props.value?.id || '';
+
+  return (
+    <ProductPickerInput
+      value={value}
+      name={props.name}
+      isClearable={!props.fieldDefinition.required}
+      isReadOnly={props.isReadOnly}
+      isDisabled={props.isDisabled}
+      onBlur={props.onBlur}
+      onChange={props.onChange}
+      hasError={props.hasError}
+      onError={() => null}
+      showLoadingErrorMessage
+    />
+  );
+}
+CustomProductReferenceInput.displayName = 'CustomProductReferenceInput';
+CustomProductReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      referenceTypeId: PropTypes.string.isRequired,
+    }).isRequired,
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-product-reference-input.spec.js

@@ -0,0 +1,123 @@
+import '@commercetools-local/test-utils/src/ui-kit-mocks';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { Product } from '@commercetools-local/test-data';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  clearValue,
+} from '../../test-utils';
+
+const product = Product.presets.happyCowMilk().buildGraphql();
+const boringMilk = Product.presets.boringGenericMilk();
+
+const mockServer = setupServer(
+  graphql.query('GetProductQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        product,
+      })
+    )
+  ),
+  graphql.query('GetProductsQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        products: buildGraphqlList([boringMilk], {
+          name: 'Product',
+          total: 2,
+        }),
+      })
+    )
+  )
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
+
+afterAll(() => mockServer.close());
+
+describe('CustomProductReferenceInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'productRefAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'product',
+      },
+    },
+  ];
+
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText(/Search by product name, key or type an ID/);
+  });
+
+  it('should load a product by provided product id value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { productRefAttr: { id: product.id, typeId: 'product' } },
+    });
+    await screen.findByText(/Happy Cow Milk/);
+  });
+
+  it('should behave fine if product was not found', async () => {
+    mockServer.use(
+      graphql.query('GetProductQuery', (req, res, ctx) =>
+        res.once(
+          ctx.data({
+            product: null,
+          })
+        )
+      )
+    );
+
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { productRefAttr: { id: product.id, typeId: 'product' } },
+    });
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { productRefAttr: { id: product.id, typeId: 'product' } },
+    });
+    await screen.findByText(/Happy Cow Milk/);
+
+    const input = screen.getByLabelText('productRefAttr');
+    fireEvent.change(input, { target: { value: 'Boring' } });
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    const option = await screen.findByText('Boring Generic Milk');
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        productRefAttr: {
+          id: boringMilk.buildGraphql().id,
+          typeId: 'product',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { productRefAttr: { id: product.id, typeId: 'product' } },
+    });
+    await screen.findByText(/Happy Cow Milk/);
+
+    await clearValue('productRefAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-product-type-reference-input.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { ProductTypePickerInput } from '../../../../internal-index';
+
+export default function CustomProductTypeReferenceInput(props) {
+  const value = props.value?.id || '';
+
+  return (
+    <ProductTypePickerInput
+      value={value}
+      name={props.name}
+      isClearable={!props.fieldDefinition.required}
+      isReadOnly={props.isReadOnly}
+      isDisabled={props.isDisabled}
+      onBlur={props.onBlur}
+      onChange={props.onChange}
+      hasError={props.hasError}
+      onError={() => null}
+    />
+  );
+}
+CustomProductTypeReferenceInput.displayName = 'CustomProductTypeReferenceInput';
+CustomProductTypeReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      referenceTypeId: PropTypes.string.isRequired,
+    }).isRequired,
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};