@spectrum-web-components/overlay 0.18.2 → 0.18.4

package/test/overlay-trigger.test.js

@@ -1,662 +1,5 @@
 "use strict";
-import { escapeEvent, isVisible } from "../../../test/testing-helpers.js";
-import {
-  aTimeout,
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  nextFrame,
-  oneEvent,
-  waitUntil
-} from "@open-wc/testing";
 import "@spectrum-web-components/overlay/overlay-trigger.js";
-import {
-  OverlayTrigger
-} from "@spectrum-web-components/overlay";
-import "@spectrum-web-components/button/sp-button.js";
-import "@spectrum-web-components/popover/sp-popover.js";
-import { Popover } from "@spectrum-web-components/popover";
-import "@spectrum-web-components/theme/sp-theme.js";
-function pressKey(code) {
-  const up = new KeyboardEvent("keyup", {
-    bubbles: true,
-    cancelable: true,
-    key: code,
-    code
-  });
-  document.dispatchEvent(up);
-}
-const pressEscape = () => {
-  document.dispatchEvent(escapeEvent());
-};
-const pressSpace = () => pressKey("Space");
-describe("Overlay Trigger", () => {
-  describe("open/close", () => {
-    let testDiv;
-    let innerTrigger;
-    let outerTrigger;
-    let innerButton;
-    let outerButton;
-    let innerClickContent;
-    let outerClickContent;
-    let hoverContent;
-    beforeEach(async () => {
-      testDiv = await fixture(
-        html`
-                    <div>
-                        <style>
-                            body {
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                            }
-                        </style>
-                        <overlay-trigger id="trigger" placement="top">
-                            <sp-button
-                                id="outer-button"
-                                variant="primary"
-                                slot="trigger"
-                            >
-                                Show Popover
-                            </sp-button>
-                            <sp-popover
-                                id="outer-popover"
-                                dialog
-                                slot="click-content"
-                                direction="bottom"
-                                tip
-                                open
-                                tabindex="0"
-                            >
-                                <div class="options-popover-content">
-                                    <overlay-trigger
-                                        id="inner-trigger"
-                                        placement="bottom"
-                                    >
-                                        <sp-button
-                                            id="inner-button"
-                                            slot="trigger"
-                                        >
-                                            Press Me
-                                        </sp-button>
-                                        <sp-popover
-                                            id="inner-popover"
-                                            dialog
-                                            slot="click-content"
-                                            direction="bottom"
-                                            tip
-                                            open
-                                            tabindex="0"
-                                        >
-                                            <div
-                                                class="options-popover-content"
-                                            >
-                                                Another Popover
-                                            </div>
-                                        </sp-popover>
-                                    </overlay-trigger>
-                                </div>
-                            </sp-popover>
-                            <div
-                                id="hover-content"
-                                slot="hover-content"
-                                class="tooltip"
-                                delay="100"
-                            >
-                                Tooltip
-                            </div>
-                        </overlay-trigger>
-                    </div>
-                `
-      );
-      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"
-      );
-    });
-    afterEach(async () => {
-      if (outerTrigger.open) {
-        const closed = oneEvent(outerTrigger, "sp-closed");
-        outerTrigger.open = void 0;
-        await closed;
-      }
-      outerTrigger.removeAttribute("type");
-      if (innerTrigger.open) {
-        const closed = oneEvent(innerTrigger, "sp-closed");
-        innerTrigger.open = void 0;
-        await closed;
-      }
-      innerTrigger.removeAttribute("type");
-    });
-    it("loads", async () => {
-      if (!(outerClickContent instanceof Popover))
-        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
-      );
-    });
-    it("opens a popover", async () => {
-      expect(isVisible(outerClickContent)).to.be.false;
-      expect(outerButton).to.exist;
-      const open = oneEvent(outerTrigger, "sp-opened");
-      outerButton.click();
-      await open;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-        OverlayTrigger
-      );
-      expect(isVisible(outerClickContent)).to.be.true;
-    });
-    it("[disabled] closes a popover", async () => {
-      expect(isVisible(outerClickContent)).to.be.false;
-      expect(outerTrigger.disabled).to.be.false;
-      expect(outerButton).to.exist;
-      const opened = oneEvent(outerButton, "sp-opened");
-      outerButton.click();
-      await opened;
-      expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-        OverlayTrigger
-      );
-      expect(isVisible(outerClickContent)).to.be.true;
-      const closed = oneEvent(outerButton, "sp-closed");
-      outerTrigger.disabled = true;
-      await closed;
-      expect(isVisible(outerClickContent)).to.be.false;
-      expect(outerTrigger.disabled).to.be.true;
-    });
-    it("resizes a popover", async () => {
-      expect(isVisible(outerClickContent)).to.be.false;
-      expect(outerButton).to.exist;
-      const open = oneEvent(outerTrigger, "sp-opened");
-      outerButton.click();
-      await open;
-      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(isVisible(outerClickContent)).to.be.true;
-    });
-    ["modal", "replace", "inline"].map((type) => {
-      it(`opens a popover - [type="${type}"]`, async () => {
-        outerTrigger.type = type;
-        await elementUpdated(outerTrigger);
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(outerButton).to.exist;
-        const opened = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
-        await opened;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
-      });
-    });
-    it("does not open a hover popover when a click popover is open", async () => {
-      expect(isVisible(outerClickContent), "outer popover not visible").to.be.false;
-      expect(isVisible(hoverContent), "hover popover not visible").to.be.false;
-      expect(outerButton).to.exist;
-      const open = oneEvent(outerTrigger, "sp-opened");
-      outerButton.click();
-      await open;
-      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
-        })
-      );
-      await nextFrame();
-      expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
-      expect(isVisible(outerClickContent), "outer popover visible again").to.be.true;
-      expect(isVisible(hoverContent), "hover popover not visible again").to.be.false;
-    });
-    it("does not open a popover when [disabled]", async () => {
-      const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-      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
-      );
-      let closed = oneEvent(outerTrigger, "sp-closed");
-      document.body.click();
-      await closed;
-      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
-      );
-      triggerZone.dispatchEvent(new Event("mouseenter"));
-      await aTimeout(200);
-      expect(outerClickContent.parentElement).to.be.an.instanceOf(
-        OverlayTrigger
-      );
-      outerTrigger.disabled = false;
-      await elementUpdated(outerTrigger);
-      expect(outerTrigger.disabled).to.be.false;
-      expect(outerTrigger.hasAttribute("disabled")).to.be.false;
-      open = oneEvent(outerTrigger, "sp-opened");
-      outerButton.click();
-      await open;
-      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
-      );
-    });
-    it("opens a nested popover", async () => {
-      expect(isVisible(outerClickContent)).to.be.false;
-      expect(isVisible(innerClickContent)).to.be.false;
-      expect(outerButton).to.exist;
-      let open = oneEvent(outerTrigger, "sp-opened");
-      outerButton.click();
-      await open;
-      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(isVisible(outerClickContent)).to.be.true;
-      expect(isVisible(innerClickContent)).to.be.true;
-    });
-    it('focus previous "modal" when closing nested "modal"', async () => {
-      outerTrigger.type = "modal";
-      innerTrigger.type = "modal";
-      expect(isVisible(outerClickContent), "outer popover starts closed").to.be.false;
-      expect(isVisible(innerClickContent), "inner popover starts closed").to.be.false;
-      expect(outerButton).to.exist;
-      const outerOpen = oneEvent(outerButton, "sp-opened");
-      outerButton.click();
-      await outerOpen;
-      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(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 === innerButton,
-        "outer popover recieved focus"
-      ).to.be.true;
-    });
-    it("escape closes an open popover", async () => {
-      outerTrigger.type = "modal";
-      innerTrigger.type = "modal";
-      const outerOpen = oneEvent(outerButton, "sp-opened");
-      outerButton.click();
-      await outerOpen;
-      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(isVisible(outerClickContent)).to.be.true;
-      expect(isVisible(innerClickContent)).to.be.true;
-      pressSpace();
-      expect(isVisible(outerClickContent)).to.be.true;
-      expect(isVisible(innerClickContent)).to.be.true;
-      const innerClose = oneEvent(innerButton, "sp-closed");
-      pressEscape();
-      await innerClose;
-      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(isVisible(outerClickContent)).to.be.false;
-      expect(isVisible(innerClickContent)).to.be.false;
-    });
-    it("click closes an open popover", async () => {
-      outerTrigger.type = "modal";
-      innerTrigger.type = "modal";
-      const outerOpen = oneEvent(outerButton, "sp-opened");
-      outerButton.click();
-      await outerOpen;
-      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(isVisible(outerClickContent)).to.be.true;
-      expect(isVisible(innerClickContent)).to.be.true;
-      innerClickContent.click();
-      await aTimeout(200);
-      expect(isVisible(outerClickContent)).to.be.true;
-      expect(isVisible(innerClickContent)).to.be.true;
-      const innerClose = oneEvent(innerButton, "sp-closed");
-      document.body.click();
-      await innerClose;
-      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(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"
-      );
-      expect(triggerZone).to.exist;
-      if (!triggerZone)
-        return;
-      expect(outerButton).to.exist;
-      expect(hoverContent).to.exist;
-      expect(isVisible(hoverContent)).to.be.false;
-      const open = oneEvent(outerTrigger, "sp-opened");
-      const mouseEnter = new MouseEvent("mouseenter");
-      triggerZone.dispatchEvent(mouseEnter);
-      await open;
-      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");
-      triggerZone.dispatchEvent(mouseLeave);
-      await close;
-      expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);
-      expect(isVisible(hoverContent)).to.be.false;
-    });
-    it("closes a hover popover", async () => {
-      const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-      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;
-      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"
-      );
-    });
-    it("dispatches events on open/close", async () => {
-      const opened = oneEvent(outerButton, "sp-opened");
-      outerButton.click();
-      const openedEvent = await opened;
-      expect(isVisible(outerClickContent)).to.be.true;
-      expect(outerTrigger.open).to.equal("click");
-      expect(openedEvent.detail.interaction).to.equal("click");
-      const closed = oneEvent(outerButton, "sp-closed");
-      document.body.click();
-      const closedEvent = await closed;
-      expect(outerClickContent.parentElement).to.be.instanceOf(
-        OverlayTrigger
-      );
-      expect(closedEvent.detail.interaction).to.equal("click");
-      expect(isVisible(outerClickContent)).to.be.false;
-    });
-  });
-  describe("System interactions", () => {
-    afterEach(async () => {
-      const triggers = document.querySelectorAll("overlay-trigger");
-      const closes = [];
-      triggers.forEach((trigger) => {
-        if (trigger.open) {
-          const close = oneEvent(trigger, "sp-closed");
-          trigger.open = void 0;
-          closes.push(close);
-        }
-      });
-      await Promise.all(closes);
-    });
-    it("acquires a `color` and `size` from `sp-theme`", async () => {
-      const el = await fixture(html`
-                <sp-theme color="dark">
-                    <sp-theme color="light">
-                        <overlay-trigger id="trigger" placement="top">
-                            <sp-button
-                                id="outer-button"
-                                variant="primary"
-                                slot="trigger"
-                            >
-                                Show Popover
-                            </sp-button>
-                            <sp-popover
-                                id="outer-popover"
-                                dialog
-                                slot="click-content"
-                                direction="bottom"
-                                tip
-                                open
-                            >
-                                Popover content!
-                            </sp-popover>
-                        </overlay-trigger>
-                    </sp-theme>
-                </sp-theme>
-            `);
-      await elementUpdated(el);
-      expect(document.querySelector("active-overlay")).to.be.null;
-      const button = el.querySelector("sp-button");
-      const opened = oneEvent(button, "sp-opened");
-      button.click();
-      await opened;
-      await elementUpdated(el);
-      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");
-    });
-    it('manages multiple layers of `type="modal"', async () => {
-      var _a, _b, _c;
-      const el = await fixture(html`
-                <overlay-trigger type="modal" placement="none">
-                    <sp-button slot="trigger" variant="accent">
-                        Toggle Dialog
-                    </sp-button>
-                    <sp-popover dialog slot="click-content">
-                        <overlay-trigger>
-                            <sp-button slot="trigger" variant="primary">
-                                Toggle Dialog
-                            </sp-button>
-                            <sp-popover dialog slot="click-content">
-                                <overlay-trigger type="modal">
-                                    <sp-button
-                                        slot="trigger"
-                                        variant="secondary"
-                                    >
-                                        Toggle Dialog
-                                    </sp-button>
-                                    <sp-popover dialog slot="click-content">
-                                        <p>
-                                            When you get this deep, this
-                                            ActiveOverlay should be the only one
-                                            in [slot="open"].
-                                        </p>
-                                        <p>
-                                            All of the rest of the ActiveOverlay
-                                            elements should have had their
-                                            [slot] attribute removed.
-                                        </p>
-                                        <p>
-                                            Closing this ActiveOverlay should
-                                            replace them...
-                                        </p>
-                                    </sp-popover>
-                                </overlay-trigger>
-                            </sp-popover>
-                        </overlay-trigger>
-                    </sp-popover>
-                </overlay-trigger>
-            `);
-      const overlayTriggers = [...el.querySelectorAll("overlay-trigger")];
-      let activeOverlays = [
-        ...document.querySelectorAll("active-overlay")
-      ];
-      const triggers = [
-        ...el.querySelectorAll('sp-button[slot="trigger"]')
-      ];
-      expect(activeOverlays.length, "no previous overlays").to.equal(0);
-      let open = oneEvent(triggers[0], "sp-opened");
-      (_a = triggers[0]) == null ? void 0 : _a.click();
-      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");
-      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");
-      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");
-      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);
-      await waitUntil(() => {
-        return activeOverlays[0].slot === "open";
-      }, "first overlay, last time");
-      expect(
-        activeOverlays[1].slot,
-        "second overlay, last time"
-      ).to.equal("open");
-    });
-  });
-});
+import { runOverlayTriggerTests } from "./index.js";
+runOverlayTriggerTests();
 //# sourceMappingURL=overlay-trigger.test.js.map