@spectrum-web-components/menu 0.15.1-devmode.0 → 0.16.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.
- package/package.json +9 -9
- package/sp-menu-divider.js +1 -2
- package/sp-menu-divider.js.map +1 -1
- package/sp-menu-group.js +1 -2
- package/sp-menu-group.js.map +1 -1
- package/sp-menu-item.js +1 -2
- package/sp-menu-item.js.map +1 -1
- package/sp-menu.js +1 -2
- package/sp-menu.js.map +1 -1
- package/src/Menu.js +2 -493
- package/src/Menu.js.map +1 -1
- package/src/MenuDivider.js +1 -12
- package/src/MenuDivider.js.map +1 -1
- package/src/MenuGroup.js +2 -71
- package/src/MenuGroup.js.map +1 -1
- package/src/MenuItem.js +7 -406
- package/src/MenuItem.js.map +1 -1
- package/src/index.js +1 -4
- package/src/index.js.map +1 -1
- package/src/menu-divider.css.js +2 -4
- package/src/menu-divider.css.js.map +1 -1
- package/src/menu-group.css.js +2 -4
- package/src/menu-group.css.js.map +1 -1
- package/src/menu-item.css.js +2 -4
- package/src/menu-item.css.js.map +1 -1
- package/src/menu.css.js +2 -4
- package/src/menu.css.js.map +1 -1
- package/src/spectrum-checkmark.css.js +2 -4
- package/src/spectrum-checkmark.css.js.map +1 -1
- package/src/spectrum-chevron.css.js +2 -4
- package/src/spectrum-chevron.css.js.map +1 -1
- package/src/spectrum-itemLabel.css.js +2 -4
- package/src/spectrum-itemLabel.css.js.map +1 -1
- package/src/spectrum-menu-divider.css.js +2 -4
- package/src/spectrum-menu-divider.css.js.map +1 -1
- package/src/spectrum-menu-item.css.js +2 -4
- package/src/spectrum-menu-item.css.js.map +1 -1
- package/src/spectrum-menu-sectionHeading.css.js +2 -4
- package/src/spectrum-menu-sectionHeading.css.js.map +1 -1
- package/src/spectrum-menu.css.js +2 -4
- package/src/spectrum-menu.css.js.map +1 -1
- package/stories/menu-group.stories.js +9 -60
- package/stories/menu-group.stories.js.map +1 -1
- package/stories/menu-item.stories.js +4 -24
- package/stories/menu-item.stories.js.map +1 -1
- package/stories/menu.stories.js +8 -46
- package/stories/menu.stories.js.map +1 -1
- package/stories/submenu.stories.js +16 -153
- package/stories/submenu.stories.js.map +1 -1
- package/test/benchmark/test-basic.js +1 -7
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/menu-group.test-vrt.js +1 -3
- package/test/menu-group.test-vrt.js.map +1 -1
- package/test/menu-group.test.js +6 -170
- package/test/menu-group.test.js.map +1 -1
- package/test/menu-item.test-vrt.js +1 -3
- package/test/menu-item.test-vrt.js.map +1 -1
- package/test/menu-item.test.js +8 -101
- package/test/menu-item.test.js.map +1 -1
- package/test/menu-selects.test.js +5 -504
- package/test/menu-selects.test.js.map +1 -1
- package/test/menu.test-vrt.js +1 -3
- package/test/menu.test-vrt.js.map +1 -1
- package/test/menu.test.js +17 -258
- package/test/menu.test.js.map +1 -1
- package/test/submenu.test-vrt.js +1 -3
- package/test/submenu.test-vrt.js.map +1 -1
- package/test/submenu.test.js +21 -482
- package/test/submenu.test.js.map +1 -1
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu.test-vrt.ts"],
|
|
4
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*/\n\nimport * as stories from '../stories/menu.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('MenuStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,6CACA,8DAEA,EAAe,cAAe,CAAO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/menu.test.js
CHANGED
|
@@ -1,78 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
3
|
-
import "@spectrum-web-components/menu/sp-menu-group.js";
|
|
4
|
-
import {
|
|
5
|
-
elementUpdated,
|
|
6
|
-
expect,
|
|
7
|
-
fixture,
|
|
8
|
-
html,
|
|
9
|
-
nextFrame,
|
|
10
|
-
waitUntil
|
|
11
|
-
} from "@open-wc/testing";
|
|
12
|
-
import {
|
|
13
|
-
arrowDownEvent,
|
|
14
|
-
arrowUpEvent,
|
|
15
|
-
tabEvent,
|
|
16
|
-
testForLitDevWarnings,
|
|
17
|
-
tEvent
|
|
18
|
-
} from "../../../test/testing-helpers.js";
|
|
19
|
-
import { spy } from "sinon";
|
|
20
|
-
import { sendKeys } from "@web/test-runner-commands";
|
|
21
|
-
describe("Menu", () => {
|
|
22
|
-
it("renders empty", async () => {
|
|
23
|
-
const el = await fixture(html`
|
|
1
|
+
import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/menu/sp-menu-group.js";import{elementUpdated as m,expect as t,fixture as u,html as i,nextFrame as f,waitUntil as o}from"@open-wc/testing";import{arrowDownEvent as l,arrowUpEvent as d,tabEvent as h,testForLitDevWarnings as b,tEvent as w}from"../../../test/testing-helpers.js";import{spy as p}from"sinon";import{sendKeys as c}from"@web/test-runner-commands";describe("Menu",()=>{it("renders empty",async()=>{const e=await u(i`
|
|
24
2
|
<sp-menu tabindex="0"><a href="#anchor">Test</a></sp-menu>
|
|
25
|
-
`);
|
|
26
|
-
|
|
27
|
-
await elementUpdated(el);
|
|
28
|
-
expect(document.activeElement === el, "self not focused, 1").to.be.false;
|
|
29
|
-
expect(document.activeElement === anchor, "child not focused, 1").to.be.false;
|
|
30
|
-
expect(el.getAttribute("role")).to.equal("menu");
|
|
31
|
-
el.focus();
|
|
32
|
-
await elementUpdated(el);
|
|
33
|
-
expect(document.activeElement === el, "self not focused, 2").to.be.false;
|
|
34
|
-
expect(document.activeElement === anchor, "child not focused, 2").to.be.false;
|
|
35
|
-
anchor.focus();
|
|
36
|
-
expect(document.activeElement === el, "self not focused, 3").to.be.false;
|
|
37
|
-
expect(document.activeElement === anchor, "anchor").to.be.true;
|
|
38
|
-
});
|
|
39
|
-
it("renders w/ [disabled] menu items", async () => {
|
|
40
|
-
const focusinSpy = spy();
|
|
41
|
-
const el = await fixture(html`
|
|
42
|
-
<sp-menu tabindex="0" @focusin=${() => focusinSpy()}>
|
|
3
|
+
`),s=e.querySelector("a");await m(e),t(document.activeElement===e,"self not focused, 1").to.be.false,t(document.activeElement===s,"child not focused, 1").to.be.false,t(e.getAttribute("role")).to.equal("menu"),e.focus(),await m(e),t(document.activeElement===e,"self not focused, 2").to.be.false,t(document.activeElement===s,"child not focused, 2").to.be.false,s.focus(),t(document.activeElement===e,"self not focused, 3").to.be.false,t(document.activeElement===s,"anchor").to.be.true}),it("renders w/ [disabled] menu items",async()=>{const e=p(),s=await u(i`
|
|
4
|
+
<sp-menu tabindex="0" @focusin=${()=>e()}>
|
|
43
5
|
<sp-menu-item disabled>Disabled item</sp-menu-item>
|
|
44
6
|
</sp-menu>
|
|
45
|
-
`);
|
|
46
|
-
|
|
47
|
-
expect(document.activeElement === el, "self not focused, 1").to.be.false;
|
|
48
|
-
el.focus();
|
|
49
|
-
await elementUpdated(el);
|
|
50
|
-
expect(document.activeElement === el, "self not focused, 2").to.be.false;
|
|
51
|
-
expect(focusinSpy.callCount).to.equal(0);
|
|
52
|
-
});
|
|
53
|
-
it("renders w/ all [disabled] menu items", async () => {
|
|
54
|
-
const focusinSpy = spy();
|
|
55
|
-
const el = await fixture(html`
|
|
56
|
-
<sp-menu tabindex="0" @focusin=${() => focusinSpy()}>
|
|
7
|
+
`);await m(s),t(document.activeElement===s,"self not focused, 1").to.be.false,s.focus(),await m(s),t(document.activeElement===s,"self not focused, 2").to.be.false,t(e.callCount).to.equal(0)}),it("renders w/ all [disabled] menu items",async()=>{const e=p(),s=await u(i`
|
|
8
|
+
<sp-menu tabindex="0" @focusin=${()=>e()}>
|
|
57
9
|
<sp-menu-item disabled>Disabled item 1</sp-menu-item>
|
|
58
10
|
<sp-menu-item disabled>Disabled item 2</sp-menu-item>
|
|
59
11
|
</sp-menu>
|
|
60
|
-
`);
|
|
61
|
-
const firstItem = el.querySelector("sp-menu-item");
|
|
62
|
-
await elementUpdated(el);
|
|
63
|
-
expect(document.activeElement === el, "self not focused, 1").to.be.false;
|
|
64
|
-
el.focus();
|
|
65
|
-
await elementUpdated(el);
|
|
66
|
-
expect(document.activeElement === el, "self not focused, 2").to.be.false;
|
|
67
|
-
expect(focusinSpy.callCount).to.equal(0);
|
|
68
|
-
firstItem.focus();
|
|
69
|
-
await elementUpdated(el);
|
|
70
|
-
expect(document.activeElement === el, "self not focused, 2").to.be.false;
|
|
71
|
-
expect(focusinSpy.callCount).to.equal(0);
|
|
72
|
-
expect(el.matches(":focus-within")).to.be.false;
|
|
73
|
-
});
|
|
74
|
-
it("renders w/ menu items", async () => {
|
|
75
|
-
const el = await fixture(html`
|
|
12
|
+
`),n=s.querySelector("sp-menu-item");await m(s),t(document.activeElement===s,"self not focused, 1").to.be.false,s.focus(),await m(s),t(document.activeElement===s,"self not focused, 2").to.be.false,t(e.callCount).to.equal(0),n.focus(),await m(s),t(document.activeElement===s,"self not focused, 2").to.be.false,t(e.callCount).to.equal(0),t(s.matches(":focus-within")).to.be.false}),it("renders w/ menu items",async()=>{const e=await u(i`
|
|
76
13
|
<sp-menu label="Pick an action:">
|
|
77
14
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
78
15
|
<sp-menu-item>Select Inverse</sp-menu-item>
|
|
@@ -82,33 +19,19 @@ describe("Menu", () => {
|
|
|
82
19
|
<sp-menu-item>Save Selection</sp-menu-item>
|
|
83
20
|
<sp-menu-item disabled>Make Work Path</sp-menu-item>
|
|
84
21
|
</sp-menu>
|
|
85
|
-
`);
|
|
86
|
-
await waitUntil(() => el.childItems.length == 6, "expected menu to manage 6 menu items");
|
|
87
|
-
await elementUpdated(el);
|
|
88
|
-
const inTabindexElement = el.querySelector('[tabindex]:not([tabindex="-1"])');
|
|
89
|
-
expect(inTabindexElement).to.be.null;
|
|
90
|
-
await expect(el).to.be.accessible();
|
|
91
|
-
});
|
|
92
|
-
testForLitDevWarnings(async () => await fixture(html`
|
|
22
|
+
`);await o(()=>e.childItems.length==6,"expected menu to manage 6 menu items"),await m(e);const s=e.querySelector('[tabindex]:not([tabindex="-1"])');t(s).to.be.null,await t(e).to.be.accessible()}),b(async()=>await u(i`
|
|
93
23
|
<sp-menu selects="single">
|
|
94
24
|
<sp-menu-item>Not Selected</sp-menu-item>
|
|
95
25
|
<sp-menu-item selected>Selected</sp-menu-item>
|
|
96
26
|
<sp-menu-item>Other</sp-menu-item>
|
|
97
27
|
</sp-menu>
|
|
98
|
-
`))
|
|
99
|
-
it("renders w/ selected", async () => {
|
|
100
|
-
const el = await fixture(html`
|
|
28
|
+
`)),it("renders w/ selected",async()=>{const e=await u(i`
|
|
101
29
|
<sp-menu selects="single">
|
|
102
30
|
<sp-menu-item>Not Selected</sp-menu-item>
|
|
103
31
|
<sp-menu-item selected>Selected</sp-menu-item>
|
|
104
32
|
<sp-menu-item>Other</sp-menu-item>
|
|
105
33
|
</sp-menu>
|
|
106
|
-
`);
|
|
107
|
-
await elementUpdated(el);
|
|
108
|
-
await expect(el).to.be.accessible();
|
|
109
|
-
});
|
|
110
|
-
it("renders w/ hrefs", async () => {
|
|
111
|
-
const el = await fixture(html`
|
|
34
|
+
`);await m(e),await t(e).to.be.accessible()}),it("renders w/ hrefs",async()=>{const e=await u(i`
|
|
112
35
|
<sp-menu>
|
|
113
36
|
<sp-menu-item href="not-selected.html">
|
|
114
37
|
Not Selected
|
|
@@ -116,14 +39,7 @@ describe("Menu", () => {
|
|
|
116
39
|
<sp-menu-item href="selected.html">Selected</sp-menu-item>
|
|
117
40
|
<sp-menu-item href="other.html">Other</sp-menu-item>
|
|
118
41
|
</sp-menu>
|
|
119
|
-
`);
|
|
120
|
-
await waitUntil(() => el.childItems.length == 3, "expected menu to manage 3 items");
|
|
121
|
-
await elementUpdated(el);
|
|
122
|
-
await expect(el).to.be.accessible();
|
|
123
|
-
expect(el.getAttribute("role")).to.equal("menu");
|
|
124
|
-
});
|
|
125
|
-
it("handle focus and keyboard input", async () => {
|
|
126
|
-
const el = await fixture(html`
|
|
42
|
+
`);await o(()=>e.childItems.length==3,"expected menu to manage 3 items"),await m(e),await t(e).to.be.accessible(),t(e.getAttribute("role")).to.equal("menu")}),it("handle focus and keyboard input",async()=>{const e=await u(i`
|
|
127
43
|
<sp-menu>
|
|
128
44
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
129
45
|
<sp-menu-item>Select Inverse</sp-menu-item>
|
|
@@ -133,103 +49,20 @@ describe("Menu", () => {
|
|
|
133
49
|
<sp-menu-item>Save Selection</sp-menu-item>
|
|
134
50
|
<sp-menu-item disabled>Make Work Path</sp-menu-item>
|
|
135
51
|
</sp-menu>
|
|
136
|
-
`);
|
|
137
|
-
await waitUntil(() => el.childItems.length == 6, "expected menu to manage 6 items");
|
|
138
|
-
await elementUpdated(el);
|
|
139
|
-
const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
|
|
140
|
-
const thirdToLastItem = el.querySelector("sp-menu-item:nth-last-of-type(3)");
|
|
141
|
-
const secondToLastItem = el.querySelector("sp-menu-item:nth-last-of-type(2)");
|
|
142
|
-
el.focus();
|
|
143
|
-
await elementUpdated(el);
|
|
144
|
-
await sendKeys({ press: "ArrowDown" });
|
|
145
|
-
await sendKeys({ press: "ArrowUp" });
|
|
146
|
-
expect(document.activeElement === el).to.be.true;
|
|
147
|
-
expect(firstItem.focused).to.be.true;
|
|
148
|
-
el.dispatchEvent(arrowUpEvent());
|
|
149
|
-
el.dispatchEvent(arrowUpEvent());
|
|
150
|
-
el.dispatchEvent(tEvent());
|
|
151
|
-
expect(document.activeElement === el).to.be.true;
|
|
152
|
-
expect(thirdToLastItem.focused).to.be.true;
|
|
153
|
-
el.dispatchEvent(arrowDownEvent());
|
|
154
|
-
expect(document.activeElement === el).to.be.true;
|
|
155
|
-
expect(secondToLastItem.focused).to.be.true;
|
|
156
|
-
});
|
|
157
|
-
it("handle focus and late descendent additions", async () => {
|
|
158
|
-
const el = await fixture(html`
|
|
52
|
+
`);await o(()=>e.childItems.length==6,"expected menu to manage 6 items"),await m(e);const s=e.querySelector("sp-menu-item:nth-of-type(1)"),n=e.querySelector("sp-menu-item:nth-last-of-type(3)"),a=e.querySelector("sp-menu-item:nth-last-of-type(2)");e.focus(),await m(e),await c({press:"ArrowDown"}),await c({press:"ArrowUp"}),t(document.activeElement===e).to.be.true,t(s.focused).to.be.true,e.dispatchEvent(d()),e.dispatchEvent(d()),e.dispatchEvent(w()),t(document.activeElement===e).to.be.true,t(n.focused).to.be.true,e.dispatchEvent(l()),t(document.activeElement===e).to.be.true,t(a.focused).to.be.true}),it("handle focus and late descendent additions",async()=>{const e=await u(i`
|
|
159
53
|
<sp-menu>
|
|
160
54
|
<sp-menu-group selects="inherit">
|
|
161
55
|
<span slot="header">Options</span>
|
|
162
56
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
163
57
|
</sp-menu-group>
|
|
164
58
|
</sp-menu>
|
|
165
|
-
`);
|
|
166
|
-
await waitUntil(() => el.childItems.length == 1, "expected menu to manage 1 item");
|
|
167
|
-
await elementUpdated(el);
|
|
168
|
-
const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
|
|
169
|
-
el.focus();
|
|
170
|
-
await elementUpdated(el);
|
|
171
|
-
await sendKeys({ press: "ArrowDown" });
|
|
172
|
-
await sendKeys({ press: "ArrowUp" });
|
|
173
|
-
expect(document.activeElement === el, "active element").to.be.true;
|
|
174
|
-
expect(firstItem.focused, "visually focused").to.be.true;
|
|
175
|
-
el.blur();
|
|
176
|
-
const group = el.querySelector("sp-menu-group");
|
|
177
|
-
const prependedItem = document.createElement("sp-menu-item");
|
|
178
|
-
prependedItem.textContent = "Prepended Item";
|
|
179
|
-
const appendedItem = document.createElement("sp-menu-item");
|
|
180
|
-
appendedItem.textContent = "Appended Item";
|
|
181
|
-
group.prepend(prependedItem);
|
|
182
|
-
group.append(appendedItem);
|
|
183
|
-
await elementUpdated(el);
|
|
184
|
-
await waitUntil(() => {
|
|
185
|
-
return el.childItems.length == 3;
|
|
186
|
-
}, "expected menu to manage 3 items");
|
|
187
|
-
await elementUpdated(el);
|
|
188
|
-
expect(document.activeElement === el).to.be.false;
|
|
189
|
-
expect(firstItem.focused).to.be.false;
|
|
190
|
-
expect(prependedItem.focused).to.be.false;
|
|
191
|
-
el.focus();
|
|
192
|
-
await sendKeys({ press: "ArrowDown" });
|
|
193
|
-
await sendKeys({ press: "ArrowUp" });
|
|
194
|
-
expect(document.activeElement === el, "another active element").to.be.true;
|
|
195
|
-
expect(prependedItem.focused, "another visibly focused").to.be.true;
|
|
196
|
-
el.dispatchEvent(arrowUpEvent());
|
|
197
|
-
expect(document.activeElement === el, "last active element").to.be.true;
|
|
198
|
-
expect(appendedItem.focused, "last visibly focused").to.be.true;
|
|
199
|
-
});
|
|
200
|
-
it("cleans up when tabbing away", async () => {
|
|
201
|
-
const el = await fixture(html`
|
|
59
|
+
`);await o(()=>e.childItems.length==1,"expected menu to manage 1 item"),await m(e);const s=e.querySelector("sp-menu-item:nth-of-type(1)");e.focus(),await m(e),await c({press:"ArrowDown"}),await c({press:"ArrowUp"}),t(document.activeElement===e,"active element").to.be.true,t(s.focused,"visually focused").to.be.true,e.blur();const n=e.querySelector("sp-menu-group"),a=document.createElement("sp-menu-item");a.textContent="Prepended Item";const r=document.createElement("sp-menu-item");r.textContent="Appended Item",n.prepend(a),n.append(r),await m(e),await o(()=>e.childItems.length==3,"expected menu to manage 3 items"),await m(e),t(document.activeElement===e).to.be.false,t(s.focused).to.be.false,t(a.focused).to.be.false,e.focus(),await c({press:"ArrowDown"}),await c({press:"ArrowUp"}),t(document.activeElement===e,"another active element").to.be.true,t(a.focused,"another visibly focused").to.be.true,e.dispatchEvent(d()),t(document.activeElement===e,"last active element").to.be.true,t(r.focused,"last visibly focused").to.be.true}),it("cleans up when tabbing away",async()=>{const e=await u(i`
|
|
202
60
|
<sp-menu tabindex="0">
|
|
203
61
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
204
62
|
<sp-menu-item>Select Inverse</sp-menu-item>
|
|
205
63
|
<sp-menu-item>Third Item</sp-menu-item>
|
|
206
64
|
</sp-menu>
|
|
207
|
-
`);
|
|
208
|
-
await waitUntil(() => el.childItems.length == 3, "expected menu to manage 3 items");
|
|
209
|
-
await elementUpdated(el);
|
|
210
|
-
const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
|
|
211
|
-
const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
|
|
212
|
-
const thirdItem = el.querySelector("sp-menu-item:nth-of-type(3)");
|
|
213
|
-
el.focus();
|
|
214
|
-
await sendKeys({ press: "ArrowDown" });
|
|
215
|
-
await sendKeys({ press: "ArrowUp" });
|
|
216
|
-
expect(document.activeElement === el).to.be.true;
|
|
217
|
-
expect(firstItem.focused, "first").to.be.true;
|
|
218
|
-
el.dispatchEvent(arrowDownEvent());
|
|
219
|
-
el.dispatchEvent(arrowDownEvent());
|
|
220
|
-
expect(thirdItem.focused, "third").to.be.true;
|
|
221
|
-
el.dispatchEvent(tabEvent());
|
|
222
|
-
el.dispatchEvent(new CustomEvent("focusout", {
|
|
223
|
-
composed: true,
|
|
224
|
-
bubbles: true
|
|
225
|
-
}));
|
|
226
|
-
await nextFrame();
|
|
227
|
-
el.startListeningToKeyboard();
|
|
228
|
-
el.dispatchEvent(arrowDownEvent());
|
|
229
|
-
expect(secondItem.focused, "second").to.be.true;
|
|
230
|
-
});
|
|
231
|
-
it("handles focus across focused MenuItem removals", async () => {
|
|
232
|
-
const el = await fixture(html`
|
|
65
|
+
`);await o(()=>e.childItems.length==3,"expected menu to manage 3 items"),await m(e);const s=e.querySelector("sp-menu-item:nth-of-type(1)"),n=e.querySelector("sp-menu-item:nth-of-type(2)"),a=e.querySelector("sp-menu-item:nth-of-type(3)");e.focus(),await c({press:"ArrowDown"}),await c({press:"ArrowUp"}),t(document.activeElement===e).to.be.true,t(s.focused,"first").to.be.true,e.dispatchEvent(l()),e.dispatchEvent(l()),t(a.focused,"third").to.be.true,e.dispatchEvent(h()),e.dispatchEvent(new CustomEvent("focusout",{composed:!0,bubbles:!0})),await f(),e.startListeningToKeyboard(),e.dispatchEvent(l()),t(n.focused,"second").to.be.true}),it("handles focus across focused MenuItem removals",async()=>{const e=await u(i`
|
|
233
66
|
<sp-menu id="test">
|
|
234
67
|
<sp-menu-item class="first">Deselect</sp-menu-item>
|
|
235
68
|
<sp-menu-item>Invert Selection</sp-menu-item>
|
|
@@ -239,91 +72,17 @@ describe("Menu", () => {
|
|
|
239
72
|
Save Selection
|
|
240
73
|
</sp-menu-item>
|
|
241
74
|
</sp-menu>
|
|
242
|
-
`);
|
|
243
|
-
const firstItem = el.querySelector(".first");
|
|
244
|
-
const selectedItem = el.querySelector(".selected");
|
|
245
|
-
await elementUpdated(el);
|
|
246
|
-
el.focus();
|
|
247
|
-
expect(document.activeElement).to.equal(el);
|
|
248
|
-
expect(selectedItem.focused).to.be.true;
|
|
249
|
-
selectedItem.remove();
|
|
250
|
-
await elementUpdated(el);
|
|
251
|
-
expect(document.activeElement).to.equal(el);
|
|
252
|
-
expect(firstItem.focused).to.be.true;
|
|
253
|
-
});
|
|
254
|
-
it("handles single selection", async () => {
|
|
255
|
-
const el = await fixture(html`
|
|
75
|
+
`),s=e.querySelector(".first"),n=e.querySelector(".selected");await m(e),e.focus(),t(document.activeElement).to.equal(e),t(n.focused).to.be.true,n.remove(),await m(e),t(document.activeElement).to.equal(e),t(s.focused).to.be.true}),it("handles single selection",async()=>{const e=await u(i`
|
|
256
76
|
<sp-menu selects="single">
|
|
257
77
|
<sp-menu-item selected>First</sp-menu-item>
|
|
258
78
|
<sp-menu-item>Second</sp-menu-item>
|
|
259
79
|
<sp-menu-item>Third</sp-menu-item>
|
|
260
80
|
</sp-menu>
|
|
261
|
-
`);
|
|
262
|
-
|
|
263
|
-
await waitUntil(() => el.selectedItems.length == 1, "expected menu to have 1 selected item");
|
|
264
|
-
await elementUpdated(el);
|
|
265
|
-
const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
|
|
266
|
-
const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
|
|
267
|
-
expect(firstItem.getAttribute("role")).to.equal("menuitemradio");
|
|
268
|
-
expect(secondItem.getAttribute("role")).to.equal("menuitemradio");
|
|
269
|
-
expect(firstItem.selected).to.be.true;
|
|
270
|
-
expect(secondItem.selected).to.be.false;
|
|
271
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("true");
|
|
272
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("false");
|
|
273
|
-
expect(el.value).to.equal("First");
|
|
274
|
-
secondItem.click();
|
|
275
|
-
await elementUpdated(el);
|
|
276
|
-
await elementUpdated(firstItem);
|
|
277
|
-
await elementUpdated(secondItem);
|
|
278
|
-
expect(firstItem.selected).to.be.false;
|
|
279
|
-
expect(secondItem.selected).to.be.true;
|
|
280
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("false");
|
|
281
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("true");
|
|
282
|
-
expect(el.value).to.equal("Second");
|
|
283
|
-
});
|
|
284
|
-
it("handles multiple selection", async () => {
|
|
285
|
-
const changeSpy = spy();
|
|
286
|
-
const el = await fixture(html`
|
|
287
|
-
<sp-menu selects="multiple" @change=${() => changeSpy()}>
|
|
81
|
+
`);await o(()=>e.childItems.length==3,"expected menu to manage 3 items"),await o(()=>e.selectedItems.length==1,"expected menu to have 1 selected item"),await m(e);const s=e.querySelector("sp-menu-item:nth-of-type(1)"),n=e.querySelector("sp-menu-item:nth-of-type(2)");t(s.getAttribute("role")).to.equal("menuitemradio"),t(n.getAttribute("role")).to.equal("menuitemradio"),t(s.selected).to.be.true,t(n.selected).to.be.false,t(s.getAttribute("aria-checked")).to.equal("true"),t(n.getAttribute("aria-checked")).to.equal("false"),t(e.value).to.equal("First"),n.click(),await m(e),await m(s),await m(n),t(s.selected).to.be.false,t(n.selected).to.be.true,t(s.getAttribute("aria-checked")).to.equal("false"),t(n.getAttribute("aria-checked")).to.equal("true"),t(e.value).to.equal("Second")}),it("handles multiple selection",async()=>{const e=p(),s=await u(i`
|
|
82
|
+
<sp-menu selects="multiple" @change=${()=>e()}>
|
|
288
83
|
<sp-menu-item selected>First</sp-menu-item>
|
|
289
84
|
<sp-menu-item>Second</sp-menu-item>
|
|
290
85
|
<sp-menu-item>Third</sp-menu-item>
|
|
291
86
|
</sp-menu>
|
|
292
|
-
`);
|
|
293
|
-
await waitUntil(() => el.childItems.length == 3, "expected menu to manage 3 items");
|
|
294
|
-
await elementUpdated(el);
|
|
295
|
-
const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
|
|
296
|
-
const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
|
|
297
|
-
expect(firstItem.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
298
|
-
expect(secondItem.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
299
|
-
expect(firstItem.selected).to.be.true;
|
|
300
|
-
expect(secondItem.selected).to.be.false;
|
|
301
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("true");
|
|
302
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("false");
|
|
303
|
-
expect(el.value).to.equal("First");
|
|
304
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
305
|
-
secondItem.click();
|
|
306
|
-
await elementUpdated(el);
|
|
307
|
-
await elementUpdated(firstItem);
|
|
308
|
-
await elementUpdated(secondItem);
|
|
309
|
-
expect(changeSpy.callCount, "one change").to.equal(1);
|
|
310
|
-
expect(firstItem.selected).to.be.true;
|
|
311
|
-
expect(secondItem.selected).to.be.true;
|
|
312
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("true");
|
|
313
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("true");
|
|
314
|
-
expect(el.value).to.equal("First,Second");
|
|
315
|
-
expect(el.selectedItems.length).to.equal(2);
|
|
316
|
-
firstItem.click();
|
|
317
|
-
await elementUpdated(el);
|
|
318
|
-
await elementUpdated(firstItem);
|
|
319
|
-
await elementUpdated(secondItem);
|
|
320
|
-
expect(changeSpy.callCount, "two changes").to.equal(2);
|
|
321
|
-
expect(firstItem.selected).to.be.false;
|
|
322
|
-
expect(secondItem.selected).to.be.true;
|
|
323
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("false");
|
|
324
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("true");
|
|
325
|
-
expect(el.value).to.equal("Second");
|
|
326
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
327
|
-
});
|
|
328
|
-
});
|
|
87
|
+
`);await o(()=>s.childItems.length==3,"expected menu to manage 3 items"),await m(s);const n=s.querySelector("sp-menu-item:nth-of-type(1)"),a=s.querySelector("sp-menu-item:nth-of-type(2)");t(n.getAttribute("role")).to.equal("menuitemcheckbox"),t(a.getAttribute("role")).to.equal("menuitemcheckbox"),t(n.selected).to.be.true,t(a.selected).to.be.false,t(n.getAttribute("aria-checked")).to.equal("true"),t(a.getAttribute("aria-checked")).to.equal("false"),t(s.value).to.equal("First"),t(s.selectedItems.length).to.equal(1),a.click(),await m(s),await m(n),await m(a),t(e.callCount,"one change").to.equal(1),t(n.selected).to.be.true,t(a.selected).to.be.true,t(n.getAttribute("aria-checked")).to.equal("true"),t(a.getAttribute("aria-checked")).to.equal("true"),t(s.value).to.equal("First,Second"),t(s.selectedItems.length).to.equal(2),n.click(),await m(s),await m(n),await m(a),t(e.callCount,"two changes").to.equal(2),t(n.selected).to.be.false,t(a.selected).to.be.true,t(n.getAttribute("aria-checked")).to.equal("false"),t(a.getAttribute("aria-checked")).to.equal("true"),t(s.value).to.equal("Second"),t(s.selectedItems.length).to.equal(1)})});
|
|
329
88
|
//# sourceMappingURL=menu.test.js.map
|
package/test/menu.test.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu.test.ts"],
|
|
4
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 '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n waitUntil,\n} from '@open-wc/testing';\nimport {\n arrowDownEvent,\n arrowUpEvent,\n tabEvent,\n testForLitDevWarnings,\n tEvent,\n} from '../../../test/testing-helpers.js';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\ndescribe('Menu', () => {\n it('renders empty', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu tabindex=\"0\"><a href=\"#anchor\">Test</a></sp-menu>\n `\n );\n\n const anchor = el.querySelector('a') as HTMLAnchorElement;\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 1').to.be\n .false;\n expect(document.activeElement === anchor, 'child not focused, 1').to.be\n .false;\n\n expect(el.getAttribute('role')).to.equal('menu');\n\n el.focus();\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 2').to.be\n .false;\n expect(document.activeElement === anchor, 'child not focused, 2').to.be\n .false;\n\n anchor.focus();\n expect(document.activeElement === el, 'self not focused, 3').to.be\n .false;\n expect(document.activeElement === anchor, 'anchor').to.be.true;\n });\n it('renders w/ [disabled] menu items', async () => {\n const focusinSpy = spy();\n const el = await fixture<Menu>(\n html`\n <sp-menu tabindex=\"0\" @focusin=${() => focusinSpy()}>\n <sp-menu-item disabled>Disabled item</sp-menu-item>\n </sp-menu>\n `\n );\n\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 1').to.be\n .false;\n\n el.focus();\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 2').to.be\n .false;\n expect(focusinSpy.callCount).to.equal(0);\n });\n it('renders w/ all [disabled] menu items', async () => {\n const focusinSpy = spy();\n const el = await fixture<Menu>(\n html`\n <sp-menu tabindex=\"0\" @focusin=${() => focusinSpy()}>\n <sp-menu-item disabled>Disabled item 1</sp-menu-item>\n <sp-menu-item disabled>Disabled item 2</sp-menu-item>\n </sp-menu>\n `\n );\n const firstItem = el.querySelector('sp-menu-item') as MenuItem;\n\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 1').to.be\n .false;\n\n el.focus();\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 2').to.be\n .false;\n expect(focusinSpy.callCount).to.equal(0);\n firstItem.focus();\n await elementUpdated(el);\n expect(document.activeElement === el, 'self not focused, 2').to.be\n .false;\n expect(focusinSpy.callCount).to.equal(0);\n expect(el.matches(':focus-within')).to.be.false;\n });\n it('renders w/ menu items', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu label=\"Pick an action:\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 6,\n 'expected menu to manage 6 menu items'\n );\n await elementUpdated(el);\n\n const inTabindexElement = el.querySelector(\n '[tabindex]:not([tabindex=\"-1\"])'\n );\n expect(inTabindexElement).to.be.null;\n await expect(el).to.be.accessible();\n });\n\n testForLitDevWarnings(\n async () =>\n await fixture<Menu>(\n html`\n <sp-menu selects=\"single\">\n <sp-menu-item>Not Selected</sp-menu-item>\n <sp-menu-item selected>Selected</sp-menu-item>\n <sp-menu-item>Other</sp-menu-item>\n </sp-menu>\n `\n )\n );\n\n it('renders w/ selected', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu selects=\"single\">\n <sp-menu-item>Not Selected</sp-menu-item>\n <sp-menu-item selected>Selected</sp-menu-item>\n <sp-menu-item>Other</sp-menu-item>\n </sp-menu>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('renders w/ hrefs', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu>\n <sp-menu-item href=\"not-selected.html\">\n Not Selected\n </sp-menu-item>\n <sp-menu-item href=\"selected.html\">Selected</sp-menu-item>\n <sp-menu-item href=\"other.html\">Other</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 3,\n 'expected menu to manage 3 items'\n );\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n expect(el.getAttribute('role')).to.equal('menu');\n });\n\n it('handle focus and keyboard input', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 6,\n 'expected menu to manage 6 items'\n );\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const thirdToLastItem = el.querySelector(\n 'sp-menu-item:nth-last-of-type(3)'\n ) as MenuItem;\n const secondToLastItem = el.querySelector(\n 'sp-menu-item:nth-last-of-type(2)'\n ) as MenuItem;\n\n el.focus();\n await elementUpdated(el);\n // Activate :focus-visible\n await sendKeys({ press: 'ArrowDown' });\n await sendKeys({ press: 'ArrowUp' });\n\n expect(document.activeElement === el).to.be.true;\n expect(firstItem.focused).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n el.dispatchEvent(arrowUpEvent());\n el.dispatchEvent(tEvent());\n\n expect(document.activeElement === el).to.be.true;\n expect(thirdToLastItem.focused).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n\n expect(document.activeElement === el).to.be.true;\n expect(secondToLastItem.focused).to.be.true;\n });\n\n it('handle focus and late descendent additions', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Options</span>\n <sp-menu-item>Deselect</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 1,\n 'expected menu to manage 1 item'\n );\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n\n el.focus();\n\n await elementUpdated(el);\n // Activate :focus-visible\n await sendKeys({ press: 'ArrowDown' });\n await sendKeys({ press: 'ArrowUp' });\n\n expect(document.activeElement === el, 'active element').to.be.true;\n expect(firstItem.focused, 'visually focused').to.be.true;\n\n el.blur();\n\n const group = el.querySelector('sp-menu-group') as HTMLElement;\n const prependedItem = document.createElement('sp-menu-item');\n prependedItem.textContent = 'Prepended Item';\n const appendedItem = document.createElement('sp-menu-item');\n appendedItem.textContent = 'Appended Item';\n group.prepend(prependedItem);\n group.append(appendedItem);\n await elementUpdated(el);\n\n await waitUntil(() => {\n return el.childItems.length == 3;\n }, 'expected menu to manage 3 items');\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(firstItem.focused).to.be.false;\n expect(prependedItem.focused).to.be.false;\n\n el.focus();\n // Activate :focus-visible\n await sendKeys({ press: 'ArrowDown' });\n await sendKeys({ press: 'ArrowUp' });\n\n expect(document.activeElement === el, 'another active element').to.be\n .true;\n expect(prependedItem.focused, 'another visibly focused').to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n\n expect(document.activeElement === el, 'last active element').to.be.true;\n expect(appendedItem.focused, 'last visibly focused').to.be.true;\n });\n it('cleans up when tabbing away', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu tabindex=\"0\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Third Item</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 3,\n 'expected menu to manage 3 items'\n );\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const secondItem = el.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n const thirdItem = el.querySelector(\n 'sp-menu-item:nth-of-type(3)'\n ) as MenuItem;\n\n el.focus();\n // Activate :focus-visible\n await sendKeys({ press: 'ArrowDown' });\n await sendKeys({ press: 'ArrowUp' });\n expect(document.activeElement === el).to.be.true;\n expect(firstItem.focused, 'first').to.be.true;\n el.dispatchEvent(arrowDownEvent());\n el.dispatchEvent(arrowDownEvent());\n expect(thirdItem.focused, 'third').to.be.true;\n // imitate tabbing away\n el.dispatchEvent(tabEvent());\n el.dispatchEvent(\n new CustomEvent('focusout', {\n composed: true,\n bubbles: true,\n })\n );\n await nextFrame();\n // re-bind keyevents\n el.startListeningToKeyboard();\n // focus management should start again from the first item.\n el.dispatchEvent(arrowDownEvent());\n expect(secondItem.focused, 'second').to.be.true;\n });\n it('handles focus across focused MenuItem removals', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu id=\"test\">\n <sp-menu-item class=\"first\">Deselect</sp-menu-item>\n <sp-menu-item>Invert Selection</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-item selected class=\"selected\">\n Save Selection\n </sp-menu-item>\n </sp-menu>\n `\n );\n const firstItem = el.querySelector('.first') as MenuItem;\n const selectedItem = el.querySelector('.selected') as MenuItem;\n\n await elementUpdated(el);\n\n el.focus();\n\n expect(document.activeElement).to.equal(el);\n expect(selectedItem.focused).to.be.true;\n\n selectedItem.remove();\n await elementUpdated(el);\n\n expect(document.activeElement).to.equal(el);\n expect(firstItem.focused).to.be.true;\n });\n it('handles single selection', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu selects=\"single\">\n <sp-menu-item selected>First</sp-menu-item>\n <sp-menu-item>Second</sp-menu-item>\n <sp-menu-item>Third</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 3,\n 'expected menu to manage 3 items'\n );\n await waitUntil(\n () => el.selectedItems.length == 1,\n 'expected menu to have 1 selected item'\n );\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n\n const secondItem = el.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n\n expect(firstItem.getAttribute('role')).to.equal('menuitemradio');\n expect(secondItem.getAttribute('role')).to.equal('menuitemradio');\n\n expect(firstItem.selected).to.be.true;\n expect(secondItem.selected).to.be.false;\n expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n expect(el.value).to.equal('First');\n\n secondItem.click();\n\n await elementUpdated(el);\n await elementUpdated(firstItem);\n await elementUpdated(secondItem);\n\n expect(firstItem.selected).to.be.false;\n expect(secondItem.selected).to.be.true;\n expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n expect(el.value).to.equal('Second');\n });\n it('handles multiple selection', async () => {\n const changeSpy = spy();\n const el = await fixture<Menu>(\n html`\n <sp-menu selects=\"multiple\" @change=${() => changeSpy()}>\n <sp-menu-item selected>First</sp-menu-item>\n <sp-menu-item>Second</sp-menu-item>\n <sp-menu-item>Third</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 3,\n 'expected menu to manage 3 items'\n );\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n\n const secondItem = el.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n\n expect(firstItem.getAttribute('role')).to.equal('menuitemcheckbox');\n expect(secondItem.getAttribute('role')).to.equal('menuitemcheckbox');\n\n expect(firstItem.selected).to.be.true;\n expect(secondItem.selected).to.be.false;\n expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n expect(el.value).to.equal('First');\n expect(el.selectedItems.length).to.equal(1);\n\n secondItem.click();\n\n await elementUpdated(el);\n await elementUpdated(firstItem);\n await elementUpdated(secondItem);\n\n expect(changeSpy.callCount, 'one change').to.equal(1);\n expect(firstItem.selected).to.be.true;\n expect(secondItem.selected).to.be.true;\n expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n expect(el.value).to.equal('First,Second');\n expect(el.selectedItems.length).to.equal(2);\n\n firstItem.click();\n\n await elementUpdated(el);\n await elementUpdated(firstItem);\n await elementUpdated(secondItem);\n\n expect(changeSpy.callCount, 'two changes').to.equal(2);\n expect(firstItem.selected).to.be.false;\n expect(secondItem.selected).to.be.true;\n expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n expect(el.value).to.equal('Second');\n expect(el.selectedItems.length).to.equal(1);\n });\n});\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/submenu.test-vrt.js
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
-
regressVisuals("SubmenuStories", stories);
|
|
1
|
+
import*as r from"../stories/submenu.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("SubmenuStories",r);
|
|
4
2
|
//# sourceMappingURL=submenu.test-vrt.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["submenu.test-vrt.ts"],
|
|
4
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*/\n\nimport * as stories from '../stories/submenu.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('SubmenuStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,gDACA,8DAEA,EAAe,iBAAkB,CAAO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|