@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/test/overlay-trigger-hover.test.js

@@ -1,9 +1,7 @@
 "use strict";
 import {
-  aTimeout,
   elementUpdated,
   expect,
-  fixture,
   html,
   nextFrame,
   oneEvent,
@@ -20,8 +18,10 @@ import { spy } from "sinon";
 import { sendKeys } from "@web/test-runner-commands";
 import "@spectrum-web-components/theme/sp-theme.js";
 import "@spectrum-web-components/theme/src/themes.js";
-import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
-import { isFirefox } from "@spectrum-web-components/shared/src/platform.js";
+import {
+  fixture,
+  ignoreResizeObserverLoopError
+} from "../../../test/testing-helpers.js";
 ignoreResizeObserverLoopError(before, after);
 async function styledFixture(story) {
   const test = await fixture(html`
@@ -86,14 +86,18 @@ describe("Overlay Trigger - Hover", () => {
     it('allows pointer to enter the "tooltip" without closing the "tooltip"', async () => {
       const opened = oneEvent(button, "sp-opened");
       button.dispatchEvent(
-        new MouseEvent("mouseenter", {
+        new MouseEvent("pointerenter", {
           bubbles: true,
           composed: true
         })
       );
       await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      expect(tooltip.open).to.be.true;
       button.dispatchEvent(
-        new MouseEvent("mouseleave", {
+        new MouseEvent("pointerleave", {
           relatedTarget: tooltip,
           bubbles: true,
           composed: true
@@ -101,7 +105,7 @@ describe("Overlay Trigger - Hover", () => {
       );
       await nextFrame();
       tooltip.dispatchEvent(
-        new MouseEvent("mouseleave", {
+        new MouseEvent("pointerleave", {
           relatedTarget: button,
           bubbles: true,
           composed: true
@@ -111,25 +115,26 @@ describe("Overlay Trigger - Hover", () => {
       expect(el.open).to.equal("hover");
       const closed = oneEvent(button, "sp-closed");
       button.dispatchEvent(
-        new MouseEvent("mouseleave", {
+        new MouseEvent("pointerleave", {
+          relatedTarget: null,
           bubbles: true,
           composed: true
         })
       );
       await closed;
-      expect(el.open).to.be.null;
+      expect(el.open).to.be.undefined;
     });
     it('closes the "tooltip" when leaving the "tooltip"', async () => {
       const opened = oneEvent(button, "sp-opened");
       button.dispatchEvent(
-        new MouseEvent("mouseenter", {
+        new MouseEvent("pointerenter", {
           bubbles: true,
           composed: true
         })
       );
       await nextFrame();
       button.dispatchEvent(
-        new MouseEvent("mouseleave", {
+        new MouseEvent("pointerleave", {
           relatedTarget: tooltip,
           bubbles: true,
           composed: true
@@ -139,13 +144,14 @@ describe("Overlay Trigger - Hover", () => {
       expect(el.open).to.equal("hover");
       const closed = oneEvent(button, "sp-closed");
       tooltip.dispatchEvent(
-        new MouseEvent("mouseleave", {
+        new MouseEvent("pointerleave", {
+          relatedTarget: null,
           bubbles: true,
           composed: true
         })
       );
       await closed;
-      expect(el.open).to.be.null;
+      expect(el.open).to.be.undefined;
     });
   });
   it("persists hover content", async () => {
@@ -162,12 +168,14 @@ describe("Overlay Trigger - Hover", () => {
     await elementUpdated(el);
     expect(el.open).to.be.undefined;
     const trigger = el.querySelector('[slot="trigger"]');
+    const opened = oneEvent(trigger, "sp-opened");
     trigger.dispatchEvent(
-      new Event("mouseenter", {
-        bubbles: true
+      new Event("pointerenter", {
+        bubbles: true,
+        composed: true
       })
     );
-    await elementUpdated(el);
+    await opened;
     expect(el.open).to.equal("hover");
     trigger.click();
     await elementUpdated(el);
@@ -188,19 +196,21 @@ describe("Overlay Trigger - Hover", () => {
     await elementUpdated(el);
     expect(el.open).to.be.undefined;
     const trigger = el.querySelector('[slot="trigger"]');
+    let opened = oneEvent(trigger, "sp-opened");
     trigger.dispatchEvent(
-      new Event("mouseenter", {
+      new Event("pointerenter", {
         bubbles: true
       })
     );
-    await elementUpdated(el);
+    await opened;
     expect(el.open).to.equal("hover");
+    opened = oneEvent(trigger, "sp-opened");
     trigger.dispatchEvent(
       new Event("longpress", {
         bubbles: true
       })
     );
-    await elementUpdated(el);
+    await opened;
     expect(el.open).to.equal("longpress");
   });
   it('closes `hover` overlay when [type="modal"]', async () => {
@@ -220,21 +230,15 @@ describe("Overlay Trigger - Hover", () => {
     const opened = oneEvent(el, "sp-opened");
     trigger.focus();
     await opened;
-    await elementUpdated(el);
-    await aTimeout(500);
     expect(el.open).to.equal("hover");
     const closed = oneEvent(el, "sp-closed");
     trigger.blur();
     await closed;
-    await elementUpdated(el);
-    expect(el.open).to.be.null;
+    expect(el.open).to.be.undefined;
   });
   it('will not return focus to a "modal" parent', async () => {
-    if (isFirefox()) {
-      return;
-    }
     const el = await styledFixture(html`
-            <overlay-trigger type="modal" placement="none">
+            <overlay-trigger type="modal">
                 <sp-button slot="trigger">Toggle Dialog</sp-button>
                 <sp-dialog-wrapper
                     slot="click-content"
@@ -259,27 +263,29 @@ describe("Overlay Trigger - Hover", () => {
     await elementUpdated(el);
     const button = el.querySelector("sp-button");
     const dialog = el.querySelector("sp-dialog-wrapper");
+    const button1 = dialog.querySelector("#button-1");
+    const button2 = dialog.querySelector("#button-2");
+    const button3 = dialog.querySelector("#button-3");
     await elementUpdated(button);
     await elementUpdated(dialog);
     let opened = oneEvent(button, "sp-opened");
+    const openedHint = oneEvent(button1, "sp-opened");
     button.dispatchEvent(new Event("click", { bubbles: true }));
     await opened;
-    const button1 = dialog.querySelector("#button-1");
-    const button2 = dialog.querySelector("#button-2");
-    opened = oneEvent(button1, "sp-opened");
+    await openedHint;
+    expect(button1 === document.activeElement).to.be.true;
+    opened = oneEvent(button2, "sp-opened");
     sendKeys({
       press: "Tab"
     });
     await opened;
-    await nextFrame();
-    expect(button1 === document.activeElement).to.be.true;
-    opened = oneEvent(button2, "sp-opened");
+    expect(button2 === document.activeElement).to.be.true;
+    opened = oneEvent(button3, "sp-opened");
     sendKeys({
       press: "Tab"
     });
     await opened;
-    await nextFrame();
-    expect(button2 === document.activeElement).to.be.true;
+    expect(button3 === document.activeElement).to.be.true;
   });
 });
 //# sourceMappingURL=overlay-trigger-hover.test.js.map

package/test/overlay-trigger-hover.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["overlay-trigger-hover.test.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    aTimeout,\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    nextFrame,\n    oneEvent,\n    waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport { spy } from 'sinon';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { Tooltip } from '@spectrum-web-components/tooltip';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\nimport { isFirefox } from '@spectrum-web-components/shared/src/platform.js';\n\nignoreResizeObserverLoopError(before, after);\n\nasync function styledFixture<T extends Element>(\n    story: TemplateResult\n): Promise<T> {\n    const test = await fixture<Theme>(html`\n        <sp-theme theme=\"spectrum\" scale=\"medium\" color=\"light\">\n            ${story}\n        </sp-theme>\n    `);\n    return test.children[0] as T;\n}\n\ndescribe('Overlay Trigger - Hover', () => {\n    it('displays `hover` declaratively', async () => {\n        const openedSpy = spy();\n        const closedSpy = spy();\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger\n                    placement=\"right-start\"\n                    open=\"hover\"\n                    @sp-opened=${() => openedSpy()}\n                    @sp-closed=${() => closedSpy()}\n                >\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        await waitUntil(\n            () => openedSpy.calledOnce,\n            'hover content projected to overlay',\n            { timeout: 2000 }\n        );\n\n        el.removeAttribute('open');\n        await elementUpdated(el);\n\n        await waitUntil(() => closedSpy.calledOnce, 'hover content returned', {\n            timeout: 2000,\n        });\n    });\n    describe('\"tooltip\" mouse interactions', () => {\n        let el: OverlayTrigger;\n        let button: ActionButton;\n        let tooltip: Tooltip;\n        beforeEach(async () => {\n            el = await fixture<OverlayTrigger>(\n                (() => html`\n                    <overlay-trigger placement=\"right-start\">\n                        <sp-action-button slot=\"trigger\">\n                            <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                        </sp-action-button>\n                        <sp-tooltip slot=\"hover-content\" tip>\n                            Magnify\n                        </sp-tooltip>\n                    </overlay-trigger>\n                `)()\n            );\n            await elementUpdated(el);\n            button = el.querySelector('sp-action-button') as ActionButton;\n            tooltip = el.querySelector('sp-tooltip') as Tooltip;\n        });\n        it('allows pointer to enter the \"tooltip\" without closing the \"tooltip\"', async () => {\n            const opened = oneEvent(button, 'sp-opened');\n            button.dispatchEvent(\n                new MouseEvent('mouseenter', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await nextFrame();\n            button.dispatchEvent(\n                new MouseEvent('mouseleave', {\n                    relatedTarget: tooltip,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await nextFrame();\n            tooltip.dispatchEvent(\n                new MouseEvent('mouseleave', {\n                    relatedTarget: button,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await opened;\n\n            expect(el.open).to.equal('hover');\n\n            const closed = oneEvent(button, 'sp-closed');\n            button.dispatchEvent(\n                new MouseEvent('mouseleave', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await closed;\n\n            expect(el.open).to.be.null;\n        });\n        it('closes the \"tooltip\" when leaving the \"tooltip\"', async () => {\n            const opened = oneEvent(button, 'sp-opened');\n            button.dispatchEvent(\n                new MouseEvent('mouseenter', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await nextFrame();\n            button.dispatchEvent(\n                new MouseEvent('mouseleave', {\n                    relatedTarget: tooltip,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await opened;\n\n            expect(el.open).to.equal('hover');\n\n            const closed = oneEvent(button, 'sp-closed');\n            tooltip.dispatchEvent(\n                new MouseEvent('mouseleave', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await closed;\n\n            expect(el.open).to.be.null;\n        });\n    });\n    it('persists hover content', async () => {\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger placement=\"right-start\">\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        expect(el.open).to.be.undefined;\n\n        const trigger = el.querySelector('[slot=\"trigger\"]') as ActionButton;\n        trigger.dispatchEvent(\n            new Event('mouseenter', {\n                bubbles: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.open).to.equal('hover');\n\n        trigger.click();\n\n        await elementUpdated(el);\n\n        expect(el.open).to.equal('hover');\n    });\n    it('closes persistent hover content on `longpress`', async () => {\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger placement=\"right-start\">\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                    <sp-popover slot=\"longpress-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        expect(el.open).to.be.undefined;\n\n        const trigger = el.querySelector('[slot=\"trigger\"]') as ActionButton;\n        trigger.dispatchEvent(\n            new Event('mouseenter', {\n                bubbles: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.open).to.equal('hover');\n\n        trigger.dispatchEvent(\n            new Event('longpress', {\n                bubbles: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.open).to.equal('longpress');\n    });\n    it('closes `hover` overlay when [type=\"modal\"]', async () => {\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger placement=\"right-start\" type=\"modal\">\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        expect(el.open).to.be.undefined;\n\n        const trigger = el.querySelector('[slot=\"trigger\"]') as ActionButton;\n        const opened = oneEvent(el, 'sp-opened');\n        trigger.focus();\n        await opened;\n\n        await elementUpdated(el);\n        await aTimeout(500);\n\n        expect(el.open).to.equal('hover');\n\n        const closed = oneEvent(el, 'sp-closed');\n        trigger.blur();\n        await closed;\n\n        await elementUpdated(el);\n\n        expect(el.open).to.be.null;\n    });\n    it('will not return focus to a \"modal\" parent', async () => {\n        // There is an `sp-dialog-base` recyling issue in Firefox\n        if (isFirefox()) {\n            return;\n        }\n        const el = await styledFixture<OverlayTrigger>(html`\n            <overlay-trigger type=\"modal\" placement=\"none\">\n                <sp-button slot=\"trigger\">Toggle Dialog</sp-button>\n                <sp-dialog-wrapper\n                    slot=\"click-content\"\n                    headline=\"Dialog title\"\n                    size=\"s\"\n                >\n                    ${[1, 2, 3, 4].map(\n                        (index) => html`\n                            <overlay-trigger>\n                                <sp-button slot=\"trigger\" id=\"button-${index}\">\n                                    Button with Tooltip ${index}\n                                </sp-button>\n                                <sp-tooltip slot=\"hover-content\">\n                                    Tooltip ${index}\n                                </sp-tooltip>\n                            </overlay-trigger>\n                        `\n                    )}\n                </sp-dialog-wrapper>\n            </overlay-trigger>\n        `);\n        await elementUpdated(el);\n\n        const button = el.querySelector('sp-button') as Button;\n        const dialog = el.querySelector('sp-dialog-wrapper') as HTMLElement;\n        await elementUpdated(button);\n        await elementUpdated(dialog);\n\n        let opened = oneEvent(button, 'sp-opened');\n        button.dispatchEvent(new Event('click', { bubbles: true }));\n        await opened;\n        const button1 = dialog.querySelector('#button-1') as Button;\n        const button2 = dialog.querySelector('#button-2') as Button;\n\n        opened = oneEvent(button1, 'sp-opened');\n        sendKeys({\n            press: 'Tab',\n        });\n        await opened;\n\n        await nextFrame();\n\n        expect(button1 === document.activeElement).to.be.true;\n\n        opened = oneEvent(button2, 'sp-opened');\n        sendKeys({\n            press: 'Tab',\n        });\n        await opened;\n\n        await nextFrame();\n\n        expect(button2 === document.activeElement).to.be.true;\n    });\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    elementUpdated,\n    expect,\n    html,\n    nextFrame,\n    oneEvent,\n    waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport { spy } from 'sinon';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { Tooltip } from '@spectrum-web-components/tooltip';\nimport {\n    fixture,\n    ignoreResizeObserverLoopError,\n} from '../../../test/testing-helpers.js';\n\nignoreResizeObserverLoopError(before, after);\n\nasync function styledFixture<T extends Element>(\n    story: TemplateResult\n): Promise<T> {\n    const test = await fixture<Theme>(html`\n        <sp-theme theme=\"spectrum\" scale=\"medium\" color=\"light\">\n            ${story}\n        </sp-theme>\n    `);\n    return test.children[0] as T;\n}\n\ndescribe('Overlay Trigger - Hover', () => {\n    it('displays `hover` declaratively', async () => {\n        const openedSpy = spy();\n        const closedSpy = spy();\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger\n                    placement=\"right-start\"\n                    open=\"hover\"\n                    @sp-opened=${() => openedSpy()}\n                    @sp-closed=${() => closedSpy()}\n                >\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        await waitUntil(\n            () => openedSpy.calledOnce,\n            'hover content projected to overlay',\n            { timeout: 2000 }\n        );\n\n        el.removeAttribute('open');\n        await elementUpdated(el);\n\n        await waitUntil(() => closedSpy.calledOnce, 'hover content returned', {\n            timeout: 2000,\n        });\n    });\n    describe('\"tooltip\" mouse interactions', () => {\n        let el: OverlayTrigger;\n        let button: ActionButton;\n        let tooltip: Tooltip;\n        beforeEach(async () => {\n            el = await fixture<OverlayTrigger>(\n                (() => html`\n                    <overlay-trigger placement=\"right-start\">\n                        <sp-action-button slot=\"trigger\">\n                            <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                        </sp-action-button>\n                        <sp-tooltip slot=\"hover-content\" tip>\n                            Magnify\n                        </sp-tooltip>\n                    </overlay-trigger>\n                `)()\n            );\n            await elementUpdated(el);\n            button = el.querySelector('sp-action-button') as ActionButton;\n            tooltip = el.querySelector('sp-tooltip') as Tooltip;\n        });\n        it('allows pointer to enter the \"tooltip\" without closing the \"tooltip\"', async () => {\n            const opened = oneEvent(button, 'sp-opened');\n            button.dispatchEvent(\n                new MouseEvent('pointerenter', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n            await nextFrame();\n            expect(tooltip.open).to.be.true;\n            button.dispatchEvent(\n                new MouseEvent('pointerleave', {\n                    relatedTarget: tooltip,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await nextFrame();\n            tooltip.dispatchEvent(\n                new MouseEvent('pointerleave', {\n                    relatedTarget: button,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await opened;\n\n            expect(el.open).to.equal('hover');\n\n            const closed = oneEvent(button, 'sp-closed');\n            button.dispatchEvent(\n                new MouseEvent('pointerleave', {\n                    relatedTarget: null,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await closed;\n\n            expect(el.open).to.be.undefined;\n        });\n        it('closes the \"tooltip\" when leaving the \"tooltip\"', async () => {\n            const opened = oneEvent(button, 'sp-opened');\n            button.dispatchEvent(\n                new MouseEvent('pointerenter', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await nextFrame();\n            button.dispatchEvent(\n                new MouseEvent('pointerleave', {\n                    relatedTarget: tooltip,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await opened;\n\n            expect(el.open).to.equal('hover');\n\n            const closed = oneEvent(button, 'sp-closed');\n            tooltip.dispatchEvent(\n                new MouseEvent('pointerleave', {\n                    relatedTarget: null,\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            await closed;\n\n            expect(el.open).to.be.undefined;\n        });\n    });\n    it('persists hover content', async () => {\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger placement=\"right-start\">\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        expect(el.open).to.be.undefined;\n\n        const trigger = el.querySelector('[slot=\"trigger\"]') as ActionButton;\n        const opened = oneEvent(trigger, 'sp-opened');\n        trigger.dispatchEvent(\n            new Event('pointerenter', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n        await opened;\n\n        expect(el.open).to.equal('hover');\n\n        trigger.click();\n\n        await elementUpdated(el);\n\n        expect(el.open).to.equal('hover');\n    });\n    it('closes persistent hover content on `longpress`', async () => {\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger placement=\"right-start\">\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                    <sp-popover slot=\"longpress-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        expect(el.open).to.be.undefined;\n\n        const trigger = el.querySelector('[slot=\"trigger\"]') as ActionButton;\n        let opened = oneEvent(trigger, 'sp-opened');\n        trigger.dispatchEvent(\n            new Event('pointerenter', {\n                bubbles: true,\n            })\n        );\n        await opened;\n\n        expect(el.open).to.equal('hover');\n\n        opened = oneEvent(trigger, 'sp-opened');\n        trigger.dispatchEvent(\n            new Event('longpress', {\n                bubbles: true,\n            })\n        );\n        await opened;\n\n        expect(el.open).to.equal('longpress');\n    });\n    it('closes `hover` overlay when [type=\"modal\"]', async () => {\n        const el = await fixture<OverlayTrigger>(\n            (() => html`\n                <overlay-trigger placement=\"right-start\" type=\"modal\">\n                    <sp-action-button slot=\"trigger\">\n                        <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n                    </sp-action-button>\n                    <sp-popover slot=\"hover-content\" tip></sp-popover>\n                </overlay-trigger>\n            `)()\n        );\n        await elementUpdated(el);\n\n        expect(el.open).to.be.undefined;\n\n        const trigger = el.querySelector('[slot=\"trigger\"]') as ActionButton;\n        const opened = oneEvent(el, 'sp-opened');\n        trigger.focus();\n        await opened;\n\n        expect(el.open).to.equal('hover');\n\n        const closed = oneEvent(el, 'sp-closed');\n        trigger.blur();\n        await closed;\n\n        expect(el.open).to.be.undefined;\n    });\n    it('will not return focus to a \"modal\" parent', async () => {\n        const el = await styledFixture<OverlayTrigger>(html`\n            <overlay-trigger type=\"modal\">\n                <sp-button slot=\"trigger\">Toggle Dialog</sp-button>\n                <sp-dialog-wrapper\n                    slot=\"click-content\"\n                    headline=\"Dialog title\"\n                    size=\"s\"\n                >\n                    ${[1, 2, 3, 4].map(\n                        (index) => html`\n                            <overlay-trigger>\n                                <sp-button slot=\"trigger\" id=\"button-${index}\">\n                                    Button with Tooltip ${index}\n                                </sp-button>\n                                <sp-tooltip slot=\"hover-content\">\n                                    Tooltip ${index}\n                                </sp-tooltip>\n                            </overlay-trigger>\n                        `\n                    )}\n                </sp-dialog-wrapper>\n            </overlay-trigger>\n        `);\n        await elementUpdated(el);\n\n        const button = el.querySelector('sp-button') as Button;\n        const dialog = el.querySelector('sp-dialog-wrapper') as HTMLElement;\n        const button1 = dialog.querySelector('#button-1') as Button;\n        const button2 = dialog.querySelector('#button-2') as Button;\n        const button3 = dialog.querySelector('#button-3') as Button;\n        await elementUpdated(button);\n        await elementUpdated(dialog);\n\n        let opened = oneEvent(button, 'sp-opened');\n        const openedHint = oneEvent(button1, 'sp-opened');\n        button.dispatchEvent(new Event('click', { bubbles: true }));\n        await opened;\n        await openedHint;\n\n        expect(button1 === document.activeElement).to.be.true;\n\n        opened = oneEvent(button2, 'sp-opened');\n        sendKeys({\n            press: 'Tab',\n        });\n        await opened;\n\n        expect(button2 === document.activeElement).to.be.true;\n\n        opened = oneEvent(button3, 'sp-opened');\n        sendKeys({\n            press: 'Tab',\n        });\n        await opened;\n\n        expect(button3 === document.activeElement).to.be.true;\n    });\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/test/overlay-trigger-longpress.test.js

@@ -2,13 +2,13 @@
 import {
   elementUpdated,
   expect,
-  fixture,
   html,
   nextFrame,
   oneEvent,
   waitUntil
 } from "@open-wc/testing";
 import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/action-group/sp-action-group.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
 import "@spectrum-web-components/popover/sp-popover.js";
@@ -20,77 +20,204 @@ import { sendKeys } from "@web/test-runner-commands";
 import { spy } from "sinon";
 import { sendMouse } from "../../../test/plugins/browser.js";
 import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
+import { fixture, isOnTopLayer } from "../../../test/testing-helpers.js";
+import { longpress } from "../stories/overlay.stories.js";
 describe("Overlay Trigger - Longpress", () => {
-  it("displays `longpress` content", async () => {
-    const el = await fixture(
-      (() => html`
-                <overlay-trigger placement="right-start">
-                    <sp-action-button slot="trigger" hold-affordance>
-                        <sp-icon-magnify slot="icon"></sp-icon-magnify>
-                    </sp-action-button>
-                    <sp-popover slot="longpress-content" tip>
-                        <sp-action-group
-                            selects="single"
-                            vertical
-                            style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);"
-                        >
-                            <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
-                            </sp-action-button>
-                            <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
-                            </sp-action-button>
-                            <sp-action-button>
-                                <sp-icon-magnify slot="icon"></sp-icon-magnify>
-                            </sp-action-button>
-                        </sp-action-group>
-                    </sp-popover>
-                </overlay-trigger>
-            `)()
-    );
-    await elementUpdated(el);
-    const trigger = el.querySelector("sp-action-button");
-    const content = el.querySelector(
-      '[slot="longpress-content"]'
-    );
-    expect(trigger).to.not.be.null;
-    expect(content).to.not.be.null;
-    expect(content.open).to.be.false;
-    trigger.focus();
-    let open = oneEvent(el, "sp-opened");
-    await sendKeys({
-      press: "Space"
+  describe("responds to use interactions", () => {
+    beforeEach(async function() {
+      this.el = await fixture(longpress());
+      this.trigger = this.el.querySelector(
+        "sp-action-button"
+      );
+      this.content = this.el.querySelector(
+        '[slot="longpress-content"]'
+      );
+      expect(this.trigger).to.not.be.null;
+      expect(this.content).to.not.be.null;
+      expect(this.content.open).to.be.false;
+      this.trigger.focus();
     });
-    await open;
-    expect(content.open, "opens for `Space`").to.be.true;
-    let closed = oneEvent(el, "sp-closed");
-    document.body.click();
-    await closed;
-    expect(!content.open, "closes for `Space`").to.be.true;
-    trigger.focus();
-    open = oneEvent(el, "sp-opened");
-    sendKeys({
-      press: "Alt+ArrowDown"
+    it("opens/closes for `Space`", async function() {
+      const open = oneEvent(this.el, "sp-opened");
+      await sendKeys({
+        press: "Space"
+      });
+      await open;
+      expect(this.content.open, "opens for `Space`").to.be.true;
+      expect(await isOnTopLayer(this.content)).to.be.true;
+      const closed = oneEvent(this.el, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [500, 20]
+          }
+        ]
+      });
+      await closed;
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      expect(await isOnTopLayer(this.content)).to.be.false;
+      expect(this.content.open, "closes for `Space`").to.be.false;
     });
-    await open;
-    expect(content.open, "opens for `Alt+ArrowDown`").to.be.true;
-    closed = oneEvent(el, "sp-closed");
-    await sendKeys({
-      press: "Escape"
+    it("opens/closes for `Alt+ArrowDown`", async function() {
+      const open = oneEvent(this.el, "sp-opened");
+      sendKeys({
+        press: "Alt+ArrowDown"
+      });
+      await open;
+      await nextFrame();
+      await nextFrame();
+      expect(this.content.open, "opens for `Alt+ArrowDown`").to.be.true;
+      expect(await isOnTopLayer(this.content)).to.be.true;
+      const closed = oneEvent(this.el, "sp-closed");
+      await sendKeys({
+        press: "Escape"
+      });
+      await closed;
+      await nextFrame();
+      await nextFrame();
+      expect(this.content.open, "closes for `Alt+ArrowDown`").to.be.false;
+      expect(await isOnTopLayer(this.content)).to.be.false;
     });
-    await closed;
-    expect(!content.open, "closes for `Alt+ArrowDown`").to.be.true;
-    await elementUpdated(el);
-    open = oneEvent(el, "sp-opened");
-    trigger.dispatchEvent(new PointerEvent("pointerdown", { button: 0 }));
-    await open;
-    expect(content.open, "opens for `pointerdown`").to.be.true;
-    closed = oneEvent(el, "sp-closed");
-    await sendKeys({
-      press: "Escape"
+    it("opens/closes for `Alt+ArrowDown` with Button", async function() {
+      const button = document.createElement("sp-button");
+      button.slot = "trigger";
+      this.trigger.replaceWith(button);
+      await elementUpdated(button);
+      button.focus();
+      await elementUpdated(button);
+      const open = oneEvent(this.el, "sp-opened");
+      sendKeys({
+        press: "Alt+ArrowDown"
+      });
+      await open;
+      await nextFrame();
+      await nextFrame();
+      expect(await isOnTopLayer(this.content)).to.be.true;
+      expect(this.content.open, "opens for `Alt+ArrowDown`").to.be.true;
+      const closed = oneEvent(this.el, "sp-closed");
+      await sendKeys({
+        press: "Escape"
+      });
+      await closed;
+      await nextFrame();
+      await nextFrame();
+      expect(await isOnTopLayer(this.content)).to.be.false;
+      expect(this.content.open, "closes for `Alt+ArrowDown`").to.be.false;
+    });
+    it("opens/closes for `longpress`", async function() {
+      expect(this.trigger.holdAffordance).to.be.true;
+      let open = oneEvent(this.el, "sp-opened");
+      const rect = this.trigger.getBoundingClientRect();
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rect.left + rect.width / 2,
+              rect.top + rect.height / 2
+            ]
+          },
+          {
+            type: "down"
+          }
+        ]
+      });
+      await open;
+      await nextFrame();
+      await nextFrame();
+      open = oneEvent(this.el, "sp-opened");
+      await open;
+      await nextFrame();
+      await nextFrame();
+      expect(this.content.open, "opens for `pointerdown`").to.be.true;
+      await sendMouse({
+        steps: [
+          {
+            type: "up"
+          },
+          {
+            type: "move",
+            position: [
+              rect.left + rect.width * 2,
+              rect.top + rect.height / 2
+            ]
+          }
+        ]
+      });
+      await nextFrame();
+      await nextFrame();
+      expect(this.content.open, "stays open for `pointerup`").to.be.true;
+      expect(await isOnTopLayer(this.content)).to.be.true;
+      const closed = oneEvent(this.trigger, "sp-closed");
+      await sendKeys({
+        press: "Escape"
+      });
+      await closed;
+      expect(await isOnTopLayer(this.content)).to.be.false;
+      expect(this.content.open, "closes for `pointerdown`").to.be.false;
+    });
+    it("opens/closes for `longpress` with Button", async function() {
+      const button = document.createElement("sp-button");
+      button.slot = "trigger";
+      this.trigger.remove();
+      this.el.append(button);
+      await elementUpdated(this.el);
+      await nextFrame();
+      await nextFrame();
+      let open = oneEvent(this.el, "sp-opened");
+      const rect = button.getBoundingClientRect();
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rect.left + rect.width / 2,
+              rect.top + rect.height / 2
+            ]
+          },
+          {
+            type: "down"
+          }
+        ]
+      });
+      await open;
+      await nextFrame();
+      await nextFrame();
+      open = oneEvent(this.el, "sp-opened");
+      await open;
+      await nextFrame();
+      await nextFrame();
+      expect(this.content.open, "opens for `pointerdown`").to.be.true;
+      await sendMouse({
+        steps: [
+          {
+            type: "up"
+          },
+          {
+            type: "move",
+            position: [
+              rect.left + rect.width * 2,
+              rect.top + rect.height / 2
+            ]
+          }
+        ]
+      });
+      await nextFrame();
+      await nextFrame();
+      expect(this.content.open, "stays open for `pointerup`").to.be.true;
+      expect(await isOnTopLayer(this.content)).to.be.true;
+      const closed = oneEvent(button, "sp-closed");
+      await sendKeys({
+        press: "Escape"
+      });
+      await closed;
+      expect(await isOnTopLayer(this.content)).to.be.false;
+      expect(this.content.open, "closes for `pointerdown`").to.be.false;
     });
-    await closed;
-    expect(!content.open, "closes for `pointerdown`").to.be.true;
   });
   it("displays `longpress` declaratively", async () => {
     const openedSpy = spy();
@@ -148,6 +275,8 @@ describe("Overlay Trigger - Longpress", () => {
                 </overlay-trigger>
             `
     );
+    await nextFrame();
+    await nextFrame();
     const trigger = el.querySelector('[slot="trigger"]');
     await elementUpdated(el);
     expect(trigger.hasAttribute("aria-describedby")).to.be.true;
@@ -169,11 +298,11 @@ describe("Overlay Trigger - Longpress", () => {
       LONGPRESS_INSTRUCTIONS.keyboard
     );
     const closed = oneEvent(el, "sp-closed");
-    await sendKeys({
+    sendKeys({
       press: "Escape"
     });
     await closed;
-    expect(el.open).to.be.null;
+    expect(el.open).to.be.undefined;
     expect(trigger.hasAttribute("aria-describedby")).to.be.true;
     expect(el.childNodes.length, "always").to.equal(6);
     await findDescribedNode(
@@ -213,22 +342,30 @@ describe("Overlay Trigger - Longpress", () => {
       '[slot="longpress-content"]'
     );
     await elementUpdated(el);
-    expect(el.hasLongpressContent).to.be.true;
+    expect(
+      trigger.hasAttribute("aria-describedby"),
+      "applies described by content"
+    ).to.be.true;
     expect(el.childNodes.length, "always").to.equal(6);
     el.removeAttribute("hold-affordance");
-    el.removeChild(content);
+    content.remove();
     await elementUpdated(el);
-    expect(trigger.hasAttribute("aria-describedby")).to.be.false;
-    expect(el.hasLongpressContent).to.be.false;
+    await nextFrame();
+    await nextFrame();
+    expect(
+      trigger.hasAttribute("aria-describedby"),
+      "removed described by content"
+    ).to.be.false;
     expect(el.childNodes.length, "always").to.equal(4);
     el.setAttribute("hold-affordance", "true");
     el.append(content);
     await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
     await findDescribedNode(
       "Trigger with hold affordance",
       LONGPRESS_INSTRUCTIONS.keyboard
     );
-    expect(el.hasLongpressContent).to.be.true;
     expect(el.childNodes.length, "always").to.equal(6);
   });
   it("recognises multiple overlay triggers in a11y tree", async () => {
@@ -276,14 +413,6 @@ describe("Overlay Trigger - Longpress", () => {
     );
     await elementUpdated(el);
     const div = document.getElementById("container");
-    const firstTrigger = document.getElementById(
-      "first-trigger"
-    );
-    const secondTrigger = document.getElementById(
-      "second-trigger"
-    );
-    expect(firstTrigger.hasLongpressContent).to.be.true;
-    expect(secondTrigger.hasLongpressContent).to.be.true;
     expect(div.childNodes.length, "always").to.equal(5);
     await findDescribedNode(
       "First button",