@spectrum-web-components/overlay 0.39.3 → 0.39.4

package/test/overlay.test.js

@@ -43,87 +43,164 @@ async function styledFixture(story) {
 describe("Overlays", () => {
   let testDiv;
   let openOverlays = [];
-  beforeEach(async () => {
-    testDiv = await styledFixture(
-      html`
-                <div id="top">
-                    <style>
-                        body {
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        }
+  describe("shared fixture", () => {
+    beforeEach(async () => {
+      testDiv = await styledFixture(
+        html`
+                    <div id="top">
+                        <style>
+                            body {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                            }
 
-                        #top {
-                            margin: 100px;
-                        }
+                            #top {
+                                margin: 100px;
+                            }
 
-                        sp-button {
-                            flex: none;
-                        }
+                            sp-button {
+                                flex: none;
+                            }
 
-                        #overlay-content {
-                            display: none;
-                        }
-                    </style>
-                    <sp-button id="first-button" variant="primary">
-                        Show Popover
-                    </sp-button>
-                    <div id="overlay-content">
-                        <sp-popover id="outer-popover" direction="bottom" tip>
-                            <sp-dialog no-divider>
-                                <div class="options-popover-content">
-                                    A popover message
-                                </div>
-                                <sp-button id="outer-focus-target">
-                                    Test 1
-                                </sp-button>
-                                <sp-button>Test 2</sp-button>
-                                <sp-button>Test 3</sp-button>
-                            </sp-dialog>
-                        </sp-popover>
-                        <sp-tooltip id="hover-1" class="hover-content">
-                            Hover message
-                        </sp-tooltip>
-                        <sp-tooltip id="hover-2" class="hover-content">
-                            Other hover message
-                        </sp-tooltip>
+                            #overlay-content {
+                                display: none;
+                            }
+                        </style>
+                        <sp-button id="first-button" variant="primary">
+                            Show Popover
+                        </sp-button>
+                        <div id="overlay-content">
+                            <sp-popover
+                                id="outer-popover"
+                                direction="bottom"
+                                tip
+                            >
+                                <sp-dialog no-divider>
+                                    <div class="options-popover-content">
+                                        A popover message
+                                    </div>
+                                    <sp-button id="outer-focus-target">
+                                        Test 1
+                                    </sp-button>
+                                    <sp-button>Test 2</sp-button>
+                                    <sp-button>Test 3</sp-button>
+                                </sp-dialog>
+                            </sp-popover>
+                            <sp-tooltip id="hover-1" class="hover-content">
+                                Hover message
+                            </sp-tooltip>
+                            <sp-tooltip id="hover-2" class="hover-content">
+                                Other hover message
+                            </sp-tooltip>
+                        </div>
                     </div>
-                </div>
-            `
-    );
-    await elementUpdated(testDiv);
-  });
-  afterEach(() => {
-    openOverlays.map((overlay) => overlay.open = false);
-    openOverlays = [];
-  });
-  [
-    "bottom",
-    "bottom-start",
-    "bottom-end",
-    "top",
-    "top-start",
-    "top-end",
-    "left",
-    "left-start",
-    "left-end",
-    "right",
-    "right-start",
-    "right-end"
-  ].map((direction) => {
-    const placement = direction;
-    it(`opens a popover - ${placement}`, async () => {
-      const clickSpy = spy();
+                `
+      );
+      await elementUpdated(testDiv);
+    });
+    afterEach(() => {
+      openOverlays.map((overlay) => overlay.open = false);
+      openOverlays = [];
+    });
+    [
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "top",
+      "top-start",
+      "top-end",
+      "left",
+      "left-start",
+      "left-end",
+      "right",
+      "right-start",
+      "right-end"
+    ].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(button).to.exist;
+        const opened = oneEvent(outerPopover, "sp-opened");
+        openOverlays.push(
+          await Overlay.open(outerPopover, {
+            trigger: button,
+            type: "auto",
+            delayed: false,
+            placement,
+            offset: 10
+          })
+        );
+        button.insertAdjacentElement(
+          "afterend",
+          openOverlays.at(-1)
+        );
+        await opened;
+        expect(await isInteractive(outerPopover)).to.be.true;
+      });
+    });
+    it(`opens a modal dialog`, async () => {
       const button = testDiv.querySelector(
         "#first-button"
       );
       const outerPopover = testDiv.querySelector(
         "#outer-popover"
       );
-      outerPopover.addEventListener("click", () => {
-        clickSpy();
+      expect(await isInteractive(outerPopover)).to.be.false;
+      expect(button).to.exist;
+      const opened = oneEvent(outerPopover, "sp-opened");
+      openOverlays.push(
+        await Overlay.open(outerPopover, {
+          trigger: button
+        })
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
+      await opened;
+      const firstFocused = outerPopover.querySelector(
+        "#outer-focus-target"
+      );
+      expect(document.activeElement === firstFocused).to.be.true;
+      await sendKeys({
+        press: "Tab"
       });
+      expect(document.activeElement === button).to.be.false;
+      await sendKeys({
+        press: "Tab"
+      });
+      expect(document.activeElement === button).to.be.false;
+      await sendKeys({
+        press: "Shift+Tab"
+      });
+      expect(document.activeElement === button).to.be.false;
+      await sendKeys({
+        press: "Shift+Tab"
+      });
+      expect(document.activeElement === button).to.be.false;
+      await sendKeys({
+        press: "Shift+Tab"
+      });
+      expect(document.activeElement === button).to.be.false;
+    });
+    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(button).to.exist;
       const opened = oneEvent(outerPopover, "sp-opened");
@@ -131,8 +208,6 @@ describe("Overlays", () => {
         await Overlay.open(outerPopover, {
           trigger: button,
           type: "auto",
-          delayed: false,
-          placement,
           offset: 10
         })
       );
@@ -142,180 +217,134 @@ describe("Overlays", () => {
       );
       await opened;
       expect(await isInteractive(outerPopover)).to.be.true;
+      Overlay.update();
+      expect(await isInteractive(outerPopover)).to.be.true;
     });
-  });
-  it(`opens a modal dialog`, async () => {
-    const button = testDiv.querySelector("#first-button");
-    const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(await isInteractive(outerPopover)).to.be.false;
-    expect(button).to.exist;
-    const opened = oneEvent(outerPopover, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(outerPopover, {
-        trigger: button
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    const firstFocused = outerPopover.querySelector(
-      "#outer-focus-target"
-    );
-    expect(document.activeElement === firstFocused).to.be.true;
-    await sendKeys({
-      press: "Tab"
-    });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Tab"
-    });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Shift+Tab"
+    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(button).to.exist;
+      const opened = oneEvent(outerPopover, "sp-opened");
+      const start = performance.now();
+      openOverlays.push(
+        await Overlay.open(outerPopover, {
+          trigger: button,
+          type: "auto",
+          delayed: true,
+          offset: 10
+        })
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
+      await opened;
+      const end = performance.now();
+      expect(await isInteractive(outerPopover)).to.be.true;
+      expect(end - start).to.be.greaterThan(1e3);
     });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Shift+Tab"
+    it("opens hover overlay", async () => {
+      const button = testDiv.querySelector(
+        "#first-button"
+      );
+      const hoverOverlay = testDiv.querySelector(
+        "#hover-1"
+      );
+      const clickOverlay = testDiv.querySelector(
+        "#outer-popover"
+      );
+      expect(await isOnTopLayer(hoverOverlay)).to.be.false;
+      expect(await isOnTopLayer(clickOverlay)).to.be.false;
+      let opened = oneEvent(hoverOverlay, "sp-opened");
+      openOverlays.push(
+        await Overlay.open(hoverOverlay, {
+          trigger: button,
+          type: "hint",
+          placement: "top",
+          offset: 10
+        })
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
+      await opened;
+      expect(await isOnTopLayer(hoverOverlay)).to.be.true;
+      opened = oneEvent(clickOverlay, "sp-opened");
+      const closed = oneEvent(hoverOverlay, "sp-closed");
+      openOverlays.push(
+        await Overlay.open(clickOverlay, {
+          trigger: button,
+          type: "auto",
+          placement: "bottom",
+          offset: 10
+        })
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
+      await opened;
+      await closed;
+      expect(
+        await isInteractive(clickOverlay),
+        "click overlay not interactive"
+      ).to.be.true;
+      expect(
+        await isOnTopLayer(hoverOverlay),
+        "hover overlay interactive"
+      ).to.be.false;
     });
-    expect(document.activeElement === button).to.be.false;
-    await sendKeys({
-      press: "Shift+Tab"
+    it("opens custom overlay", async () => {
+      const button = testDiv.querySelector(
+        "#first-button"
+      );
+      const customOverlay = testDiv.querySelector(
+        "#hover-1"
+      );
+      const clickOverlay = testDiv.querySelector(
+        "#outer-popover"
+      );
+      expect(button).to.exist;
+      expect(customOverlay).to.exist;
+      expect(await isOnTopLayer(customOverlay)).to.be.false;
+      expect(await isOnTopLayer(clickOverlay)).to.be.false;
+      let opened = oneEvent(customOverlay, "sp-opened");
+      openOverlays.push(
+        await Overlay.open(customOverlay, {
+          trigger: button,
+          type: "auto",
+          placement: "top",
+          offset: 10
+        })
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
+      await opened;
+      expect(await isOnTopLayer(customOverlay)).to.be.true;
+      opened = oneEvent(clickOverlay, "sp-opened");
+      openOverlays.push(
+        await Overlay.open(clickOverlay, {
+          trigger: button,
+          type: "auto",
+          placement: "bottom",
+          offset: 10
+        })
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
+      await opened;
+      expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
     });
-    expect(document.activeElement === button).to.be.false;
-  });
-  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(button).to.exist;
-    const opened = oneEvent(outerPopover, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(outerPopover, {
-        trigger: button,
-        type: "auto",
-        offset: 10
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    expect(await isInteractive(outerPopover)).to.be.true;
-    Overlay.update();
-    expect(await isInteractive(outerPopover)).to.be.true;
-  });
-  it(`opens a popover w/ delay`, async () => {
-    const button = testDiv.querySelector("#first-button");
-    const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(await isInteractive(outerPopover)).to.be.false;
-    expect(button).to.exist;
-    const opened = oneEvent(outerPopover, "sp-opened");
-    const start = performance.now();
-    openOverlays.push(
-      await Overlay.open(outerPopover, {
-        trigger: button,
-        type: "auto",
-        delayed: true,
-        offset: 10
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    const end = performance.now();
-    expect(await isInteractive(outerPopover)).to.be.true;
-    expect(end - start).to.be.greaterThan(1e3);
-  });
-  it("opens hover overlay", async () => {
-    const button = testDiv.querySelector("#first-button");
-    const hoverOverlay = testDiv.querySelector("#hover-1");
-    const clickOverlay = testDiv.querySelector(
-      "#outer-popover"
-    );
-    expect(await isOnTopLayer(hoverOverlay)).to.be.false;
-    expect(await isOnTopLayer(clickOverlay)).to.be.false;
-    let opened = oneEvent(hoverOverlay, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(hoverOverlay, {
-        trigger: button,
-        type: "hint",
-        placement: "top",
-        offset: 10
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    expect(await isOnTopLayer(hoverOverlay)).to.be.true;
-    opened = oneEvent(clickOverlay, "sp-opened");
-    const closed = oneEvent(hoverOverlay, "sp-closed");
-    openOverlays.push(
-      await Overlay.open(clickOverlay, {
-        trigger: button,
-        type: "auto",
-        placement: "bottom",
-        offset: 10
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    await closed;
-    expect(
-      await isInteractive(clickOverlay),
-      "click overlay not interactive"
-    ).to.be.true;
-    expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to.be.false;
-  });
-  it("opens custom overlay", async () => {
-    const button = testDiv.querySelector("#first-button");
-    const customOverlay = testDiv.querySelector("#hover-1");
-    const clickOverlay = testDiv.querySelector(
-      "#outer-popover"
-    );
-    expect(button).to.exist;
-    expect(customOverlay).to.exist;
-    expect(await isOnTopLayer(customOverlay)).to.be.false;
-    expect(await isOnTopLayer(clickOverlay)).to.be.false;
-    let opened = oneEvent(customOverlay, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(customOverlay, {
-        trigger: button,
-        type: "auto",
-        placement: "top",
-        offset: 10
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    expect(await isOnTopLayer(customOverlay)).to.be.true;
-    opened = oneEvent(clickOverlay, "sp-opened");
-    openOverlays.push(
-      await Overlay.open(clickOverlay, {
-        trigger: button,
-        type: "auto",
-        placement: "bottom",
-        offset: 10
-      })
-    );
-    button.insertAdjacentElement(
-      "afterend",
-      openOverlays.at(-1)
-    );
-    await opened;
-    expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
   });
   it("closes via events", async () => {
     const test = await fixture(html`