@spectrum-web-components/overlay 0.19.4-overlay.9 → 0.19.4

package/test/overlay.test.js

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