@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,225 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,281 +0,0 @@
-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

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