@spectrum-web-components/overlay 1.0.2 → 1.0.3

package/test/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.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*/\n\nimport { fixture, isOnTopLayer } from '../../../test/testing-helpers.js';\nimport {\n    aTimeout,\n    elementUpdated,\n    expect,\n    html,\n    nextFrame,\n    oneEvent,\n} from '@open-wc/testing';\n\nimport {\n    OverlayTrigger,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nexport const runOverlayTriggerTests = (type: string): void => {\n    describe(`Overlay Trigger - ${type}`, () => {\n        describe('open/close', () => {\n            beforeEach(async function () {\n                this.testDiv = await fixture<HTMLDivElement>(html`\n                    <div>\n                        <style>\n                            body {\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                            }\n                        </style>\n                        <input type=\"text\" />\n                        <overlay-trigger id=\"trigger\" placement=\"top\">\n                            <sp-button\n                                id=\"outer-button\"\n                                variant=\"primary\"\n                                slot=\"trigger\"\n                            >\n                                Show Popover\n                            </sp-button>\n                            <sp-popover\n                                id=\"outer-popover\"\n                                slot=\"click-content\"\n                                direction=\"bottom\"\n                                tip\n                            >\n                                <sp-dialog\n                                    no-divider\n                                    class=\"options-popover-content\"\n                                >\n                                    <overlay-trigger\n                                        id=\"inner-trigger\"\n                                        placement=\"bottom\"\n                                    >\n                                        <sp-button\n                                            id=\"inner-button\"\n                                            slot=\"trigger\"\n                                        >\n                                            Press Me\n                                        </sp-button>\n                                        <sp-popover\n                                            id=\"inner-popover\"\n                                            slot=\"click-content\"\n                                            direction=\"bottom\"\n                                            tip\n                                        >\n                                            <sp-dialog\n                                                no-divider\n                                                class=\"options-popover-content\"\n                                            >\n                                                Another Popover\n                                                <sp-button>\n                                                    Does nothing\n                                                </sp-button>\n                                            </sp-dialog>\n                                        </sp-popover>\n                                    </overlay-trigger>\n                                </sp-dialog>\n                            </sp-popover>\n                            <div\n                                id=\"hover-content\"\n                                slot=\"hover-content\"\n                                class=\"tooltip\"\n                                delay=\"100\"\n                            >\n                                Tooltip\n                            </div>\n                        </overlay-trigger>\n                    </div>\n                `);\n\n                this.innerTrigger = this.testDiv.querySelector(\n                    '#inner-trigger'\n                ) as OverlayTrigger;\n                this.outerTrigger = this.testDiv.querySelector(\n                    '#trigger'\n                ) as OverlayTrigger;\n                this.innerButton = this.testDiv.querySelector(\n                    '#inner-button'\n                ) as Button;\n                this.outerButton = this.testDiv.querySelector(\n                    '#outer-button'\n                ) as Button;\n                this.innerClickContent = this.testDiv.querySelector(\n                    '#inner-popover'\n                ) as Popover;\n                this.outerClickContent = this.testDiv.querySelector(\n                    '#outer-popover'\n                ) as Popover;\n                this.hoverContent = this.testDiv.querySelector(\n                    '#hover-content'\n                ) as HTMLDivElement;\n\n                await Promise.all([\n                    this.innerTrigger.updateComplete,\n                    this.outerTrigger.updateComplete,\n                    this.innerButton.updateComplete,\n                    this.outerButton.updateComplete,\n                    this.innerClickContent.updateComplete,\n                    this.outerClickContent.updateComplete,\n                ]);\n                this.testDiv.querySelector('input').focus();\n            });\n\n            it('opens a popover', async function () {\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover not available at point'\n                ).to.be.false;\n\n                expect(this.outerButton).to.exist;\n                const open = oneEvent(this.outerTrigger, 'sp-opened');\n                this.outerButton.click();\n                await open;\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover available at point'\n                ).to.be.true;\n            });\n\n            it('[disabled] closes a popover', async function () {\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover not available at point'\n                ).to.be.false;\n                expect(this.outerTrigger.disabled).to.be.false;\n\n                expect(this.outerButton).to.exist;\n\n                const opened = oneEvent(this.outerButton, 'sp-opened');\n                this.outerButton.click();\n                await opened;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover available at point'\n                ).to.be.true;\n\n                const closed = oneEvent(this.outerButton, 'sp-closed');\n                this.outerTrigger.disabled = true;\n                await closed;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover not available at point'\n                ).to.be.false;\n            });\n\n            it('resizes a popover', async function () {\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover not available at point'\n                ).to.be.false;\n\n                expect(this.outerButton).to.exist;\n                const open = oneEvent(this.outerTrigger, 'sp-opened');\n                this.outerButton.click();\n                await open;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover available at point'\n                ).to.be.true;\n\n                window.dispatchEvent(new Event('resize'));\n                window.dispatchEvent(new Event('resize'));\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover available at point'\n                ).to.be.true;\n            });\n\n            ['modal', 'replace', 'inline'].map((type: string) => {\n                it(`opens a popover - [type=\"${type}\"]`, async function () {\n                    this.outerTrigger.type = type as Extract<\n                        TriggerInteractions,\n                        'inline' | 'modal' | 'replace'\n                    >;\n                    await elementUpdated(this.outerTrigger);\n                    expect(\n                        await isOnTopLayer(this.outerClickContent),\n                        'popover not available at point'\n                    ).to.be.false;\n\n                    expect(this.outerButton).to.exist;\n                    const opened = oneEvent(this.outerTrigger, 'sp-opened');\n                    this.outerButton.click();\n                    await opened;\n                    expect(\n                        await isOnTopLayer(this.outerClickContent),\n                        'popover available at point'\n                    ).to.be.true;\n                });\n            });\n\n            it('does not open a hover popover when a click popover is open', async function () {\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover not available at point'\n                ).to.be.false;\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover not available at point'\n                ).to.be.false;\n\n                expect(this.outerButton).to.exist;\n                const open = oneEvent(this.outerTrigger, 'sp-opened');\n                this.outerButton.click();\n                await open;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover not available at point'\n                ).to.be.false;\n\n                this.outerButton.dispatchEvent(\n                    new Event('mouseenter', {\n                        bubbles: true,\n                        composed: true,\n                    })\n                );\n\n                await nextFrame();\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'popover available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover not available at point'\n                ).to.be.false;\n            });\n\n            it('does not open a popover when [disabled]', async function () {\n                const triggerZone = this.outerTrigger.shadowRoot.querySelector(\n                    '#trigger'\n                ) as HTMLDivElement;\n\n                expect(this.outerTrigger.disabled).to.be.false;\n                let open = oneEvent(this.outerTrigger, 'sp-opened');\n                this.outerButton.click();\n                await open;\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover available at point'\n                ).to.be.true;\n                let closed = oneEvent(this.outerTrigger, 'sp-closed');\n                sendMouse({\n                    steps: [\n                        {\n                            type: 'click',\n                            position: [1, 1],\n                        },\n                    ],\n                });\n                await closed;\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover not available at point'\n                ).to.be.false;\n\n                this.outerTrigger.disabled = true;\n                await elementUpdated(this.outerTrigger);\n\n                expect(this.outerTrigger.disabled).to.be.true;\n                expect(this.outerTrigger.hasAttribute('disabled')).to.be.true;\n                // // The overlay shouldn't open here.\n                this.outerButton.click();\n                await aTimeout(150);\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover not available at point'\n                ).to.be.false;\n                // The overlay shouldn't open here, either.\n                triggerZone.dispatchEvent(new Event('mouseenter'));\n                await aTimeout(150);\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover not available at point'\n                ).to.be.false;\n\n                this.outerTrigger.disabled = false;\n                await elementUpdated(this.outerTrigger);\n\n                expect(this.outerTrigger.disabled).to.be.false;\n                expect(this.outerTrigger.hasAttribute('disabled')).to.be.false;\n                open = oneEvent(this.outerTrigger, 'sp-opened');\n                this.outerButton.click();\n                await open;\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover available at point'\n                ).to.be.true;\n                closed = oneEvent(this.outerTrigger, 'sp-closed');\n                this.outerButton.click();\n                await closed;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover not available at point'\n                ).to.be.false;\n            });\n\n            it('opens a nested popover', async function () {\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover not available at point'\n                ).to.be.false;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'hover not available at point'\n                ).to.be.false;\n\n                expect(this.outerButton).to.exist;\n                let open = oneEvent(this.outerTrigger, 'sp-opened');\n                this.outerButton.click();\n                await open;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n                expect(await isOnTopLayer(this.innerClickContent)).to.be.false;\n\n                open = oneEvent(this.innerTrigger, 'sp-opened');\n                this.innerButton.click();\n                await open;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content available at point'\n                ).to.be.true;\n            });\n\n            it('focus previous \"modal\" when closing nested \"modal\"', async function () {\n                this.outerTrigger.type = 'modal';\n                this.innerTrigger.type = 'modal';\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content not available at point'\n                ).to.be.false;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content not available at point'\n                ).to.be.false;\n\n                const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n                this.outerButton.click();\n                await outerOpen;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content available at point'\n                ).to.be.false;\n\n                const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n                this.innerButton.click();\n                await innerOpen;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content available at point'\n                ).to.be.true;\n\n                // Why does this make the test pass in Chromium? \uD83E\uDD37\uD83C\uDFFB\u200D\u2642\uFE0F\n                await sendKeys({\n                    press: 'Space',\n                });\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content available at point'\n                ).to.be.true;\n\n                const innerClose = oneEvent(this.innerButton, 'sp-closed');\n                await sendKeys({\n                    press: 'Escape',\n                });\n                await innerClose;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content not available at point'\n                ).to.be.false;\n\n                expect(\n                    document.activeElement === this.innerButton,\n                    `outer popover recieved focus: ${document.activeElement?.localName}`\n                ).to.be.true;\n            });\n\n            it('escape closes an open popover', async function () {\n                this.outerTrigger.type = 'modal';\n                this.innerTrigger.type = 'modal';\n                const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n                this.outerButton.click();\n                await outerOpen;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point'\n                ).to.be.true;\n\n                const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n                this.innerButton.click();\n                await innerOpen;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point, 1'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content available at point'\n                ).to.be.true;\n\n                const innerClose = oneEvent(this.innerButton, 'sp-closed');\n                await sendKeys({\n                    press: 'Escape',\n                });\n                await innerClose;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content available at point, 2'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content not available at point, 1'\n                ).to.be.false;\n\n                const outerClose = oneEvent(this.outerButton, 'sp-closed');\n                await sendKeys({\n                    press: 'Escape',\n                });\n                await outerClose;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content not available at point'\n                ).to.be.false;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content not available at point, 2'\n                ).to.be.false;\n            });\n\n            it('click closes an open popover', async function () {\n                this.outerTrigger.type = 'auto';\n                this.innerTrigger.type = 'auto';\n                const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n                this.outerButton.click();\n                await outerOpen;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content is available at point'\n                ).to.be.true;\n\n                const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n                this.innerButton.click();\n                await innerOpen;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content is available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content is available at point'\n                ).to.be.true;\n\n                // Test that clicking in the overlay content does not close the overlay\n                // 200ms is slightly more than the overlay animation fade out time (130ms)\n                this.innerClickContent.click();\n                await aTimeout(200);\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content is available at point'\n                ).to.be.true;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content is available at point'\n                ).to.be.true;\n\n                const innerClose = oneEvent(this.innerButton, 'sp-closed');\n                const outerClose = oneEvent(this.outerButton, 'sp-closed');\n                sendMouse({\n                    steps: [\n                        {\n                            type: 'click',\n                            position: [1, 1],\n                        },\n                    ],\n                });\n                await innerClose;\n                await outerClose;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'outer click content is not available at point'\n                ).to.be.not;\n                expect(\n                    await isOnTopLayer(this.innerClickContent),\n                    'inner click content is not available at point'\n                ).to.be.not;\n            });\n\n            it('opens a hover popover', async function () {\n                expect(await isOnTopLayer(this.hoverContent)).to.be.false;\n\n                const rect = this.outerTrigger.getBoundingClientRect();\n                const open = oneEvent(this.outerTrigger, 'sp-opened');\n                sendMouse({\n                    steps: [\n                        {\n                            type: 'move',\n                            position: [\n                                rect.left + rect.width / 2,\n                                rect.top + rect.height / 2,\n                            ],\n                        },\n                    ],\n                });\n                await open;\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover content is available at point'\n                ).to.be.true;\n\n                const close = oneEvent(this.outerTrigger, 'sp-closed');\n                sendMouse({\n                    steps: [\n                        {\n                            type: 'move',\n                            position: [\n                                rect.left + rect.width * 2,\n                                rect.top + rect.height / 2,\n                            ],\n                        },\n                    ],\n                });\n                await close;\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover content is not available at point'\n                ).to.be.false;\n            });\n\n            it('closes a hover popover', async function () {\n                expect(await isOnTopLayer(this.hoverContent)).to.be.false;\n\n                const rect = this.outerTrigger.getBoundingClientRect();\n                const open = oneEvent(this.outerTrigger, 'sp-opened');\n                await sendMouse({\n                    steps: [\n                        {\n                            type: 'move',\n                            position: [\n                                rect.left + rect.width / 2,\n                                rect.top + rect.height / 2,\n                            ],\n                        },\n                    ],\n                });\n                await open;\n                const close = oneEvent(this.outerTrigger, 'sp-closed');\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover content is available at point'\n                ).to.be.true;\n                await sendMouse({\n                    steps: [\n                        {\n                            type: 'move',\n                            position: [\n                                rect.left + rect.width * 2,\n                                rect.top + rect.height / 2,\n                            ],\n                        },\n                    ],\n                });\n                await close;\n                expect(\n                    await isOnTopLayer(this.hoverContent),\n                    'hover content is not available at point'\n                ).to.be.false;\n            });\n\n            it('dispatches events on open/close', async function () {\n                const opened = oneEvent(this.outerButton, 'sp-opened');\n                this.outerButton.click();\n                const openedEvent = await opened;\n\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover content is available at point'\n                ).to.be.true;\n                expect(this.outerTrigger.open).to.equal('click');\n\n                expect(openedEvent.detail.interaction).to.equal('auto');\n\n                const closed = oneEvent(this.outerButton, 'sp-closed');\n                sendMouse({\n                    steps: [\n                        {\n                            type: 'click',\n                            position: [1, 1],\n                        },\n                    ],\n                });\n                const closedEvent = await closed;\n                expect(closedEvent.detail.interaction).to.equal('auto');\n                expect(\n                    await isOnTopLayer(this.outerClickContent),\n                    'hover content is not available at point'\n                ).to.be.false;\n            });\n        });\n        describe('System interactions', () => {\n            afterEach(async () => {\n                const triggers =\n                    document.querySelectorAll<OverlayTrigger>(\n                        'overlay-trigger'\n                    );\n                const closes: Promise<CustomEvent<unknown>>[] = [];\n                triggers.forEach((trigger) => {\n                    if (trigger.open) {\n                        const close = oneEvent(trigger, 'sp-closed');\n                        trigger.open = undefined;\n                        closes.push(close);\n                    }\n                });\n                await Promise.all(closes);\n            });\n        });\n    });\n};\n"],
+  "mappings": "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",
+  "names": ["type"]
+}

package/test/overlay-directive.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/overlay-directive.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("OverlayDirectiveStories", stories);
+//# sourceMappingURL=overlay-directive.test-vrt.js.map

package/test/overlay-directive.test-vrt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["overlay-directive.test-vrt.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*/\n\nimport * as stories from '../stories/overlay-directive.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('OverlayDirectiveStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,2BAA2B,OAA+B;",
+  "names": []
+}

package/test/overlay-directive.test.js

@@ -0,0 +1,162 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import {
+  elementUpdated,
+  expect,
+  nextFrame,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+import {
+  Default,
+  insertionOptions
+} from "../stories/overlay-directive.stories.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { fixture } from "../../../test/testing-helpers.js";
+describe("Overlay Directive", () => {
+  it("opens declaratively", async function() {
+    const test = await fixture(Default({ open: true }));
+    await oneEvent(test, "sp-opened");
+    const el = test.nextElementSibling;
+    expect(el.open).to.be.true;
+  });
+  it("opens without options", async function() {
+    const test = await fixture(Default());
+    const opened = oneEvent(test, "sp-opened");
+    test.click();
+    await opened;
+    const el = test.nextElementSibling;
+    expect(el.open).to.be.true;
+  });
+  it("opens an Overlay after the trigger", async function() {
+    const test = await fixture(html`
+            <div
+                style="width: 100%; height: 100vh; display: grid; place-content: center;"
+            >
+                ${insertionOptions()}
+            </div>
+        `);
+    const el = test.querySelector("sp-button");
+    await elementUpdated(el);
+    let overlays = document.querySelectorAll("sp-overlay");
+    expect(overlays.length).to.equal(0);
+    const rect = el.getBoundingClientRect();
+    let opened = oneEvent(el, "sp-opened");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2
+          ]
+        }
+      ]
+    });
+    await opened;
+    opened = oneEvent(el, "sp-opened");
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2
+          ]
+        },
+        {
+          type: "move",
+          position: [
+            rect.left - rect.width / 2,
+            rect.top - rect.height / 2
+          ]
+        }
+      ]
+    });
+    await opened;
+    overlays = document.querySelectorAll("sp-overlay");
+    expect(overlays.length).to.be.gt(0);
+    expect(overlays[0].previousElementSibling).to.equal(el);
+    const closed = oneEvent(overlays[0], "slottable-request");
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            rect.left - rect.width / 2,
+            rect.top - rect.height / 2
+          ]
+        }
+      ]
+    });
+    await closed;
+    await waitUntil(() => {
+      overlays = document.querySelectorAll("sp-overlay");
+      return overlays.length === 0;
+    }, "not all overlays were cleaned up");
+    expect(overlays.length).to.equal(0);
+  });
+  it("opens an Overlay in a specific part of the DOM", async function() {
+    const test = await fixture(html`
+            <div
+                style="width: 100%; height: 100vh; display: grid; place-content: center;"
+            >
+                ${insertionOptions(insertionOptions.args)}
+            </div>
+        `);
+    const el = test.querySelector("sp-button");
+    await elementUpdated(el);
+    const otherElement = test.querySelector(
+      "#other-element"
+    );
+    let overlays = otherElement.querySelectorAll("sp-overlay");
+    expect(overlays.length).to.equal(0);
+    const rect = el.getBoundingClientRect();
+    let opened = oneEvent(el, "sp-opened");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2
+          ]
+        }
+      ]
+    });
+    await opened;
+    opened = oneEvent(el, "sp-opened");
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2
+          ]
+        }
+      ]
+    });
+    await opened;
+    overlays = otherElement.querySelectorAll("sp-overlay");
+    expect(overlays.length).to.equal(1);
+    const closed = oneEvent(overlays[0], "slottable-request");
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            rect.left - rect.width / 2,
+            rect.top - rect.height / 2
+          ]
+        }
+      ]
+    });
+    await closed;
+    await nextFrame();
+    await nextFrame();
+    overlays = otherElement.querySelectorAll("sp-overlay");
+    expect(overlays.length).to.equal(0);
+  });
+});
+//# sourceMappingURL=overlay-directive.test.js.map

