@spectrum-web-components/action-menu 1.3.0-beta.2 → 1.3.0-testing.0

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.
Files changed (36) hide show
  1. package/package.json +8 -9
  2. package/LICENSE +0 -201
  3. package/stories/action-menu-sizes.stories.js +0 -23
  4. package/stories/action-menu-sizes.stories.js.map +0 -7
  5. package/stories/action-menu.stories.js +0 -490
  6. package/stories/action-menu.stories.js.map +0 -7
  7. package/stories/index.js +0 -71
  8. package/stories/index.js.map +0 -7
  9. package/test/action-menu-directive.test.js +0 -29
  10. package/test/action-menu-directive.test.js.map +0 -7
  11. package/test/action-menu-groups.test.js +0 -80
  12. package/test/action-menu-groups.test.js.map +0 -7
  13. package/test/action-menu-memory.test.js +0 -5
  14. package/test/action-menu-memory.test.js.map +0 -7
  15. package/test/action-menu-responsive.test.js +0 -120
  16. package/test/action-menu-responsive.test.js.map +0 -7
  17. package/test/action-menu-sizes.test-vrt.js +0 -5
  18. package/test/action-menu-sizes.test-vrt.js.map +0 -7
  19. package/test/action-menu-sync.test.js +0 -9
  20. package/test/action-menu-sync.test.js.map +0 -7
  21. package/test/action-menu.test-vrt.js +0 -5
  22. package/test/action-menu.test-vrt.js.map +0 -7
  23. package/test/action-menu.test.js +0 -9
  24. package/test/action-menu.test.js.map +0 -7
  25. package/test/benchmark/test-basic.js +0 -21
  26. package/test/benchmark/test-basic.js.map +0 -7
  27. package/test/benchmark/test-directive.js +0 -26
  28. package/test/benchmark/test-directive.js.map +0 -7
  29. package/test/benchmark/test-lazy.js +0 -35
  30. package/test/benchmark/test-lazy.js.map +0 -7
  31. package/test/benchmark/test-open-close-directive.js +0 -67
  32. package/test/benchmark/test-open-close-directive.js.map +0 -7
  33. package/test/benchmark/test-open-close.js +0 -62
  34. package/test/benchmark/test-open-close.js.map +0 -7
  35. package/test/index.js +0 -700
  36. package/test/index.js.map +0 -7
