@spectrum-web-components/overlay 0.19.6-overlay.18 → 0.30.1-overlay.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/overlay-trigger.dev.js +2 -1
- package/overlay-trigger.dev.js.map +2 -2
- package/overlay-trigger.js +1 -1
- package/overlay-trigger.js.map +3 -3
- package/package.json +7 -7
- package/sp-overlay.dev.js +2 -1
- package/sp-overlay.dev.js.map +2 -2
- package/sp-overlay.js +1 -1
- package/sp-overlay.js.map +3 -3
- package/src/Overlay.js.map +1 -1
- package/src/OverlayBase.d.ts +11 -1
- package/src/OverlayBase.dev.js +141 -91
- package/src/OverlayBase.dev.js.map +2 -2
- package/src/OverlayBase.js +6 -7
- package/src/OverlayBase.js.map +3 -3
- package/src/OverlayDialog.js.map +1 -1
- package/src/OverlayNoPopover.js.map +1 -1
- package/src/OverlayPopover.dev.js +22 -2
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +3 -3
- package/src/OverlayStack.dev.js +18 -8
- package/src/OverlayStack.dev.js.map +2 -2
- package/src/OverlayStack.js +1 -1
- package/src/OverlayStack.js.map +3 -3
- package/src/OverlayTrigger.dev.js +1 -0
- package/src/OverlayTrigger.dev.js.map +2 -2
- package/src/OverlayTrigger.js +1 -0
- package/src/OverlayTrigger.js.map +2 -2
- package/src/PlacementController.js.map +1 -1
- package/src/overlay-base.css.dev.js +1 -1
- package/src/overlay-base.css.dev.js.map +1 -1
- package/src/overlay-base.css.js +1 -1
- package/src/overlay-base.css.js.map +1 -1
- package/src/placement.js.map +1 -1
- package/src/topLayerOverTransforms.dev.js +4 -0
- package/src/topLayerOverTransforms.dev.js.map +2 -2
- package/src/topLayerOverTransforms.js +1 -1
- package/src/topLayerOverTransforms.js.map +2 -2
- package/test/index.js +113 -106
- package/test/index.js.map +2 -2
- package/test/overlay-element.test.js +345 -411
- package/test/overlay-element.test.js.map +2 -2
- package/test/overlay-lifecycle.test.js +1 -33
- package/test/overlay-lifecycle.test.js.map +2 -2
- package/test/overlay-trigger-extended.test.js +1 -1
- package/test/overlay-trigger-extended.test.js.map +2 -2
- package/test/overlay-trigger-hover-click.test.js +23 -23
- package/test/overlay-trigger-hover-click.test.js.map +2 -2
- package/test/overlay-trigger-hover.test.js +42 -36
- package/test/overlay-trigger-hover.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +51 -51
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay.test.js +8 -12
- package/test/overlay.test.js.map +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-hover-click.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2021 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 oneEvent,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay/src/OverlayTrigger';\nimport { TriggerInteractions } from '@spectrum-web-components/overlay/src/overlay-types';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { clickAndHoverTargets, deep } from '../stories/overlay.stories.js';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\nimport { Tooltip } from '@spectrum-web-components/tooltip/src/Tooltip.js';\n\nignoreResizeObserverLoopError(before, after);\n\ndescribe
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,OAAO;AAEP,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB,YAAY;AAC3C,SAAS,qCAAqC;AAG9C,8BAA8B,QAAQ,KAAK;AAE3C,SAAS,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2021 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 oneEvent,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay/src/OverlayTrigger';\nimport { TriggerInteractions } from '@spectrum-web-components/overlay/src/overlay-types';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { clickAndHoverTargets, deep } from '../stories/overlay.stories.js';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\nimport { Tooltip } from '@spectrum-web-components/tooltip/src/Tooltip.js';\n\nignoreResizeObserverLoopError(before, after);\n\ndescribe('Overlay Trigger - Hover and Click', () => {\n it('toggles open and closed on click', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Click and hover</sp-button>\n <sp-popover slot=\"click-content\" dialog tip>\n Popover content\n </sp-popover>\n <sp-tooltip slot=\"hover-content\" delayed>\n Tooltip content\n </sp-tooltip>\n </overlay-trigger>\n `);\n const trigger = el.querySelector(\n '[slot=trigger]'\n ) as unknown as ActionButton;\n let interaction: TriggerInteractions;\n\n // repeatedly click to toggle the popover\n for (let i = 0; i < 3; i++) {\n const openedEvent = oneEvent(el, 'sp-opened');\n trigger.click();\n interaction = (await openedEvent).detail.interaction;\n\n expect(interaction).equals('auto');\n\n const closedEvent = oneEvent(el, 'sp-closed');\n trigger.click();\n interaction = (await closedEvent).detail.interaction;\n\n expect(interaction).equals('auto');\n }\n });\n it('toggles on click after hover', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Click and hover</sp-button>\n <sp-popover slot=\"click-content\" dialog tip>\n Popover content\n </sp-popover>\n <sp-tooltip slot=\"hover-content\" delayed>\n Tooltip content\n </sp-tooltip>\n </overlay-trigger>\n `);\n const trigger = el.querySelector(\n '[slot=trigger]'\n ) as unknown as ActionButton;\n const bounds = el.getBoundingClientRect();\n let interaction: TriggerInteractions;\n\n // hover over the button to trigger the tooltip\n const hoveredEvent = oneEvent(el, 'sp-opened');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [bounds.left - 1, bounds.top - 1],\n },\n {\n type: 'move',\n position: [bounds.left, bounds.top],\n },\n {\n type: 'move',\n position: [bounds.left + 1, bounds.top + 1],\n },\n ],\n });\n interaction = (await hoveredEvent).detail.interaction;\n\n expect(interaction).equals('hint');\n\n // repeatedly click to toggle the popover\n for (let i = 0; i < 3; i++) {\n const openedEvent = oneEvent(el, 'sp-opened');\n trigger.click();\n interaction = (await openedEvent).detail.interaction;\n\n expect(interaction).equals('auto');\n\n const closedEvent = oneEvent(el, 'sp-closed');\n trigger.click();\n interaction = (await closedEvent).detail.interaction;\n\n expect(interaction).equals('auto');\n }\n });\n it('persists a hover overlay when clicking its trigger and closes the next highest overlay on the stack', async () => {\n const root = document.createElement('div');\n root.style.width = '100vw';\n root.style.height = '100vh';\n root.style.display = 'grid';\n root.style.placeContent = 'center';\n const test = await fixture(clickAndHoverTargets(), {\n parentNode: root,\n });\n\n const overlayTrigger1 = test.querySelector(\n 'overlay-trigger[placement=\"right\"]'\n ) as OverlayTrigger;\n const overlayTrigger2 = test.querySelector(\n 'overlay-trigger[placement=\"left\"]'\n ) as OverlayTrigger;\n\n await elementUpdated(overlayTrigger1);\n await elementUpdated(overlayTrigger2);\n\n const trigger1 = overlayTrigger1.querySelector(\n '.friendly-target'\n ) as HTMLButtonElement;\n const trigger2 = overlayTrigger2.querySelector(\n '.friendly-target'\n ) as HTMLButtonElement;\n const rect1 = trigger1.getBoundingClientRect();\n const rect2 = trigger2.getBoundingClientRect();\n let opened = oneEvent(trigger1, 'sp-opened');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n rect1.left + rect1.width / 2,\n rect1.top + rect1.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(overlayTrigger1.open).to.equal('click');\n expect(overlayTrigger2.open).to.undefined;\n\n opened = oneEvent(trigger2, 'sp-opened');\n trigger2.focus();\n await opened;\n\n expect(overlayTrigger1.open).to.equal('click');\n expect(overlayTrigger2.open).to.equal('hover');\n\n const closed = oneEvent(trigger1, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n rect2.left + rect2.width / 2,\n rect2.top + rect2.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(overlayTrigger1.open).to.be.undefined;\n expect(overlayTrigger2.open).to.equal('hover');\n });\n it('does not close ancestor \"click\" overlays on `click`', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>${deep()}</div>\n `);\n const el = test.querySelector('overlay-trigger') as OverlayTrigger;\n const button = el.querySelector('sp-action-button') as ActionButton;\n const button2 = el.querySelector(\n 'sp-action-button:nth-of-type(2)'\n ) as ActionButton;\n const tooltip = button.querySelector('sp-tooltip') as Tooltip;\n\n expect(el.open).to.be.undefined;\n expect(tooltip.open).to.be.false;\n\n const opened = oneEvent(el, 'sp-opened');\n const tooltipOpen = oneEvent(button, 'sp-opened');\n el.open = 'click';\n await opened;\n await tooltipOpen;\n\n expect(el.open).to.equal('click');\n expect(tooltip.open).to.be.true;\n\n button.click();\n\n await aTimeout(200);\n\n expect(el.open).to.equal('click');\n expect(tooltip.open).to.be.true;\n\n let closed = oneEvent(button, 'sp-closed');\n button2.focus();\n await closed;\n\n expect(el.open).to.equal('click');\n expect(tooltip.open).to.be.false;\n\n closed = oneEvent(el, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await closed;\n\n expect(el.open).to.be.undefined;\n expect(tooltip.open).to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import {
|
|
3
|
-
aTimeout,
|
|
4
3
|
elementUpdated,
|
|
5
4
|
expect,
|
|
6
|
-
fixture,
|
|
7
5
|
html,
|
|
8
6
|
nextFrame,
|
|
9
7
|
oneEvent,
|
|
@@ -20,8 +18,10 @@ import { spy } from "sinon";
|
|
|
20
18
|
import { sendKeys } from "@web/test-runner-commands";
|
|
21
19
|
import "@spectrum-web-components/theme/sp-theme.js";
|
|
22
20
|
import "@spectrum-web-components/theme/src/themes.js";
|
|
23
|
-
import {
|
|
24
|
-
|
|
21
|
+
import {
|
|
22
|
+
fixture,
|
|
23
|
+
ignoreResizeObserverLoopError
|
|
24
|
+
} from "../../../test/testing-helpers.js";
|
|
25
25
|
ignoreResizeObserverLoopError(before, after);
|
|
26
26
|
async function styledFixture(story) {
|
|
27
27
|
const test = await fixture(html`
|
|
@@ -31,7 +31,7 @@ async function styledFixture(story) {
|
|
|
31
31
|
`);
|
|
32
32
|
return test.children[0];
|
|
33
33
|
}
|
|
34
|
-
describe
|
|
34
|
+
describe("Overlay Trigger - Hover", () => {
|
|
35
35
|
it("displays `hover` declaratively", async () => {
|
|
36
36
|
const openedSpy = spy();
|
|
37
37
|
const closedSpy = spy();
|
|
@@ -62,7 +62,7 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
62
62
|
timeout: 2e3
|
|
63
63
|
});
|
|
64
64
|
});
|
|
65
|
-
describe
|
|
65
|
+
describe('"tooltip" mouse interactions', () => {
|
|
66
66
|
let el;
|
|
67
67
|
let button;
|
|
68
68
|
let tooltip;
|
|
@@ -86,14 +86,18 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
86
86
|
it('allows pointer to enter the "tooltip" without closing the "tooltip"', async () => {
|
|
87
87
|
const opened = oneEvent(button, "sp-opened");
|
|
88
88
|
button.dispatchEvent(
|
|
89
|
-
new MouseEvent("
|
|
89
|
+
new MouseEvent("pointerenter", {
|
|
90
90
|
bubbles: true,
|
|
91
91
|
composed: true
|
|
92
92
|
})
|
|
93
93
|
);
|
|
94
94
|
await nextFrame();
|
|
95
|
+
await nextFrame();
|
|
96
|
+
await nextFrame();
|
|
97
|
+
await nextFrame();
|
|
98
|
+
expect(tooltip.open).to.be.true;
|
|
95
99
|
button.dispatchEvent(
|
|
96
|
-
new MouseEvent("
|
|
100
|
+
new MouseEvent("pointerleave", {
|
|
97
101
|
relatedTarget: tooltip,
|
|
98
102
|
bubbles: true,
|
|
99
103
|
composed: true
|
|
@@ -101,7 +105,7 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
101
105
|
);
|
|
102
106
|
await nextFrame();
|
|
103
107
|
tooltip.dispatchEvent(
|
|
104
|
-
new MouseEvent("
|
|
108
|
+
new MouseEvent("pointerleave", {
|
|
105
109
|
relatedTarget: button,
|
|
106
110
|
bubbles: true,
|
|
107
111
|
composed: true
|
|
@@ -111,25 +115,26 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
111
115
|
expect(el.open).to.equal("hover");
|
|
112
116
|
const closed = oneEvent(button, "sp-closed");
|
|
113
117
|
button.dispatchEvent(
|
|
114
|
-
new MouseEvent("
|
|
118
|
+
new MouseEvent("pointerleave", {
|
|
119
|
+
relatedTarget: null,
|
|
115
120
|
bubbles: true,
|
|
116
121
|
composed: true
|
|
117
122
|
})
|
|
118
123
|
);
|
|
119
124
|
await closed;
|
|
120
|
-
expect(el.open).to.be.
|
|
125
|
+
expect(el.open).to.be.undefined;
|
|
121
126
|
});
|
|
122
127
|
it('closes the "tooltip" when leaving the "tooltip"', async () => {
|
|
123
128
|
const opened = oneEvent(button, "sp-opened");
|
|
124
129
|
button.dispatchEvent(
|
|
125
|
-
new MouseEvent("
|
|
130
|
+
new MouseEvent("pointerenter", {
|
|
126
131
|
bubbles: true,
|
|
127
132
|
composed: true
|
|
128
133
|
})
|
|
129
134
|
);
|
|
130
135
|
await nextFrame();
|
|
131
136
|
button.dispatchEvent(
|
|
132
|
-
new MouseEvent("
|
|
137
|
+
new MouseEvent("pointerleave", {
|
|
133
138
|
relatedTarget: tooltip,
|
|
134
139
|
bubbles: true,
|
|
135
140
|
composed: true
|
|
@@ -139,13 +144,14 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
139
144
|
expect(el.open).to.equal("hover");
|
|
140
145
|
const closed = oneEvent(button, "sp-closed");
|
|
141
146
|
tooltip.dispatchEvent(
|
|
142
|
-
new MouseEvent("
|
|
147
|
+
new MouseEvent("pointerleave", {
|
|
148
|
+
relatedTarget: null,
|
|
143
149
|
bubbles: true,
|
|
144
150
|
composed: true
|
|
145
151
|
})
|
|
146
152
|
);
|
|
147
153
|
await closed;
|
|
148
|
-
expect(el.open).to.be.
|
|
154
|
+
expect(el.open).to.be.undefined;
|
|
149
155
|
});
|
|
150
156
|
});
|
|
151
157
|
it("persists hover content", async () => {
|
|
@@ -162,12 +168,14 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
162
168
|
await elementUpdated(el);
|
|
163
169
|
expect(el.open).to.be.undefined;
|
|
164
170
|
const trigger = el.querySelector('[slot="trigger"]');
|
|
171
|
+
const opened = oneEvent(trigger, "sp-opened");
|
|
165
172
|
trigger.dispatchEvent(
|
|
166
|
-
new Event("
|
|
167
|
-
bubbles: true
|
|
173
|
+
new Event("pointerenter", {
|
|
174
|
+
bubbles: true,
|
|
175
|
+
composed: true
|
|
168
176
|
})
|
|
169
177
|
);
|
|
170
|
-
await
|
|
178
|
+
await opened;
|
|
171
179
|
expect(el.open).to.equal("hover");
|
|
172
180
|
trigger.click();
|
|
173
181
|
await elementUpdated(el);
|
|
@@ -188,19 +196,21 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
188
196
|
await elementUpdated(el);
|
|
189
197
|
expect(el.open).to.be.undefined;
|
|
190
198
|
const trigger = el.querySelector('[slot="trigger"]');
|
|
199
|
+
let opened = oneEvent(trigger, "sp-opened");
|
|
191
200
|
trigger.dispatchEvent(
|
|
192
|
-
new Event("
|
|
201
|
+
new Event("pointerenter", {
|
|
193
202
|
bubbles: true
|
|
194
203
|
})
|
|
195
204
|
);
|
|
196
|
-
await
|
|
205
|
+
await opened;
|
|
197
206
|
expect(el.open).to.equal("hover");
|
|
207
|
+
opened = oneEvent(trigger, "sp-opened");
|
|
198
208
|
trigger.dispatchEvent(
|
|
199
209
|
new Event("longpress", {
|
|
200
210
|
bubbles: true
|
|
201
211
|
})
|
|
202
212
|
);
|
|
203
|
-
await
|
|
213
|
+
await opened;
|
|
204
214
|
expect(el.open).to.equal("longpress");
|
|
205
215
|
});
|
|
206
216
|
it('closes `hover` overlay when [type="modal"]', async () => {
|
|
@@ -220,19 +230,13 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
220
230
|
const opened = oneEvent(el, "sp-opened");
|
|
221
231
|
trigger.focus();
|
|
222
232
|
await opened;
|
|
223
|
-
await elementUpdated(el);
|
|
224
|
-
await aTimeout(500);
|
|
225
233
|
expect(el.open).to.equal("hover");
|
|
226
234
|
const closed = oneEvent(el, "sp-closed");
|
|
227
235
|
trigger.blur();
|
|
228
236
|
await closed;
|
|
229
|
-
|
|
230
|
-
expect(el.open).to.be.null;
|
|
237
|
+
expect(el.open).to.be.undefined;
|
|
231
238
|
});
|
|
232
239
|
it('will not return focus to a "modal" parent', async () => {
|
|
233
|
-
if (isFirefox()) {
|
|
234
|
-
return;
|
|
235
|
-
}
|
|
236
240
|
const el = await styledFixture(html`
|
|
237
241
|
<overlay-trigger type="modal" placement="none">
|
|
238
242
|
<sp-button slot="trigger">Toggle Dialog</sp-button>
|
|
@@ -259,27 +263,29 @@ describe.skip("Overlay Trigger - Hover", () => {
|
|
|
259
263
|
await elementUpdated(el);
|
|
260
264
|
const button = el.querySelector("sp-button");
|
|
261
265
|
const dialog = el.querySelector("sp-dialog-wrapper");
|
|
266
|
+
const button1 = dialog.querySelector("#button-1");
|
|
267
|
+
const button2 = dialog.querySelector("#button-2");
|
|
268
|
+
const button3 = dialog.querySelector("#button-3");
|
|
262
269
|
await elementUpdated(button);
|
|
263
270
|
await elementUpdated(dialog);
|
|
264
271
|
let opened = oneEvent(button, "sp-opened");
|
|
272
|
+
const openedHint = oneEvent(button1, "sp-opened");
|
|
265
273
|
button.dispatchEvent(new Event("click", { bubbles: true }));
|
|
266
274
|
await opened;
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
opened = oneEvent(
|
|
275
|
+
await openedHint;
|
|
276
|
+
expect(button1 === document.activeElement).to.be.true;
|
|
277
|
+
opened = oneEvent(button2, "sp-opened");
|
|
270
278
|
sendKeys({
|
|
271
279
|
press: "Tab"
|
|
272
280
|
});
|
|
273
281
|
await opened;
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
opened = oneEvent(button2, "sp-opened");
|
|
282
|
+
expect(button2 === document.activeElement).to.be.true;
|
|
283
|
+
opened = oneEvent(button3, "sp-opened");
|
|
277
284
|
sendKeys({
|
|
278
285
|
press: "Tab"
|
|
279
286
|
});
|
|
280
287
|
await opened;
|
|
281
|
-
|
|
282
|
-
expect(button2 === document.activeElement).to.be.true;
|
|
288
|
+
expect(button3 === document.activeElement).to.be.true;
|
|
283
289
|
});
|
|
284
290
|
});
|
|
285
291
|
//# sourceMappingURL=overlay-trigger-hover.test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-hover.test.ts"],
|
|
4
|
-
"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.skip('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.skip('\"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"],
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"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 // // 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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,27 +23,35 @@ import { fixture, isOnTopLayer } from "../../../test/testing-helpers.js";
|
|
|
23
23
|
import { longpress } from "../stories/overlay.stories.js";
|
|
24
24
|
describe("Overlay Trigger - Longpress", () => {
|
|
25
25
|
describe("responds to input", () => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
expect(
|
|
35
|
-
expect(content
|
|
36
|
-
|
|
26
|
+
beforeEach(async function() {
|
|
27
|
+
this.el = await fixture(longpress());
|
|
28
|
+
this.trigger = this.el.querySelector(
|
|
29
|
+
"sp-action-button"
|
|
30
|
+
);
|
|
31
|
+
this.content = this.el.querySelector(
|
|
32
|
+
'[slot="longpress-content"]'
|
|
33
|
+
);
|
|
34
|
+
expect(this.trigger).to.not.be.null;
|
|
35
|
+
expect(this.content).to.not.be.null;
|
|
36
|
+
expect(this.content.open).to.be.false;
|
|
37
|
+
this.trigger.focus();
|
|
37
38
|
});
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
afterEach(async function() {
|
|
40
|
+
if (this.el.open) {
|
|
41
|
+
const closed = oneEvent(this.trigger, "sp-closed");
|
|
42
|
+
this.el.open = void 0;
|
|
43
|
+
await closed;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
it.skip("opens/closes for `Space`", async function() {
|
|
47
|
+
const open = oneEvent(this.el, "sp-opened");
|
|
40
48
|
await sendKeys({
|
|
41
49
|
press: "Space"
|
|
42
50
|
});
|
|
43
51
|
await open;
|
|
44
|
-
expect(content.open, "opens for `Space`").to.be.true;
|
|
45
|
-
expect(await isOnTopLayer(content)).to.be.true;
|
|
46
|
-
const closed = oneEvent(el, "sp-closed");
|
|
52
|
+
expect(this.content.open, "opens for `Space`").to.be.true;
|
|
53
|
+
expect(await isOnTopLayer(this.content)).to.be.true;
|
|
54
|
+
const closed = oneEvent(this.el, "sp-closed");
|
|
47
55
|
sendMouse({
|
|
48
56
|
steps: [
|
|
49
57
|
{
|
|
@@ -53,28 +61,28 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
53
61
|
]
|
|
54
62
|
});
|
|
55
63
|
await closed;
|
|
56
|
-
expect(
|
|
57
|
-
expect(await isOnTopLayer(content)).to.be.false;
|
|
64
|
+
expect(this.content.open, "closes for `Space`").to.be.false;
|
|
65
|
+
expect(await isOnTopLayer(this.content)).to.be.false;
|
|
58
66
|
});
|
|
59
|
-
|
|
60
|
-
const open = oneEvent(el, "sp-opened");
|
|
67
|
+
it.skip("opens/closes for `Alt+ArrowDown`", async function() {
|
|
68
|
+
const open = oneEvent(this.el, "sp-opened");
|
|
61
69
|
sendKeys({
|
|
62
70
|
press: "Alt+ArrowDown"
|
|
63
71
|
});
|
|
64
72
|
await open;
|
|
65
|
-
expect(content.open, "opens for `Alt+ArrowDown`").to.be.true;
|
|
66
|
-
expect(await isOnTopLayer(content)).to.be.true;
|
|
67
|
-
const closed = oneEvent(el, "sp-closed");
|
|
73
|
+
expect(this.content.open, "opens for `Alt+ArrowDown`").to.be.true;
|
|
74
|
+
expect(await isOnTopLayer(this.content)).to.be.true;
|
|
75
|
+
const closed = oneEvent(this.el, "sp-closed");
|
|
68
76
|
await sendKeys({
|
|
69
77
|
press: "Escape"
|
|
70
78
|
});
|
|
71
79
|
await closed;
|
|
72
|
-
expect(
|
|
73
|
-
expect(await isOnTopLayer(content)).to.be.false;
|
|
80
|
+
expect(this.content.open, "closes for `Alt+ArrowDown`").to.be.false;
|
|
81
|
+
expect(await isOnTopLayer(this.content)).to.be.false;
|
|
74
82
|
});
|
|
75
|
-
|
|
76
|
-
let open = oneEvent(el, "sp-opened");
|
|
77
|
-
const rect = trigger.getBoundingClientRect();
|
|
83
|
+
it.skip("opens/closes for `longpress`", async function() {
|
|
84
|
+
let open = oneEvent(this.el, "sp-opened");
|
|
85
|
+
const rect = this.trigger.getBoundingClientRect();
|
|
78
86
|
await sendMouse({
|
|
79
87
|
steps: [
|
|
80
88
|
{
|
|
@@ -90,7 +98,7 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
90
98
|
]
|
|
91
99
|
});
|
|
92
100
|
await open;
|
|
93
|
-
open = oneEvent(el, "sp-opened");
|
|
101
|
+
open = oneEvent(this.el, "sp-opened");
|
|
94
102
|
await open;
|
|
95
103
|
await sendMouse({
|
|
96
104
|
steps: [
|
|
@@ -99,15 +107,15 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
99
107
|
}
|
|
100
108
|
]
|
|
101
109
|
});
|
|
102
|
-
expect(content.open, "opens for `pointerdown`").to.be.true;
|
|
103
|
-
expect(await isOnTopLayer(content)).to.be.true;
|
|
104
|
-
const closed = oneEvent(
|
|
110
|
+
expect(this.content.open, "opens for `pointerdown`").to.be.true;
|
|
111
|
+
expect(await isOnTopLayer(this.content)).to.be.true;
|
|
112
|
+
const closed = oneEvent(this.trigger, "sp-closed");
|
|
105
113
|
await sendKeys({
|
|
106
114
|
press: "Escape"
|
|
107
115
|
});
|
|
108
116
|
await closed;
|
|
109
|
-
expect(
|
|
110
|
-
expect(await isOnTopLayer(content)).to.be.false;
|
|
117
|
+
expect(this.content.open, "closes for `pointerdown`").to.be.false;
|
|
118
|
+
expect(await isOnTopLayer(this.content)).to.be.false;
|
|
111
119
|
});
|
|
112
120
|
});
|
|
113
121
|
it("displays `longpress` declaratively", async () => {
|
|
@@ -139,7 +147,7 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
139
147
|
await closed;
|
|
140
148
|
expect(closedSpy.calledOnce, "longpress content returned").to.be.true;
|
|
141
149
|
});
|
|
142
|
-
it
|
|
150
|
+
it("describes longpress interaction accessibly", async () => {
|
|
143
151
|
const el = await fixture(
|
|
144
152
|
html`
|
|
145
153
|
<overlay-trigger placement="right-start">
|
|
@@ -191,7 +199,7 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
191
199
|
press: "Escape"
|
|
192
200
|
});
|
|
193
201
|
await closed;
|
|
194
|
-
expect(el.open).to.be.
|
|
202
|
+
expect(el.open).to.be.undefined;
|
|
195
203
|
expect(trigger.hasAttribute("aria-describedby")).to.be.true;
|
|
196
204
|
expect(el.childNodes.length, "always").to.equal(6);
|
|
197
205
|
await findDescribedNode(
|
|
@@ -199,7 +207,7 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
199
207
|
LONGPRESS_INSTRUCTIONS.keyboard
|
|
200
208
|
);
|
|
201
209
|
});
|
|
202
|
-
it
|
|
210
|
+
it("removes longpress `aria-describedby` description element when longpress content is removed", async () => {
|
|
203
211
|
const el = await fixture(
|
|
204
212
|
html`
|
|
205
213
|
<overlay-trigger placement="right-start">
|
|
@@ -231,25 +239,25 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
231
239
|
'[slot="longpress-content"]'
|
|
232
240
|
);
|
|
233
241
|
await elementUpdated(el);
|
|
234
|
-
expect(
|
|
242
|
+
expect(trigger.hasAttribute("aria-describedby")).to.be.true;
|
|
235
243
|
expect(el.childNodes.length, "always").to.equal(6);
|
|
236
244
|
el.removeAttribute("hold-affordance");
|
|
237
|
-
|
|
245
|
+
content.remove();
|
|
238
246
|
await elementUpdated(el);
|
|
239
247
|
expect(trigger.hasAttribute("aria-describedby")).to.be.false;
|
|
240
|
-
expect(el.hasLongpressContent).to.be.false;
|
|
241
248
|
expect(el.childNodes.length, "always").to.equal(4);
|
|
242
249
|
el.setAttribute("hold-affordance", "true");
|
|
243
250
|
el.append(content);
|
|
244
251
|
await elementUpdated(el);
|
|
252
|
+
await nextFrame();
|
|
253
|
+
await nextFrame();
|
|
245
254
|
await findDescribedNode(
|
|
246
255
|
"Trigger with hold affordance",
|
|
247
256
|
LONGPRESS_INSTRUCTIONS.keyboard
|
|
248
257
|
);
|
|
249
|
-
expect(el.hasLongpressContent).to.be.true;
|
|
250
258
|
expect(el.childNodes.length, "always").to.equal(6);
|
|
251
259
|
});
|
|
252
|
-
it
|
|
260
|
+
it("recognises multiple overlay triggers in a11y tree", async () => {
|
|
253
261
|
const el = await fixture(
|
|
254
262
|
html`
|
|
255
263
|
<div id="container">
|
|
@@ -294,14 +302,6 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
294
302
|
);
|
|
295
303
|
await elementUpdated(el);
|
|
296
304
|
const div = document.getElementById("container");
|
|
297
|
-
const firstTrigger = document.getElementById(
|
|
298
|
-
"first-trigger"
|
|
299
|
-
);
|
|
300
|
-
const secondTrigger = document.getElementById(
|
|
301
|
-
"second-trigger"
|
|
302
|
-
);
|
|
303
|
-
expect(firstTrigger.hasLongpressContent).to.be.true;
|
|
304
|
-
expect(secondTrigger.hasLongpressContent).to.be.true;
|
|
305
305
|
expect(div.childNodes.length, "always").to.equal(5);
|
|
306
306
|
await findDescribedNode(
|
|
307
307
|
"First button",
|
|
@@ -312,7 +312,7 @@ describe("Overlay Trigger - Longpress", () => {
|
|
|
312
312
|
LONGPRESS_INSTRUCTIONS.keyboard
|
|
313
313
|
);
|
|
314
314
|
});
|
|
315
|
-
it
|
|
315
|
+
it("describes interactions differently to the user", async () => {
|
|
316
316
|
const test = await fixture(
|
|
317
317
|
html`
|
|
318
318
|
<div>
|