@spectrum-web-components/menu 0.36.0 → 0.37.0

package/test/submenu.test.js

@@ -2,6 +2,7 @@
 import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import {
+  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -19,7 +20,40 @@ import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
 async function styledFixture(story, dir = "ltr") {
   const test = await fixture(html`
-        <sp-theme dir=${dir} scale="medium" color="dark">${story}</sp-theme>
+        <sp-theme dir=${dir} scale="medium" color="dark">
+            ${story}
+            <style>
+                sp-theme {
+                    --spectrum-global-animation-duration-100: 50ms;
+                    --spectrum-global-animation-duration-200: 50ms;
+                    --spectrum-global-animation-duration-300: 50ms;
+                    --spectrum-global-animation-duration-400: 50ms;
+                    --spectrum-global-animation-duration-500: 50ms;
+                    --spectrum-global-animation-duration-600: 50ms;
+                    --spectrum-global-animation-duration-700: 50ms;
+                    --spectrum-global-animation-duration-800: 50ms;
+                    --spectrum-global-animation-duration-900: 50ms;
+                    --spectrum-global-animation-duration-1000: 50ms;
+                    --spectrum-global-animation-duration-2000: 50ms;
+                    --spectrum-global-animation-duration-4000: 50ms;
+                    --spectrum-animation-duration-0: 50ms;
+                    --spectrum-animation-duration-100: 50ms;
+                    --spectrum-animation-duration-200: 50ms;
+                    --spectrum-animation-duration-300: 50ms;
+                    --spectrum-animation-duration-400: 50ms;
+                    --spectrum-animation-duration-500: 50ms;
+                    --spectrum-animation-duration-600: 50ms;
+                    --spectrum-animation-duration-700: 50ms;
+                    --spectrum-animation-duration-800: 50ms;
+                    --spectrum-animation-duration-900: 50ms;
+                    --spectrum-animation-duration-1000: 50ms;
+                    --spectrum-animation-duration-2000: 50ms;
+                    --spectrum-animation-duration-4000: 50ms;
+                    --spectrum-coachmark-animation-indicator-ring-duration: 50ms;
+                    --swc-test-duration: 1ms;
+                }
+            </style>
+        </sp-theme>
     `);
   document.documentElement.dir = dir;
   return test.children[0];
@@ -58,6 +92,8 @@ describe("Submenu", () => {
             `
     );
     await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
     const rootItem = el.querySelector(".root");
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
     expect(rootItem.open).to.be.false;
@@ -90,9 +126,8 @@ describe("Submenu", () => {
       ]
     });
     await closed;
-    await nextFrame();
-    expect(rootChanged.calledWith("Has submenu"), "root changed").to.be.true;
-    expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
+    expect(submenuChanged.withArgs("Two").calledOnce, "submenu changed").to.be.true;
+    expect(rootChanged.withArgs("Has submenu").calledOnce, "root changed").to.be.true;
   });
   it("closes deep tree on selection", async () => {
     const rootChanged = spy();
@@ -143,11 +178,12 @@ describe("Submenu", () => {
                 </sp-menu>
             `
     );
-    await elementUpdated(el);
     const rootItem = el.querySelector(".root");
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
+    const item2 = document.querySelector(".submenu-item-2");
+    const itemC = document.querySelector(".sub-submenu-item-3");
     expect(rootItem.open).to.be.false;
-    const opened = oneEvent(rootItem, "sp-opened");
+    let opened = oneEvent(rootItem, "sp-opened");
     sendMouse({
       steps: [
         {
@@ -161,9 +197,8 @@ describe("Submenu", () => {
     });
     await opened;
     expect(rootItem.open).to.be.true;
-    const item2 = document.querySelector(".submenu-item-2");
     const item2BoundingRect = item2.getBoundingClientRect();
-    let closed = oneEvent(item2, "sp-opened");
+    opened = oneEvent(item2, "sp-opened");
     sendMouse({
       steps: [
         {
@@ -175,25 +210,11 @@ describe("Submenu", () => {
         }
       ]
     });
-    await closed;
-    await nextFrame();
+    await opened;
     expect(item2.open).to.be.true;
-    const itemC = document.querySelector(".sub-submenu-item-3");
-    const itemCBoundingRect = itemC.getBoundingClientRect();
-    closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
-      steps: [
-        {
-          type: "click",
-          position: [
-            itemCBoundingRect.left + itemCBoundingRect.width / 2,
-            itemCBoundingRect.top + itemCBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
+    const closed = oneEvent(rootItem, "sp-closed");
+    itemC.click();
     await closed;
-    await nextFrame();
     expect(rootChanged.calledWith("Has submenu"), "root changed").to.be.true;
     expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
     expect(subSubmenuChanged.calledWith("C"), "sub submenu changed").to.be.true;
@@ -210,12 +231,14 @@ describe("Submenu", () => {
       closeKey: "ArrowRight"
     }
   ].map((testData) => {
-    it(`selects - keyboard: ${testData.dir}`, async () => {
+    it(`selects - keyboard: ${testData.dir}`, async function() {
+      var _a, _b;
       const rootChanged = spy();
       const submenuChanged = spy();
       const el = await styledFixture(
         html`
                     <sp-menu
+                        id="base"
                         @change=${(event) => {
           rootChanged(event.target.value);
         }}
@@ -223,6 +246,7 @@ describe("Submenu", () => {
                         <sp-menu-item class="root">
                             Has submenu
                             <sp-menu
+                                id="sub"
                                 slot="submenu"
                                 @change=${(event) => {
           submenuChanged(event.target.value);
@@ -245,6 +269,8 @@ describe("Submenu", () => {
       );
       await elementUpdated(el);
       const rootItem = el.querySelector(".root");
+      const submenu = el.querySelector('[slot="submenu"]');
+      const submenuItem = el.querySelector(".submenu-item-2");
       expect(rootItem.open).to.be.false;
       el.focus();
       await elementUpdated(el);
@@ -254,12 +280,20 @@ describe("Submenu", () => {
       });
       await opened;
       expect(rootItem.open).to.be.true;
+      expect(
+        submenu === document.activeElement,
+        `${(_a = document.activeElement) == null ? void 0 : _a.id}`
+      ).to.be.true;
       let closed = oneEvent(rootItem, "sp-closed");
       sendKeys({
         press: testData.closeKey
       });
       await closed;
       expect(rootItem.open).to.be.false;
+      expect(
+        el === document.activeElement,
+        `${(_b = document.activeElement) == null ? void 0 : _b.id}`
+      ).to.be.true;
       opened = oneEvent(rootItem, "sp-opened");
       sendKeys({
         press: testData.openKey
@@ -269,13 +303,23 @@ describe("Submenu", () => {
       await sendKeys({
         press: "ArrowDown"
       });
+      await elementUpdated(submenuItem);
+      await nextFrame();
+      await nextFrame();
+      expect(submenu.getAttribute("aria-activedescendant")).to.equal(
+        submenuItem.id
+      );
       closed = oneEvent(rootItem, "sp-closed");
       sendKeys({
         press: "Enter"
       });
       await closed;
-      expect(rootChanged.calledWith("Has submenu"), "root changed").to.be.true;
       expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
+      expect(rootChanged.called, "root has changed").to.be.true;
+      expect(
+        rootChanged.calledWith("Has submenu"),
+        "root specifically changed"
+      ).to.be.true;
     });
   });
   it("closes on `pointerleave`", async () => {
@@ -407,7 +451,8 @@ describe("Submenu", () => {
     });
     await closed;
   });
-  it("stays open when mousing between menu item and submenu", async () => {
+  it("continues to open when mousing between menu item and submenu", async () => {
+    const clickSpy = spy();
     const el = await styledFixture(
       html`
                 <sp-menu>
@@ -417,7 +462,10 @@ describe("Submenu", () => {
                             <sp-menu-item class="submenu-item-1">
                                 One
                             </sp-menu-item>
-                            <sp-menu-item class="submenu-item-2">
+                            <sp-menu-item
+                                class="submenu-item-2"
+                                @click=${() => clickSpy()}
+                            >
                                 Two
                             </sp-menu-item>
                             <sp-menu-item class="submenu-item-3">
@@ -430,6 +478,7 @@ describe("Submenu", () => {
     );
     await elementUpdated(el);
     const rootItem = el.querySelector(".root");
+    const subItem = el.querySelector(".submenu-item-2");
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
     expect(rootItem.open).to.be.false;
     const opened = oneEvent(rootItem, "sp-opened");
@@ -444,30 +493,114 @@ describe("Submenu", () => {
         }
       ]
     });
+    await nextFrame();
+    await nextFrame();
+    const subItemBoundingRect = subItem.getBoundingClientRect();
     await sendMouse({
       steps: [
         {
           type: "move",
           position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height * 2
+            subItemBoundingRect.left + subItemBoundingRect.width / 2,
+            subItemBoundingRect.top + subItemBoundingRect.height / 2
           ]
         }
       ]
     });
+    await opened;
+    expect(rootItem.open).to.be.true;
+    await aTimeout(150);
+    expect(rootItem.open).to.be.true;
+    const closed = oneEvent(rootItem, "sp-closed");
+    sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            subItemBoundingRect.left + subItemBoundingRect.width / 2,
+            subItemBoundingRect.top + subItemBoundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    await closed;
+    expect(clickSpy.callCount).to.equal(1);
+  });
+  it("stays open when mousing between menu item and submenu", async () => {
+    const clickSpy = spy();
+    const el = await styledFixture(
+      html`
+                <sp-menu>
+                    <sp-menu-item class="root">
+                        Has submenu
+                        <sp-menu slot="submenu">
+                            <sp-menu-item class="submenu-item-1">
+                                One
+                            </sp-menu-item>
+                            <sp-menu-item
+                                class="submenu-item-2"
+                                @click=${() => clickSpy()}
+                            >
+                                Two
+                            </sp-menu-item>
+                            <sp-menu-item class="submenu-item-3">
+                                Three
+                            </sp-menu-item>
+                        </sp-menu>
+                    </sp-menu-item>
+                </sp-menu>
+            `
+    );
+    await elementUpdated(el);
+    const rootItem = el.querySelector(".root");
+    const subItem = el.querySelector(".submenu-item-2");
+    const rootItemBoundingRect = rootItem.getBoundingClientRect();
+    expect(rootItem.open).to.be.false;
+    const opened = oneEvent(rootItem, "sp-opened");
     await sendMouse({
       steps: [
         {
           type: "move",
           position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width * 1.5,
+            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
             rootItemBoundingRect.top + rootItemBoundingRect.height / 2
           ]
         }
       ]
     });
     await opened;
+    await nextFrame();
+    await nextFrame();
+    const subItemBoundingRect = subItem.getBoundingClientRect();
     expect(rootItem.open).to.be.true;
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            subItemBoundingRect.left + subItemBoundingRect.width / 2,
+            subItemBoundingRect.top + subItemBoundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    expect(rootItem.open).to.be.true;
+    await aTimeout(150);
+    expect(rootItem.open).to.be.true;
+    const closed = oneEvent(rootItem, "sp-closed");
+    sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            subItemBoundingRect.left + subItemBoundingRect.width / 2,
+            subItemBoundingRect.top + subItemBoundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    await closed;
+    expect(clickSpy.callCount).to.equal(1);
   });
   it("not opens if disabled", async () => {
     const el = await styledFixture(
@@ -512,15 +645,15 @@ describe("Submenu", () => {
     const el = await styledFixture(html`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
-                <sp-menu-group role="none">
+                <sp-menu-group role="none" id="group">
                     <span slot="header">New York</span>
                     <sp-menu-item>Bronx</sp-menu-item>
                     <sp-menu-item id="submenu-item-1">
                         Brooklyn
-                        <sp-menu slot="submenu">
+                        <sp-menu slot="submenu" id="submenu-1">
                             <sp-menu-item id="submenu-item-2">
                                 Ft. Greene
-                                <sp-menu slot="submenu">
+                                <sp-menu slot="submenu" id="submenu-2">
                                     <sp-menu-item>S. Oxford St</sp-menu-item>
                                     <sp-menu-item>S. Portland Ave</sp-menu-item>
                                     <sp-menu-item>S. Elliot Pl</sp-menu-item>
@@ -532,7 +665,7 @@ describe("Submenu", () => {
                     </sp-menu-item>
                     <sp-menu-item id="submenu-item-3">
                         Manhattan
-                        <sp-menu slot="submenu">
+                        <sp-menu slot="submenu" id="submenu-3">
                             <sp-menu-item disabled>SoHo</sp-menu-item>
                             <sp-menu-item>
                                 Union Square
@@ -556,33 +689,27 @@ describe("Submenu", () => {
     el.click();
     await opened;
     expect(el.open).to.be.true;
-    let activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(1);
     opened = oneEvent(rootMenu1, "sp-opened");
     rootMenu1.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(2);
+    expect(rootMenu1.open).to.be.true;
     opened = oneEvent(childMenu2, "sp-opened");
     childMenu2.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(3);
-    const overlaysManaged = Promise.all([
-      oneEvent(childMenu2, "sp-closed"),
-      oneEvent(rootMenu1, "sp-closed"),
-      oneEvent(rootMenu2, "sp-opened")
-    ]);
+    expect(childMenu2.open).to.be.true;
+    const childMenu2Closed = oneEvent(childMenu2, "sp-closed");
+    const rootMenu1Closed = oneEvent(rootMenu1, "sp-closed");
+    const rootMenu2Opened = oneEvent(rootMenu2, "sp-opened");
     rootMenu2.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
-    await overlaysManaged;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(2);
+    await childMenu2Closed;
+    await rootMenu1Closed;
+    await rootMenu2Opened;
   });
   it("closes back to the first overlay without a `root` when clicking away", async () => {
     const el = await styledFixture(html`
@@ -631,31 +758,30 @@ describe("Submenu", () => {
     el.click();
     await opened;
     expect(el.open).to.be.true;
-    let activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(1);
     opened = oneEvent(rootMenu1, "sp-opened");
     rootMenu1.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(2);
     opened = oneEvent(childMenu2, "sp-opened");
     childMenu2.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(3);
     const closed = Promise.all([
       oneEvent(childMenu2, "sp-closed"),
       oneEvent(rootMenu1, "sp-closed"),
       oneEvent(el, "sp-closed")
     ]);
-    document.body.click();
+    sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [600, 5]
+        }
+      ]
+    });
     await closed;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(0);
   });
   it("closes decendent menus when Menu Item in ancestor without a submenu is pointerentered", async () => {
     const el = await styledFixture(html`
@@ -694,22 +820,16 @@ describe("Submenu", () => {
     el.click();
     await opened;
     expect(el.open).to.be.true;
-    let activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(1);
     opened = oneEvent(rootMenu, "sp-opened");
     rootMenu.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(2);
     const closed = oneEvent(rootMenu, "sp-closed");
     noSubmenu.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await closed;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(1);
   });
   it("closes decendent menus when Menu Item in ancestor is clicked", async () => {
     const el = await styledFixture(html`
@@ -753,6 +873,7 @@ describe("Submenu", () => {
                 </sp-menu-group>
             </sp-action-menu>
         `);
+    await nextFrame();
     const rootMenu1 = el.querySelector("#submenu-item-1");
     const childMenu2 = el.querySelector("#submenu-item-2");
     const ancestorItem = el.querySelector("#ancestor-item");
@@ -761,33 +882,39 @@ describe("Submenu", () => {
     el.click();
     await opened;
     expect(el.open).to.be.true;
-    let activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(1);
     opened = oneEvent(rootMenu1, "sp-opened");
     rootMenu1.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(2);
     opened = oneEvent(childMenu2, "sp-opened");
     childMenu2.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
     await opened;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(3);
     const closed = Promise.all([
       oneEvent(childMenu2, "sp-closed"),
       oneEvent(rootMenu1, "sp-closed"),
       oneEvent(el, "sp-closed")
     ]);
-    ancestorItem.click();
+    const rect = ancestorItem.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2
+          ]
+        }
+      ]
+    });
     await closed;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(0);
   });
   it('cleans up submenus that close before they are "open"', async () => {
+    if ("showPopover" in document.createElement("div")) {
+      return;
+    }
     await sendMouse({
       steps: [
         {
@@ -837,7 +964,6 @@ describe("Submenu", () => {
     expect(rootItem2.open, "initially closed 2").to.be.false;
     const rootItemBoundingRect1 = rootItem1.getBoundingClientRect();
     const rootItemBoundingRect2 = rootItem2.getBoundingClientRect();
-    let activeOverlay;
     await sendMouse({
       steps: [
         {
@@ -882,6 +1008,12 @@ describe("Submenu", () => {
         }
       ]
     });
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
     const closed = oneEvent(rootItem2, "sp-closed");
     await sendMouse({
       steps: [
@@ -889,20 +1021,12 @@ describe("Submenu", () => {
           type: "move",
           position: [
             rootItemBoundingRect2.left + rootItemBoundingRect2.width / 2,
-            rootItemBoundingRect2.top + rootItemBoundingRect2.top + rootItemBoundingRect2.height / 2
+            rootItemBoundingRect2.top + rootItemBoundingRect2.height * 2
           ]
         }
       ]
     });
-    activeOverlay = document.querySelector(
-      "active-overlay"
-    );
-    expect(activeOverlay).to.not.be.null;
     await closed;
-    activeOverlay = document.querySelector(
-      "active-overlay"
-    );
-    expect(activeOverlay).to.be.null;
     expect(rootItem1.open, "finally closed 1").to.be.false;
     expect(rootItem2.open, "finally closed 2").to.be.false;
   });