@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/MegaMenu/__tests__/MegaMenu.spec.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import { createTestInstance } from '@magento/peregrine';
 import { MemoryRouter } from 'react-router-dom';
-import MegaMenu from '../megaMenu';
 
-jest.mock('../../../classify');
+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: {
@@ -15,13 +18,11 @@ jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenu', () => ({
                     id: 2,
                     name: 'Women',
                     url_path: 'women',
-                    url_suffix: '.html',
                     children: [
                         {
                             id: 5,
                             name: 'Bottoms',
                             url_path: 'bottoms',
-                            url_suffix: '.html',
                             isActive: true,
                             children: []
                         }
@@ -31,28 +32,60 @@ jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenu', () => ({
                     id: 3,
                     name: 'Men',
                     url_path: 'men',
-                    url_suffix: '.html',
                     children: []
                 },
                 {
                     id: 4,
                     name: 'Gear',
                     url_path: 'gear',
-                    url_suffix: '.html',
                     children: []
                 }
             ]
         },
-        activeCategoryId: 5
+        activeCategoryId: 5,
+        categoryUrlSuffix: '.html',
+        useOutsideAlerter: () => {}
     })
 }));
 
-test('it renders correctly', () => {
-    const instance = createTestInstance(
-        <MemoryRouter>
-            <MegaMenu />
-        </MemoryRouter>
-    );
+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();
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
 });

package/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js

@@ -1,63 +1,106 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import { act } from 'react-test-renderer';
+
 import { createTestInstance } from '@magento/peregrine';
-import { MemoryRouter } from 'react-router-dom';
 
 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');
 