package/test/overlay-directive.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["overlay-directive.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*/\n\nimport { html } from '@spectrum-web-components/base';\nimport {\n    elementUpdated,\n    expect,\n    nextFrame,\n    oneEvent,\n    waitUntil,\n} from '@open-wc/testing';\nimport { Button } from '@spectrum-web-components/button';\nimport { Overlay } from '@spectrum-web-components/overlay';\nimport {\n    Default,\n    insertionOptions,\n} from '../stories/overlay-directive.stories.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { fixture } from '../../../test/testing-helpers.js';\n\ndescribe('Overlay Directive', () => {\n    it('opens declaratively', async function () {\n        const test = await fixture<Button>(Default({ open: true }));\n        await oneEvent(test, 'sp-opened');\n\n        const el = test.nextElementSibling as Overlay;\n\n        expect(el.open).to.be.true;\n    });\n    it('opens without options', async function () {\n        const test = await fixture<Button>(Default());\n        const opened = oneEvent(test, 'sp-opened');\n        test.click();\n        await opened;\n\n        const el = test.nextElementSibling as Overlay;\n\n        expect(el.open).to.be.true;\n    });\n    it('opens an Overlay after the trigger', async function () {\n        const test = await fixture<HTMLElement>(html`\n            <div\n                style=\"width: 100%; height: 100vh; display: grid; place-content: center;\"\n            >\n                ${insertionOptions()}\n            </div>\n        `);\n\n        const el = test.querySelector('sp-button') as Button;\n\n        await elementUpdated(el);\n        let overlays = document.querySelectorAll('sp-overlay');\n        expect(overlays.length).to.equal(0);\n\n        const rect = el.getBoundingClientRect();\n        let opened = oneEvent(el, 'sp-opened');\n        // Open the Tooltip via \"hover\"\n        await sendMouse({\n            steps: [\n                {\n                    type: 'move',\n                    position: [\n                        rect.left + rect.width / 2,\n                        rect.top + rect.height / 2,\n                    ],\n                },\n            ],\n        });\n        await opened;\n\n        opened = oneEvent(el, 'sp-opened');\n        // Open the Popover via \"click\"\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [\n                        rect.left + rect.width / 2,\n                        rect.top + rect.height / 2,\n                    ],\n                },\n                {\n                    type: 'move',\n                    position: [\n                        rect.left - rect.width / 2,\n                        rect.top - rect.height / 2,\n                    ],\n                },\n            ],\n        });\n        await opened;\n\n        overlays = document.querySelectorAll('sp-overlay');\n        expect(overlays.length).to.be.gt(0);\n        expect(overlays[0].previousElementSibling).to.equal(el);\n\n        // `slottable-request` comes _after_ `sp-closed` and triggers DOM cleanup\n        const closed = oneEvent(overlays[0], 'slottable-request');\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [\n                        rect.left - rect.width / 2,\n                        rect.top - rect.height / 2,\n                    ],\n                },\n            ],\n        });\n        await closed;\n\n        await waitUntil(() => {\n            overlays = document.querySelectorAll('sp-overlay');\n            return overlays.length === 0;\n        }, 'not all overlays were cleaned up');\n\n        expect(overlays.length).to.equal(0);\n    });\n\n    it('opens an Overlay in a specific part of the DOM', async function () {\n        const test = await fixture<HTMLElement>(html`\n            <div\n                style=\"width: 100%; height: 100vh; display: grid; place-content: center;\"\n            >\n                ${insertionOptions(insertionOptions.args)}\n            </div>\n        `);\n\n        const el = test.querySelector('sp-button') as Button;\n\n        await elementUpdated(el);\n\n        const otherElement = test.querySelector(\n            '#other-element'\n        ) as HTMLElement;\n        let overlays = otherElement.querySelectorAll('sp-overlay');\n        expect(overlays.length).to.equal(0);\n\n        const rect = el.getBoundingClientRect();\n        let opened = oneEvent(el, 'sp-opened');\n        // Open the Tooltip via \"hover\"\n        await sendMouse({\n            steps: [\n                {\n                    type: 'move',\n                    position: [\n                        rect.left + rect.width / 2,\n                        rect.top + rect.height / 2,\n                    ],\n                },\n            ],\n        });\n        await opened;\n\n        opened = oneEvent(el, 'sp-opened');\n        // Open the Popover via \"click\"\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [\n                        rect.left + rect.width / 2,\n                        rect.top + rect.height / 2,\n                    ],\n                },\n            ],\n        });\n        await opened;\n\n        overlays = otherElement.querySelectorAll('sp-overlay');\n        expect(overlays.length).to.equal(1);\n\n        // `slottable-request` comes _after_ `sp-closed` and triggers DOM cleanup\n        const closed = oneEvent(overlays[0], 'slottable-request');\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [\n                        rect.left - rect.width / 2,\n                        rect.top - rect.height / 2,\n                    ],\n                },\n            ],\n        });\n        await closed;\n\n        // Wait for DOM clean up to complete\n        await nextFrame();\n        await nextFrame();\n\n        overlays = otherElement.querySelectorAll('sp-overlay');\n        expect(overlays.length).to.equal(0);\n    });\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/test/overlay-element.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/overlay-element.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("OverlayElementStories", stories);
+//# sourceMappingURL=overlay-element.test-vrt.js.map

package/test/overlay-element.test-vrt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["overlay-element.test-vrt.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*/\n\nimport * as stories from '../stories/overlay-element.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('OverlayElementStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,yBAAyB,OAA+B;",
+  "names": []
+}