@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/test/overlay-element.test.js

@@ -0,0 +1,682 @@
+"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/popover/sp-popover.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";
+import { sendKeys } from "@web/test-runner-commands";
+const OVERLAY_TYPES = ["modal", "page", "hint", "auto", "manual"];
+async function styledFixture(story) {
+  const test = await fixture(html`
+        <sp-theme theme="spectrum" scale="medium" color="light">
+            ${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;
+      expect(content.open).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      el.open = false;
+      await closed;
+      expect(content.open).to.be.false;
+      opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+      expect(content.open).to.be.true;
+    });
+  }
+  describe('[type="modal"]', () => {
+    opensDeclaratively("modal");
+    describe("interaction with other non-ancestor overlays", function() {
+      beforeEach(async function() {
+        this.fixture = await styledFixture(html`
+                    <div>
+                        ${OVERLAY_TYPES.map(
+          (type) => html`
+                                <sp-overlay type=${type}>
+                                    <sp-tooltip>${type} Content</sp-tooltip>
+                                </sp-overlay>
+                            `
+        )}
+                    </div>
+                `);
+        this.modal = this.fixture.querySelector(
+          '[type="modal"]'
+        );
+        this.page = this.fixture.querySelector(
+          '[type="page"]'
+        );
+        this.hint = this.fixture.querySelector(
+          '[type="hint"]'
+        );
+        this.auto = this.fixture.querySelector(
+          '[type="auto"]'
+        );
+        this.manual = this.fixture.querySelector(
+          '[type="manual"]'
+        );
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      afterEach(async function() {
+        const closed = oneEvent(this.modal, "sp-closed");
+        this.modal.open = false;
+        await closed;
+      });
+      it('closes "page" overlays when opening', async function() {
+        let opened = oneEvent(this.page, "sp-opened");
+        this.page.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.modal, "sp-opened");
+        const closed = oneEvent(this.page, "sp-closed");
+        this.modal.open = true;
+        await opened;
+        await closed;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      it('closes "hint" overlays when opening', async function() {
+        let opened = oneEvent(this.hint, "sp-opened");
+        this.hint.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.true;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.modal, "sp-opened");
+        const closed = oneEvent(this.hint, "sp-closed");
+        this.modal.open = true;
+        await opened;
+        await closed;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      it('closes "auto" overlays when opening', async function() {
+        let opened = oneEvent(this.auto, "sp-opened");
+        this.auto.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.true;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.modal, "sp-opened");
+        const closed = oneEvent(this.auto, "sp-closed");
+        this.modal.open = true;
+        await opened;
+        await closed;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      it('does not close "manual" overlays when opening', async function() {
+        let opened = oneEvent(this.manual, "sp-opened");
+        this.manual.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+        opened = oneEvent(this.modal, "sp-opened");
+        this.modal.open = true;
+        await opened;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+      });
+    });
+  });
+  describe('[type="page"]', () => {
+    opensDeclaratively("page");
+    describe("interaction with other non-ancestor overlays", function() {
+      beforeEach(async function() {
+        this.fixture = await styledFixture(html`
+                    <div>
+                        ${OVERLAY_TYPES.map(
+          (type) => html`
+                                <sp-overlay type=${type}>
+                                    <sp-tooltip>${type} Content</sp-tooltip>
+                                </sp-overlay>
+                            `
+        )}
+                    </div>
+                `);
+        this.modal = this.fixture.querySelector(
+          '[type="modal"]'
+        );
+        this.page = this.fixture.querySelector(
+          '[type="page"]'
+        );
+        this.hint = this.fixture.querySelector(
+          '[type="hint"]'
+        );
+        this.auto = this.fixture.querySelector(
+          '[type="auto"]'
+        );
+        this.manual = this.fixture.querySelector(
+          '[type="manual"]'
+        );
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      afterEach(async function() {
+        const closed = oneEvent(this.page, "sp-closed");
+        this.page.open = false;
+        await closed;
+      });
+      it('closes "page" overlays when opening', async function() {
+        let opened = oneEvent(this.modal, "sp-opened");
+        this.modal.open = true;
+        await opened;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.page, "sp-opened");
+        const closed = oneEvent(this.modal, "sp-closed");
+        this.page.open = true;
+        await opened;
+        await closed;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      it('closes "hint" overlays when opening', async function() {
+        let opened = oneEvent(this.hint, "sp-opened");
+        this.hint.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.true;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.page, "sp-opened");
+        const closed = oneEvent(this.hint, "sp-closed");
+        this.page.open = true;
+        await opened;
+        await closed;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      it('closes "auto" overlays when opening', async function() {
+        let opened = oneEvent(this.auto, "sp-opened");
+        this.auto.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.true;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.page, "sp-opened");
+        const closed = oneEvent(this.auto, "sp-closed");
+        this.page.open = true;
+        await opened;
+        await closed;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      it('does not close "manual" overlays when opening', async function() {
+        let opened = oneEvent(this.manual, "sp-opened");
+        this.manual.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+        opened = oneEvent(this.page, "sp-opened");
+        this.page.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+      });
+    });
+    it("ignores Escape key interactions", async () => {
+      const el = await styledFixture(html`
+                <sp-overlay type="page">
+                    <sp-popover>This is a "page" Overlay</sp-popover>
+                </sp-overlay>
+            `);
+      const opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+      expect(el.open).to.be.true;
+      await sendKeys({
+        press: "Escape"
+      });
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
+    });
+  });
+  describe('[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;
+      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;
+      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;
+      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
+                            trigger="test-button@hover"
+                            type="hint"
+                            placement="bottom"
+                            offset="-10"
+                        >
+                            <sp-tooltip>Help text.</sp-tooltip>
+                        </sp-overlay>
+                    </div>
+                `
+      );
+      const button = test.querySelector("sp-button");
+      const overlay = test.querySelector(
+        "sp-overlay"
+      );
+      const el = test.querySelector("sp-tooltip");
+      const buttonRect = button.getBoundingClientRect();
+      const buttonPoint = [
+        buttonRect.x + buttonRect.width / 2,
+        buttonRect.y + buttonRect.height - 2
+      ];
+      await elementUpdated(overlay);
+      await expect(button).to.be.accessible();
+      let opened = oneEvent(button, "sp-opened");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonPoint
+          }
+        ]
+      });
+      await elementUpdated(overlay);
+      await nextFrame();
+      await nextFrame();
+      expect(overlay.open).to.be.true;
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              buttonRect.x + buttonRect.width / 2,
+              buttonRect.y + buttonRect.height - 1
+            ]
+          },
+          {
+            type: "move",
+            position: [
+              buttonRect.x + buttonRect.width / 2,
+              buttonRect.y + buttonRect.height
+            ]
+          },
+          {
+            type: "move",
+            position: [
+              buttonRect.x + buttonRect.width / 2,
+              buttonRect.y + buttonRect.height + 1
+            ]
+          }
+        ]
+      });
+      await nextFrame();
+      await nextFrame();
+      expect(overlay.open).to.be.true;
+      await opened;
+      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;
+      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;
+    });
+    it("stays open when pointer enters overlay from trigger element: self managed", 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();
+      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;
+      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;
+      expect(el.open).to.be.false;
+      opened = oneEvent(button, "sp-opened");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonPoint
+          }
+        ]
+      });
+      await opened;
+      expect(el.open).to.be.true;
+      closed = oneEvent(button, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              buttonRect.x + buttonRect.width * 2,
+              buttonRect.y + buttonRect.height * 2
+            ]
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).to.be.false;
+    });
+  });
+  describe('[type="auto"]', () => {
+    opensDeclaratively("auto");
+  });
+  describe('[type="manual"]', () => {
+    opensDeclaratively("manual");
+    describe("interaction with other non-ancestor overlays", function() {
+      beforeEach(async function() {
+        this.fixture = await styledFixture(html`
+                    <div>
+                        ${OVERLAY_TYPES.map(
+          (type) => html`
+                                <sp-overlay type=${type}>
+                                    <sp-tooltip>${type} Content</sp-tooltip>
+                                </sp-overlay>
+                            `
+        )}
+                    </div>
+                `);
+        this.modal = this.fixture.querySelector(
+          '[type="modal"]'
+        );
+        this.page = this.fixture.querySelector(
+          '[type="page"]'
+        );
+        this.hint = this.fixture.querySelector(
+          '[type="hint"]'
+        );
+        this.auto = this.fixture.querySelector(
+          '[type="auto"]'
+        );
+        this.manual = this.fixture.querySelector(
+          '[type="manual"]'
+        );
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+      });
+      afterEach(async function() {
+        const closed = oneEvent(this.manual, "sp-closed");
+        this.manual.open = false;
+        await closed;
+      });
+      it('does not close "modal" overlays when opening', async function() {
+        let opened = oneEvent(this.modal, "sp-opened");
+        this.modal.open = true;
+        await opened;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.manual, "sp-opened");
+        this.manual.open = true;
+        await opened;
+        expect(this.modal.open).to.be.true;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+      });
+      it('does not close "modal" overlays when opening', async function() {
+        let opened = oneEvent(this.page, "sp-opened");
+        this.page.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.manual, "sp-opened");
+        this.manual.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.true;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+      });
+      it('does not close "hint" overlays when opening', async function() {
+        let opened = oneEvent(this.hint, "sp-opened");
+        this.hint.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.true;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.manual, "sp-opened");
+        this.manual.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.true;
+        expect(this.auto.open).to.be.false;
+        expect(this.manual.open).to.be.true;
+      });
+      it('does not close "auto" overlays when opening', async function() {
+        let opened = oneEvent(this.auto, "sp-opened");
+        this.auto.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.true;
+        expect(this.manual.open).to.be.false;
+        opened = oneEvent(this.manual, "sp-opened");
+        this.manual.open = true;
+        await opened;
+        expect(this.modal.open).to.be.false;
+        expect(this.page.open).to.be.false;
+        expect(this.hint.open).to.be.false;
+        expect(this.auto.open).to.be.true;
+        expect(this.manual.open).to.be.true;
+      });
+    });
+  });
+});
+//# sourceMappingURL=overlay-element.test.js.map