@spectrum-web-components/menu 0.35.1-rc.43 → 0.36.0

package/test/submenu.test.js

@@ -2,7 +2,6 @@
 import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import {
-  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -20,40 +19,7 @@ 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}
-            <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>
+        <sp-theme dir=${dir} scale="medium" color="dark">${story}</sp-theme>
     `);
   document.documentElement.dir = dir;
   return test.children[0];
@@ -124,8 +90,9 @@ describe("Submenu", () => {
       ]
     });
     await closed;
-    expect(submenuChanged.withArgs("Two").calledOnce, "submenu changed").to.be.true;
-    expect(rootChanged.withArgs("Has submenu").calledOnce, "root changed").to.be.true;
+    await nextFrame();
+    expect(rootChanged.calledWith("Has submenu"), "root changed").to.be.true;
+    expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
   });
   it("closes deep tree on selection", async () => {
     const rootChanged = spy();
@@ -176,12 +143,11 @@ 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;
-    let opened = oneEvent(rootItem, "sp-opened");
+    const opened = oneEvent(rootItem, "sp-opened");
     sendMouse({
       steps: [
         {
@@ -195,8 +161,9 @@ describe("Submenu", () => {
     });
     await opened;
     expect(rootItem.open).to.be.true;
+    const item2 = document.querySelector(".submenu-item-2");
     const item2BoundingRect = item2.getBoundingClientRect();
-    opened = oneEvent(item2, "sp-opened");
+    let closed = oneEvent(item2, "sp-opened");
     sendMouse({
       steps: [
         {
@@ -208,11 +175,25 @@ describe("Submenu", () => {
         }
       ]
     });
-    await opened;
+    await closed;
+    await nextFrame();
     expect(item2.open).to.be.true;
-    const closed = oneEvent(rootItem, "sp-closed");
-    itemC.click();
+    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
+          ]
+        }
+      ]
+    });
     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;
@@ -229,14 +210,12 @@ describe("Submenu", () => {
       closeKey: "ArrowRight"
     }
   ].map((testData) => {
-    it(`selects - keyboard: ${testData.dir}`, async function() {
-      var _a, _b;
+    it(`selects - keyboard: ${testData.dir}`, async () => {
       const rootChanged = spy();
       const submenuChanged = spy();
       const el = await styledFixture(
         html`
                     <sp-menu
-                        id="base"
                         @change=${(event) => {
           rootChanged(event.target.value);
         }}
@@ -244,7 +223,6 @@ describe("Submenu", () => {
                         <sp-menu-item class="root">
                             Has submenu
                             <sp-menu
-                                id="sub"
                                 slot="submenu"
                                 @change=${(event) => {
           submenuChanged(event.target.value);
@@ -267,8 +245,6 @@ 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);
@@ -278,20 +254,12 @@ 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
@@ -301,23 +269,13 @@ 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 () => {
@@ -449,8 +407,7 @@ describe("Submenu", () => {
     });
     await closed;
   });
-  it("continues to open when mousing between menu item and submenu", async () => {
-    const clickSpy = spy();
+  it("stays open when mousing between menu item and submenu", async () => {
     const el = await styledFixture(
       html`
                 <sp-menu>
@@ -460,10 +417,7 @@ describe("Submenu", () => {
                             <sp-menu-item class="submenu-item-1">
                                 One
                             </sp-menu-item>
-                            <sp-menu-item
-                                class="submenu-item-2"
-                                @click=${() => clickSpy()}
-                            >
+                            <sp-menu-item class="submenu-item-2">
                                 Two
                             </sp-menu-item>
                             <sp-menu-item class="submenu-item-3">
@@ -476,7 +430,6 @@ 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");
@@ -491,114 +444,30 @@ describe("Submenu", () => {
         }
       ]
     });
-    await nextFrame();
-    await nextFrame();
-    const subItemBoundingRect = subItem.getBoundingClientRect();
     await sendMouse({
       steps: [
         {
           type: "move",
           position: [
-            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
+            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+            rootItemBoundingRect.top + rootItemBoundingRect.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 / 2,
+            rootItemBoundingRect.left + rootItemBoundingRect.width * 1.5,
             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(
@@ -643,15 +512,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" id="group">
+                <sp-menu-group role="none">
                     <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" id="submenu-1">
+                        <sp-menu slot="submenu">
                             <sp-menu-item id="submenu-item-2">
                                 Ft. Greene
-                                <sp-menu slot="submenu" id="submenu-2">
+                                <sp-menu slot="submenu">
                                     <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>
@@ -663,7 +532,7 @@ describe("Submenu", () => {
                     </sp-menu-item>
                     <sp-menu-item id="submenu-item-3">
                         Manhattan
-                        <sp-menu slot="submenu" id="submenu-3">
+                        <sp-menu slot="submenu">
                             <sp-menu-item disabled>SoHo</sp-menu-item>
                             <sp-menu-item>
                                 Union Square
@@ -687,27 +556,33 @@ 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;
-    expect(rootMenu1.open).to.be.true;
+    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;
-    expect(childMenu2.open).to.be.true;
-    const childMenu2Closed = oneEvent(childMenu2, "sp-closed");
-    const rootMenu1Closed = oneEvent(rootMenu1, "sp-closed");
-    const rootMenu2Opened = oneEvent(rootMenu2, "sp-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")
+    ]);
     rootMenu2.dispatchEvent(
       new PointerEvent("pointerenter", { bubbles: true })
     );
-    await childMenu2Closed;
-    await rootMenu1Closed;
-    await rootMenu2Opened;
+    await overlaysManaged;
+    activeOverlays = document.querySelectorAll("active-overlay");
+    expect(activeOverlays.length).to.equal(2);
   });
   it("closes back to the first overlay without a `root` when clicking away", async () => {
     const el = await styledFixture(html`
@@ -756,30 +631,31 @@ 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")
     ]);
-    sendMouse({
-      steps: [
-        {
-          type: "click",
-          position: [600, 5]
-        }
-      ]
-    });
+    document.body.click();
     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`
@@ -818,16 +694,22 @@ 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`
@@ -871,7 +753,6 @@ 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");
@@ -880,39 +761,33 @@ 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")
     ]);
-    const rect = ancestorItem.getBoundingClientRect();
-    await sendMouse({
-      steps: [
-        {
-          type: "click",
-          position: [
-            rect.left + rect.width / 2,
-            rect.top + rect.height / 2
-          ]
-        }
-      ]
-    });
+    ancestorItem.click();
     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: [
         {
@@ -962,6 +837,7 @@ describe("Submenu", () => {
     expect(rootItem2.open, "initially closed 2").to.be.false;
     const rootItemBoundingRect1 = rootItem1.getBoundingClientRect();
     const rootItemBoundingRect2 = rootItem2.getBoundingClientRect();
+    let activeOverlay;
     await sendMouse({
       steps: [
         {
@@ -1006,12 +882,6 @@ describe("Submenu", () => {
         }
       ]
     });
-    await nextFrame();
-    await nextFrame();
-    await nextFrame();
-    await nextFrame();
-    await nextFrame();
-    await nextFrame();
     const closed = oneEvent(rootItem2, "sp-closed");
     await sendMouse({
       steps: [
@@ -1019,12 +889,20 @@ describe("Submenu", () => {
           type: "move",
           position: [
             rootItemBoundingRect2.left + rootItemBoundingRect2.width / 2,
-            rootItemBoundingRect2.top + rootItemBoundingRect2.height * 2
+            rootItemBoundingRect2.top + 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;
   });