@riosst100/pwa-marketplace 3.1.2 → 3.1.4

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>
+`;

package/src/components/SellerMegaMenu/customSubmenuColumn.js

@@ -0,0 +1,75 @@
+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 './customSubmenuColumn.module.css';
+import cn from 'classnames';
+
+const CustomSubmenuColumn = props => {
+    const {
+        category,
+        categoryUrlSuffix,
+        onNavigate,
+        handleCloseSubMenu,
+        customMenuItems,
+        toggleCustomMenu
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    let children = null;
+
+    if (customMenuItems.length) {
+        const childrenItems = customMenuItems.map((submenu, index) => {
+            const { name, path } = submenu;
+
+            const categoryUrl = resourceUrl(
+                `/${path}`
+            );
+
+            return (
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-1')}>
+                    <Link
+                        className={classes.link}
+                        data-cy="MegaMenu-CustomSubmenuColumn-link"
+                        to={categoryUrl}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                            toggleCustomMenu();
+                        }}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        children = <>
+        <ul className={cn(classes.submenuChild, 'pt-1')}><span className={classes.heading}>Categories</span>{childrenItems}</ul>
+        </>;
+    }
+
+    return children;
+    // 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 CustomSubmenuColumn;

package/src/components/SellerMegaMenu/customSubmenuColumn.module.css

@@ -0,0 +1,29 @@
+.customSubmenuColumn {
+    /* composes: max-w-[235px] from global; */
+    composes: p-2 from global;
+}
+
+.heading {
+    composes: font-medium from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    margin-left: 15px;
+    composes: mt-0 from global;
+}
+
+.submenuChildItem {
+    composes: mb-0 from global;
+}