@riosst100/pwa-marketplace 1.2.4 → 1.2.6

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './submenuColumn.module.css';
+import PropTypes from 'prop-types';
+
+/**
+ * The SubmenuColumn component displays columns with categories in submenu
+ *
+ * @param {MegaMenuCategory} props.category
+ * @param {function} props.onNavigate - function called when clicking on Link
+ */
+const SubmenuColumn = props => {
+    const {
+        category,
+        categoryUrlSuffix,
+        onNavigate,
+        handleCloseSubMenu
+    } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const categoryUrl = resourceUrl(
+        `/${category.url_path}${categoryUrlSuffix || ''}`
+    );
+    let children = null;
+
+    if (category.children.length) {
+        const childrenItems = category.children.map((subCategory, index) => {
+            const { url_path, isActive, name } = subCategory;
+            const categoryUrl = resourceUrl(
+                `/${url_path}${categoryUrlSuffix || ''}`
+            );
+
+            // setting keyboardProps if it is last child of that category
+            const keyboardProps =
+                index === category.children.length - 1
+                    ? props.keyboardProps
+                    : {};
+
+            return (
+                <li key={index} className={classes.submenuChildItem}>
+                    <Link
+                        {...keyboardProps}
+                        className={isActive ? classes.linkActive : classes.link}
+                        data-cy="MegaMenu-SubmenuColumn-link"
+                        to={categoryUrl}
+                        onClick={onNavigate}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        children = <ul className={classes.submenuChild}>{childrenItems}</ul>;
+    }
+
+    // setting keyboardProps if category does not have any sub-category
+    const keyboardProps = category.children.length ? {} : props.keyboardProps;
+
+    return (
+        <div className={classes.submenuColumn}>
+            <Link
+                {...keyboardProps}
+                className={classes.link}
+                data-cy="MegaMenu-SubmenuColumn-link"
+                to={categoryUrl}
+                onClick={() => {
+                    handleCloseSubMenu();
+                    onNavigate();
+                }}
+            >
+                <span className={classes.heading}>{category.name}</span>
+            </Link>
+            {children}
+        </div>
+    );
+};
+
+export default SubmenuColumn;
+
+SubmenuColumn.propTypes = {
+    category: PropTypes.shape({
+        children: PropTypes.array,
+        uid: PropTypes.string.isRequired,
+        include_in_menu: PropTypes.number,
+        isActive: PropTypes.bool.isRequired,
+        name: PropTypes.string.isRequired,
+        path: PropTypes.array.isRequired,
+        position: PropTypes.number.isRequired,
+        url_path: PropTypes.string.isRequired
+    }).isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSubMenu: PropTypes.func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css

@@ -0,0 +1,28 @@
+.submenuColumn {
+    composes: max-w-[235px] from global;
+    composes: p-5 from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    composes: mt-5 from global;
+}
+
+.submenuChildItem {
+    composes: mb-3 from global;
+}

package/src/overwrites/venia-ui/lib/components/SearchBar/__stories__/searchBar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import SearchBar from '../searchBar';
+import defaultClasses from '../searchBar.module.css';
+
+const stories = storiesOf('Components/SearchBar', module);
+
+stories.add('Search Bar', () => (
+    <SearchBar classes={defaultClasses} isOpen={true} />
+));

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<form
+  onKeyDown={[Function]}
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <span
+    className="root"
+    style={
+      Object {
+        "--iconsAfter": 0,
+        "--iconsBefore": 1,
+      }
+    }
+  >
+    <span
+      className="input"
+    >
+      <input
+        className="input"
+        id="search_query"
+        name="search_query"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[MockFunction]}
+        value=""
+      />
+    </span>
+    <span
+      className="before"
+    >
+      <span
+        className="root"
+      >
+        <svg
+          className="icon"
+          fill="none"
+          height={24}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="11"
+            cy="11"
+            r="8"
+          />
+          <line
+            x1="21"
+            x2="16.65"
+            y1="21"
+            y2="16.65"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      aria-hidden="false"
+      className="after"
+    />
+  </span>
+  <p
+    className="root"
+  />
+</form>
+`;

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedCategories.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ul>
+  <li>
+    <SuggestedCategory
+      label="A"
+      value="foo"
+    />
+  </li>
+  <li>
+    <SuggestedCategory
+      label="B"
+      value="foo"
+    />
+  </li>
+  <li>
+    <SuggestedCategory
+      label="C"
+      value="foo"
+    />
+  </li>
+  <li>
+    <SuggestedCategory
+      label="D"
+      value="foo"
+    />
+  </li>
+</ul>
+`;

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a suggestedProduct component 1`] = `
+Array [
+  <div
+    className="root container"
+  >
+    <img
+      alt="Product Name"
+      aria-hidden="true"
+      className="image placeholder"
+      loading="eager"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      style={
+        Object {
+          "--width": "60px",
+        }
+      }
+      width={60}
+    />
+    <img
+      alt="Product Name"
+      className="image notLoaded"
+      loading="lazy"
+      onError={[Function]}
+      onLoad={[Function]}
+      sizes="60px"
+      src="/media/catalog/category/minimalist.jpg"
+      srcSet="/media/catalog/category/minimalist.jpg 40w,
+/media/catalog/category/minimalist.jpg 80w,
+/media/catalog/category/minimalist.jpg 160w,
+/media/catalog/category/minimalist.jpg 320w,
+/media/catalog/category/minimalist.jpg 640w,
+/media/catalog/category/minimalist.jpg 960w,
+/media/catalog/category/minimalist.jpg 1280w,
+/media/catalog/category/minimalist.jpg 1600w,
+/media/catalog/category/minimalist.jpg 2560w"
+      style={
+        Object {
+          "--height": "75px",
+          "--width": "60px",
+        }
+      }
+      width={60}
+    />
+  </div>,
+  <span
+    className="name"
+  >
+    Product Name
+  </span>,
+  <span
+    className="price"
+  >
+    <span>
+      $
+    </span>
+    <span>
+      3
+    </span>
+    <span>
+      .
+    </span>
+    <span>
+      50
+    </span>
+  </span>,
+]
+`;

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProducts.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ul>
+  <li />
+</ul>
+`;

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<h2>
+  <span>
+    <mock-FormattedMessage
+      defaultMessage="Product Suggestions"
+      id="searchBar.heading"
+    />
+  </span>
+</h2>
+`;

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/autocomplete.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { InMemoryCache } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
+import { Form } from 'informed';
+import { createTestInstance } from '@magento/peregrine';
+import typePolicies from '@magento/peregrine/lib/Apollo/policies';
+
+import Autocomplete from '../autocomplete';
+import { IntlProvider } from 'react-intl';
+
+jest.mock('../../../classify');
+jest.mock('../suggestions', () => () => null);
+
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
+const cache = new InMemoryCache({
+    typePolicies
+});
+
+test('renders correctly', () => {
+    const { root } = createTestInstance(
+        <MockedProvider addTypename={true} cache={cache}>
+            <IntlProvider locale="en-US">
+                <Form>
+                    <Autocomplete visible={false} />
+                </Form>
+            </IntlProvider>
+        </MockedProvider>
+    );
+
+    expect(root.findByProps({ className: 'root_hidden' })).toBeTruthy();
+    expect(root.findByProps({ className: 'message' })).toBeTruthy();
+    expect(root.findByProps({ className: 'suggestions' })).toBeTruthy();
+});
+
+test('renders correctly when visible', () => {
+    const { root } = createTestInstance(
+        <MockedProvider addTypename={true} cache={cache}>
+            <IntlProvider locale="en-US">
+                <Form>
+                    <Autocomplete visible={true} />
+                </Form>
+            </IntlProvider>
+        </MockedProvider>
+    );
+
+    expect(root.findByProps({ className: 'root_visible' })).toBeTruthy();
+    expect(root.findByProps({ className: 'message' })).toBeTruthy();
+    expect(root.findByProps({ className: 'suggestions' })).toBeTruthy();
+});

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchBar.spec.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Form } from 'informed';
+import { act } from 'react-test-renderer';
+import { createTestInstance } from '@magento/peregrine';
+
+import Autocomplete from '../autocomplete';
+import SearchBar from '../searchBar';
+import SearchField from '../searchField';
+
+jest.mock('../../../classify');
+jest.mock('../autocomplete', () => () => null);
+jest.mock('../searchField', () => () => null);
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn(() => ({})),
+    useLocation: jest.fn(() => ({}))
+}));
+
+const push = jest.fn();
+useHistory.mockImplementation(() => ({ push }));
+
+test('renders correctly', () => {
+    const { root } = createTestInstance(<SearchBar isOpen={false} />);
+
+    expect(root.findByProps({ className: 'root' })).toBeTruthy();
+    expect(root.findByProps({ className: 'container' })).toBeTruthy();
+    expect(root.findByProps({ className: 'form' })).toBeTruthy();
+    expect(root.findByProps({ className: 'search' })).toBeTruthy();
+    expect(root.findByProps({ className: 'autocomplete' })).toBeTruthy();
+});
+
+test('sets different classnames when open', () => {
+    const { root } = createTestInstance(<SearchBar isOpen={true} />);
+
+    expect(root.findAllByProps({ className: 'root' })).toHaveLength(0);
+    expect(root.findByProps({ className: 'root_open' })).toBeTruthy();
+});
+
+test('expands or collapses on change, depending on the value', () => {
+    const { root } = createTestInstance(<SearchBar isOpen={false} />);
+
+    expect(root.findByType(Autocomplete).props.visible).toBe(false);
+
+    act(() => {
+        root.findByType(SearchField).props.onChange('foo');
+    });
+
+    expect(root.findByType(Autocomplete).props.visible).toBe(true);
+
+    act(() => {
+        root.findByType(SearchField).props.onChange('');
+    });
+
+    expect(root.findByType(Autocomplete).props.visible).toBe(false);
+});
+
+test('expands on focus', () => {
+    const { root } = createTestInstance(<SearchBar isOpen={false} />);
+
+    expect(root.findByType(Autocomplete).props.visible).toBe(false);
+
+    act(() => {
+        root.findByType(SearchField).props.onFocus();
+    });
+
+    expect(root.findByType(Autocomplete).props.visible).toBe(true);
+});
+
+test('navigates on submit', () => {
+    const { root } = createTestInstance(<SearchBar isOpen={false} />);
+
+    const inputString = 'foo';
+
+    act(() => {
+        root.findByType(Form).props.onSubmit({
+            search_query: inputString
+        });
+    });
+
+    expect(push).toHaveBeenLastCalledWith(`/search.html?query=${inputString}`);
+});

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchField.spec.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Form } from 'informed';
+import { act } from 'react-test-renderer';
+import { createTestInstance } from '@magento/peregrine';
+import Trigger from '../../Trigger';
+import SearchField from '../searchField';
+
+jest.mock('@magento/peregrine/lib/context/app', () => {
+    const state = {};
+    const api = {};
+    return {
+        useAppContext: jest.fn(() => [state, api])
+    };
+});
+
+jest.mock('../../../classify');
+jest.mock('../../Trigger', () => () => null);
+
+const onChange = jest.fn();
+const onFocus = jest.fn();
+
+test('renders correctly', () => {
+    const instance = createTestInstance(
+        <Form initialValues={{ search_query: '' }}>
+            <SearchField onChange={onChange} onFocus={onFocus} />
+        </Form>
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders no reset button if value is empty', () => {
+    const { root } = createTestInstance(
+        <Form initialValues={{ search_query: '' }}>
+            <SearchField onChange={onChange} onFocus={onFocus} />
+        </Form>
+    );
+
+    expect(root.findAllByType(Trigger)).toHaveLength(0);
+});
+
+test('renders a reset button', () => {
+    let formApi;
+
+    const { root } = createTestInstance(
+        <Form
+            getApi={api => {
+                formApi = api;
+            }}
+        >
+            <SearchField onChange={onChange} onFocus={onFocus} />
+        </Form>
+    );
+
+    act(() => {
+        formApi.setValue('search_query', 'a');
+    });
+
+    expect(root.findAllByType(Trigger)).toHaveLength(1);
+});
+
+test('reset button resets the form', () => {
+    let formApi;
+
+    const { root } = createTestInstance(
+        <Form
+            getApi={api => {
+                formApi = api;
+            }}
+        >
+            <SearchField onChange={onChange} onFocus={onFocus} />
+        </Form>
+    );
+
+    act(() => {
+        formApi.setValue('search_query', 'a');
+    });
+
+    const trigger = root.findByType(Trigger);
+    const { action: resetForm } = trigger.props;
+
+    act(() => {
+        resetForm();
+    });
+
+    expect(formApi.getValue('search_query')).toBeUndefined();
+});

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedCategories.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { createTestInstance } from '@magento/peregrine';
+import SuggestedCategories from '../suggestedCategories';
+import SuggestedCategory from '../suggestedCategory';
+
+jest.mock('react-router-dom', () => ({
+    Link: jest.fn(() => null),
+    useLocation: jest.fn()
+}));
+jest.mock('../suggestedCategory', () => 'SuggestedCategory');
+
+useLocation.mockReturnValue(globalThis.location);
+
+const categories = [
+    { label: 'A', value_string: 'a' },
+    { label: 'B', value_string: 'b' },
+    { label: 'C', value_string: 'c' },
+    { label: 'D', value_string: 'd' },
+    { label: 'E', value_string: 'e' }
+];
+
+test('renders correctly', () => {
+    const instance = createTestInstance(
+        <SuggestedCategories categories={categories} value="foo" />
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders a max of 4 categories by default', () => {
+    const { root } = createTestInstance(
+        <SuggestedCategories categories={categories} value="foo" />
+    );
+
+    expect(root.findAllByType(SuggestedCategory)).toHaveLength(4);
+});
+
+test('allows the render limit to be configured', () => {
+    const { root } = createTestInstance(
+        <SuggestedCategories categories={categories} limit={2} value="foo" />
+    );
+
+    expect(root.findAllByType(SuggestedCategory)).toHaveLength(2);
+});

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import SuggestedProduct from '../suggestedProduct';
+
+jest.mock('../../../classify');
+jest.mock('react-router-dom', () => ({
+    Link: ({ children }) => children
+}));
+jest.mock('@magento/peregrine/lib/util/makeUrl');
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
+const defaultProps = {
+    handleOnProductOpen: jest.fn(),
+    url_key: 'urlKey',
+    small_image: '/media/catalog/category/minimalist.jpg',
+    name: 'Product Name',
+    price: {
+        regularPrice: {
+            amount: {
+                currency: 'USD',
+                value: 3.5
+            }
+        }
+    },
+    price_range: {
+        maximum_price: {
+            final_price: {
+                currency: 'USD',
+                value: 3.5
+            }
+        }
+    }
+};
+
+test('renders a suggestedProduct component', () => {
+    const component = TestRenderer.create(
+        <SuggestedProduct {...defaultProps} />
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+});

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProducts.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import mapProduct from '../../../util/mapProduct';
+import SuggestedProduct from '../suggestedProduct';
+import SuggestedProducts from '../suggestedProducts';
+
+jest.mock('../../../util/mapProduct', () => jest.fn());
+jest.mock('../suggestedProduct', () => () => null);
+
+const products = [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }];
+
+test('renders correctly', () => {
+    const subset = products.slice(0, 1);
+
+    const instance = createTestInstance(
+        <SuggestedProducts products={subset} />
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders a max of 3 products by default', () => {
+    const { root } = createTestInstance(
+        <SuggestedProducts products={products} />
+    );
+
+    expect(root.findAllByType(SuggestedProduct)).toHaveLength(3);
+});
+
+test('allows the render limit to be configured', () => {
+    const { root } = createTestInstance(
+        <SuggestedProducts limit={2} products={products} />
+    );
+
+    expect(root.findAllByType(SuggestedProduct)).toHaveLength(2);
+});
+
+test('calls `mapProduct()` for each item', () => {
+    createTestInstance(<SuggestedProducts limit={4} products={products} />);
+
+    products.forEach((product, index) => {
+        expect(mapProduct).toHaveBeenNthCalledWith(1 + index, product);
+    });
+});