@commercetools-frontend/experimental-components 0.0.2

package/src/components/attribute-definitions/reference-search/cart-discount-reference-search/cart-discount-reference-search.spec.js

@@ -0,0 +1,225 @@
+import {
+  renderApp,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import {
+  CartDiscountsCount,
+  SearchCartDiscount,
+} from '../../../../actions/reference-search/cart-discount/cart-discount.ctp.graphql';
+import CartDiscountReferenceSearch from './cart-discount-reference-search';
+
+const createTestProps = (customProps) => ({
+  id: 'cart-discount-input-id',
+  typeId: 'cart-discount',
+  isDisabled: false,
+  onBlur: jest.fn(),
+  onChange: jest.fn(),
+
+  ...customProps,
+});
+
+const cartDiscountsResults = [
+  {
+    __typename: 'CartDiscount',
+    id: 'dfa13df5-4482-4cea-90cf-fd439000308g',
+    key: 'shorts-key',
+    nameAllLocales: [
+      {
+        __typename: 'LocalizedString',
+        locale: 'en',
+        value: 'Shorts Label',
+      },
+    ],
+  },
+  {
+    __typename: 'CartDiscount',
+    id: 'dfa13df5-4482-4cea-81cf-fd439828340f',
+    key: 't-shirts-key',
+    nameAllLocales: [
+      {
+        __typename: 'LocalizedString',
+        locale: 'en',
+        value: 'T-shirts Label',
+      },
+    ],
+  },
+  {
+    __typename: 'CartDiscount',
+    id: 'dfa13df5-4482-4cea-81cf-fd439828351q',
+    key: 'user-query',
+    nameAllLocales: [
+      {
+        __typename: 'LocalizedString',
+        locale: 'en',
+        value: 'Product with key `user-query`',
+      },
+    ],
+  },
+];
+const mockRequests = {
+  withLessThan500: [
+    {
+      request: {
+        query: CartDiscountsCount,
+      },
+      result: {
+        data: {
+          cartDiscounts: {
+            __typename: 'CartDiscountQueryResult',
+            total: 100,
+          },
+        },
+      },
+    },
+    {
+      request: {
+        query: CartDiscountsCount,
+      },
+      result: {
+        data: {
+          cartDiscounts: {
+            __typename: 'CartDiscountQueryResult',
+            total: 100,
+          },
+        },
+      },
+    },
+    {
+      request: {
+        query: SearchCartDiscount,
+      },
+      result: {
+        data: {
+          cartDiscounts: {
+            __typename: 'CartDiscountQueryResult',
+            total: 100,
+            results: cartDiscountsResults,
+          },
+        },
+      },
+    },
+  ],
+  withMoreThan500: [
+    {
+      request: {
+        query: CartDiscountsCount,
+      },
+      result: {
+        data: {
+          cartDiscounts: {
+            __typename: 'CartDiscountQueryResult',
+            total: 505,
+          },
+        },
+      },
+    },
+    {
+      request: {
+        query: CartDiscountsCount,
+      },
+      result: {
+        data: {
+          cartDiscounts: {
+            __typename: 'CartDiscountQueryResult',
+            total: 505,
+          },
+        },
+      },
+    },
+    {
+      request: {
+        query: SearchCartDiscount,
+        variables: {
+          where: 'name(en = "user-query") or key = "user-query"',
+        },
+      },
+      result: {
+        data: {
+          cartDiscounts: {
+            __typename: 'CartDiscountQueryResult',
+            total: 100,
+            results: cartDiscountsResults,
+          },
+        },
+      },
+    },
+  ],
+};
+const render = (options) =>
+  renderApp(
+    <>
+      <label htmlFor="cart-discount-input-id">Cart discount reference</label>
+      <CartDiscountReferenceSearch {...options.props} />
+    </>,
+    options
+  );
+
+describe('when loading', () => {
+  it('should initially render loading spinner', () => {
+    const props = createTestProps();
+    const { getByTestId } = render({
+      mocks: mockRequests.withLessThan500,
+      props,
+    });
+    expect(getByTestId('loading-spinner')).toBeInTheDocument();
+  });
+});
+
+describe('when loaded', () => {
+  describe('less than 500 results', () => {
+    it('should render reference by name component', async () => {
+      const props = createTestProps();
+      const { findByTestId, getByTestId } = render({
+        mocks: mockRequests.withLessThan500,
+        props,
+      });
+      await findByTestId('reference-by-name');
+      expect(getByTestId('reference-by-name')).toBeInTheDocument();
+    });
+    it('should allow selecting an existing cart discount by name', async () => {
+      const props = createTestProps();
+      const { findByText, getByLabelText } = render({
+        mocks: mockRequests.withLessThan500,
+        props,
+      });
+      await findByText('Search by name, ID or key');
+      const input = getByLabelText('Cart discount reference');
+      fireEvent.focus(input);
+      fireEvent.change(input, {
+        target: { value: 'T-' },
+      });
+      const searchResult = await findByText('T-shirts Label');
+      searchResult.click();
+      expect(props.onChange).toHaveBeenCalledWith(cartDiscountsResults[1].id);
+    });
+  });
+  describe('more than 500 results', () => {
+    it('should render reference by id component', async () => {
+      const props = createTestProps();
+      const { findByTestId, getByTestId } = render({
+        mocks: mockRequests.withMoreThan500,
+        props,
+      });
+      await findByTestId('reference-by-id');
+      expect(getByTestId('reference-by-id')).toBeInTheDocument();
+    });
+    it('should allow editing the cart discount by id', async () => {
+      const props = createTestProps();
+      const rendered = render({
+        mocks: mockRequests.withMoreThan500,
+        props,
+      });
+      await rendered.findByText('Search by name, ID or key');
+      const input = rendered.getByLabelText('Cart discount reference');
+      fireEvent.focus(input);
+      fireEvent.change(input, {
+        target: { value: 'user-query' },
+      });
+      const searchResult = await rendered.findByText(
+        'Product with key `user-query`'
+      );
+      searchResult.click();
+      expect(props.onChange).toHaveBeenCalledWith(cartDiscountsResults[2].id);
+    });
+  });
+});

package/src/components/attribute-definitions/reference-search/cart-discount-reference-search/index.js

@@ -0,0 +1 @@
+export { default } from './cart-discount-reference-search';

package/src/components/attribute-definitions/reference-search/cart-discount-reference-search/messages.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'CartDiscountReferenceSearch.placeholder',
+    description: 'Placeholder for search for a cart discount',
+    defaultMessage: 'Search by name, ID or key',
+  },
+  isMissing: {
+    id: 'CartDiscountReferenceSearch.isMissing',
+    description:
+      'Label above the field for deleted reference of a cart discount',
+    defaultMessage: 'This Cart Discount has been deleted.',
+  },
+  noResults: {
+    id: 'CartDiscountReferenceSearch.noResults',
+    description: 'Message for no results found for cart discount reference',
+    defaultMessage:
+      'Sorry, but there are no cart discounts that match your search.',
+  },
+  key: {
+    id: 'CartDiscountReferenceSearch.key',
+    description: 'key label',
+    defaultMessage: 'key',
+  },
+  searchPrompt: {
+    id: 'CartDiscountReferenceSearch.searchPrompt',
+    description: 'Message for search prompt for cart discount reference',
+    defaultMessage: 'Enter search term',
+  },
+});
+
+export default messages;

