@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/components/product-picker-input/product-picker-input.spec.js

@@ -1,357 +0,0 @@
-import { graphql } from 'msw';
-import { setupServer } from 'msw/node';
-import { GtmContext } from '@commercetools-frontend/application-shell';
-import {
-  renderAppWithRedux,
-  fireEvent,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import { Product } from '@commercetools-local/test-data';
-import { selectInputUtils } from '@commercetools-local/test-utils';
-import PropTypes from 'prop-types';
-import ProductPickerInput from './product-picker-input';
-
-const track = jest.fn();
-
-const createTestProps = (custom) => ({
-  name: 'product-picker-input',
-  isClearable: true,
-  onChange: jest.fn(),
-  onError: jest.fn(),
-  ...custom,
-});
-
-const getLoadingElement = () => screen.getByText('Loading...');
-
-const render = (ui, renderOptions) => {
-  const Wrapper = ({ children }) => (
-    <GtmContext.Provider value={{ track }}>
-      <>
-        <label htmlFor="product-picker-input">Product picker</label>
-        {children}
-      </>
-    </GtmContext.Provider>
-  );
-  Wrapper.propTypes = {
-    children: PropTypes.element.isRequired,
-  };
-
-  renderAppWithRedux(ui, {
-    disableAutomaticEntryPointRoutes: true,
-    wrapper: Wrapper,
-    ...renderOptions,
-  });
-};
-
-const product = Product.presets.happyCowMilk().buildGraphql();
-const productWithoutKey = Product.presets
-  .happyCowMilk()
-  .key(null)
-  .buildGraphql();
-
-let queriesSent;
-
-const mockServer = setupServer(
-  graphql.query('GetProductQuery', (req, res, ctx) => {
-    const productId = req.body.variables.id;
-    if (productId === product.id) return res(ctx.data({ product }));
-    if (productId === productWithoutKey.id)
-      return res(ctx.data({ product: productWithoutKey }));
-    return res(ctx.status(404));
-  }),
-
-  graphql.query('GetProductsQuery', (req, res, ctx) => {
-    queriesSent.GetProductsQuery += 1;
-
-    const whereQuery = req.body.variables.where;
-
-    if (whereQuery.includes('name(en >= "Missing product"')) {
-      return res(
-        ctx.data({
-          products: buildGraphqlList([], { name: 'Product', total: 0 }),
-        })
-      );
-    }
-    const foundProduct =
-      whereQuery.includes('name(en >= "H" and en < "I")') ||
-      whereQuery.includes('key >= "happy-cow-milk-key"') ||
-      whereQuery === `id = "${product.id}"`
-        ? product
-        : productWithoutKey;
-
-    return res(
-      ctx.data({
-        products: {
-          __typename: 'ProducQueryResult',
-          offset: 0,
-          count: 1,
-          total: 1,
-          results: [foundProduct],
-        },
-      })
-    );
-  })
-);
-
-beforeEach(() => {
-  queriesSent = {
-    GetProductsQuery: 0,
-  };
-  console.config.addSilencedWarning(
-    /Can't perform a React state update on an unmounted component/
-  );
-});
-
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-
-beforeAll(() => {
-  // This test somehow causes this: https://github.com/andyearnshaw/Intl.js/issues/256
-  // That's a work-around:
-
-  mockServer.listen({
-    onUnhandledRequest: 'error',
-  });
-});
-
-afterAll(() => mockServer.close());
-
-describe('searching options', () => {
-  it('should debounce the search', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'H' } });
-    fireEvent.change(input, { target: { value: 'a' } });
-    fireEvent.change(input, { target: { value: 'p' } });
-    fireEvent.change(input, { target: { value: 'p' } });
-    fireEvent.change(input, { target: { value: 'y' } });
-
-    await waitFor(() => expect(queriesSent.GetProductsQuery).toBe(1));
-  });
-
-  it('should show both a product name and a key of the found product', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'H' } });
-
-    await screen.findByText('Happy Cow Milk');
-    await screen.findAllByText(/key: happy-cow-milk-key/i);
-  });
-
-  it('should show product name in currently selected data locale', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />, {
-      dataLocale: 'de',
-    });
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'H' } });
-
-    await screen.findByText('Fröhliche Kuhmilch');
-  });
-
-  it('should fallback to "- -" when there is no option key', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'Product without key' } });
-
-    await screen.findByText(/^key: - -$/i);
-  });
-
-  it('should show a message when no products are found', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'Missing product' } });
-
-    await screen.findByText(/there are no products that match your search/i);
-  });
-
-  it('should call onError and not display dropdown when network error happens', async () => {
-    mockServer.use(
-      graphql.query('GetProductsQuery', (req, res, ctx) =>
-        res.once(ctx.status(500))
-      )
-    );
-
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'H' } });
-
-    await waitFor(() => expect(props.onError).toHaveBeenCalled());
-    expect(
-      screen.queryByText(/there are no products that match your search/i)
-    ).not.toBeInTheDocument();
-  });
-
-  it('should render a loading spinner when initial product option is being loaded', async () => {
-    const props = createTestProps({
-      value: product.id,
-    });
-    render(<ProductPickerInput {...props} />);
-    expect(screen.getByTestId('centered-loading-spinner')).toBeInTheDocument();
-  });
-
-  it('should render the product filter error message if `showLoadingErrorMessage` flag is passed', async () => {
-    mockServer.use(
-      graphql.query('GetProductQuery', (req, res, ctx) =>
-        res.once(ctx.status(500))
-      )
-    );
-
-    const props = createTestProps({
-      value: product.id,
-      showLoadingErrorMessage: true,
-    });
-    render(<ProductPickerInput {...props} />);
-    await screen.findByText(
-      'Unable to load resource. Check the connection and try again.'
-    );
-  });
-
-  it('should not render the product filter error message if `showLoadingErrorMessage` flag is not passed', async () => {
-    mockServer.use(
-      graphql.query('GetProductQuery', (req, res, ctx) =>
-        res.once(ctx.status(500))
-      )
-    );
-
-    const props = createTestProps({
-      value: product.id,
-    });
-    render(<ProductPickerInput {...props} />);
-
-    await waitFor(() => expect(props.onError).toHaveBeenCalled());
-
-    expect(
-      screen.queryByText(
-        'Unable to load resource. Check the connection and try again.'
-      )
-    ).not.toBeInTheDocument();
-  });
-});
-
-describe('selecting options', () => {
-  it('should select option', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'H' } });
-
-    await waitForElementToBeRemoved(getLoadingElement);
-    selectInputUtils.selectFirstOption(input);
-
-    await waitFor(() => {
-      expect(props.onChange).toHaveBeenCalledWith({
-        persist: expect.any(Function),
-        target: {
-          id: 'product-picker-input',
-          name: 'product-picker-input',
-          value: product.id,
-        },
-      });
-    });
-  });
-
-  it('should track options selections', async () => {
-    const props = createTestProps();
-    render(<ProductPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Product picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    // should track name selection
-    fireEvent.change(input, { target: { value: 'H' } });
-
-    await waitForElementToBeRemoved(getLoadingElement);
-    selectInputUtils.selectFirstOption(input);
-    expect(track).toHaveBeenCalledWith('select', 'ReferenceProduct', 'name');
-
-    // should track key selection
-    fireEvent.change(input, { target: { value: 'happy-cow-milk-key' } });
-
-    await waitForElementToBeRemoved(getLoadingElement);
-    selectInputUtils.selectFirstOption(input);
-    expect(track).toHaveBeenLastCalledWith('select', 'ReferenceProduct', 'key');
-
-    // should track id selection
-    fireEvent.change(input, { target: { value: product.id } });
-
-    await waitForElementToBeRemoved(getLoadingElement);
-    selectInputUtils.selectFirstOption(input);
-    await waitFor(() =>
-      expect(track).toHaveBeenLastCalledWith('select', 'ReferenceProduct', 'id')
-    );
-  });
-
-  it('should clear selected value', async () => {
-    const props = createTestProps({
-      value: product.id,
-    });
-
-    render(<ProductPickerInput {...props} />);
-    await screen.findByText('Happy Cow Milk (key: happy-cow-milk-key)');
-
-    const clearButton = await screen.findByLabelText('Clear');
-    fireEvent.click(clearButton);
-
-    await waitFor(() => {
-      expect(props.onChange).toHaveBeenCalledWith({
-        persist: expect.any(Function),
-        target: {
-          id: 'product-picker-input',
-          name: 'product-picker-input',
-          value: undefined,
-        },
-      });
-    });
-  });
-});
-
-describe('default values', () => {
-  it('should display key along with product name in picker input', async () => {
-    const props = createTestProps({
-      value: product.id,
-    });
-
-    render(<ProductPickerInput {...props} />);
-    await screen.findByText('Happy Cow Milk (key: happy-cow-milk-key)');
-  });
-
-  it('should display only product name in picker if key is null', async () => {
-    const props = createTestProps({
-      value: productWithoutKey.id,
-    });
-
-    render(<ProductPickerInput {...props} />);
-    await screen.findByText('Happy Cow Milk');
-  });
-});

