@riosst100/pwa-marketplace 3.1.3 → 3.1.4

package/src/components/RMAPage/components/productItem.module.css

@@ -0,0 +1,15 @@
+.quantityLabel {
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}

package/src/components/RelatedProducts/index.js

@@ -0,0 +1 @@
+export { default } from './relatedProducts';

package/src/components/RelatedProducts/relatedProducts.js

@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRelatedProducts } from '@riosst100/pwa-marketplace/src/talons/RelatedProducts/useRelatedProducts';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
+import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail/sellerDetail';
+
+const RelatedProducts = props => {
+    const { categoryUrlKey } = props;
+
+    const talonProps = useRelatedProducts({
+        mapSeller
+    });
+
+    const { error, loading, seller } = talonProps;
+
+    if (loading && !seller)
+        return '';
+    // return <SellerShimmer />;
+    if (error && !seller) return <ErrorView />;
+    if (!seller) {
+        return (
+            <h1>
+                <FormattedMessage
+                    id={'seller.notFound'}
+                    defaultMessage={
+                        'Seller Not Found.'
+                    }
+                />
+            </h1>
+        );
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{seller.name}</StoreTitle>
+            <Meta name="description" content={seller.description} />
+            {seller && <SellerDetail seller={seller} />}
+        </Fragment>
+    );
+};
+
+export default RelatedProducts;

