@spectrum-web-components/menu 0.16.0 → 0.16.1

package/test/submenu.test.js

@@ -1,14 +1,47 @@
-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`
+"use strict";
+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`
                 <sp-menu
-                    @change=${b=>{t(b.target.value)}}
+                    @change=${(event) => {
+        rootChanged(event.target.value);
+      }}
                 >
                     <sp-menu-item class="root">
                         Has submenu
                         <sp-menu
                             slot="submenu"
-                            @change=${b=>{n(b.target.value)}}
+                            @change=${(event) => {
+        submenuChanged(event.target.value);
+      }}
                         >
                             <sp-menu-item class="submenu-item-1">
                                 One
@@ -22,15 +55,63 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);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`
+            `
+    );
+    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`
                 <sp-menu
-                    @change=${g=>{t(g.target.value)}}
+                    @change=${(event) => {
+        rootChanged(event.target.value);
+      }}
                 >
                     <sp-menu-item class="root">
                         Has submenu
                         <sp-menu
                             slot="submenu"
-                            @change=${g=>{n(g.target.value)}}
+                            @change=${(event) => {
+        submenuChanged(event.target.value);
+      }}
                         >
                             <sp-menu-item class="submenu-item-1">
                                 One
@@ -39,7 +120,9 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                                 Two
                                 <sp-menu
                                     slot="submenu"
-                                    @change=${g=>{e(g.target.value)}}
+                                    @change=${(event) => {
+        subSubmenuChanged(event.target.value);
+      }}
                                 >
                                     <sp-menu-item class="sub-submenu-item-1">
                                         A
@@ -58,15 +141,92 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);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`
+            `
+    );
+    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`
                     <sp-menu
-                        @change=${a=>{n(a.target.value)}}
+                        @change=${(event) => {
+          rootChanged(event.target.value);
+        }}
                     >
                         <sp-menu-item class="root">
                             Has submenu
                             <sp-menu
                                 slot="submenu"
-                                @change=${a=>{e(a.target.value)}}
+                                @change=${(event) => {
+          submenuChanged(event.target.value);
+        }}
                             >
                                 <sp-menu-item class="submenu-item-1">
                                     One
@@ -80,7 +240,47 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                             </sp-menu>
                         </sp-menu-item>
                     </sp-menu>
-                `,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`
+                `,
+        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`
                 <sp-menu>
                     <sp-menu-item class="root">
                         Has submenu
@@ -97,7 +297,44 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);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`
+            `
+    );
+    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`
                 <sp-menu>
                     <sp-menu-item class="root">
                         Has submenu
@@ -114,7 +351,65 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);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`
+            `
+    );
+    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`
                 <sp-menu>
                     <sp-menu-item class="root">
                         Has submenu
@@ -131,7 +426,52 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);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`
+            `
+    );
+    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`
                 <sp-menu>
                     <sp-menu-item disabled class="root">
                         Has submenu
@@ -148,7 +488,28 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                         </sp-menu>
                     </sp-menu-item>
                 </sp-menu>
-            `);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`
+            `
+    );
+    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`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -186,7 +547,45 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `),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`
+        `);
+    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`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -224,7 +623,42 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `),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`
+        `);
+    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`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -252,7 +686,33 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `),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`
+        `);
+    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`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -292,5 +752,40 @@ import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components
                     </sp-menu-item>
                 </sp-menu-group>
             </sp-action-menu>
-        `),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)})});
+        `);
+    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);
+  });
+});
 //# sourceMappingURL=submenu.test.js.map