package/src/components/product-picker-input/tracking-events.js

@@ -1,19 +0,0 @@
-const trackingEvents = {
-  selectProductName: {
-    action: 'select',
-    category: 'ReferenceProduct',
-    label: 'name',
-  },
-  selectProductKey: {
-    action: 'select',
-    category: 'ReferenceProduct',
-    label: 'key',
-  },
-  selectProductId: {
-    action: 'select',
-    category: 'ReferenceProduct',
-    label: 'id',
-  },
-};
-
-export default trackingEvents;

package/src/components/product-selection-picker/components/product-selection-async-select-dropdown/index.js

@@ -1 +0,0 @@
-export { default } from './product-selection-async-select-dropdown';

package/src/components/product-selection-picker/components/product-selection-async-select-dropdown/product-selection-async-select-dropdown.jsx

@@ -1,113 +0,0 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { formatLocalizedString } from '@commercetools-frontend/l10n';
-import { AsyncSelectField } from '@commercetools-frontend/ui-kit';
-import {
-  CenteredLoadingSpinner,
-  useProductSelectionsFetcher,
-} from '../../../../internal-index';
-
-import { LOWER_PRODUCT_SELECTIONS_LIMIT } from '../../constants';
-import pickerMessages from '../../messages';
-
-export default function ProductSelectionsAsyncSelectDropdown(props) {
-  const intl = useIntl();
-  const productSelectionsFetcher = useProductSelectionsFetcher({
-    limit: props.upperProductSelectionsLimit,
-  });
-  const { projectLanguages, dataLocale } = useApplicationContext(
-    (applicationContext) => ({
-      projectLanguages: applicationContext.project.languages,
-      userLocale: applicationContext.user.locale,
-      dataLocale: applicationContext.dataLocale,
-    })
-  );
-  const productSelections = useMemo(
-    () => productSelectionsFetcher.productSelections?.results ?? [],
-    [productSelectionsFetcher.productSelections?.results]
-  );
-
-  const onOptionClick = (event) => {
-    const productSelectionId = event.target.value?.value;
-    const currentProductSelection = productSelections.find(
-      (productSelection) => productSelection.id === productSelectionId
-    );
-
-    props.onChange(currentProductSelection);
-  };
-
-  const allProductSelectionOptions = useMemo(() => {
-    return productSelections.map((productSelection) => {
-      const localizedName = formatLocalizedString(productSelection, {
-        key: 'name',
-        locale: dataLocale,
-        fallbackOrder: projectLanguages,
-      });
-
-      return {
-        label: localizedName,
-        value: productSelection.id,
-        name: localizedName,
-        key: productSelection.key,
-      };
-    });
-  }, [dataLocale, projectLanguages, productSelections]);
-
-  const getDefaultOptions = () => {
-    return allProductSelectionOptions.slice(0, LOWER_PRODUCT_SELECTIONS_LIMIT);
-  };
-
-  const handleLoadOptions = async (searchTerm) => {
-    const productSelectionOptions = allProductSelectionOptions;
-    const filteredOptions = productSelectionOptions.filter(
-      (productSelection) =>
-        productSelection.label
-          .toLowerCase()
-          .includes(searchTerm.toLowerCase()) ||
-        (productSelection.key &&
-          productSelection.key.toLowerCase().includes(searchTerm.toLowerCase()))
-    );
-
-    return searchTerm
-      ? filteredOptions.slice(0, LOWER_PRODUCT_SELECTIONS_LIMIT)
-      : productSelectionOptions.slice(0, LOWER_PRODUCT_SELECTIONS_LIMIT);
-  };
-
-  if (productSelectionsFetcher.isLoading) return <CenteredLoadingSpinner />;
-
-  return (
-    <AsyncSelectField
-      id={props.id}
-      name={props.name}
-      title={props.title}
-      description={props.description}
-      isRequired={props.isRequired}
-      placeholder={intl.formatMessage(
-        pickerMessages.productSelectionsAsyncSelectPlaceholder
-      )}
-      loadOptions={handleLoadOptions}
-      onChange={onOptionClick}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      components={props.components}
-      defaultOptions={getDefaultOptions()}
-      hasWarning={props.hasWarning}
-    />
-  );
-}
-
-ProductSelectionsAsyncSelectDropdown.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  isRequired: PropTypes.bool.isRequired,
-  description: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  isReadOnly: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  upperProductSelectionsLimit: PropTypes.number.isRequired,
-  components: PropTypes.objectOf(PropTypes.func),
-  hasWarning: PropTypes.bool.isRequired,
-};