package/src/components/attribute-definitions/reference-search/cart-discount-reference-search/option.jsx

@@ -0,0 +1,45 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+import { AsyncSelectInput, Text } from '@commercetools-frontend/ui-kit';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import messages from './messages';
+
+function Option(props) {
+  const { language, languages } = useApplicationContext(
+    (applicationContext) => ({
+      language: applicationContext.dataLocale,
+      languages: applicationContext.project.languages,
+    })
+  );
+  const { formatMessage } = useIntl();
+
+  const cartDiscount = props.data;
+
+  return (
+    <AsyncSelectInput.Option {...props}>
+      <div data-testid="cart-discount-option">
+        <Text.Detail isBold={true}>
+          {formatLocalizedString(cartDiscount, {
+            key: 'name',
+            locale: language,
+            fallbackOrder: languages,
+          })}
+        </Text.Detail>
+        <Text.Detail>
+          {formatMessage(messages.key)}: {cartDiscount.key || NO_VALUE_FALLBACK}
+        </Text.Detail>
+      </div>
+    </AsyncSelectInput.Option>
+  );
+}
+
+Option.propTypes = {
+  data: PropTypes.shape({
+    name: PropTypes.objectOf(PropTypes.string),
+    key: PropTypes.string,
+  }).isRequired,
+};
+
+export default Option;