package/src/components/SellerMegaMenu/__tests__/MegaMenu.spec.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+
+import MegaMenu from '../megaMenu';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('@magento/peregrine/lib/hooks/useIsInViewport');
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenu', () => ({
+    useMegaMenu: jest.fn().mockReturnValue({
+        megaMenuData: {
+            id: 1,
+            name: 'Clothing',
+            children: [
+                {
+                    id: 2,
+                    name: 'Women',
+                    url_path: 'women',
+                    children: [
+                        {
+                            id: 5,
+                            name: 'Bottoms',
+                            url_path: 'bottoms',
+                            isActive: true,
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: 'Men',
+                    url_path: 'men',
+                    children: []
+                },
+                {
+                    id: 4,
+                    name: 'Gear',
+                    url_path: 'gear',
+                    children: []
+                }
+            ]
+        },
+        activeCategoryId: 5,
+        categoryUrlSuffix: '.html',
+        useOutsideAlerter: () => {}
+    })
+}));
+
+describe('#MegaMenu', () => {
+    test('useEffect', () => {
+        const useEffect = jest.spyOn(React, 'useEffect');
+
+        const mockUseEffect = () => {
+            useEffect.mockImplementationOnce(mockFunction => mockFunction());
+        };
+
+        mockUseEffect();
+    });
+
+    test('not resetting the menu', () => {
+        const handleClickOutside = jest.fn();
+
+        expect(handleClickOutside).toHaveBeenCalledTimes(0);
+    });
+
+    it('renders empty div if not in viewport', () => {
+        useIsInViewport.mockReturnValue(false);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders menu if in viewport', () => {
+        useIsInViewport.mockReturnValue(true);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/components/SellerMegaMenu/__tests__/MegaMenuItem.spec.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import MegaMenuItem from '../megaMenuItem';
+
+jest.mock('../../../classify');
+jest.mock('../../Icon', () => props => <mock-Icon {...props} />);
+jest.mock('../submenu', () => props => <mock-Submenu {...props} />);
+jest.mock('react', () => {
+    const React = jest.requireActual('react');
+    const memoSpy = jest.spyOn(React, 'useMemo');
+
+    return Object.assign(React, {
+        useMemo: memoSpy
+    });
+});
+
+const mockHandleKeyDown = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+    Link: jest.fn(() => props => <mock-Link {...props} />)
+}));
+
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenuItem', () => ({
+    useMegaMenuItem: jest.fn(() => {
+        return {
+            isFocused: false,
+            isActive: false,
+            handleMenuItemFocus: jest.fn(),
+            handleCloseSubMenu: jest.fn(),
+            isMenuActive: false,
+            handleKeyDown: mockHandleKeyDown
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <MegaMenuItem {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        activeCategoryId: 1,
+        category: {
+            id: 1,
+            name: 'Women',
+            url_path: 'women',
+            isActive: true,
+            children: [
+                {
+                    id: 2,
+                    name: 'Bottoms',
+                    url_path: 'bottoms',
+                    children: []
+                },
+                {
+                    id: 3,
+                    name: 'Tops',
+                    url_path: 'tops',
+                    isActive: false,
+                    children: []
+                }
+            ]
+        },
+        rootCategoryName: 'Clothing',
+        categoryUrlSuffix: '.html',
+        mainNavWidth: 200,
+        subMenuState: 'test',
+        disableFocus: false
+    };
+};
+
+describe('Mega menu item renders correctly', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    test('it renders correctly', () => {
+        const instance = createTestInstance(<Component />);
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    test('it marks the active category', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(root.findByType(Link).props.className).toEqual('megaMenuLink');
+        expect(root.findByType(Link).props.to).toEqual('/women.html');
+        expect(root.findByType(Link).props.children[0]).toEqual('Women');
+    });
+
+    it('should call a11yClick', () => {
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findByType(Link).props.onKeyDown();
+        });
+
+        expect(mockHandleKeyDown).toHaveBeenCalled();
+    });
+
+    test('it does not render submenu when item does not have children', () => {
+        const categoryWithoutChildren = {
+            id: 3,
+            name: 'Tops',
+            url_path: 'tops',
+            isActive: false,
+            children: []
+        };
+
+        const instance = createTestInstance(
+            <Component category={categoryWithoutChildren} />
+        );
+
+        expect(instance.toJSON().children.length).toEqual(1);
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/components/SellerMegaMenu/__tests__/Submenu.spec.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { MemoryRouter } from 'react-router-dom';
+
+import Submenu from '../submenu';
+
+jest.mock('../../../classify');
+jest.mock('../submenuColumn', () => props => <mock-SubmenuColumn {...props} />);
+jest.mock('react', () => {
+    const React = jest.requireActual('react');
+    const callbackSpy = jest.spyOn(React, 'useCallback');
+
+    return Object.assign(React, {
+        callbackSpy: callbackSpy
+    });
+});
+
+const handleCloseSubMenu = jest.fn().mockName('handleCloseSubMenu');
+
+describe('Submenu renders correctly', () => {
+    const props = {
+        items: [
+            {
+                id: 1,
+                name: 'Bottoms',
+                url_path: 'bottoms',
+                children: [
+                    {
+                        id: 3,
+                        name: 'Pants',
+                        url_path: 'pants',
+                        isActive: false,
+                        children: []
+                    }
+                ]
+            },
+            {
+                id: 2,
+                name: 'Tops',
+                url_path: 'tops',
+                isActive: false,
+                children: []
+            }
+        ],
+        rootCategoryName: 'Clothing',
+        firstLevelCategoryName: 'Women',
+        categoryUrlSuffix: '.html',
+        handleCloseSubMenu,
+        isFocused: false,
+        subMenuState: false
+    };
+    test('it renders correctly', () => {
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <Submenu {...props} />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/components/SellerMegaMenu/__tests__/SubmenuColumn.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { MemoryRouter } from 'react-router-dom';
+
+import SubmenuColumn from '../submenuColumn';
+
+jest.mock('../../../classify');
+
+describe('Submenu column renders correctly', () => {
+    const props = {
+        category: {
+            id: 1,
+            name: 'Pants',
+            url_path: 'pants',
+            children: [
+                {
+                    id: 2,
+                    name: 'Jeans',
+                    url_path: 'jeans',
+                    isActive: true,
+                    children: []
+                }
+            ]
+        },
+        categoryUrlSuffix: '.html'
+    };
+
+    test('it renders correctly', () => {
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <SubmenuColumn {...props} />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    test('it renders active state', () => {
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <SubmenuColumn {...props} />
+            </MemoryRouter>
+        );
+
+        const activeLink = instance.root.findByProps({
+            className: 'linkActive'
+        });
+        expect(activeLink.props.children).toEqual('Jeans');
+    });
+});

package/src/components/SellerMegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#MegaMenu renders empty div if not in viewport 1`] = `
+<nav
+  className="megaMenu"
+  role="navigation"
+/>
+`;
+
+exports[`#MegaMenu renders menu if in viewport 1`] = `
+<nav
+  className="megaMenu"
+  role="navigation"
+>
+  <div
+    className="megaMenuItem"
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
+  >
+    <a
+      aria-label="Category: Women. 1 sub-categories"
+      className="megaMenuLink"
+      href="/women.html"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+    >
+      Women
+      <span
+        className="arrowDown"
+      >
+        <svg
+          className="icon"
+          fill="none"
+          height={16}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="6 9 12 15 18 9"
+          />
+        </svg>
+      </span>
+    </a>
+    <div
+      className="submenu_inactive"
+    >
+      <div
+        className="submenuItems"
+        style={
+          Object {
+            "minWidth": 20,
+          }
+        }
+      >
+        <div
+          className="submenuColumn"
+        >
+          <a
+            className="link"
+            href="/bottoms.html"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+          >
+            <span
+              className="heading"
+            >
+              Bottoms
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="megaMenuItem"
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
+  >
+    <a
+      className="megaMenuLink"
+      href="/men.html"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+    >
+      Men
+    </a>
+  </div>
+  <div
+    className="megaMenuItem"
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
+  >
+    <a
+      className="megaMenuLink"
+      href="/gear.html"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+    >
+      Gear
+    </a>
+  </div>
+</nav>
+`;

package/src/components/SellerMegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mega menu item renders correctly it does not render submenu when item does not have children 1`] = `
+<div
+  className="megaMenuItem"
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
+>
+  <mock-Submenu
+    categoryUrlSuffix=".html"
+    handleCloseSubMenu={[MockFunction]}
+    isFocused={false}
+    items={
+      Array [
+        Object {
+          "children": Array [],
+          "id": 2,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        },
+        Object {
+          "children": Array [],
+          "id": 3,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        },
+      ]
+    }
+    mainNavWidth={200}
+    subMenuState="test"
+  />
+</div>
+`;
+
+exports[`Mega menu item renders correctly it renders correctly 1`] = `
+<div
+  className="megaMenuItem"
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
+>
+  <mock-Submenu
+    categoryUrlSuffix=".html"
+    handleCloseSubMenu={[MockFunction]}
+    isFocused={false}
+    items={
+      Array [
+        Object {
+          "children": Array [],
+          "id": 2,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        },
+        Object {
+          "children": Array [],
+          "id": 3,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        },
+      ]
+    }
+    mainNavWidth={200}
+    subMenuState="test"
+  />
+</div>
+`;

package/src/components/SellerMegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Submenu renders correctly it renders correctly 1`] = `
+<div
+  className="submenu_inactive"
+>
+  <div
+    className="submenuItems"
+    style={
+      Object {
+        "minWidth": NaN,
+      }
+    }
+  >
+    <mock-SubmenuColumn
+      category={
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [],
+              "id": 3,
+              "isActive": false,
+              "name": "Pants",
+              "url_path": "pants",
+            },
+          ],
+          "id": 1,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        }
+      }
+      categoryUrlSuffix=".html"
+      handleCloseSubMenu={[MockFunction handleCloseSubMenu]}
+      index={0}
+      keyboardProps={Object {}}
+    />
+    <mock-SubmenuColumn
+      category={
+        Object {
+          "children": Array [],
+          "id": 2,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        }
+      }
+      categoryUrlSuffix=".html"
+      handleCloseSubMenu={[MockFunction handleCloseSubMenu]}
+      index={1}
+      keyboardProps={
+        Object {
+          "onKeyDown": [Function],
+          "onKeyUp": undefined,
+        }
+      }
+    />
+  </div>
+</div>
+`;

package/src/components/SellerMegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Submenu column renders correctly it renders correctly 1`] = `
+<div
+  className="submenuColumn"
+>
+  <a
+    className="link"
+    href="/pants.html"
+    onClick={[Function]}
+  >
+    <span
+      className="heading"
+    >
+      Pants
+    </span>
+  </a>
+  <ul
+    className="submenuChild"
+  >
+    <li
+      className="submenuChildItem"
+    >
+      <a
+        className="linkActive"
+        href="/jeans.html"
+        onClick={[Function]}
+      >
+        Jeans
+      </a>
+    </li>
+  </ul>
+</div>
+`;