package/src/components/product-selection-picker/components/product-selection-basic-select-dropdown/index.js

@@ -1 +0,0 @@
-export { default } from './product-selection-basic-select-dropdown';

package/src/components/product-selection-picker/components/product-selection-basic-select-dropdown/product-selection-basic-select-dropdown.jsx

@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import memoize from 'memoize-one';
-import { useIntl } from 'react-intl';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { formatLocalizedString } from '@commercetools-frontend/l10n';
-import { SelectField } from '@commercetools-frontend/ui-kit';
-import {
-  CenteredLoadingSpinner,
-  useProductSelectionsFetcher,
-} from '../../../../internal-index';
-
-import pickerMessages from '../../messages';
-
-const mapProductSelectionsToOptions = memoize(
-  (productSelections = [], dataLocale, projectLanguages) => {
-    return productSelections.map((productSelection) => ({
-      id: productSelection.id,
-      value: productSelection.id,
-      label: formatLocalizedString(productSelection, {
-        key: 'name',
-        locale: dataLocale,
-        fallbackOrder: projectLanguages,
-      }),
-      key: productSelection.key,
-    }));
-  }
-);
-
-export default function ProductSelectionBasicSelectDropdown(props) {
-  const intl = useIntl();
-  const productSelectionsFetcher = useProductSelectionsFetcher({
-    limit: props.lowerProductSelectionsLimit,
-  });
-  const { projectLanguages, dataLocale } = useApplicationContext(
-    (applicationContext) => ({
-      projectLanguages: applicationContext.project.languages,
-      dataLocale: applicationContext.dataLocale,
-    })
-  );
-
-  if (productSelectionsFetcher.isLoading) return <CenteredLoadingSpinner />;
-  const productSelections =
-    productSelectionsFetcher.productSelections?.results ?? [];
-
-  const onOptionClick = (event) => {
-    const productSelectionId = event.target.value;
-    const currentProductSelection = productSelections.find(
-      (productSelection) => productSelection.id === productSelectionId
-    );
-
-    props.onChange(currentProductSelection);
-  };
-
-  return (
-    <SelectField
-      id={props.id}
-      name={props.name}
-      title={props.title}
-      isMulti={props.isMulti}
-      value={props.value}
-      isRequired={props.isRequired}
-      description={props.description}
-      placeholder={intl.formatMessage(
-        pickerMessages.productSelectionsBasicSelectPlaceholder
-      )}
-      options={mapProductSelectionsToOptions(
-        productSelections,
-        dataLocale,
-        projectLanguages
-      )}
-      components={props.components}
-      onChange={onOptionClick}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      hasWarning={props.hasWarning}
-      isSearchable
-    />
-  );
-}
-
-ProductSelectionBasicSelectDropdown.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  isRequired: PropTypes.bool.isRequired,
-  isMulti: PropTypes.bool.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string.isRequired),
-    PropTypes.string,
-  ]),
-  description: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  isReadOnly: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  lowerProductSelectionsLimit: PropTypes.number.isRequired,
-  components: PropTypes.objectOf(PropTypes.func),
-  hasWarning: PropTypes.bool,
-};

package/src/components/product-selection-picker/components/product-selections-search-select-dropdown/index.js

@@ -1 +0,0 @@
-export { default } from './product-selections-search-select-dropdown';

package/src/components/product-selection-picker/components/product-selections-search-select-dropdown/product-selections-fetcher.ctp.graphql

@@ -1,13 +0,0 @@
-query ProductSelectionsPickerFetcher($where: String!) {
-  productSelections(where: $where) {
-    results {
-      id
-      key
-      version
-      nameAllLocales {
-        locale
-        value
-      }
-    }
-  }
-}