@spectrum-web-components/overlay 0.19.2-overlay.33 → 0.19.3

package/test/overlay-element.test.js

@@ -1,739 +0,0 @@
-"use strict";
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  nextFrame,
-  oneEvent
-} from "@open-wc/testing";
-import "@spectrum-web-components/overlay/sp-overlay.js";
-import "@spectrum-web-components/tooltip/sp-tooltip.js";
-import "@spectrum-web-components/theme/sp-theme.js";
-import "@spectrum-web-components/theme/src/themes.js";
-import "@spectrum-web-components/button/sp-button.js";
-import { sendMouse } from "../../../test/plugins/browser.js";
-const OVERLAY_TYPES = ["modal", "page", "hint", "auto", "manual"];
-async function styledFixture(story) {
-  const test = await fixture(html`
-        <sp-theme theme="spectrum" scale="medium" color="dark">
-            ${story}
-        </sp-theme>
-    `);
-  return test.children[0];
-}
-describe("sp-overlay", () => {
-  function opensDeclaratively(overlayType) {
-    it(`as [type="'${overlayType}'"]`, async () => {
-      const el = await styledFixture(html`
-                <sp-overlay open type=${overlayType}>
-                    <sp-tooltip>Content</sp-tooltip>
-                </sp-overlay>
-            `);
-      const content = el.children[0];
-      let opened = oneEvent(el, "sp-opened");
-      await opened;
-      await elementUpdated(el);
-      expect(content.open).to.be.true;
-      await nextFrame();
-      const closed = oneEvent(el, "sp-closed");
-      el.open = false;
-      await closed;
-      await elementUpdated(el);
-      expect(content.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      await elementUpdated(el);
-      expect(content.open).to.be.true;
-    });
-  }
-  describe('[type="modal"]', () => {
-    opensDeclaratively("modal");
-    xit("closes all other overlay types when opening", async () => {
-      const test = await styledFixture(html`
-                <div>
-                    ${OVERLAY_TYPES.map(
-        (type) => html`
-                            <sp-overlay type=${type}>
-                                <sp-tooltip>${type} Content</sp-tooltip>
-                            </sp-overlay>
-                        `
-      )}
-                </div>
-            `);
-      const modal = test.querySelector('[type="modal"]');
-      const page = test.querySelector('[type="page"]');
-      const hint = test.querySelector('[type="hint"]');
-      const auto = test.querySelector('[type="auto"]');
-      const manual = test.querySelector('[type="manual"]');
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      let opened = oneEvent(page, "sp-opened");
-      page.open = true;
-      await opened;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(modal, "sp-opened");
-      let closed = oneEvent(page, "sp-closed");
-      modal.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(page);
-      await elementUpdated(modal);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      closed = oneEvent(modal, "sp-closed");
-      modal.open = false;
-      await closed;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(hint, "sp-opened");
-      hint.open = true;
-      await opened;
-      await elementUpdated(hint);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.true;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(modal, "sp-opened");
-      closed = oneEvent(hint, "sp-closed");
-      modal.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(page);
-      await elementUpdated(modal);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      closed = oneEvent(modal, "sp-closed");
-      modal.open = false;
-      await closed;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(auto, "sp-opened");
-      auto.open = true;
-      await opened;
-      await elementUpdated(auto);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.true;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(modal, "sp-opened");
-      closed = oneEvent(auto, "sp-closed");
-      modal.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(auto);
-      await elementUpdated(modal);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      closed = oneEvent(modal, "sp-closed");
-      modal.open = false;
-      await closed;
-      await elementUpdated(modal);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(manual, "sp-opened");
-      manual.open = true;
-      await opened;
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.true;
-      await nextFrame();
-      opened = oneEvent(modal, "sp-opened");
-      closed = oneEvent(manual, "sp-closed");
-      modal.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(page);
-      await elementUpdated(manual);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-    });
-  });
-  describe('[type="page"]', () => {
-    opensDeclaratively("page");
-    xit("closes all other overlay types when opening", async () => {
-      const test = await styledFixture(html`
-                <div>
-                    ${OVERLAY_TYPES.map(
-        (type) => html`
-                            <sp-overlay type=${type}>
-                                <sp-tooltip>${type} Content</sp-tooltip>
-                            </sp-overlay>
-                        `
-      )}
-                </div>
-            `);
-      const modal = test.querySelector('[type="modal"]');
-      const page = test.querySelector('[type="page"]');
-      const hint = test.querySelector('[type="hint"]');
-      const auto = test.querySelector('[type="auto"]');
-      const manual = test.querySelector('[type="manual"]');
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      let opened = oneEvent(modal, "sp-opened");
-      modal.open = true;
-      await opened;
-      await elementUpdated(modal);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(page, "sp-opened");
-      let closed = oneEvent(modal, "sp-closed");
-      page.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(page);
-      await elementUpdated(modal);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      closed = oneEvent(page, "sp-closed");
-      page.open = false;
-      await closed;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(hint, "sp-opened");
-      hint.open = true;
-      await opened;
-      await elementUpdated(hint);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.true;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(page, "sp-opened");
-      closed = oneEvent(hint, "sp-closed");
-      page.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(page);
-      await elementUpdated(hint);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      closed = oneEvent(page, "sp-closed");
-      page.open = false;
-      await closed;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(auto, "sp-opened");
-      auto.open = true;
-      await opened;
-      await elementUpdated(auto);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.true;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(page, "sp-opened");
-      closed = oneEvent(auto, "sp-closed");
-      page.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(auto);
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      closed = oneEvent(page, "sp-closed");
-      page.open = false;
-      await closed;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(manual, "sp-opened");
-      manual.open = true;
-      await opened;
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.true;
-      await nextFrame();
-      opened = oneEvent(page, "sp-opened");
-      closed = oneEvent(manual, "sp-closed");
-      page.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(page);
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-    });
-  });
-  describe.only('[type="hint"]', () => {
-    opensDeclaratively("hint");
-    it("closes other `[type=hint]` overlays when opening", async () => {
-      const test = await styledFixture(html`
-                <div>
-                    ${[1, 2].map(
-        (overlay) => html`
-                            <sp-overlay type="hint" class="hint-${overlay}">
-                                <sp-tooltip>Hint ${overlay} Content</sp-tooltip>
-                            </sp-overlay>
-                        `
-      )}
-                </div>
-            `);
-      const hint1 = test.querySelector(".hint-1");
-      const hint2 = test.querySelector(".hint-2");
-      expect(hint1.open).to.be.false;
-      expect(hint2.open).to.be.false;
-      let opened = oneEvent(hint1, "sp-opened");
-      hint1.open = true;
-      await opened;
-      await elementUpdated(hint1);
-      expect(hint1.open).to.be.true;
-      expect(hint2.open).to.be.false;
-      opened = oneEvent(hint2, "sp-opened");
-      let closed = oneEvent(hint1, "sp-closed");
-      hint2.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(hint1);
-      await elementUpdated(hint2);
-      expect(hint1.open).to.be.false;
-      expect(hint2.open).to.be.true;
-      opened = oneEvent(hint1, "sp-opened");
-      closed = oneEvent(hint2, "sp-closed");
-      hint1.open = true;
-      await opened;
-      await closed;
-      await elementUpdated(hint1);
-      await elementUpdated(hint2);
-      expect(hint1.open).to.be.true;
-      expect(hint2.open).to.be.false;
-    });
-    it("stays open when pointer enters overlay from trigger element", async () => {
-      const test = await styledFixture(
-        html`
-                    <div>
-                        <sp-button id="test-button">
-                            This is a button.
-                        </sp-button>
-                        <sp-overlay target="test-button@hover" placement="bottom">
-                            <sp-tooltip>
-                                Help text.
-                            </sp-tooltip>
-                        </sp-overlay>
-                    </div>
-                `
-      );
-      const button = test.querySelector("sp-button");
-      const el = test.querySelector("sp-tooltip");
-      const buttonRect = button.getBoundingClientRect();
-      const buttonPoint = [
-        buttonRect.x + buttonRect.width / 2,
-        buttonRect.y + buttonRect.height / 2
-      ];
-      await elementUpdated(el);
-      await expect(button).to.be.accessible();
-      let opened = oneEvent(button, "sp-opened");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonPoint
-          }
-        ]
-      });
-      await nextFrame();
-      await nextFrame();
-      const tooltipRect = el.shadowRoot.querySelector("#tooltip").getBoundingClientRect();
-      const tooltipPoint = [
-        tooltipRect.x + tooltipRect.width / 2,
-        tooltipRect.y + tooltipRect.height / 2
-      ];
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: tooltipPoint
-          }
-        ]
-      });
-      console.log(0);
-      await opened;
-      console.log(1);
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      await expect(button).to.be.accessible();
-      let closed = oneEvent(button, "sp-closed");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonPoint
-          }
-        ]
-      });
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: [
-              buttonRect.x + buttonRect.width * 2,
-              buttonRect.y + buttonRect.height * 2
-            ]
-          }
-        ]
-      });
-      await closed;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-      opened = oneEvent(button, "sp-opened");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonPoint
-          }
-        ]
-      });
-      await opened;
-      await elementUpdated(el);
-      closed = oneEvent(button, "sp-closed");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: [
-              buttonRect.x + buttonRect.width * 2,
-              buttonRect.y + buttonRect.height * 2
-            ]
-          }
-        ]
-      });
-      await closed;
-      await elementUpdated(el);
-    });
-    it("stays open when pointer enters overlay from trigger element", async () => {
-      const button = await styledFixture(
-        html`
-                    <sp-button>
-                        This is a button.
-                        <sp-tooltip self-managed placement="bottom">
-                            Help text.
-                        </sp-tooltip>
-                    </sp-button>
-                `
-      );
-      const el = button.querySelector("sp-tooltip");
-      const buttonRect = button.getBoundingClientRect();
-      const buttonPoint = [
-        buttonRect.x + buttonRect.width / 2,
-        buttonRect.y + buttonRect.height / 2
-      ];
-      await elementUpdated(el);
-      await expect(button).to.be.accessible();
-      let opened = oneEvent(button, "sp-opened");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonPoint
-          }
-        ]
-      });
-      await nextFrame();
-      await nextFrame();
-      const tooltipRect = el.shadowRoot.querySelector("#tooltip").getBoundingClientRect();
-      const tooltipPoint = [
-        tooltipRect.x + tooltipRect.width / 2,
-        tooltipRect.y + tooltipRect.height / 2
-      ];
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: tooltipPoint
-          }
-        ]
-      });
-      await opened;
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      await expect(button).to.be.accessible();
-      let closed = oneEvent(button, "sp-closed");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonPoint
-          }
-        ]
-      });
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: [
-              buttonRect.x + buttonRect.width * 2,
-              buttonRect.y + buttonRect.height * 2
-            ]
-          }
-        ]
-      });
-      await closed;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-      opened = oneEvent(button, "sp-opened");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonPoint
-          }
-        ]
-      });
-      await opened;
-      await elementUpdated(el);
-      closed = oneEvent(button, "sp-closed");
-      await sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: [
-              buttonRect.x + buttonRect.width * 2,
-              buttonRect.y + buttonRect.height * 2
-            ]
-          }
-        ]
-      });
-      await closed;
-      await elementUpdated(el);
-    });
-  });
-  describe('[type="auto"]', () => {
-    opensDeclaratively("auto");
-  });
-  describe('[type="manual"]', () => {
-    opensDeclaratively("manual");
-    it("does not close other overlay types when opening", async () => {
-      const test = await styledFixture(html`
-                <div>
-                    ${OVERLAY_TYPES.map(
-        (type) => html`
-                            <sp-overlay type=${type}>
-                                <sp-tooltip>${type} Content</sp-tooltip>
-                            </sp-overlay>
-                        `
-      )}
-                </div>
-            `);
-      const modal = test.querySelector('[type="modal"]');
-      const page = test.querySelector('[type="page"]');
-      const hint = test.querySelector('[type="hint"]');
-      const auto = test.querySelector('[type="auto"]');
-      const manual = test.querySelector('[type="manual"]');
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      let opened = oneEvent(modal, "sp-opened");
-      modal.open = true;
-      await opened;
-      await elementUpdated(modal);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(manual, "sp-opened");
-      manual.open = true;
-      await opened;
-      await elementUpdated(manual);
-      expect(modal.open).to.be.true;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.true;
-      await nextFrame();
-      let closed = oneEvent(modal, "sp-closed");
-      let manualClosed = oneEvent(manual, "sp-closed");
-      modal.open = false;
-      manual.open = false;
-      await closed;
-      await manualClosed;
-      await elementUpdated(modal);
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(page, "sp-opened");
-      page.open = true;
-      await opened;
-      await elementUpdated(page);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(manual, "sp-opened");
-      manual.open = true;
-      await opened;
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.true;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.true;
-      await nextFrame();
-      closed = oneEvent(page, "sp-closed");
-      manualClosed = oneEvent(manual, "sp-closed");
-      page.open = false;
-      manual.open = false;
-      await closed;
-      await manualClosed;
-      await elementUpdated(page);
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(hint, "sp-opened");
-      hint.open = true;
-      await opened;
-      await elementUpdated(hint);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.true;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(manual, "sp-opened");
-      manual.open = true;
-      await opened;
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.true;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.true;
-      await nextFrame();
-      closed = oneEvent(hint, "sp-closed");
-      manualClosed = oneEvent(manual, "sp-closed");
-      hint.open = false;
-      manual.open = false;
-      await closed;
-      await elementUpdated(hint);
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.false;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(auto, "sp-opened");
-      auto.open = true;
-      await opened;
-      await elementUpdated(auto);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.true;
-      expect(manual.open).to.be.false;
-      await nextFrame();
-      opened = oneEvent(manual, "sp-opened");
-      manual.open = true;
-      await opened;
-      await elementUpdated(manual);
-      expect(modal.open).to.be.false;
-      expect(page.open).to.be.false;
-      expect(hint.open).to.be.false;
-      expect(auto.open).to.be.true;
-      expect(manual.open).to.be.true;
-    });
-  });
-});
-//# sourceMappingURL=overlay-element.test.js.map