package/test/index.js DELETED
@@ -1,700 +0,0 @@
1
- "use strict";
2
- import {
3
- aTimeout,
4
- elementUpdated,
5
- expect,
6
- html,
7
- nextFrame,
8
- oneEvent,
9
- waitUntil
10
- } from "@open-wc/testing";
11
- import { testForLitDevWarnings } from "../../../test/testing-helpers";
12
- import { spy } from "sinon";
13
- import {
14
- fixture,
15
- ignoreResizeObserverLoopError
16
- } from "../../../test/testing-helpers.js";
17
- import "@spectrum-web-components/dialog/sp-dialog-base.js";
18
- import {
19
- iconOnly,
20
- tooltipDescriptionAndPlacement
21
- } from "../stories/action-menu.stories.js";
22
- import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
23
- import { sendMouse } from "../../../test/plugins/browser.js";
24
- import {
25
- a11ySnapshot,
26
- findAccessibilityNode,
27
- sendKeys,
28
- setViewport
29
- } from "@web/test-runner-commands";
30
- import { isWebKit } from "@spectrum-web-components/shared";
31
- import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/InteractionController.js";
32
- ignoreResizeObserverLoopError(before, after);
33
- const deprecatedActionMenuFixture = async () => await fixture(html`
34
- <sp-action-menu label="More Actions">
35
- <sp-menu>
36
- <sp-menu-item>Deselect</sp-menu-item>
37
- <sp-menu-item>Select Inverse</sp-menu-item>
38
- <sp-menu-item>Feather...</sp-menu-item>
39
- <sp-menu-item>Select and Mask...</sp-menu-item>
40
- <sp-menu-divider></sp-menu-divider>
41
- <sp-menu-item>Save Selection</sp-menu-item>
42
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
43
- </sp-menu>
44
- </sp-action-menu>
45
- `);
46
- const actionMenuFixture = async () => await fixture(html`
47
- <sp-action-menu label="More Actions">
48
- <sp-menu-item>Deselect</sp-menu-item>
49
- <sp-menu-item>Select Inverse</sp-menu-item>
50
- <sp-menu-item>Feather...</sp-menu-item>
51
- <sp-menu-item>Select and Mask...</sp-menu-item>
52
- <sp-menu-divider></sp-menu-divider>
53
- <sp-menu-item>Save Selection</sp-menu-item>
54
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
55
- </sp-action-menu>
56
- `);
57
- const actionSubmenuFixture = async () => await fixture(html`
58
- <sp-action-menu label="More Actions">
59
- <sp-menu-item>One</sp-menu-item>
60
- <sp-menu-item selected id="root-selected-item">Two</sp-menu-item>
61
- <sp-menu-item id="item-with-submenu">
62
- B should be selected
63
- <sp-menu slot="submenu">
64
- <sp-menu-item>A</sp-menu-item>
65
- <sp-menu-item selected id="sub-selected-item">
66
- B
67
- </sp-menu-item>
68
- <sp-menu-item>C</sp-menu-item>
69
- </sp-menu>
70
- </sp-menu-item>
71
- </sp-action-menu>
72
- `);
73
- export const testActionMenu = (mode) => {
74
- describe(`Action menu: ${mode}`, () => {
75
- testForLitDevWarnings(async () => await actionMenuFixture());
76
- it("loads", async () => {
77
- const el = await actionMenuFixture();
78
- await elementUpdated(el);
79
- expect(el).to.not.be.undefined;
80
- await expect(el).to.be.accessible();
81
- });
82
- it('loads - [slot="label"]', async () => {
83
- const el = await fixture(html`
84
- <sp-action-menu>
85
- <span slot="label">More Actions</span>
86
- <sp-menu-item>Deselect</sp-menu-item>
87
- <sp-menu-item>Select Inverse</sp-menu-item>
88
- <sp-menu-item>Feather...</sp-menu-item>
89
- <sp-menu-item>Select and Mask...</sp-menu-item>
90
- <sp-menu-divider></sp-menu-divider>
91
- <sp-menu-item>Save Selection</sp-menu-item>
92
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
93
- </sp-action-menu>
94
- `);
95
- await elementUpdated(el);
96
- await nextFrame();
97
- await nextFrame();
98
- await expect(el).to.be.accessible();
99
- });
100
- it("loads - [custom icon]", async () => {
101
- const el = await fixture(html`
102
- <sp-action-menu label="More Actions">
103
- <sp-icon-settings slot="icon"></sp-icon-settings>
104
- <sp-menu-item>Deselect</sp-menu-item>
105
- <sp-menu-item>Select Inverse</sp-menu-item>
106
- <sp-menu-item>Feather...</sp-menu-item>
107
- <sp-menu-item>Select and Mask...</sp-menu-item>
108
- <sp-menu-divider></sp-menu-divider>
109
- <sp-menu-item>Save Selection</sp-menu-item>
110
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
111
- </sp-action-menu>
112
- `);
113
- await elementUpdated(el);
114
- await nextFrame();
115
- await nextFrame();
116
- await expect(el).to.be.accessible();
117
- });
118
- it("has menuitems in accessibility tree", async () => {
119
- const el = await fixture(html`
120
- <sp-action-menu
121
- label="More Actions">
122
- <sp-menu-item>Deselect</sp-menu-item>
123
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
124
- </sp-action-menu>
125
- `);
126
- const opened = oneEvent(el, "sp-opened");
127
- el.focus();
128
- sendKeys({ press: "Enter" });
129
- await opened;
130
- await nextFrame();
131
- const snapshot = await a11ySnapshot({});
132
- const button = findAccessibilityNode(snapshot, (node) => node.name === "More Actions");
133
- const menu = findAccessibilityNode(snapshot, (node) => node.role === "menu");
134
- const deselect = findAccessibilityNode(snapshot, (node) => node.role === "menuitem" && node.name === "Deselect");
135
- const workPath = findAccessibilityNode(snapshot, (node) => node.role === "menuitem" && node.name === "Make Work Path" && node.disabled);
136
- expect(button, "button").to.not.be.null;
137
- expect(menu, "menu").to.not.be.null;
138
- expect(deselect, "first menuitem").to.not.be.null;
139
- expect(workPath, "second menuitem").to.not.be.null;
140
- });
141
- it("dispatches change events, no [href]", async () => {
142
- const changeSpy = spy();
143
- const el = await fixture(html`
144
- <sp-action-menu
145
- label="More Actions"
146
- @change=${({
147
- target: { value }
148
- }) => {
149
- changeSpy(value);
150
- }}
151
- >
152
- <sp-icon-settings slot="icon"></sp-icon-settings>
153
- <sp-menu-item>Deselect</sp-menu-item>
154
- <sp-menu-item>Select Inverse</sp-menu-item>
155
- <sp-menu-item>Feather...</sp-menu-item>
156
- <sp-menu-item>Select and Mask...</sp-menu-item>
157
- <sp-menu-divider></sp-menu-divider>
158
- <sp-menu-item>Save Selection</sp-menu-item>
159
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
160
- </sp-action-menu>
161
- `);
162
- expect(changeSpy.callCount).to.equal(0);
163
- expect(el.open).to.be.false;
164
- const menuItem2 = el.querySelector(
165
- "sp-menu-item:nth-child(2)"
166
- );
167
- const opened = oneEvent(el, "sp-opened");
168
- el.click();
169
- await elementUpdated(el);
170
- await opened;
171
- expect(el.open).to.be.true;
172
- const closed = oneEvent(el, "sp-closed");
173
- menuItem2.click();
174
- await closed;
175
- expect(el.open).to.be.false;
176
- expect(changeSpy.callCount).to.equal(1);
177
- expect(changeSpy.calledWith("Deselect")).to.be.true;
178
- });
179
- it("closes when Menu Item has [href]", async () => {
180
- const changeSpy = spy();
181
- const el = await fixture(html`
182
- <sp-action-menu
183
- label="More Actions"
184
- @change=${() => {
185
- changeSpy();
186
- }}
187
- >
188
- <sp-icon-settings slot="icon"></sp-icon-settings>
189
- <sp-menu-item href="#">Deselect</sp-menu-item>
190
- <sp-menu-item href="#">Select Inverse</sp-menu-item>
191
- <sp-menu-item href="#">Feather...</sp-menu-item>
192
- <sp-menu-item href="#">Select and Mask...</sp-menu-item>
193
- <sp-menu-divider></sp-menu-divider>
194
- <sp-menu-item href="#">Save Selection</sp-menu-item>
195
- <sp-menu-item href="#" disabled>
196
- Make Work Path
197
- </sp-menu-item>
198
- </sp-action-menu>
199
- `);
200
- expect(changeSpy.callCount).to.equal(0);
201
- expect(el.open).to.be.false;
202
- const menuItem2 = el.querySelector(
203
- "sp-menu-item:nth-child(2)"
204
- );
205
- const opened = oneEvent(el, "sp-opened");
206
- el.click();
207
- await opened;
208
- expect(el.open).to.be.true;
209
- const closed = oneEvent(el, "sp-closed");
210
- menuItem2.click();
211
- await closed;
212
- expect(el.open).to.be.false;
213
- expect(changeSpy.callCount).to.equal(0);
214
- });
215
- it("can be `quiet`", async () => {
216
- const el = await actionMenuFixture();
217
- expect(el.quiet).to.be.false;
218
- el.quiet = true;
219
- await elementUpdated(el);
220
- expect(el.quiet).to.be.true;
221
- });
222
- it("can be `staticColor`", async () => {
223
- const el = await actionMenuFixture();
224
- expect(el.staticColor == void 0).to.be.true;
225
- el.staticColor = "black";
226
- await elementUpdated(el);
227
- expect(el.staticColor == "black").to.be.true;
228
- el.staticColor = "white";
229
- await elementUpdated(el);
230
- expect(el.staticColor == "white").to.be.true;
231
- });
232
- it("stay `valid`", async () => {
233
- const el = await actionMenuFixture();
234
- expect(el.invalid).to.be.false;
235
- el.invalid = true;
236
- await elementUpdated(el);
237
- expect(el.invalid).to.be.false;
238
- });
239
- it("focus()", async () => {
240
- const el = await actionMenuFixture();
241
- el.focus();
242
- expect(document.activeElement).to.equal(el);
243
- expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
244
- const opened = oneEvent(el, "sp-opened");
245
- el.open = true;
246
- await opened;
247
- const closed = oneEvent(el, "sp-closed");
248
- el.open = false;
249
- await closed;
250
- expect(document.activeElement).to.equal(el);
251
- expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
252
- });
253
- it("manages focus-ring styles", async () => {
254
- if (!isWebKit()) {
255
- return;
256
- }
257
- const el = await actionMenuFixture();
258
- el.isMobile.matches = true;
259
- el.bindEvents();
260
- await setViewport({ width: 360, height: 640 });
261
- await nextFrame();
262
- let opened = oneEvent(el, "sp-opened");
263
- const boundingRect = el.button.getBoundingClientRect();
264
- sendMouse({
265
- steps: [
266
- {
267
- type: "click",
268
- position: [
269
- boundingRect.x + boundingRect.width / 2,
270
- boundingRect.y + boundingRect.height / 2
271
- ]
272
- }
273
- ]
274
- });
275
- await opened;
276
- const tray = el.shadowRoot.querySelector("sp-tray");
277
- expect(tray).to.not.be.null;
278
- let closed = oneEvent(el, "sp-closed");
279
- const firstItem = el.querySelector("sp-menu-item");
280
- firstItem.click();
281
- await elementUpdated(el);
282
- await closed;
283
- expect(el.open).to.be.false;
284
- const button = el.shadowRoot.querySelector(
285
- "#button"
286
- );
287
- expect(button).to.not.be.null;
288
- expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
289
- expect(document.activeElement === el).to.be.true;
290
- await sendMouse({
291
- steps: [
292
- {
293
- type: "click",
294
- position: [0, 0]
295
- }
296
- ]
297
- });
298
- expect(document.activeElement === el).to.be.false;
299
- opened = oneEvent(el, "sp-opened");
300
- await sendKeys({
301
- press: "Tab"
302
- });
303
- await sendKeys({
304
- press: "Enter"
305
- });
306
- await elementUpdated(el);
307
- await opened;
308
- closed = oneEvent(el, "sp-closed");
309
- firstItem.click();
310
- await elementUpdated(el);
311
- await closed;
312
- expect(el.open).to.be.false;
313
- expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false;
314
- });
315
- it("opens unmeasured", async () => {
316
- const el = await actionMenuFixture();
317
- const button = el.button;
318
- expect(button).to.have.attribute("aria-haspopup", "true");
319
- expect(button).to.not.have.attribute("aria-expanded", "true");
320
- expect(button).to.not.have.attribute("aria-controls", "menu");
321
- el.click();
322
- await elementUpdated(el);
323
- expect(el.open).to.be.true;
324
- expect(button).to.have.attribute("aria-haspopup", "true");
325
- expect(button).to.have.attribute("aria-expanded", "true");
326
- expect(button).to.have.attribute("aria-controls", "menu");
327
- });
328
- it("opens repeatedly with Menu in the correct location", async function() {
329
- var _a, _b, _c, _d;
330
- const el = await fixture(
331
- iconOnly({
332
- ...iconOnly.args,
333
- align: "end"
334
- })
335
- );
336
- expect(el.open, "open?").to.be.false;
337
- let opened = oneEvent(el, "sp-opened");
338
- el.click();
339
- await opened;
340
- expect(el.open, "open?").to.be.true;
341
- const firstRect = (_b = (_a = el == null ? void 0 : el.overlayElement) == null ? void 0 : _a.dialogEl) == null ? void 0 : _b.getBoundingClientRect();
342
- const closed = oneEvent(el, "sp-closed");
343
- el.close();
344
- await closed;
345
- expect(el.open, "open?").to.be.false;
346
- opened = oneEvent(el, "sp-opened");
347
- el.toggle();
348
- await opened;
349
- expect(el.open, "open?").to.be.true;
350
- const secondRect = (_d = (_c = el == null ? void 0 : el.overlayElement) == null ? void 0 : _c.dialogEl) == null ? void 0 : _d.getBoundingClientRect();
351
- el.close();
352
- expect(firstRect).to.deep.equal(secondRect);
353
- });
354
- it("opens and selects in a single pointer button interaction", async () => {
355
- const el = await actionMenuFixture();
356
- const thirdItem = el.querySelector(
357
- "sp-menu-item:nth-of-type(3)"
358
- );
359
- const boundingRect = el.button.getBoundingClientRect();
360
- expect(el.value).to.not.equal(thirdItem.value);
361
- const opened = oneEvent(el, "sp-opened");
362
- await sendMouse({
363
- steps: [
364
- {
365
- type: "move",
366
- position: [
367
- boundingRect.x + boundingRect.width / 2,
368
- boundingRect.y + boundingRect.height / 2
369
- ]
370
- },
371
- {
372
- type: "down"
373
- }
374
- ]
375
- });
376
- await opened;
377
- const thirdItemRect = thirdItem.getBoundingClientRect();
378
- const closed = oneEvent(el, "sp-closed");
379
- let selected = "";
380
- el.addEventListener("change", (event) => {
381
- selected = event.target.value;
382
- });
383
- await sendMouse({
384
- steps: [
385
- {
386
- type: "move",
387
- position: [
388
- thirdItemRect.x + thirdItemRect.width / 2,
389
- thirdItemRect.y + thirdItemRect.height / 2
390
- ]
391
- },
392
- {
393
- type: "up"
394
- }
395
- ]
396
- });
397
- await closed;
398
- expect(el.open).to.be.false;
399
- expect(selected).to.equal(thirdItem.value);
400
- });
401
- it("returns focus on `Escape`", async () => {
402
- const el = await actionMenuFixture();
403
- const thirdItem = el.querySelector(
404
- "sp-menu-item:nth-of-type(3)"
405
- );
406
- expect(el.value).to.not.equal(thirdItem.value);
407
- const opened = oneEvent(el, "sp-opened");
408
- el.focus();
409
- await sendKeys({ press: "Enter" });
410
- await opened;
411
- await sendKeys({ press: "Escape" });
412
- await waitUntil(
413
- () => document.activeElement === el,
414
- "focused",
415
- { timeout: 300 }
416
- );
417
- expect(el.open).to.be.false;
418
- });
419
- it("returns focus on select", async () => {
420
- const el = await actionMenuFixture();
421
- const thirdItem = el.querySelector(
422
- "sp-menu-item:nth-of-type(3)"
423
- );
424
- expect(el.value).to.not.equal(thirdItem.value);
425
- const opened = oneEvent(el, "sp-opened");
426
- el.focus();
427
- await sendKeys({ press: "Enter" });
428
- await opened;
429
- thirdItem.click();
430
- await waitUntil(
431
- () => document.activeElement === el,
432
- "focused",
433
- { timeout: 300 }
434
- );
435
- expect(el.open).to.be.false;
436
- });
437
- it("has attribute aria-describedby", async () => {
438
- const name = "sp-picker";
439
- const description = "Rendering a Picker";
440
- const el = await fixture(html`
441
- <sp-action-menu label=${name}>
442
- <sp-menu-item>Select Inverse</sp-menu-item>
443
- <sp-menu-item>Feather...</sp-menu-item>
444
- <span slot="description">${description}</span>
445
- </sp-action-menu>
446
- `);
447
- await elementUpdated(el);
448
- await findDescribedNode(name, description);
449
- });
450
- it("opens unmeasured with deprecated syntax", async () => {
451
- const el = await deprecatedActionMenuFixture();
452
- el.click();
453
- await elementUpdated(el);
454
- expect(el.open).to.be.true;
455
- });
456
- it("toggles open/close multiple time", async () => {
457
- const el = await actionMenuFixture();
458
- await elementUpdated(el);
459
- const button = el.button;
460
- expect(button).to.have.attribute("aria-haspopup", "true");
461
- expect(button).to.have.attribute("aria-expanded", "false");
462
- expect(button).not.to.have.attribute("aria-controls");
463
- let opened = oneEvent(el, "sp-opened");
464
- el.open = true;
465
- await opened;
466
- expect(el.open).to.be.true;
467
- expect(button).to.have.attribute("aria-expanded", "true");
468
- expect(button).to.have.attribute("aria-controls", "menu");
469
- let closed = oneEvent(el, "sp-closed");
470
- el.open = false;
471
- await closed;
472
- expect(el.open).to.be.false;
473
- expect(button).to.have.attribute("aria-expanded", "false");
474
- expect(button).not.to.have.attribute("aria-controls");
475
- opened = oneEvent(el, "sp-opened");
476
- el.open = true;
477
- await opened;
478
- expect(el.open).to.be.true;
479
- expect(button).to.have.attribute("aria-expanded", "true");
480
- expect(button).to.have.attribute("aria-controls", "menu");
481
- closed = oneEvent(el, "sp-closed");
482
- el.open = false;
483
- await closed;
484
- expect(el.open).to.be.false;
485
- expect(button).to.have.attribute("aria-expanded", "false");
486
- expect(button).not.to.have.attribute("aria-controls");
487
- });
488
- it("allows submenu items to be selected", async () => {
489
- const root = await actionSubmenuFixture();
490
- const menuItem = root.querySelector("#item-with-submenu");
491
- const submenu = menuItem.querySelector(
492
- 'sp-menu[slot="submenu"]'
493
- );
494
- const selectedItem = submenu.querySelector(
495
- "#sub-selected-item"
496
- );
497
- expect(selectedItem.selected, "item should be initially selected").to.be.true;
498
- let opened = oneEvent(root, "sp-opened");
499
- root.click();
500
- await opened;
501
- expect(root.open).to.be.true;
502
- opened = oneEvent(menuItem, "sp-opened");
503
- menuItem.dispatchEvent(
504
- new PointerEvent("pointerenter", { bubbles: true })
505
- );
506
- await opened;
507
- await elementUpdated(submenu);
508
- expect(
509
- selectedItem.selected,
510
- "initially selected item should maintain selection"
511
- ).to.be.true;
512
- });
513
- it("does not alter submenu selection when top-level menu items are selected", async () => {
514
- const root = await fixture(html`
515
- <sp-action-menu id="actionmenu" label="More Actions">
516
- <sp-menu-item id="item-1">One</sp-menu-item>
517
- <sp-menu-item id="item-2">
518
- Two, with B selected
519
- <sp-menu slot="submenu" id="menu-2" selects="single">
520
- <sp-menu-item id="item-2a" selected>A</sp-menu-item>
521
- <sp-menu-item id="item-2b">B</sp-menu-item>
522
- </sp-menu>
523
- </sp-menu-item>
524
- </sp-action-menu>
525
- `);
526
- const item1 = root.querySelector("#item-1");
527
- const item2 = root.querySelector("#item-2");
528
- const itemA = root.querySelector("#item-2a");
529
- const itemB = root.querySelector("#item-2b");
530
- let opened = oneEvent(root, "sp-opened");
531
- expect(item1.selected, "before opening: item1 selected?").to.be.false;
532
- expect(item2.selected, "before opening: item2 selected?").to.be.false;
533
- expect(itemA.selected, "before opening: itemA selected?").to.be.true;
534
- expect(item2.selected, "before opening: itemB selected?").to.be.false;
535
- root.click();
536
- await opened;
537
- expect(root.open, "after clicking open: open?").to.be.true;
538
- let closed = oneEvent(root, "sp-closed");
539
- item1.click();
540
- await closed;
541
- expect(item1.selected, "after clicking item1: item1 selected?").to.be.false;
542
- expect(itemA.selected, "after clicking item1: itemA selected?").to.be.true;
543
- expect(root.open, "after clicking item1: open?").to.be.false;
544
- opened = oneEvent(root, "sp-opened");
545
- root.click();
546
- await opened;
547
- expect(root.open, "after reopening: open?").to.be.true;
548
- closed = oneEvent(root, "sp-closed");
549
- itemB.click();
550
- root.close();
551
- await closed;
552
- expect(item1.selected, "after clicking itemB: item1 selected?").to.be.false;
553
- expect(item2.selected, "after clicking itemB: item2 selected?").to.be.false;
554
- expect(itemA.selected, "after clicking itemB: itemA selected?").to.be.false;
555
- expect(itemB.selected, "after clicking itemB: itemB selected?").to.be.true;
556
- expect(root.open, "after clicking itemB: open?").to.be.false;
557
- opened = oneEvent(root, "sp-opened");
558
- root.click();
559
- await opened;
560
- expect(root.open, "after reopening: open?").to.be.true;
561
- closed = oneEvent(root, "sp-closed");
562
- itemB.click();
563
- await closed;
564
- expect(item2.selected, "after clicking item2: item2 selected?").to.be.false;
565
- expect(itemB.selected, "after clicking item2: itemB selected?").to.be.true;
566
- expect(root.open, "after clicking item2: open?").to.be.false;
567
- });
568
- it("shows tooltip", async function() {
569
- const openSpy = spy();
570
- const el = await fixture(
571
- tooltipDescriptionAndPlacement(
572
- tooltipDescriptionAndPlacement.args
573
- )
574
- );
575
- const tooltip = el.querySelector("sp-tooltip");
576
- const rect = el.getBoundingClientRect();
577
- tooltip.addEventListener("sp-opened", () => openSpy());
578
- await elementUpdated(tooltip);
579
- await nextFrame();
580
- await nextFrame();
581
- const overlay = tooltip.shadowRoot.querySelector(
582
- "sp-overlay"
583
- );
584
- await elementUpdated(overlay);
585
- expect(overlay.triggerElement === el.button).to.be.true;
586
- let open = oneEvent(tooltip, "sp-opened");
587
- await sendMouse({
588
- steps: [
589
- {
590
- position: [
591
- rect.left + rect.width / 2,
592
- rect.top + rect.height / 2
593
- ],
594
- type: "move"
595
- }
596
- ]
597
- });
598
- await open;
599
- expect(tooltip.open).to.be.true;
600
- const close = oneEvent(tooltip, "sp-closed");
601
- open = oneEvent(el, "sp-opened");
602
- await sendMouse({
603
- steps: [
604
- {
605
- position: [
606
- rect.left + rect.width / 2,
607
- rect.top + rect.height / 2
608
- ],
609
- type: "click"
610
- }
611
- ]
612
- });
613
- await close;
614
- await open;
615
- expect(tooltip.open, "tooltip still open").to.be.false;
616
- expect(el.open, "menu not open").to.be.true;
617
- const menu = el.optionsMenu;
618
- const menuRect = menu.getBoundingClientRect();
619
- await sendMouse({
620
- steps: [
621
- {
622
- position: [
623
- menuRect.left + menuRect.width / 2,
624
- menuRect.top + menuRect.height / 2
625
- ],
626
- type: "move"
627
- }
628
- ]
629
- });
630
- await aTimeout(150);
631
- expect(openSpy.callCount).to.equal(1);
632
- });
633
- it("opens, then closes, on subsequent clicks", async function() {
634
- const el = await actionMenuFixture();
635
- const rect = el.getBoundingClientRect();
636
- await nextFrame();
637
- await nextFrame();
638
- const open = oneEvent(el, "sp-opened");
639
- await sendMouse({
640
- steps: [
641
- {
642
- position: [
643
- rect.left + rect.width / 2,
644
- rect.top + rect.height / 2
645
- ],
646
- type: "click"
647
- }
648
- ]
649
- });
650
- await open;
651
- expect(el.open).to.be.true;
652
- await aTimeout(50);
653
- expect(el.open).to.be.true;
654
- const close = oneEvent(el, "sp-closed");
655
- await sendMouse({
656
- steps: [
657
- {
658
- position: [
659
- rect.left + rect.width / 2,
660
- rect.top + rect.height / 2
661
- ],
662
- type: "click"
663
- }
664
- ]
665
- });
666
- await close;
667
- expect(el.open).to.be.false;
668
- await aTimeout(50);
669
- expect(el.open).to.be.false;
670
- });
671
- it("should handle scroll event", async () => {
672
- const renderMenuItems = () => Array.from(
673
- { length: 30 },
674
- (_, i) => html`
675
- <sp-menu-item style="width: 100%;">
676
- Menu Item ${i + 1}
677
- </sp-menu-item>
678
- `
679
- );
680
- const handleActionMenuScroll = spy();
681
- const el = await fixture(html`
682
- <sp-action-menu @scroll=${() => handleActionMenuScroll()}>
683
- <span slot="label">More Actions</span>
684
- <sp-menu-item>Deselect</sp-menu-item>
685
- <sp-menu-item>Select Inverse</sp-menu-item>
686
- <sp-menu-item>Feather...</sp-menu-item>
687
- <sp-menu-item>Select and Mask...</sp-menu-item>
688
- ${renderMenuItems()}
689
- </sp-action-menu>
690
- `);
691
- await elementUpdated(el);
692
- expect(handleActionMenuScroll.called).to.be.false;
693
- el.dispatchEvent(
694
- new Event("scroll", { cancelable: true, composed: true })
695
- );
696
- expect(handleActionMenuScroll).to.have.been.called;
697
- });
698
- });
699
- };
700
- //# sourceMappingURL=index.js.map