@spectrum-web-components/menu 0.40.2 → 0.40.4

package/test/submenu.test.js

@@ -5,65 +5,23 @@ import {
   aTimeout,
   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 { fixture } from "../../../test/testing-helpers.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/overlay/sp-overlay.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
-import { isWebKit } from "@spectrum-web-components/shared";
-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>
-    `);
-  document.documentElement.dir = dir;
-  return test.children[0];
-}
 describe("Submenu", () => {
   it("selects - pointer", async () => {
     const rootChanged = spy();
     const submenuChanged = spy();
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu
                     @change=${(event) => {
@@ -99,7 +57,7 @@ describe("Submenu", () => {
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
     expect(rootItem.open).to.be.false;
     const opened = oneEvent(rootItem, "sp-opened");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "move",
@@ -115,7 +73,7 @@ describe("Submenu", () => {
     const item2 = document.querySelector(".submenu-item-2");
     const item2BoundingRect = item2.getBoundingClientRect();
     const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "click",
@@ -127,14 +85,17 @@ describe("Submenu", () => {
       ]
     });
     await closed;
-    expect(submenuChanged.withArgs("Two").calledOnce, "submenu changed").to.be.true;
+    expect(
+      submenuChanged.withArgs("Two").calledOnce,
+      `submenu changed ${submenuChanged.callCount} times`
+    ).to.be.true;
     expect(rootChanged.withArgs("Has submenu").calledOnce, "root changed").to.be.true;
   });
-  it("closes deep tree on selection", async () => {
+  it("closes deep tree on selection", async function() {
     const rootChanged = spy();
     const submenuChanged = spy();
     const subSubmenuChanged = spy();
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu
                     @change=${(event) => {
@@ -185,7 +146,7 @@ describe("Submenu", () => {
     const itemC = document.querySelector(".sub-submenu-item-3");
     expect(rootItem.open).to.be.false;
     let opened = oneEvent(rootItem, "sp-opened");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "move",
@@ -200,10 +161,10 @@ describe("Submenu", () => {
     expect(rootItem.open).to.be.true;
     const item2BoundingRect = item2.getBoundingClientRect();
     opened = oneEvent(item2, "sp-opened");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
-          type: "click",
+          type: "move",
           position: [
             item2BoundingRect.left + item2BoundingRect.width / 2,
             item2BoundingRect.top + item2BoundingRect.height / 2
@@ -214,7 +175,18 @@ describe("Submenu", () => {
     await opened;
     expect(item2.open).to.be.true;
     const closed = oneEvent(rootItem, "sp-closed");
-    itemC.click();
+    const itemCBoundingRect = itemC.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            itemCBoundingRect.left + itemCBoundingRect.width / 2,
+            itemCBoundingRect.top + itemCBoundingRect.height / 2
+          ]
+        }
+      ]
+    });
     await closed;
     expect(rootChanged.calledWith("Has submenu"), "root changed").to.be.true;
     expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
@@ -236,7 +208,7 @@ describe("Submenu", () => {
       var _a, _b;
       const rootChanged = spy();
       const submenuChanged = spy();
-      const el = await styledFixture(
+      const el = await fixture(
         html`
                     <sp-menu
                         id="base"
@@ -323,7 +295,7 @@ describe("Submenu", () => {
     });
   });
   it("closes on `pointerleave`", async () => {
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu>
                     <sp-menu-item class="root">
@@ -348,7 +320,7 @@ describe("Submenu", () => {
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
     expect(rootItem.open).to.be.false;
     const opened = oneEvent(rootItem, "sp-opened");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "move",
@@ -362,7 +334,7 @@ describe("Submenu", () => {
     await opened;
     expect(rootItem.open).to.be.true;
     const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "move",
@@ -377,7 +349,7 @@ describe("Submenu", () => {
     expect(rootItem.open).to.be.false;
   });
   it("stays open when mousing off menu item and back again", async () => {
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu>
                     <sp-menu-item class="root">
@@ -438,7 +410,7 @@ describe("Submenu", () => {
     await opened;
     expect(rootItem.open).to.be.true;
     const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "move",
@@ -451,9 +423,9 @@ describe("Submenu", () => {
     });
     await closed;
   });
-  it("continues to open when mousing between menu item and submenu", async () => {
+  it("continues to open when mousing between menu item and submenu", async function() {
     const clickSpy = spy();
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu>
                     <sp-menu-item class="root">
@@ -495,6 +467,12 @@ describe("Submenu", () => {
     });
     await nextFrame();
     await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
     const subItemBoundingRect = subItem.getBoundingClientRect();
     await sendMouse({
       steps: [
@@ -512,7 +490,7 @@ describe("Submenu", () => {
     await aTimeout(150);
     expect(rootItem.open).to.be.true;
     const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "click",
@@ -528,7 +506,7 @@ describe("Submenu", () => {
   });
   it("stays open when mousing between menu item and submenu", async () => {
     const clickSpy = spy();
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu>
                     <sp-menu-item class="root">
@@ -588,7 +566,7 @@ describe("Submenu", () => {
     await aTimeout(150);
     expect(rootItem.open).to.be.true;
     const closed = oneEvent(rootItem, "sp-closed");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "click",
@@ -603,7 +581,7 @@ describe("Submenu", () => {
     expect(clickSpy.callCount).to.equal(1);
   });
   it("not opens if disabled", async () => {
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu>
                     <sp-menu-item disabled class="root">
@@ -627,7 +605,7 @@ describe("Submenu", () => {
     const rootItem = el.querySelector(".root");
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
     expect(rootItem.open).to.be.false;
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "move",
@@ -642,7 +620,7 @@ describe("Submenu", () => {
     expect(rootItem.open).to.be.false;
   });
   it("closes all decendent submenus when closing a ancestor menu", async () => {
-    const el = await styledFixture(html`
+    const el = await fixture(html`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none" id="group">
@@ -712,10 +690,7 @@ describe("Submenu", () => {
     await rootMenu2Opened;
   });
   it("closes back to the first overlay without a `root` when clicking away", async function() {
-    if (isWebKit()) {
-      this.skip();
-    }
-    const el = await styledFixture(html`
+    const el = await fixture(html`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -776,7 +751,7 @@ describe("Submenu", () => {
       oneEvent(rootMenu1, "sp-closed"),
       oneEvent(el, "sp-closed")
     ]);
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "click",
@@ -787,7 +762,7 @@ describe("Submenu", () => {
     await closed;
   });
   it("closes decendent menus when Menu Item in ancestor without a submenu is pointerentered", async () => {
-    const el = await styledFixture(html`
+    const el = await fixture(html`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -835,10 +810,7 @@ describe("Submenu", () => {
     await closed;
   });
   it("closes decendent menus when Menu Item in ancestor is clicked", async function() {
-    if (isWebKit()) {
-      this.skip();
-    }
-    const el = await styledFixture(html`
+    const el = await fixture(html`
             <sp-action-menu>
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
                 <sp-menu-group role="none">
@@ -880,6 +852,7 @@ describe("Submenu", () => {
             </sp-action-menu>
         `);
     await nextFrame();
+    await nextFrame();
     const rootMenu1 = el.querySelector("#submenu-item-1");
     const childMenu2 = el.querySelector("#submenu-item-2");
     const ancestorItem = el.querySelector("#ancestor-item");
@@ -929,7 +902,7 @@ describe("Submenu", () => {
         }
       ]
     });
-    const el = await styledFixture(
+    const el = await fixture(
       html`
                 <sp-menu>
                     <sp-menu-item class="root-1">