@spectrum-web-components/menu 0.16.0-devmode.0 → 0.16.0

package/test/submenu.test.js

@@ -1,45 +1,14 @@
-import "@spectrum-web-components/menu/sp-menu.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  nextFrame,
-  oneEvent
-} from "@open-wc/testing";
-import "@spectrum-web-components/theme/sp-theme.js";
-import "@spectrum-web-components/theme/src/themes.js";
-import { sendMouse } from "../../../test/plugins/browser.js";
-import { spy } from "sinon";
-import { sendKeys } from "@web/test-runner-commands";
-import "@spectrum-web-components/action-menu/sp-action-menu.js";
-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>
-    `);
-  document.documentElement.dir = dir;
-  return test.children[0];
-}
-describe("Submenu", () => {
-  it("selects - pointer", async () => {
-    const rootChanged = spy();
-    const submenuChanged = spy();
-    const el = await styledFixture(html`
+import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import{elementUpdated as d,expect as m,fixture as M,html as l,nextFrame as S,oneEvent as o}from"@open-wc/testing";import"@spectrum-web-components/theme/sp-theme.js";import"@spectrum-web-components/theme/src/themes.js";import{sendMouse as p}from"../../../test/plugins/browser.js";import{spy as h}from"sinon";import{sendKeys as y}from"@web/test-runner-commands";import"@spectrum-web-components/action-menu/sp-action-menu.js";import"@spectrum-web-components/menu/sp-menu-group.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";async function r(t,n="ltr"){const e=await M(l`
+        <sp-theme dir=${n} scale="medium" color="dark">${t}</sp-theme>
+    `);return document.documentElement.dir=n,e.children[0]}describe("Submenu",()=>{it("selects - pointer",async()=>{const t=h(),n=h(),e=await r(l`
                 <sp-menu
-                    @change=${(event) => {
-      rootChanged(event.target.value);
-    }}
+                    @change=${b=>{t(b.target.value)}}
                 >
                     <sp-menu-item class="root">
                         Has submenu
                         <sp-menu
                             slot="submenu"
-                            @change=${(event) => {
-      submenuChanged(event.target.value);
-    }}
+                            @change=${b=>{n(b.target.value)}}
                         >
                             <sp-menu-item class="submenu-item-1">
                                 One
@@ -53,61 +22,15 @@ describe("Submenu", () => {
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);
-    await elementUpdated(el);
-    const rootItem = el.querySelector(".root");
-    const rootItemBoundingRect = rootItem.getBoundingClientRect();
-    expect(rootItem.open).to.be.false;
-    const opened = oneEvent(rootItem, "sp-opened");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await opened;
-    expect(rootItem.open).to.be.true;
-    const item2 = document.querySelector(".submenu-item-2");
-    const item2BoundingRect = item2.getBoundingClientRect();
-    const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
-      steps: [
-        {
-          type: "click",
-          position: [
-            item2BoundingRect.left + item2BoundingRect.width / 2,
-            item2BoundingRect.top + item2BoundingRect.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;
-  });
-  it("closes deep tree on selection", async () => {
-    const rootChanged = spy();
-    const submenuChanged = spy();
-    const subSubmenuChanged = spy();
-    const el = await styledFixture(html`
+            `);await d(e);const u=e.querySelector(".root"),s=u.getBoundingClientRect();m(u.open).to.be.false;const i=o(u,"sp-opened");p({steps:[{type:"move",position:[s.left+s.width/2,s.top+s.height/2]}]}),await i,m(u.open).to.be.true;const a=document.querySelector(".submenu-item-2").getBoundingClientRect(),w=o(u,"sp-closed");p({steps:[{type:"click",position:[a.left+a.width/2,a.top+a.height/2]}]}),await w,await S(),m(t.calledWith("Has submenu"),"root changed").to.be.true,m(n.calledWith("Two"),"submenu changed").to.be.true}),it("closes deep tree on selection",async()=>{const t=h(),n=h(),e=h(),u=await r(l`
                 <sp-menu
-                    @change=${(event) => {
-      rootChanged(event.target.value);
-    }}
+                    @change=${g=>{t(g.target.value)}}
                 >
                     <sp-menu-item class="root">
                         Has submenu
                         <sp-menu
                             slot="submenu"
-                            @change=${(event) => {
-      submenuChanged(event.target.value);
-    }}
+                            @change=${g=>{n(g.target.value)}}
                         >
                             <sp-menu-item class="submenu-item-1">
                                 One
@@ -116,9 +39,7 @@ describe("Submenu", () => {
                                 Two
                                 <sp-menu
                                     slot="submenu"
-                                    @change=${(event) => {
-      subSubmenuChanged(event.target.value);
-    }}
+                                    @change=${g=>{e(g.target.value)}}
                                 >
                                     <sp-menu-item class="sub-submenu-item-1">
                                         A
@@ -137,90 +58,15 @@ describe("Submenu", () => {
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);
-    await elementUpdated(el);
-    const rootItem = el.querySelector(".root");
-    const rootItemBoundingRect = rootItem.getBoundingClientRect();
-    expect(rootItem.open).to.be.false;
-    const opened = oneEvent(rootItem, "sp-opened");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    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");
-    sendMouse({
-      steps: [
-        {
-          type: "click",
-          position: [
-            item2BoundingRect.left + item2BoundingRect.width / 2,
-            item2BoundingRect.top + item2BoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await closed;
-    await nextFrame();
-    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
-          ]
-        }
-      ]
-    });
-    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;
-  });
-  [
-    {
-      dir: "ltr",
-      openKey: "ArrowRight",
-      closeKey: "ArrowLeft"
-    },
-    {
-      dir: "rtl",
-      openKey: "ArrowLeft",
-      closeKey: "ArrowRight"
-    }
-  ].map((testData) => {
-    it(`selects - keyboard: ${testData.dir}`, async () => {
-      const rootChanged = spy();
-      const submenuChanged = spy();
-      const el = await styledFixture(html`
+            `);await d(u);const s=u.querySelector(".root"),i=s.getBoundingClientRect();m(s.open).to.be.false;const c=o(s,"sp-opened");p({steps:[{type:"move",position:[i.left+i.width/2,i.top+i.height/2]}]}),await c,m(s.open).to.be.true;const a=document.querySelector(".submenu-item-2"),w=a.getBoundingClientRect();let b=o(a,"sp-opened");p({steps:[{type:"click",position:[w.left+w.width/2,w.top+w.height/2]}]}),await b,await S(),m(a.open).to.be.true;const v=document.querySelector(".sub-submenu-item-3").getBoundingClientRect();b=o(s,"sp-closed"),p({steps:[{type:"click",position:[v.left+v.width/2,v.top+v.height/2]}]}),await b,await S(),m(t.calledWith("Has submenu"),"root changed").to.be.true,m(n.calledWith("Two"),"submenu changed").to.be.true,m(e.calledWith("C"),"sub submenu changed").to.be.true}),[{dir:"ltr",openKey:"ArrowRight",closeKey:"ArrowLeft"},{dir:"rtl",openKey:"ArrowLeft",closeKey:"ArrowRight"}].map(t=>{it(`selects - keyboard: ${t.dir}`,async()=>{const n=h(),e=h(),u=await r(l`
                     <sp-menu
-                        @change=${(event) => {
-        rootChanged(event.target.value);
-      }}
+                        @change=${a=>{n(a.target.value)}}
                     >
                         <sp-menu-item class="root">
                             Has submenu
                             <sp-menu
                                 slot="submenu"
-                                @change=${(event) => {
-        submenuChanged(event.target.value);
-      }}
+                                @change=${a=>{e(a.target.value)}}
                             >
                                 <sp-menu-item class="submenu-item-1">
                                     One
@@ -234,44 +80,7 @@ describe("Submenu", () => {
                             </sp-menu>
                         </sp-menu-item>
                     </sp-menu>
-                `, testData.dir);
-      await elementUpdated(el);
-      const rootItem = el.querySelector(".root");
-      expect(rootItem.open).to.be.false;
-      el.focus();
-      await elementUpdated(el);
-      let opened = oneEvent(rootItem, "sp-opened");
-      sendKeys({
-        press: testData.openKey
-      });
-      await opened;
-      expect(rootItem.open).to.be.true;
-      let closed = oneEvent(rootItem, "sp-closed");
-      sendKeys({
-        press: testData.closeKey
-      });
-      await closed;
-      expect(rootItem.open).to.be.false;
-      opened = oneEvent(rootItem, "sp-opened");
-      sendKeys({
-        press: testData.openKey
-      });
-      await opened;
-      expect(rootItem.open).to.be.true;
-      await sendKeys({
-        press: "ArrowDown"
-      });
-      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;
-    });
-  });
-  it("closes on `pointerleave`", async () => {
-    const el = await styledFixture(html`
+                `,t.dir);await d(u);const s=u.querySelector(".root");m(s.open).to.be.false,u.focus(),await d(u);let i=o(s,"sp-opened");y({press:t.openKey}),await i,m(s.open).to.be.true;let c=o(s,"sp-closed");y({press:t.closeKey}),await c,m(s.open).to.be.false,i=o(s,"sp-opened"),y({press:t.openKey}),await i,m(s.open).to.be.true,await y({press:"ArrowDown"}),c=o(s,"sp-closed"),y({press:"Enter"}),await c,m(n.calledWith("Has submenu"),"root changed").to.be.true,m(e.calledWith("Two"),"submenu changed").to.be.true})}),it("closes on `pointerleave`",async()=>{const t=await r(l`
                 <sp-menu>
                     <sp-menu-item class="root">
                         Has submenu
@@ -288,42 +97,7 @@ describe("Submenu", () => {
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);
-    await elementUpdated(el);
-    const rootItem = el.querySelector(".root");
-    const rootItemBoundingRect = rootItem.getBoundingClientRect();
-    expect(rootItem.open).to.be.false;
-    const opened = oneEvent(rootItem, "sp-opened");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await opened;
-    expect(rootItem.open).to.be.true;
-    const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height * 2
-          ]
-        }
-      ]
-    });
-    await closed;
-    expect(rootItem.open).to.be.false;
-  });
-  it("stays open when mousing off menu item and back again", async () => {
-    const el = await styledFixture(html`
+            `);await d(t);const n=t.querySelector(".root"),e=n.getBoundingClientRect();m(n.open).to.be.false;const u=o(n,"sp-opened");p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height/2]}]}),await u,m(n.open).to.be.true;const s=o(n,"sp-closed");p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height*2]}]}),await s,m(n.open).to.be.false}),it("stays open when mousing off menu item and back again",async()=>{const t=await r(l`
                 <sp-menu>
                     <sp-menu-item class="root">
                         Has submenu
@@ -340,63 +114,7 @@ describe("Submenu", () => {
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);
-    await elementUpdated(el);
-    const rootItem = el.querySelector(".root");
-    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.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height * 2
-          ]
-        }
-      ]
-    });
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await opened;
-    expect(rootItem.open).to.be.true;
-    const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height * 2
-          ]
-        }
-      ]
-    });
-    await closed;
-  });
-  it("stays open when mousing between menu item and submenu", async () => {
-    const el = await styledFixture(html`
+            `);await d(t);const n=t.querySelector(".root"),e=n.getBoundingClientRect();m(n.open).to.be.false;const u=o(n,"sp-opened");await p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height/2]}]}),await p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height*2]}]}),await p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height/2]}]}),await u,m(n.open).to.be.true;const s=o(n,"sp-closed");p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height*2]}]}),await s}),it("stays open when mousing between menu item and submenu",async()=>{const t=await r(l`
                 <sp-menu>
                     <sp-menu-item class="root">
                         Has submenu
@@ -413,50 +131,7 @@ describe("Submenu", () => {
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);
-    await elementUpdated(el);
-    const rootItem = el.querySelector(".root");
-    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.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height * 2
-          ]
-        }
-      ]
-    });
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width * 1.5,
-            rootItemBoundingRect.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await opened;
-    expect(rootItem.open).to.be.true;
-  });
-  it("not opens if disabled", async () => {
-    const el = await styledFixture(html`
+            `);await d(t);const n=t.querySelector(".root"),e=n.getBoundingClientRect();m(n.open).to.be.false;const u=o(n,"sp-opened");await p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height/2]}]}),await p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height*2]}]}),await p({steps:[{type:"move",position:[e.left+e.width*1.5,e.top+e.height/2]}]}),await u,m(n.open).to.be.true}),it("not opens if disabled",async()=>{const t=await r(l`
                 <sp-menu>
                     <sp-menu-item disabled class="root">
                         Has submenu
@@ -473,27 +148,7 @@ describe("Submenu", () => {
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);
-    await elementUpdated(el);
-    const rootItem = el.querySelector(".root");
-    const rootItemBoundingRect = rootItem.getBoundingClientRect();
-    expect(rootItem.open).to.be.false;
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
-            rootItemBoundingRect.top + rootItemBoundingRect.height / 2
-          ]
-        }
-      ]
-    });
-    await new Promise((r) => setTimeout(r, 200));
-    expect(rootItem.open).to.be.false;
-  });
-  it("closes all decendent submenus when closing a ancestor menu", async () => {
-    const el = await styledFixture(html`
+            `);await d(t);const n=t.querySelector(".root"),e=n.getBoundingClientRect();m(n.open).to.be.false,p({steps:[{type:"move",position:[e.left+e.width/2,e.top+e.height/2]}]}),await new Promise(u=>setTimeout(u,200)),m(n.open).to.be.false}),it("closes all decendent submenus when closing a ancestor menu",async()=>{const t=await r(l`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -531,39 +186,7 @@ describe("Submenu", () => {
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `);
-    const rootMenu1 = el.querySelector("#submenu-item-1");
-    const rootMenu2 = el.querySelector("#submenu-item-3");
-    const childMenu2 = el.querySelector("#submenu-item-2");
-    expect(el.open).to.be.false;
-    let opened = oneEvent(el, "sp-opened");
-    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 overlaysManaged = Promise.all([
-      oneEvent(childMenu2, "sp-closed"),
-      oneEvent(rootMenu1, "sp-closed"),
-      oneEvent(rootMenu2, "sp-opened")
-    ]);
-    rootMenu2.dispatchEvent(new PointerEvent("pointerenter", { bubbles: true }));
-    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`
+        `),n=t.querySelector("#submenu-item-1"),e=t.querySelector("#submenu-item-3"),u=t.querySelector("#submenu-item-2");m(t.open).to.be.false;let s=o(t,"sp-opened");t.click(),await s,m(t.open).to.be.true;let i=document.querySelectorAll("active-overlay");m(i.length).to.equal(1),s=o(n,"sp-opened"),n.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await s,i=document.querySelectorAll("active-overlay"),m(i.length).to.equal(2),s=o(u,"sp-opened"),u.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await s,i=document.querySelectorAll("active-overlay"),m(i.length).to.equal(3);const c=Promise.all([o(u,"sp-closed"),o(n,"sp-closed"),o(e,"sp-opened")]);e.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await c,i=document.querySelectorAll("active-overlay"),m(i.length).to.equal(2)}),it("closes back to the first overlay without a `root` when clicking away",async()=>{const t=await r(l`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -601,38 +224,7 @@ describe("Submenu", () => {
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `);
-    const rootMenu1 = el.querySelector("#submenu-item-1");
-    const childMenu2 = el.querySelector("#submenu-item-2");
-    expect(el.open).to.be.false;
-    let opened = oneEvent(el, "sp-opened");
-    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();
-    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`
+        `),n=t.querySelector("#submenu-item-1"),e=t.querySelector("#submenu-item-2");m(t.open).to.be.false;let u=o(t,"sp-opened");t.click(),await u,m(t.open).to.be.true;let s=document.querySelectorAll("active-overlay");m(s.length).to.equal(1),u=o(n,"sp-opened"),n.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await u,s=document.querySelectorAll("active-overlay"),m(s.length).to.equal(2),u=o(e,"sp-opened"),e.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await u,s=document.querySelectorAll("active-overlay"),m(s.length).to.equal(3);const i=Promise.all([o(e,"sp-closed"),o(n,"sp-closed"),o(t,"sp-closed")]);document.body.click(),await i,s=document.querySelectorAll("active-overlay"),m(s.length).to.equal(0)}),it("closes decendent menus when Menu Item in ancestor without a submenu is pointerentered",async()=>{const t=await r(l`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -660,29 +252,7 @@ describe("Submenu", () => {
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `);
-    const rootMenu = el.querySelector("#submenu-item-1");
-    const noSubmenu = el.querySelector("#no-submenu");
-    expect(el.open).to.be.false;
-    let opened = oneEvent(el, "sp-opened");
-    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`
+        `),n=t.querySelector("#submenu-item-1"),e=t.querySelector("#no-submenu");m(t.open).to.be.false;let u=o(t,"sp-opened");t.click(),await u,m(t.open).to.be.true;let s=document.querySelectorAll("active-overlay");m(s.length).to.equal(1),u=o(n,"sp-opened"),n.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await u,s=document.querySelectorAll("active-overlay"),m(s.length).to.equal(2);const i=o(n,"sp-closed");e.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await i,s=document.querySelectorAll("active-overlay"),m(s.length).to.equal(1)}),it("closes decendent menus when Menu Item in ancestor is clicked",async()=>{const t=await r(l`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -722,36 +292,5 @@ describe("Submenu", () => {
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `);
-    const rootMenu1 = el.querySelector("#submenu-item-1");
-    const childMenu2 = el.querySelector("#submenu-item-2");
-    const ancestorItem = el.querySelector("#ancestor-item");
-    expect(el.open).to.be.false;
-    let opened = oneEvent(el, "sp-opened");
-    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();
-    await closed;
-    activeOverlays = document.querySelectorAll("active-overlay");
-    expect(activeOverlays.length).to.equal(0);
-  });
-});
+        `),n=t.querySelector("#submenu-item-1"),e=t.querySelector("#submenu-item-2"),u=t.querySelector("#ancestor-item");m(t.open).to.be.false;let s=o(t,"sp-opened");t.click(),await s,m(t.open).to.be.true;let i=document.querySelectorAll("active-overlay");m(i.length).to.equal(1),s=o(n,"sp-opened"),n.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await s,i=document.querySelectorAll("active-overlay"),m(i.length).to.equal(2),s=o(e,"sp-opened"),e.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0})),await s,i=document.querySelectorAll("active-overlay"),m(i.length).to.equal(3);const c=Promise.all([o(e,"sp-closed"),o(n,"sp-closed"),o(t,"sp-closed")]);u.click(),await c,i=document.querySelectorAll("active-overlay"),m(i.length).to.equal(0)})});
 //# sourceMappingURL=submenu.test.js.map