@spectrum-web-components/overlay 0.17.1-devmode2.0 → 0.18.1

package/test/overlay-trigger.test.js

@@ -1,3 +1,4 @@
+"use strict";
 import { isVisible } from "../../../test/testing-helpers.js";
 import {
   aTimeout,
@@ -39,7 +40,8 @@ describe("Overlay Trigger", () => {
     let outerClickContent;
     let hoverContent;
     beforeEach(async () => {
-      testDiv = await fixture(html`
+      testDiv = await fixture(
+        html`
                     <div>
                         <style>
                             body {
@@ -104,14 +106,23 @@ describe("Overlay Trigger", () => {
                             </div>
                         </overlay-trigger>
                     </div>
-                `);
-      innerTrigger = testDiv.querySelector("#inner-trigger");
+                `
+      );
+      innerTrigger = testDiv.querySelector(
+        "#inner-trigger"
+      );
       outerTrigger = testDiv.querySelector("#trigger");
       innerButton = testDiv.querySelector("#inner-button");
       outerButton = testDiv.querySelector("#outer-button");
-      innerClickContent = testDiv.querySelector("#inner-popover");
-      outerClickContent = testDiv.querySelector("#outer-popover");
-      hoverContent = testDiv.querySelector("#hover-content");
+      innerClickContent = testDiv.querySelector(
+        "#inner-popover"
+      );
+      outerClickContent = testDiv.querySelector(
+        "#outer-popover"
+      );
+      hoverContent = testDiv.querySelector(
+        "#hover-content"
+      );
     });
     afterEach(async () => {
       if (outerTrigger.open) {
@@ -132,7 +143,9 @@ describe("Overlay Trigger", () => {
         throw new Error("popover is not an instance of Popover");
       expect(outerClickContent).to.exist;
       expect(outerClickContent.shadowRoot).to.exist;
-      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(
+        OverlayTrigger
+      );
     });
     it("opens a popover", async () => {
       expect(isVisible(outerClickContent)).to.be.false;
@@ -140,7 +153,9 @@ describe("Overlay Trigger", () => {
       const open = oneEvent(outerTrigger, "sp-opened");
       outerButton.click();
       await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent)).to.be.true;
     });
     it("[disabled] closes a popover", async () => {
@@ -150,7 +165,9 @@ describe("Overlay Trigger", () => {
       const opened = oneEvent(outerButton, "sp-opened");
       outerButton.click();
       await opened;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent)).to.be.true;
       const closed = oneEvent(outerButton, "sp-closed");
       outerTrigger.disabled = true;
@@ -164,11 +181,15 @@ describe("Overlay Trigger", () => {
       const open = oneEvent(outerTrigger, "sp-opened");
       outerButton.click();
       await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent)).to.be.true;
       window.dispatchEvent(new Event("resize"));
       window.dispatchEvent(new Event("resize"));
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent)).to.be.true;
     });
     ["modal", "replace", "inline"].map((type) => {
@@ -180,7 +201,9 @@ describe("Overlay Trigger", () => {
         const opened = oneEvent(outerTrigger, "sp-opened");
         outerButton.click();
         await opened;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+          OverlayTrigger
+        );
         expect(isVisible(outerClickContent)).to.be.true;
       });
     });
@@ -191,13 +214,17 @@ describe("Overlay Trigger", () => {
       const open = oneEvent(outerTrigger, "sp-opened");
       outerButton.click();
       await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent), "outer popover visible").to.be.true;
       expect(isVisible(hoverContent), "hover popover still not visible").to.be.false;
-      outerButton.dispatchEvent(new Event("mouseenter", {
-        bubbles: true,
-        composed: true
-      }));
+      outerButton.dispatchEvent(
+        new Event("mouseenter", {
+          bubbles: true,
+          composed: true
+        })
+      );
       await nextFrame();
       expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
       expect(isVisible(outerClickContent), "outer popover visible again").to.be.true;
@@ -205,26 +232,36 @@ describe("Overlay Trigger", () => {
     });
     it("does not open a popover when [disabled]", async () => {
       const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-      const triggerZone = root.querySelector("#trigger");
+      const triggerZone = root.querySelector(
+        "#trigger"
+      );
       expect(outerTrigger.disabled).to.be.false;
       let open = oneEvent(outerTrigger, "sp-opened");
       outerButton.click();
       await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       let closed = oneEvent(outerTrigger, "sp-closed");
       document.body.click();
       await closed;
-      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(
+        OverlayTrigger
+      );
       outerTrigger.disabled = true;
       await elementUpdated(outerTrigger);
       expect(outerTrigger.disabled).to.be.true;
       expect(outerTrigger.hasAttribute("disabled")).to.be.true;
       outerButton.click();
       await aTimeout(200);
-      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(
+        OverlayTrigger
+      );
       triggerZone.dispatchEvent(new Event("mouseenter"));
       await aTimeout(200);
-      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(
+        OverlayTrigger
+      );
       outerTrigger.disabled = false;
       await elementUpdated(outerTrigger);
       expect(outerTrigger.disabled).to.be.false;
@@ -232,11 +269,15 @@ describe("Overlay Trigger", () => {
       open = oneEvent(outerTrigger, "sp-opened");
       outerButton.click();
       await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       closed = oneEvent(outerTrigger, "sp-closed");
       outerButton.click();
       await closed;
-      expect(outerClickContent.parentElement).to.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.be.an.instanceOf(
+        OverlayTrigger
+      );
     });
     it("opens a nested popover", async () => {
       expect(isVisible(outerClickContent)).to.be.false;
@@ -245,13 +286,17 @@ describe("Overlay Trigger", () => {
       let open = oneEvent(outerTrigger, "sp-opened");
       outerButton.click();
       await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent)).to.be.true;
       expect(isVisible(innerClickContent)).to.be.false;
       open = oneEvent(innerTrigger, "sp-opened");
       innerButton.click();
       await open;
-      expect(innerClickContent.parentElement).to.not.be.instanceOf(OverlayTrigger);
+      expect(innerClickContent.parentElement).to.not.be.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent)).to.be.true;
       expect(isVisible(innerClickContent)).to.be.true;
     });
@@ -264,20 +309,29 @@ describe("Overlay Trigger", () => {
       const outerOpen = oneEvent(outerButton, "sp-opened");
       outerButton.click();
       await outerOpen;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent), "outer popover opens").to.be.true;
       expect(isVisible(innerClickContent), "inner popover stays closed").to.be.false;
       const innerOpen = oneEvent(innerButton, "sp-opened");
       innerButton.click();
       await innerOpen;
-      expect(innerClickContent.parentElement).to.not.be.instanceOf(OverlayTrigger);
+      expect(innerClickContent.parentElement).to.not.be.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(outerClickContent), "outer popover stays open").to.be.true;
       expect(isVisible(innerClickContent), "inner popover opens").to.be.true;
       const innerClose = oneEvent(innerButton, "sp-closed");
       pressEscape();
       await innerClose;
-      expect(innerClickContent.parentElement).to.be.instanceOf(OverlayTrigger);
-      expect(document.activeElement === outerClickContent, "outer popover recieved focus").to.be.true;
+      expect(innerClickContent.parentElement).to.be.instanceOf(
+        OverlayTrigger
+      );
+      expect(
+        document.activeElement === innerButton,
+        "outer popover recieved focus"
+      ).to.be.true;
     });
     it("escape closes an open popover", async () => {
       outerTrigger.type = "modal";
@@ -285,11 +339,17 @@ describe("Overlay Trigger", () => {
       const outerOpen = oneEvent(outerButton, "sp-opened");
       outerButton.click();
       await outerOpen;
-      expect(outerClickContent.parentElement instanceof OverlayTrigger, "outer content stolen and reparented").to.be.false;
+      expect(
+        outerClickContent.parentElement instanceof OverlayTrigger,
+        "outer content stolen and reparented"
+      ).to.be.false;
       const innerOpen = oneEvent(innerButton, "sp-opened");
       innerButton.click();
       await innerOpen;
-      expect(innerClickContent.parentElement instanceof OverlayTrigger, "inner content stolen and reparented").to.be.false;
+      expect(
+        innerClickContent.parentElement instanceof OverlayTrigger,
+        "inner content stolen and reparented"
+      ).to.be.false;
       expect(isVisible(outerClickContent)).to.be.true;
       expect(isVisible(innerClickContent)).to.be.true;
       pressSpace();
@@ -298,13 +358,19 @@ describe("Overlay Trigger", () => {
       const innerClose = oneEvent(innerButton, "sp-closed");
       pressEscape();
       await innerClose;
-      expect(innerClickContent.parentElement instanceof OverlayTrigger, "inner content returned").to.be.true;
+      expect(
+        innerClickContent.parentElement instanceof OverlayTrigger,
+        "inner content returned"
+      ).to.be.true;
       expect(isVisible(outerClickContent)).to.be.true;
       expect(isVisible(innerClickContent)).to.be.false;
       const outerClose = oneEvent(outerButton, "sp-closed");
       pressEscape();
       await outerClose;
-      expect(outerClickContent.parentElement instanceof OverlayTrigger, "outer content returned").to.be.true;
+      expect(
+        outerClickContent.parentElement instanceof OverlayTrigger,
+        "outer content returned"
+      ).to.be.true;
       expect(isVisible(outerClickContent)).to.be.false;
       expect(isVisible(innerClickContent)).to.be.false;
     });
@@ -314,11 +380,17 @@ describe("Overlay Trigger", () => {
       const outerOpen = oneEvent(outerButton, "sp-opened");
       outerButton.click();
       await outerOpen;
-      expect(outerClickContent.parentElement instanceof OverlayTrigger, "outer content stolen and reparented").to.be.false;
+      expect(
+        outerClickContent.parentElement instanceof OverlayTrigger,
+        "outer content stolen and reparented"
+      ).to.be.false;
       const innerOpen = oneEvent(innerButton, "sp-opened");
       innerButton.click();
       await innerOpen;
-      expect(innerClickContent.parentElement instanceof OverlayTrigger, "inner content stolen and reparented").to.be.false;
+      expect(
+        innerClickContent.parentElement instanceof OverlayTrigger,
+        "inner content stolen and reparented"
+      ).to.be.false;
       expect(isVisible(outerClickContent)).to.be.true;
       expect(isVisible(innerClickContent)).to.be.true;
       innerClickContent.click();
@@ -328,19 +400,27 @@ describe("Overlay Trigger", () => {
       const innerClose = oneEvent(innerButton, "sp-closed");
       document.body.click();
       await innerClose;
-      expect(innerClickContent.parentElement instanceof OverlayTrigger, "inner content returned").to.be.true;
+      expect(
+        innerClickContent.parentElement instanceof OverlayTrigger,
+        "inner content returned"
+      ).to.be.true;
       expect(isVisible(outerClickContent)).to.be.true;
       expect(isVisible(innerClickContent)).to.be.false;
       const outerClose = oneEvent(outerButton, "sp-closed");
       document.body.click();
       await outerClose;
-      expect(outerClickContent.parentElement instanceof OverlayTrigger, "outer content returned").to.be.true;
+      expect(
+        outerClickContent.parentElement instanceof OverlayTrigger,
+        "outer content returned"
+      ).to.be.true;
       expect(isVisible(outerClickContent)).to.be.false;
       expect(isVisible(innerClickContent)).to.be.false;
     });
     it("opens a hover popover", async () => {
       const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-      const triggerZone = root.querySelector("#trigger");
+      const triggerZone = root.querySelector(
+        "#trigger"
+      );
       expect(triggerZone).to.exist;
       if (!triggerZone)
         return;
@@ -351,7 +431,9 @@ describe("Overlay Trigger", () => {
       const mouseEnter = new MouseEvent("mouseenter");
       triggerZone.dispatchEvent(mouseEnter);
       await open;
-      expect(hoverContent.parentElement).to.not.be.instanceOf(OverlayTrigger);
+      expect(hoverContent.parentElement).to.not.be.instanceOf(
+        OverlayTrigger
+      );
       expect(isVisible(hoverContent)).to.be.true;
       const close = oneEvent(outerTrigger, "sp-closed");
       const mouseLeave = new MouseEvent("mouseleave");
@@ -362,19 +444,27 @@ describe("Overlay Trigger", () => {
     });
     it("closes a hover popover", async () => {
       const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-      const triggerZone = root.querySelector("#trigger");
+      const triggerZone = root.querySelector(
+        "#trigger"
+      );
       expect(triggerZone).to.exist;
       if (!triggerZone)
         return;
       expect(outerButton).to.exist;
       expect(hoverContent).to.exist;
-      expect(isVisible(hoverContent), "hoverContent should not be visible").to.be.false;
+      expect(
+        isVisible(hoverContent),
+        "hoverContent should not be visible"
+      ).to.be.false;
       const mouseEnter = new MouseEvent("mouseenter");
       const mouseLeave = new MouseEvent("mouseleave");
       triggerZone.dispatchEvent(mouseEnter);
       await nextFrame();
       triggerZone.dispatchEvent(mouseLeave);
-      await waitUntil(() => isVisible(hoverContent) === false, "hoverContent should still not be visible");
+      await waitUntil(
+        () => isVisible(hoverContent) === false,
+        "hoverContent should still not be visible"
+      );
     });
     it("dispatches events on open/close", async () => {
       const opened = oneEvent(outerButton, "sp-opened");
@@ -386,7 +476,9 @@ describe("Overlay Trigger", () => {
       const closed = oneEvent(outerButton, "sp-closed");
       document.body.click();
       const closedEvent = await closed;
-      expect(outerClickContent.parentElement).to.be.instanceOf(OverlayTrigger);
+      expect(outerClickContent.parentElement).to.be.instanceOf(
+        OverlayTrigger
+      );
       expect(closedEvent.detail.interaction).to.equal("click");
       expect(isVisible(outerClickContent)).to.be.false;
     });
@@ -437,7 +529,9 @@ describe("Overlay Trigger", () => {
       button.click();
       await opened;
       await elementUpdated(el);
-      const overlay = document.querySelector("active-overlay");
+      const overlay = document.querySelector(
+        "active-overlay"
+      );
       expect(overlay).to.exist;
       expect(overlay.theme.color).to.not.equal("dark");
       expect(overlay.theme.color).to.equal("light");
@@ -497,36 +591,69 @@ describe("Overlay Trigger", () => {
       await open;
       await elementUpdated(overlayTriggers[0]);
       activeOverlays = [...document.querySelectorAll("active-overlay")];
-      expect(activeOverlays.length, "The first `active-overlay` element has been added.").to.equal(1);
-      expect(activeOverlays[0].slot, "first overlay, first time").to.equal("open");
+      expect(
+        activeOverlays.length,
+        "The first `active-overlay` element has been added."
+      ).to.equal(1);
+      expect(
+        activeOverlays[0].slot,
+        "first overlay, first time"
+      ).to.equal("open");
       open = oneEvent(triggers[1], "sp-opened");
       (_b = triggers[1]) == null ? void 0 : _b.click();
       await open;
       await elementUpdated(overlayTriggers[1]);
       activeOverlays = [...document.querySelectorAll("active-overlay")];
-      expect(activeOverlays.length, "The second `active-overlay` element has been added.").to.equal(2);
-      expect(activeOverlays[0].slot, "first overlay, second time").to.equal("open");
-      expect(activeOverlays[1].slot, "second overlay, second time").to.equal("open");
+      expect(
+        activeOverlays.length,
+        "The second `active-overlay` element has been added."
+      ).to.equal(2);
+      expect(
+        activeOverlays[0].slot,
+        "first overlay, second time"
+      ).to.equal("open");
+      expect(
+        activeOverlays[1].slot,
+        "second overlay, second time"
+      ).to.equal("open");
       open = oneEvent(triggers[2], "sp-opened");
       (_c = triggers[2]) == null ? void 0 : _c.click();
       await open;
       await elementUpdated(overlayTriggers[2]);
       activeOverlays = [...document.querySelectorAll("active-overlay")];
-      expect(activeOverlays.length, "The third `active-overlay` element has been added.").to.equal(3);
-      expect(activeOverlays[0].hasAttribute("slot"), "first overlay, third time").to.be.false;
-      expect(activeOverlays[1].hasAttribute("slot"), "second overlay, third time").to.be.false;
-      expect(activeOverlays[2].slot, "third overlay, third time").to.equal("open");
+      expect(
+        activeOverlays.length,
+        "The third `active-overlay` element has been added."
+      ).to.equal(3);
+      expect(
+        activeOverlays[0].hasAttribute("slot"),
+        "first overlay, third time"
+      ).to.be.false;
+      expect(
+        activeOverlays[1].hasAttribute("slot"),
+        "second overlay, third time"
+      ).to.be.false;
+      expect(
+        activeOverlays[2].slot,
+        "third overlay, third time"
+      ).to.equal("open");
       await nextFrame();
       const closed = oneEvent(triggers[2], "sp-closed");
       document.body.click();
       await closed;
       await elementUpdated(overlayTriggers[2]);
       activeOverlays = [...document.querySelectorAll("active-overlay")];
-      expect(activeOverlays.length, "The third `active-overlay` element has been removed.").to.equal(2);
+      expect(
+        activeOverlays.length,
+        "The third `active-overlay` element has been removed."
+      ).to.equal(2);
       await waitUntil(() => {
         return activeOverlays[0].slot === "open";
       }, "first overlay, last time");
-      expect(activeOverlays[1].slot, "second overlay, last time").to.equal("open");
+      expect(
+        activeOverlays[1].slot,
+        "second overlay, last time"
+      ).to.equal("open");
     });
   });
 });