@spectrum-web-components/overlay 0.18.2 → 0.18.4

package/test/index.js

@@ -0,0 +1,704 @@
+"use strict";
+import { escapeEvent, isVisible } from "../../../test/testing-helpers.js";
+import {
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+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");
+export const runOverlayTriggerTests = () => {
+  describe("Overlay Trigger - sync", () => {
+    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 () => {
+        var _a, _b, _c, _d, _e, _f;
+        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((_a = outerClickContent.parentElement) == null ? void 0 : _a.localName).to.equal(
+          "active-overlay"
+        );
+        let closed = oneEvent(outerTrigger, "sp-closed");
+        document.body.click();
+        await closed;
+        expect((_b = outerClickContent.parentElement) == null ? void 0 : _b.localName).to.equal(
+          "overlay-trigger"
+        );
+        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((_c = outerClickContent.parentElement) == null ? void 0 : _c.localName).to.equal(
+          "overlay-trigger"
+        );
+        triggerZone.dispatchEvent(new Event("mouseenter"));
+        await aTimeout(200);
+        expect((_d = outerClickContent.parentElement) == null ? void 0 : _d.localName).to.equal(
+          "overlay-trigger"
+        );
+        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((_e = outerClickContent.parentElement) == null ? void 0 : _e.localName).to.equal(
+          "active-overlay"
+        );
+        closed = oneEvent(outerTrigger, "sp-closed");
+        outerButton.click();
+        await closed;
+        expect((_f = outerClickContent.parentElement) == null ? void 0 : _f.localName).to.equal(
+          "overlay-trigger"
+        );
+      });
+      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");
+      });
+    });
+  });
+};
+//# sourceMappingURL=index.js.map