package/src/components/attribute-definitions/reference-search/category-reference-search/category-reference-search.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import { useCallback } from 'react';
+import { useApolloClient } from '@apollo/client';
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+import { useIntl } from 'react-intl';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import {
+  getCategoriesByIds,
+  searchCategories,
+} from '../../../../actions/reference-search/category';
+import ReferenceSearch from '../reference-search';
+import messages from './messages';
+import Option from './option';
+
+const filterOption = () => true;
+
+export default function CategoryReferenceSearch(props) {
+  const { formatMessage } = useIntl();
+
+  const apolloClient = useApolloClient();
+
+  const { language, languages } = useApplicationContext(
+    (applicationContext) => ({
+      language: applicationContext.dataLocale,
+      languages: applicationContext.project.languages,
+    })
+  );
+
+  const mapItemToOption = useCallback(
+    (category) => ({
+      ...category,
+      value: category.id,
+      label: formatLocalizedString(category, {
+        key: 'name',
+        locale: language,
+        fallback: category.id,
+        fallbackOrder: languages,
+      }),
+    }),
+    [languages, language]
+  );
+
+  const loadItemsBySearchTerm = useCallback(
+    (searchText) => searchCategories(apolloClient, { searchText, language }),
+    [apolloClient, language]
+  );
+
+  const loadItemsByIds = useCallback(
+    (ids) => getCategoriesByIds(apolloClient, { ids }),
+    [apolloClient]
+  );
+
+  return (
+    <ReferenceSearch
+      id={props.id}
+      components={{ Option, ...props.components }}
+      isClearable={props.isClearable}
+      isReadOnly={props.isReadOnly}
+      isDisabled={props.isDisabled}
+      isMulti={props.isMulti}
+      hasError={props.hasError}
+      onBlur={props.onBlur}
+      onChange={props.onChange}
+      value={props.value}
+      placeholderLabel={formatMessage(messages.placeholder)}
+      searchPromptLabel={formatMessage(messages.searchPrompt)}
+      noResultsLabel={formatMessage(messages.noResults)}
+      referenceIsMissingLabel={formatMessage(messages.isMissing)}
+      mapItemToOption={mapItemToOption}
+      loadItemsBySearchTerm={loadItemsBySearchTerm}
+      loadItemsByIds={loadItemsByIds}
+      filterOption={filterOption}
+    />
+  );
+}
+CategoryReferenceSearch.propTypes = {
+  id: PropTypes.string.isRequired,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isMulti: PropTypes.bool,
+  hasError: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  components: PropTypes.object,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+      })
+    ),
+  ]),
+};

package/src/components/attribute-definitions/reference-search/category-reference-search/category-reference-search.spec.js

