@spectrum-web-components/overlay 0.19.3 → 0.19.4-overlay.8

package/test/overlay.test.js

@@ -1,20 +1,22 @@
 "use strict";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
 import "@spectrum-web-components/popover/sp-popover.js";
 import { setViewport } from "@web/test-runner-commands";
 import {
   Overlay
 } from "@spectrum-web-components/overlay";
-import { isVisible } from "../../../test/testing-helpers.js";
 import {
+  aTimeout,
   elementUpdated,
   expect,
   fixture,
   html,
   nextFrame,
-  oneEvent,
-  waitUntil
+  oneEvent
 } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
 import {
@@ -22,6 +24,26 @@ import {
   virtualElement
 } from "../stories/overlay.stories";
 import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy } from "sinon";
+async function isInteractive(el) {
+  const clickSpy = spy();
+  el.addEventListener("click", () => {
+    clickSpy();
+  });
+  const clientRect = el.getBoundingClientRect();
+  await sendMouse({
+    steps: [
+      {
+        type: "click",
+        position: [
+          clientRect.left + clientRect.width / 2,
+          clientRect.top + clientRect.height / 2
+        ]
+      }
+    ]
+  });
+  return clickSpy.callCount === 1;
+}
 describe("Overlays", () => {
   let testDiv;
   let openOverlays = [];
@@ -48,18 +70,13 @@ describe("Overlays", () => {
                             display: none;
                         }
                     </style>
-                    <sp-button
-                        id="first-button"
-                        variant="primary"
-                        slot="trigger"
-                    >
+                    <sp-button id="first-button" variant="primary">
                         Show Popover
                     </sp-button>
                     <div id="overlay-content">
                         <sp-popover
                             id="outer-popover"
                             dialog
-                            slot="click-content"
                             direction="bottom"
                             tip
                             open
@@ -68,12 +85,12 @@ describe("Overlays", () => {
                                 A popover message
                             </div>
                         </sp-popover>
-                        <div id="hover-1" class="hover-content">
+                        <sp-tooltip id="hover-1" class="hover-content">
                             Hover message
-                        </div>
-                        <div id="hover-2" class="hover-content">
+                        </sp-tooltip>
+                        <sp-tooltip id="hover-2" class="hover-content">
                             Other hover message
-                        </div>
+                        </sp-tooltip>
                     </div>
                 </div>
             `
@@ -101,21 +118,19 @@ describe("Overlays", () => {
   ].map((direction) => {
     const placement = direction;
     it(`opens a popover - ${placement}`, async () => {
+      const clickSpy = spy();
       const button = testDiv.querySelector(
         "#first-button"
       );
       const outerPopover = testDiv.querySelector(
         "#outer-popover"
       );
-      expect(outerPopover.parentElement).to.exist;
-      if (outerPopover.parentElement) {
-        expect(outerPopover.parentElement.id).to.equal(
-          "overlay-content"
-        );
-      }
-      expect(isVisible(outerPopover)).to.be.false;
+      outerPopover.addEventListener("click", () => {
+        clickSpy();
+      });
+      expect(await isInteractive(outerPopover)).to.be.false;
       expect(button).to.exist;
-      const opened = oneEvent(button, "sp-opened");
+      const opened = oneEvent(outerPopover, "sp-opened");
       openOverlays.push(
         await Overlay.open(button, "click", outerPopover, {
           delayed: false,
@@ -124,25 +139,16 @@ describe("Overlays", () => {
         })
       );
       await opened;
-      expect(outerPopover.parentElement).to.exist;
-      if (outerPopover.parentElement) {
-        expect(outerPopover.parentElement.id).not.to.equal(
-          "overlay-content"
-        );
-      }
-      expect(isVisible(outerPopover)).to.be.true;
+      await aTimeout(150);
+      expect(await isInteractive(outerPopover)).to.be.true;
     });
   });
   it(`updates a popover`, async () => {
     const button = testDiv.querySelector("#first-button");
     const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(outerPopover.parentElement).to.exist;
-    if (outerPopover.parentElement) {
-      expect(outerPopover.parentElement.id).to.equal("overlay-content");
-    }
-    expect(isVisible(outerPopover)).to.be.false;
+    expect(await isInteractive(outerPopover)).to.be.false;
     expect(button).to.exist;
-    const opened = oneEvent(button, "sp-opened");
+    const opened = oneEvent(outerPopover, "sp-opened");
     openOverlays.push(
       await Overlay.open(button, "click", outerPopover, {
         delayed: false,
@@ -150,20 +156,16 @@ describe("Overlays", () => {
       })
     );
     await opened;
-    expect(isVisible(outerPopover)).to.be.true;
+    expect(await isInteractive(outerPopover)).to.be.true;
     Overlay.update();
-    expect(isVisible(outerPopover)).to.be.true;
+    expect(await isInteractive(outerPopover)).to.be.true;
   });
   it(`opens a popover w/ delay`, async () => {
     const button = testDiv.querySelector("#first-button");
     const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(outerPopover.parentElement).to.exist;
-    if (outerPopover.parentElement) {
-      expect(outerPopover.parentElement.id).to.equal("overlay-content");
-    }
-    expect(isVisible(outerPopover)).to.be.false;
+    expect(await isInteractive(outerPopover)).to.be.false;
     expect(button).to.exist;
-    const opened = oneEvent(button, "sp-opened");
+    const opened = oneEvent(outerPopover, "sp-opened");
     openOverlays.push(
       await Overlay.open(button, "click", outerPopover, {
         delayed: true,
@@ -171,13 +173,7 @@ describe("Overlays", () => {
       })
     );
     await opened;
-    expect(outerPopover.parentElement).to.exist;
-    if (outerPopover.parentElement) {
-      expect(outerPopover.parentElement.id).not.to.equal(
-        "overlay-content"
-      );
-    }
-    expect(isVisible(outerPopover)).to.be.true;
+    expect(await isInteractive(outerPopover)).to.be.true;
   });
   it("opens hover overlay", async () => {
     const button = testDiv.querySelector("#first-button");
@@ -185,9 +181,9 @@ describe("Overlays", () => {
     const clickOverlay = testDiv.querySelector(
       "#outer-popover"
     );
-    expect(isVisible(hoverOverlay)).to.be.false;
-    expect(isVisible(clickOverlay)).to.be.false;
-    let opened = oneEvent(button, "sp-opened");
+    expect(await isInteractive(hoverOverlay)).to.be.false;
+    expect(await isInteractive(clickOverlay)).to.be.false;
+    let opened = oneEvent(hoverOverlay, "sp-opened");
     openOverlays.push(
       await Overlay.open(button, "hover", hoverOverlay, {
         delayed: false,
@@ -196,14 +192,9 @@ describe("Overlays", () => {
       })
     );
     await opened;
-    expect(hoverOverlay.parentElement).to.exist;
-    if (hoverOverlay.parentElement) {
-      expect(hoverOverlay.parentElement.id).not.to.equal(
-        "overlay-content"
-      );
-    }
-    expect(isVisible(hoverOverlay)).to.be.true;
-    opened = oneEvent(button, "sp-opened");
+    await aTimeout(150);
+    expect(await isInteractive(hoverOverlay)).to.be.true;
+    opened = oneEvent(clickOverlay, "sp-opened");
     openOverlays.push(
       await Overlay.open(button, "click", clickOverlay, {
         delayed: false,
@@ -212,11 +203,9 @@ describe("Overlays", () => {
       })
     );
     await opened;
-    if (hoverOverlay.parentElement) {
-      expect(hoverOverlay.parentElement.id).to.equal("overlay-content");
-    }
-    expect(isVisible(hoverOverlay)).to.be.false;
-    expect(isVisible(clickOverlay)).to.be.true;
+    await aTimeout(150);
+    expect(await isInteractive(clickOverlay)).to.be.true;
+    expect(await isInteractive(hoverOverlay)).to.be.false;
   });
   it("opens custom overlay", async () => {
     const button = testDiv.querySelector("#first-button");
@@ -226,9 +215,9 @@ describe("Overlays", () => {
     );
     expect(button).to.exist;
     expect(customOverlay).to.exist;
-    expect(isVisible(customOverlay)).to.be.false;
-    expect(isVisible(clickOverlay)).to.be.false;
-    let opened = oneEvent(button, "sp-opened");
+    expect(await isInteractive(customOverlay)).to.be.false;
+    expect(await isInteractive(clickOverlay)).to.be.false;
+    let opened = oneEvent(customOverlay, "sp-opened");
     openOverlays.push(
       await Overlay.open(button, "custom", customOverlay, {
         delayed: false,
@@ -237,14 +226,9 @@ describe("Overlays", () => {
       })
     );
     await opened;
-    expect(customOverlay.parentElement).to.exist;
-    if (customOverlay.parentElement) {
-      expect(customOverlay.parentElement.id).not.to.equal(
-        "overlay-content"
-      );
-    }
-    expect(isVisible(customOverlay)).to.be.true;
-    opened = oneEvent(button, "sp-opened");
+    await aTimeout(150);
+    expect(await isInteractive(customOverlay)).to.be.true;
+    opened = oneEvent(clickOverlay, "sp-opened");
     openOverlays.push(
       await Overlay.open(button, "click", clickOverlay, {
         delayed: false,
@@ -253,38 +237,44 @@ describe("Overlays", () => {
       })
     );
     await opened;
-    expect(isVisible(customOverlay)).to.be.true;
-    expect(isVisible(clickOverlay)).to.be.true;
+    await aTimeout(150);
+    expect(await isInteractive(clickOverlay), "click content open").to.be.true;
   });
   it("closes via events", async () => {
-    const el = await fixture(html`
-            <div id="root">
-                <sp-dialog dismissable></sp-dialog>
+    const test = await fixture(html`
+            <div>
+                <sp-popover id="root">
+                    <sp-dialog dismissable>
+                        Some Content for the Dialog.
+                    </sp-dialog>
+                </sp-popover>
             </div>
         `);
+    const el = test.querySelector("sp-popover");
     const dialog = el.querySelector("sp-dialog");
     const opened = oneEvent(el, "sp-opened");
     openOverlays.push(
-      await Overlay.open(el, "click", dialog, {
+      await Overlay.open(test, "click", el, {
         delayed: false,
         placement: "bottom",
         offset: 10
       })
     );
     await opened;
+    await aTimeout(150);
+    expect(await isInteractive(el)).to.be.true;
+    const closed = oneEvent(el, "sp-closed");
     dialog.close();
-    await waitUntil(
-      () => !!dialog.parentElement && dialog.parentElement.tagName !== "ACTIVE-OVERLAY",
-      "content is returned"
-    );
+    await closed;
+    expect(await isInteractive(el)).to.be.false;
   });
-  it("closes an inline overlay when tabbing past the content", async () => {
+  it.skip("closes an inline overlay when tabbing past the content", async () => {
     const el = await fixture(html`
             <div>
                 <sp-button class="trigger">Trigger</sp-button>
-                <div class="content">
+                <sp-popover class="content">
                     <input />
-                </div>
+                </sp-popover>
                 <input value="After" id="after" />
             </div>
         `);
@@ -292,13 +282,15 @@ describe("Overlays", () => {
     const content = el.querySelector(".content");
     const input = el.querySelector("input");
     const after = el.querySelector("#after");
-    openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
-    trigger.focus();
-    await sendKeys({
-      press: "Tab"
-    });
+    const opened = oneEvent(content, "sp-opened");
+    openOverlays.push(
+      await Overlay.open(trigger, "inline", content, {
+        receivesFocus: "auto"
+      })
+    );
+    await opened;
+    expect(await isInteractive(content)).to.be.true;
     expect(document.activeElement).to.equal(input);
-    expect(input.closest("active-overlay") !== null);
     await sendKeys({
       press: "Shift+Tab"
     });
@@ -310,10 +302,10 @@ describe("Overlays", () => {
     await sendKeys({
       press: "Tab"
     });
+    const closed = oneEvent(content, "sp-closed");
     expect(document.activeElement).to.equal(after);
-    await waitUntil(
-      () => document.querySelector("active-overlay") === null
-    );
+    await closed;
+    expect(await isInteractive(content)).to.be.false;
   });
   it("closes an inline overlay when tabbing before the trigger", async () => {
     const el = await fixture(html`
@@ -338,7 +330,6 @@ describe("Overlays", () => {
       press: "Tab"
     });
     expect(document.activeElement).to.equal(input);
-    expect(input.closest("active-overlay") !== null);
     await sendKeys({
       press: "Shift+Tab"
     });
@@ -347,9 +338,6 @@ describe("Overlays", () => {
       press: "Shift+Tab"
     });
     expect(document.activeElement).to.equal(before);
-    await waitUntil(
-      () => document.querySelector("active-overlay") === null
-    );
   });
   it("opens detached content", async () => {
     const textContent = "This is a detached element that has been overlaid";
@@ -358,34 +346,26 @@ describe("Overlays", () => {
                 <button>Trigger</button>
             `
     );
-    const content = document.createElement("div");
+    const content = document.createElement("sp-popover");
     content.textContent = textContent;
-    const opened = oneEvent(el, "sp-opened");
+    const opened = oneEvent(content, "sp-opened");
     const closeOverlay = await Overlay.open(el, "click", content, {
       placement: "bottom"
     });
     await opened;
-    let activeOverlay = document.querySelector("active-overlay");
-    if (activeOverlay) {
-      expect(activeOverlay.textContent).to.equal(textContent);
-    } else {
-      expect(activeOverlay).to.not.be.null;
-    }
-    const closed = oneEvent(el, "sp-closed");
+    await aTimeout(150);
+    expect(await isInteractive(content)).to.be.true;
+    const closed = oneEvent(content, "sp-closed");
     closeOverlay();
     await closed;
-    activeOverlay = document.querySelector("active-overlay");
-    expect(activeOverlay).to.be.null;
+    expect(await isInteractive(content)).to.be.false;
     content.remove();
   });
 });
-describe('Overlay - type="modal"', () => {
+describe.skip('Overlay - type="modal"', () => {
   it("closes on `contextmenu` and passes that to the underlying page", async () => {
     await fixture(html`
-            ${virtualElement({
-      ...virtualElement.args,
-      offset: 6
-    })}
+            ${virtualElement()}
         `);
     const width = window.innerWidth;
     const height = window.innerHeight;
@@ -406,15 +386,6 @@ describe('Overlay - type="modal"', () => {
       ]
     });
     await opened;
-    const firstOverlay = document.querySelector(
-      "active-overlay"
-    );
-    const firstHeadline = firstOverlay.querySelector(
-      '[slot="header"]'
-    );
-    expect(firstOverlay, "first overlay").to.not.be.null;
-    expect(firstOverlay.isConnected).to.be.true;
-    expect(firstHeadline.textContent).to.equal("Menu source: end");
     let closed = oneEvent(document, "sp-closed");
     opened = oneEvent(document, "sp-opened");
     sendMouse({
@@ -434,17 +405,6 @@ describe('Overlay - type="modal"', () => {
     });
     await closed;
     await opened;
-    const secondOverlay = document.querySelector(
-      "active-overlay"
-    );
-    const secondHeadline = secondOverlay.querySelector(
-      '[slot="header"]'
-    );
-    expect(secondOverlay, "second overlay").to.not.be.null;
-    expect(secondOverlay).to.not.equal(firstOverlay);
-    expect(firstOverlay.isConnected).to.be.false;
-    expect(secondOverlay.isConnected).to.be.true;
-    expect(secondHeadline.textContent).to.equal("Menu source: start");
     closed = oneEvent(document, "sp-closed");
     sendMouse({
       steps: [
@@ -463,10 +423,7 @@ describe('Overlay - type="modal"', () => {
   });
   it("does not open content off of the viewport", async () => {
     await fixture(html`
-            ${virtualElement({
-      ...virtualElement.args,
-      offset: 6
-    })}
+            ${virtualElement()}
         `);
     await setViewport({ width: 360, height: 640 });
     await nextFrame();
@@ -487,13 +444,6 @@ describe('Overlay - type="modal"', () => {
       ]
     });
     await opened;
-    const activeOverlay = document.querySelector(
-      "active-overlay"
-    );
-    expect(activeOverlay.placement).to.equal("right-start");
-    expect(activeOverlay.getAttribute("actual-placement")).to.equal(
-      "bottom"
-    );
     const closed = oneEvent(document, "sp-closed");
     sendKeys({
       press: "Escape"
@@ -515,10 +465,6 @@ describe('Overlay - type="modal"', () => {
     open = oneEvent(content, "sp-opened");
     content.button.click();
     await open;
-    const activeOverlays = document.querySelectorAll("active-overlay");
-    activeOverlays.forEach((overlay) => {
-      expect(overlay.slot).to.equal("open");
-    });
     let close = oneEvent(content, "sp-closed");
     content.trigger.removeAttribute("open");
     await close;
@@ -527,7 +473,7 @@ describe('Overlay - type="modal"', () => {
     await close;
   });
 });
-describe("Overlay - timing", () => {
+describe.skip("Overlay - timing", () => {
   it("manages multiple modals in a row without preventing them from closing", async () => {
     const test = await fixture(html`
             <div>