-describe('Mega menu item renders correctly', () => {
-    const props = {
+    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,
+            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',
-            url_suffix: '.html',
             isActive: true,
             children: [
                 {
                     id: 2,
                     name: 'Bottoms',
                     url_path: 'bottoms',
-                    url_suffix: '.html',
                     children: []
                 },
                 {
                     id: 3,
                     name: 'Tops',
                     url_path: 'tops',
-                    url_suffix: '.html',
                     isActive: false,
                     children: []
                 }
             ]
         },
         rootCategoryName: 'Clothing',
-        activeCategoryId: 1
+        categoryUrlSuffix: '.html',
+        mainNavWidth: 200,
+        subMenuState: 'test',
+        disableFocus: false
     };
+};
+
+describe('Mega menu item renders correctly', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
 
     test('it renders correctly', () => {
-        const instance = createTestInstance(
-            <MemoryRouter>
-                <MegaMenuItem {...props} />
-            </MemoryRouter>
-        );
+        const instance = createTestInstance(<Component />);
 
         expect(instance.toJSON()).toMatchSnapshot();
     });
 
     test('it marks the active category', () => {
-        const instance = createTestInstance(
-            <MemoryRouter>
-                <MegaMenuItem {...props} />
-            </MemoryRouter>
-        );
+        const { root } = createTestInstance(<Component />);
 
-        expect(instance.toJSON().children[0].props.className).toEqual(
-            'megaMenuLinkActive'
-        );
-        expect(instance.toJSON().children[0].props.href).toEqual('/women.html');
-        expect(instance.toJSON().children[0].children[0]).toEqual('Women');
+        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', () => {
@@ -65,15 +108,12 @@ describe('Mega menu item renders correctly', () => {
             id: 3,
             name: 'Tops',
             url_path: 'tops',
-            url_suffix: '.html',
             isActive: false,
             children: []
         };
 
         const instance = createTestInstance(
-            <MemoryRouter>
-                <MegaMenuItem category={categoryWithoutChildren} />
-            </MemoryRouter>
+            <Component category={categoryWithoutChildren} />
         );
 
         expect(instance.toJSON().children.length).toEqual(1);

package/lib/components/MegaMenu/__tests__/Submenu.spec.js

@@ -5,6 +5,17 @@ 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 = {
@@ -13,13 +24,11 @@ describe('Submenu renders correctly', () => {
                 id: 1,
                 name: 'Bottoms',
                 url_path: 'bottoms',
-                url_suffix: '.html',
                 children: [
                     {
                         id: 3,
                         name: 'Pants',
                         url_path: 'pants',
-                        url_suffix: '.html',
                         isActive: false,
                         children: []
                     }
@@ -29,13 +38,16 @@ describe('Submenu renders correctly', () => {
                 id: 2,
                 name: 'Tops',
                 url_path: 'tops',
-                url_suffix: '.html',
                 isActive: false,
                 children: []
             }
         ],
         rootCategoryName: 'Clothing',
-        firstLevelCategoryName: 'Women'
+        firstLevelCategoryName: 'Women',
+        categoryUrlSuffix: '.html',
+        handleCloseSubMenu,
+        isFocused: false,
+        subMenuState: false
     };
     test('it renders correctly', () => {
         const instance = createTestInstance(

package/lib/components/MegaMenu/__tests__/SubmenuColumn.spec.js

@@ -12,18 +12,17 @@ describe('Submenu column renders correctly', () => {
             id: 1,
             name: 'Pants',
             url_path: 'pants',
-            url_suffix: '.html',
             children: [
                 {
                     id: 2,
                     name: 'Jeans',
                     url_path: 'jeans',
-                    url_suffix: '.html',
                     isActive: true,
                     children: []
                 }
             ]
-        }
+        },
+        categoryUrlSuffix: '.html'
     };
 
     test('it renders correctly', () => {

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap

@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`it renders correctly 1`] = `
+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"
@@ -9,11 +16,33 @@ exports[`it renders correctly 1`] = `
     className="megaMenuItem"
   >
     <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"
@@ -33,12 +62,13 @@ exports[`it renders correctly 1`] = `
             className="link"
             href="/bottoms.html"
             onClick={[Function]}
+            onKeyDown={[Function]}
           >
-            <h3
+            <span
               className="heading"
             >
               Bottoms
-            </h3>
+            </span>
           </a>
         </div>
       </div>
@@ -51,6 +81,7 @@ exports[`it renders correctly 1`] = `
       className="megaMenuLink"
       href="/men.html"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       Men
     </a>
@@ -62,6 +93,7 @@ exports[`it renders correctly 1`] = `
       className="megaMenuLink"
       href="/gear.html"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       Gear
     </a>

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap

@@ -4,13 +4,30 @@ exports[`Mega menu item renders correctly it does not render submenu when item d
 <div
   className="megaMenuItem"
 >
-  <a
-    className="megaMenuLink"
-    href="/tops.html"
-    onClick={[Function]}
-  >
-    Tops
-  </a>
+  <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>
 `;
 
@@ -18,55 +35,29 @@ exports[`Mega menu item renders correctly it renders correctly 1`] = `
 <div
   className="megaMenuItem"
 >
-  <a
-    className="megaMenuLinkActive"
-    href="/women.html"
-    onClick={[Function]}
-  >
-    Women
-  </a>
-  <div
-    className="submenu"
-  >
-    <div
-      className="submenuItems"
-      style={
+  <mock-Submenu
+    categoryUrlSuffix=".html"
+    handleCloseSubMenu={[MockFunction]}
+    isFocused={false}
+    items={
+      Array [
+        Object {
+          "children": Array [],
+          "id": 2,
+          "name": "Bottoms",
+          "url_path": "bottoms",
+        },
         Object {
-          "minWidth": NaN,
-        }
-      }
-    >
-      <div
-        className="submenuColumn"
-      >
-        <a
-          className="link"
-          href="/bottoms.html"
-          onClick={[Function]}
-        >
-          <h3
-            className="heading"
-          >
-            Bottoms
-          </h3>
-        </a>
-      </div>
-      <div
-        className="submenuColumn"
-      >
-        <a
-          className="link"
-          href="/tops.html"
-          onClick={[Function]}
-        >
-          <h3
-            className="heading"
-          >
-            Tops
-          </h3>
-        </a>
-      </div>
-    </div>
-  </div>
+          "children": Array [],
+          "id": 3,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        },
+      ]
+    }
+    mainNavWidth={200}
+    subMenuState="test"
+  />
 </div>
 `;

package/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap

@@ -12,51 +12,46 @@ exports[`Submenu renders correctly it renders correctly 1`] = `
       }
     }
   >
-    <div
-      className="submenuColumn"
-    >
-      <a
-        className="link"
-        href="/bottoms.html"
-        onClick={[Function]}
-      >
-        <h3
-          className="heading"
-        >
-          Bottoms
-        </h3>
-      </a>
-      <ul
-        className="submenuChild"
-      >
-        <li
-          className="submenuChildItem"
-        >
-          <a
-            className="link"
-            href="/pants.html"
-            onClick={[Function]}
-          >
-            Pants
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="submenuColumn"
-    >
-      <a
-        className="link"
-        href="/tops.html"
-        onClick={[Function]}
-      >
-        <h3
-          className="heading"
-        >
-          Tops
-        </h3>
-      </a>
-    </div>
+    <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"
+      index={0}
+      keyboardProps={Object {}}
+    />
+    <mock-SubmenuColumn
+      category={
+        Object {
+          "children": Array [],
+          "id": 2,
+          "isActive": false,
+          "name": "Tops",
+          "url_path": "tops",
+        }
+      }
+      categoryUrlSuffix=".html"
+      index={1}
+      keyboardProps={
+        Object {
+          "onKeyDown": [Function],
+          "onKeyUp": undefined,
+        }
+      }
+    />
   </div>
 </div>
 `;

package/lib/components/MegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap

@@ -9,11 +9,11 @@ exports[`Submenu column renders correctly it renders correctly 1`] = `
     href="/pants.html"
     onClick={[Function]}
   >
-    <h3
+    <span
       className="heading"
     >
       Pants
-    </h3>
+    </span>
   </a>
   <ul
     className="submenuChild"