@@ -0,0 +1,281 @@
+import {
+  fireEvent,
+  renderApp,
+  screen,
+  waitFor,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { CategorySearch, Category } from '@commercetools-local/test-data';
+import { LocalizedString } from '@commercetools-test-data/commons';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import CategoryReferenceSearch from './category-reference-search';
+
+function searchCategory(searchTerm) {
+  fireEvent.change(screen.getByLabelText(/autocomplete input/i), {
+    target: { value: searchTerm },
+  });
+}
+
+const foodCategory = Category.random().name(
+  LocalizedString.presets.empty().en('Food Category')
+);
+const clothesCategory = Category.random().name(
+  LocalizedString.presets.empty().en('Clothes Category')
+);
+
+const foodCategorySearch = CategorySearch.random().name(
+  LocalizedString.presets.empty().en('Food Category')
+);
+const clothesCategorySearch = CategorySearch.random().name(
+  LocalizedString.presets.empty().en('Clothes Category')
+);
+
+function createTestProps(custom) {
+  return {
+    id: 'category-reference-picker',
+    onChange: jest.fn(),
+    onBlur: () => {},
+    hasError: false,
+    isClearable: false,
+    value: null,
+    isDisabled: false,
+    ...custom,
+  };
+}
+
+const mockServer = setupServer(
+  graphql.query('SearchCategoryReference', (req, res, ctx) =>
+    res(
+      ctx.data({
+        categories: buildGraphqlList([CategorySearch.random()], {
+          total: 0,
+          name: 'CategorySearch',
+        }),
+      })
+    )
+  )
+);
+
+beforeAll(() => {
+  mockServer.listen({ onUnhandledRequest: 'error' });
+});
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+afterAll(() => {
+  mockServer.close();
+});
+
+it('should render default option', async () => {
+  // when the categorySearch doesn't have a parent
+  const categorySearchBuilder = CategorySearch.random();
+  const categorySearch = categorySearchBuilder.buildGraphql();
+  mockServer.use(
+    graphql.query('SearchCategoryReference', (req, res, ctx) =>
+      res(
+        ctx.data({
+          categories: buildGraphqlList([categorySearchBuilder], {
+            total: 1,
+            name: 'CategorySearch',
+          }),
+        })
+      )
+    )
+  );
+  const props = createTestProps();
+  const { rerender } = renderApp(<CategoryReferenceSearch {...props} />);
+  searchCategory('category');
+  expect(await screen.findByText(categorySearch.name)).toBeInTheDocument();
+  expect(screen.getByText(`Slug: ${categorySearch.slug}`)).toBeInTheDocument();
+  expect(
+    screen.getByText(`External ID: ${categorySearch.externalId}`)
+  ).toBeInTheDocument();
+
+  // when the categorySearch has a parent
+  const categorySearchWithParentBuilder = CategorySearch.presets.withParent();
+  const categorySearchWithParent =
+    categorySearchWithParentBuilder.buildGraphql();
+  mockServer.use(
+    graphql.query('SearchCategoryReference', (req, res, ctx) =>
+      res(
+        ctx.data({
+          categories: buildGraphqlList([categorySearchWithParentBuilder], {
+            total: 1,
+            name: 'CategorySearch',
+          }),
+        })
+      )
+    )
+  );
+  rerender(<CategoryReferenceSearch {...props} />);
+  // to force the options to load again, we need to use a search term that is
+  // not cached, something other than the previous search term 'category'
+  searchCategory('category ');
+  expect(
+    await screen.findByText(categorySearchWithParent.name)
+  ).toBeInTheDocument();
+  expect(
+    screen.getByText(`Parent Category: ${categorySearchWithParent.parent.name}`)
+  ).toBeInTheDocument();
+  expect(
+    screen.getByText(`Slug: ${categorySearchWithParent.slug}`)
+  ).toBeInTheDocument();
+  expect(
+    screen.getByText(`External ID: ${categorySearchWithParent.externalId}`)
+  ).toBeInTheDocument();
+});
+
+it('should render custom components when they are provided', async () => {
+  const categorySearchBuilder = CategorySearch.random();
+  const categorySearch = categorySearchBuilder.buildGraphql();
+  mockServer.use(
+    graphql.query('SearchCategoryReference', (req, res, ctx) =>
+      res(
+        ctx.data({
+          categories: buildGraphqlList([categorySearchBuilder], {
+            total: 1,
+            name: 'CategorySearch',
+          }),
+        })
+      )
+    )
+  );
+  const props = createTestProps({
+    components: {
+      Option: ({ data: categorySearch }) =>
+        `this is a custom option: ${categorySearch.externalId}`,
+    },
+  });
+  renderApp(<CategoryReferenceSearch {...props} />);
+  searchCategory('category');
+  expect(
+    await screen.findByText(
+      `this is a custom option: ${categorySearch.externalId}`
+    )
+  ).toBeInTheDocument();
+});
+
+it('should fetch initial category', async () => {
+  mockServer.use(
+    graphql.query('FetchCategoriesByIds', (req, res, ctx) => {
+      const foundCategories = [];
+      if (
+        req.body.variables.where ===
+        `id in ("${foodCategory.buildGraphql().id}")`
+      )
+        foundCategories.push(foodCategory);
+
+      return res(
+        ctx.data({
+          categories: buildGraphqlList(foundCategories, {
+            total: foundCategories.length,
+            name: 'CategorySearch',
+          }),
+        })
+      );
+    })
+  );
+
+  const props = createTestProps({
+    value: { id: foodCategory.buildGraphql().id },
+  });
+  renderApp(<CategoryReferenceSearch {...props} />);
+
+  await screen.findByText(/Food Category/i);
+});
+
+it('should fetch initial categories for multi-select input', async () => {
+  mockServer.use(
+    graphql.query('FetchCategoriesByIds', (req, res, ctx) => {
+      const foundCategories = [];
+      if (
+        req.body.variables.where ===
+        `id in ("${foodCategory.buildGraphql().id}", "${
+          clothesCategory.buildGraphql().id
+        }")`
+      ) {
+        foundCategories.push(foodCategory);
+        foundCategories.push(clothesCategory);
+      }
+
+      return res(
+        ctx.data({
+          categories: buildGraphqlList(foundCategories, {
+            total: foundCategories.length,
+            name: 'CategorySearch',
+          }),
+        })
+      );
+    })
+  );
+
+  const props = createTestProps({
+    isMulti: true,
+    value: [
+      { id: foodCategory.buildGraphql().id },
+      { id: clothesCategory.buildGraphql().id },
+    ],
+  });
+  renderApp(<CategoryReferenceSearch {...props} />);
+
+  await waitFor(() => {
+    expect(screen.getByText(/Food Category/i)).toBeInTheDocument();
+  });
+  expect(screen.getByText(/Clothes Category/i)).toBeInTheDocument();
+});
+
+it('should let select multiple categories', async () => {
+  // Note that we don't provide mock for FetchCategoriesByIds here,
+  // because underlying ReferenceSearch will cache found items and
+  // second fetching (by id) will not happen.
+  mockServer.use(
+    graphql.query('SearchCategoryReference', (req, res, ctx) =>
+      res(
+        ctx.data({
+          categories: buildGraphqlList(
+            [foodCategorySearch, clothesCategorySearch],
+            {
+              total: 2,
+              name: 'CategorySearch',
+            }
+          ),
+        })
+      )
+    )
+  );
+
+  const props = createTestProps({ isMulti: true });
+  const { rerender } = renderApp(<CategoryReferenceSearch {...props} />);
+
+  searchCategory('food');
+  const foodCategoryOption = await screen.findByText(/Food Category/i);
+  fireEvent.click(foodCategoryOption);
+
+  await waitFor(() =>
+    expect(props.onChange).toHaveBeenCalledWith([
+      foodCategorySearch.buildGraphql().id,
+    ])
+  );
+
+  // Simulate that previous selection was applied by some parent component
+  rerender(
+    <CategoryReferenceSearch
+      {...props}
+      value={[{ id: foodCategorySearch.buildGraphql().id }]}
+    />
+  );
+
+  searchCategory('clothes');
+  const clothesCategoryOption = await screen.findByText(/Clothes Category/i);
+  fireEvent.click(clothesCategoryOption);
+
+  await waitFor(() =>
+    expect(props.onChange).toHaveBeenCalledWith([
+      foodCategorySearch.buildGraphql().id,
+      clothesCategorySearch.buildGraphql().id,
+    ])
+  );
+});

package/src/components/attribute-definitions/reference-search/category-reference-search/index.js

@@ -0,0 +1,2 @@
+export { default } from './category-reference-search';
+export { default as useCachedCategoryOptions } from './use-cached-category-options';