@spectrum-web-components/action-group 0.10.0 → 0.10.1
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/custom-elements.json +3 -3
- package/package.json +22 -9
- package/sp-action-group.dev.js +3 -0
- package/sp-action-group.dev.js.map +7 -0
- package/sp-action-group.js +3 -14
- package/sp-action-group.js.map +7 -1
- package/src/ActionGroup.dev.js +309 -0
- package/src/ActionGroup.dev.js.map +7 -0
- package/src/ActionGroup.js +291 -308
- package/src/ActionGroup.js.map +7 -1
- package/src/action-group.css.dev.js +149 -0
- package/src/action-group.css.dev.js.map +7 -0
- package/src/action-group.css.js +6 -17
- package/src/action-group.css.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/spectrum-action-group.css.dev.js +143 -0
- package/src/spectrum-action-group.css.dev.js.map +7 -0
- package/src/spectrum-action-group.css.js +3 -14
- package/src/spectrum-action-group.css.js.map +7 -1
- package/stories/action-group-tooltip.stories.js +116 -129
- package/stories/action-group-tooltip.stories.js.map +7 -1
- package/stories/action-group.stories.js +124 -135
- package/stories/action-group.stories.js.map +7 -1
- package/test/action-group-tooltip.test-vrt.js +4 -15
- package/test/action-group-tooltip.test-vrt.js.map +7 -1
- package/test/action-group.test-vrt.js +4 -15
- package/test/action-group.test-vrt.js.map +7 -1
- package/test/action-group.test.js +462 -465
- package/test/action-group.test.js.map +7 -1
- package/test/benchmark/basic-test.js +6 -17
- package/test/benchmark/basic-test.js.map +7 -1
|
@@ -1,46 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import {
|
|
2
|
+
elementUpdated,
|
|
3
|
+
expect,
|
|
4
|
+
fixture,
|
|
5
|
+
html,
|
|
6
|
+
waitUntil
|
|
7
|
+
} from "@open-wc/testing";
|
|
8
|
+
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
9
|
+
import { LitElement } from "@spectrum-web-components/base";
|
|
10
|
+
import "@spectrum-web-components/overlay/overlay-trigger.js";
|
|
11
|
+
import "@spectrum-web-components/tooltip/sp-tooltip.js";
|
|
12
|
+
import {
|
|
13
|
+
arrowDownEvent,
|
|
14
|
+
arrowLeftEvent,
|
|
15
|
+
arrowRightEvent,
|
|
16
|
+
arrowUpEvent,
|
|
17
|
+
endEvent,
|
|
18
|
+
homeEvent,
|
|
19
|
+
testForLitDevWarnings
|
|
20
|
+
} from "../../../test/testing-helpers";
|
|
21
|
+
import { sendKeys } from "@web/test-runner-commands";
|
|
22
|
+
import "@spectrum-web-components/action-group/sp-action-group.js";
|
|
20
23
|
class QuietActionGroup extends LitElement {
|
|
21
|
-
|
|
22
|
-
|
|
24
|
+
render() {
|
|
25
|
+
return html`
|
|
23
26
|
<sp-action-group quiet>
|
|
24
27
|
<slot name="first"></slot>
|
|
25
28
|
<slot name="second"></slot>
|
|
26
29
|
</sp-action-group>
|
|
27
30
|
`;
|
|
28
|
-
|
|
31
|
+
}
|
|
29
32
|
}
|
|
30
|
-
customElements.define(
|
|
33
|
+
customElements.define("quiet-action-group", QuietActionGroup);
|
|
31
34
|
class EmphasizedActionGroup extends LitElement {
|
|
32
|
-
|
|
33
|
-
|
|
35
|
+
render() {
|
|
36
|
+
return html`
|
|
34
37
|
<sp-action-group emphasized>
|
|
35
38
|
<slot name="first"></slot>
|
|
36
39
|
<slot name="second"></slot>
|
|
37
40
|
</sp-action-group>
|
|
38
41
|
`;
|
|
39
|
-
|
|
42
|
+
}
|
|
40
43
|
}
|
|
41
|
-
customElements.define(
|
|
44
|
+
customElements.define("emphasized-action-group", EmphasizedActionGroup);
|
|
42
45
|
async function singleSelectedActionGroup(selected) {
|
|
43
|
-
|
|
46
|
+
const el = await fixture(html`
|
|
44
47
|
<sp-action-group
|
|
45
48
|
label="Selects User-Chosen Buttons"
|
|
46
49
|
selects="single"
|
|
@@ -54,10 +57,10 @@ async function singleSelectedActionGroup(selected) {
|
|
|
54
57
|
</sp-action-button>
|
|
55
58
|
</sp-action-group>
|
|
56
59
|
`);
|
|
57
|
-
|
|
60
|
+
return el;
|
|
58
61
|
}
|
|
59
62
|
async function multipleSelectedActionGroup(selected) {
|
|
60
|
-
|
|
63
|
+
const el = await fixture(html`
|
|
61
64
|
<sp-action-group
|
|
62
65
|
label="Selects User-Chosen Buttons"
|
|
63
66
|
selects="multiple"
|
|
@@ -71,47 +74,54 @@ async function multipleSelectedActionGroup(selected) {
|
|
|
71
74
|
</sp-action-button>
|
|
72
75
|
</sp-action-group>
|
|
73
76
|
`);
|
|
74
|
-
|
|
77
|
+
return el;
|
|
75
78
|
}
|
|
76
|
-
describe(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
+
describe("ActionGroup", () => {
|
|
80
|
+
it("loads empty action-group accessibly", async () => {
|
|
81
|
+
const el = await fixture(html`
|
|
79
82
|
<sp-action-group></sp-action-group>
|
|
80
83
|
`);
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
await elementUpdated(el);
|
|
85
|
+
await expect(el).to.be.accessible();
|
|
86
|
+
});
|
|
87
|
+
testForLitDevWarnings(async () => await fixture(html`
|
|
88
|
+
<sp-action-group aria-label="Default Group">
|
|
89
|
+
<sp-action-button>First</sp-action-button>
|
|
90
|
+
<sp-action-button>Second</sp-action-button>
|
|
91
|
+
<sp-action-button>Third</sp-action-button>
|
|
92
|
+
</sp-action-group>
|
|
93
|
+
`));
|
|
94
|
+
it("loads default action-group accessibly", async () => {
|
|
95
|
+
const el = await fixture(html`
|
|
86
96
|
<sp-action-group aria-label="Default Group">
|
|
87
97
|
<sp-action-button>First</sp-action-button>
|
|
88
98
|
<sp-action-button>Second</sp-action-button>
|
|
89
99
|
<sp-action-button>Third</sp-action-button>
|
|
90
100
|
</sp-action-group>
|
|
91
101
|
`);
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
102
|
+
await elementUpdated(el);
|
|
103
|
+
await expect(el).to.be.accessible();
|
|
104
|
+
expect(el.getAttribute("aria-label")).to.equal("Default Group");
|
|
105
|
+
expect(el.hasAttribute("role")).to.be.false;
|
|
106
|
+
expect(el.children[0].getAttribute("role")).to.equal("button");
|
|
107
|
+
});
|
|
108
|
+
it("applies `quiet` attribute to its children", async () => {
|
|
109
|
+
const el = await fixture(html`
|
|
100
110
|
<sp-action-group quiet>
|
|
101
111
|
<sp-action-button id="first">First</sp-action-button>
|
|
102
112
|
<sp-action-button id="second">Second</sp-action-button>
|
|
103
113
|
</sp-action-group>
|
|
104
114
|
`);
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
+
const firstButton = el.querySelector("#first");
|
|
116
|
+
const secondButton = el.querySelector("#second");
|
|
117
|
+
await elementUpdated(el);
|
|
118
|
+
expect(firstButton.hasAttribute("quiet")).to.be.true;
|
|
119
|
+
expect(firstButton.quiet).to.be.true;
|
|
120
|
+
expect(secondButton.hasAttribute("quiet")).to.be.true;
|
|
121
|
+
expect(secondButton.quiet).to.be.true;
|
|
122
|
+
});
|
|
123
|
+
it("applies `quiet` attribute to its slotted children", async () => {
|
|
124
|
+
const el = await fixture(html`
|
|
115
125
|
<quiet-action-group>
|
|
116
126
|
<sp-action-button slot="first" id="first">
|
|
117
127
|
First
|
|
@@ -121,16 +131,16 @@ describe('ActionGroup', () => {
|
|
|
121
131
|
</sp-action-button>
|
|
122
132
|
</quiet-action-group>
|
|
123
133
|
`);
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
+
const firstButton = el.querySelector("#first");
|
|
135
|
+
const secondButton = el.querySelector("#second");
|
|
136
|
+
await elementUpdated(el);
|
|
137
|
+
expect(firstButton.hasAttribute("quiet")).to.be.true;
|
|
138
|
+
expect(firstButton.quiet).to.be.true;
|
|
139
|
+
expect(secondButton.hasAttribute("quiet")).to.be.true;
|
|
140
|
+
expect(secondButton.quiet).to.be.true;
|
|
141
|
+
});
|
|
142
|
+
it("applies `emphasized` attribute to its slotted children", async () => {
|
|
143
|
+
const el = await fixture(html`
|
|
134
144
|
<emphasized-action-group>
|
|
135
145
|
<sp-action-button slot="first" id="first">
|
|
136
146
|
First
|
|
@@ -140,16 +150,16 @@ describe('ActionGroup', () => {
|
|
|
140
150
|
</sp-action-button>
|
|
141
151
|
</emphasized-action-group>
|
|
142
152
|
`);
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
+
const firstButton = el.querySelector("#first");
|
|
154
|
+
const secondButton = el.querySelector("#second");
|
|
155
|
+
await elementUpdated(el);
|
|
156
|
+
expect(firstButton.hasAttribute("emphasized")).to.be.true;
|
|
157
|
+
expect(firstButton.emphasized).to.be.true;
|
|
158
|
+
expect(secondButton.hasAttribute("emphasized")).to.be.true;
|
|
159
|
+
expect(secondButton.emphasized).to.be.true;
|
|
160
|
+
});
|
|
161
|
+
it("applies `quiet` attribute to slotted children with overlays", async () => {
|
|
162
|
+
const el = await fixture(html`
|
|
153
163
|
<quiet-action-group>
|
|
154
164
|
<overlay-trigger slot="first">
|
|
155
165
|
<sp-action-button slot="trigger" id="first">
|
|
@@ -163,16 +173,16 @@ describe('ActionGroup', () => {
|
|
|
163
173
|
</overlay-trigger>
|
|
164
174
|
</quiet-action-group>
|
|
165
175
|
`);
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
+
const firstButton = el.querySelector("#first");
|
|
177
|
+
const secondButton = el.querySelector("#second");
|
|
178
|
+
await elementUpdated(el);
|
|
179
|
+
expect(firstButton.hasAttribute("quiet")).to.be.true;
|
|
180
|
+
expect(firstButton.quiet).to.be.true;
|
|
181
|
+
expect(secondButton.hasAttribute("quiet")).to.be.true;
|
|
182
|
+
expect(secondButton.quiet).to.be.true;
|
|
183
|
+
});
|
|
184
|
+
it("applies `emphasized` attribute to slotted children with overlays", async () => {
|
|
185
|
+
const el = await fixture(html`
|
|
176
186
|
<emphasized-action-group>
|
|
177
187
|
<overlay-trigger slot="first">
|
|
178
188
|
<sp-action-button slot="trigger" id="first">
|
|
@@ -186,41 +196,41 @@ describe('ActionGroup', () => {
|
|
|
186
196
|
</overlay-trigger>
|
|
187
197
|
</emphasized-action-group>
|
|
188
198
|
`);
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
+
const firstButton = el.querySelector("#first");
|
|
200
|
+
const secondButton = el.querySelector("#second");
|
|
201
|
+
await elementUpdated(el);
|
|
202
|
+
expect(firstButton.hasAttribute("emphasized")).to.be.true;
|
|
203
|
+
expect(firstButton.emphasized).to.be.true;
|
|
204
|
+
expect(secondButton.hasAttribute("emphasized")).to.be.true;
|
|
205
|
+
expect(secondButton.emphasized).to.be.true;
|
|
206
|
+
});
|
|
207
|
+
it('loads [selects="single"] action-group accessibly', async () => {
|
|
208
|
+
const el = await fixture(html`
|
|
199
209
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
200
210
|
<sp-action-button>First</sp-action-button>
|
|
201
211
|
<sp-action-button>Second</sp-action-button>
|
|
202
212
|
<sp-action-button>Third</sp-action-button>
|
|
203
213
|
</sp-action-group>
|
|
204
214
|
`);
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
215
|
+
await elementUpdated(el);
|
|
216
|
+
await expect(el).to.be.accessible();
|
|
217
|
+
expect(el.getAttribute("aria-label")).to.equal("Selects Single Group");
|
|
218
|
+
expect(el.getAttribute("role")).to.equal("radiogroup");
|
|
219
|
+
expect(el.children[0].getAttribute("role")).to.equal("radio");
|
|
220
|
+
});
|
|
221
|
+
it('loads [selects="single"] action-group w/ selection accessibly', async () => {
|
|
222
|
+
const el = await fixture(html`
|
|
213
223
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
214
224
|
<sp-action-button>First</sp-action-button>
|
|
215
225
|
<sp-action-button>Second</sp-action-button>
|
|
216
226
|
<sp-action-button selected>Third</sp-action-button>
|
|
217
227
|
</sp-action-group>
|
|
218
228
|
`);
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
229
|
+
await elementUpdated(el);
|
|
230
|
+
await expect(el).to.be.accessible();
|
|
231
|
+
});
|
|
232
|
+
it('loads [selects="multiple"] action-group accessibly', async () => {
|
|
233
|
+
const el = await fixture(html`
|
|
224
234
|
<sp-action-group
|
|
225
235
|
label="Selects Multiple Group"
|
|
226
236
|
selects="multiple"
|
|
@@ -230,14 +240,14 @@ describe('ActionGroup', () => {
|
|
|
230
240
|
<sp-action-button>Third</sp-action-button>
|
|
231
241
|
</sp-action-group>
|
|
232
242
|
`);
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
243
|
+
await elementUpdated(el);
|
|
244
|
+
await expect(el).to.be.accessible();
|
|
245
|
+
expect(el.getAttribute("aria-label")).to.equal("Selects Multiple Group");
|
|
246
|
+
expect(el.getAttribute("role")).to.equal("group");
|
|
247
|
+
expect(el.children[0].getAttribute("role")).to.equal("checkbox");
|
|
248
|
+
});
|
|
249
|
+
it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
|
|
250
|
+
const el = await fixture(html`
|
|
241
251
|
<sp-action-group
|
|
242
252
|
label="Selects Multiple Group"
|
|
243
253
|
selects="multiple"
|
|
@@ -247,35 +257,35 @@ describe('ActionGroup', () => {
|
|
|
247
257
|
<sp-action-button selected>Third</sp-action-button>
|
|
248
258
|
</sp-action-group>
|
|
249
259
|
`);
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
260
|
+
await elementUpdated(el);
|
|
261
|
+
await expect(el).to.be.accessible();
|
|
262
|
+
});
|
|
263
|
+
it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
|
|
264
|
+
const el = await fixture(html`
|
|
255
265
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
256
266
|
<sp-action-button disabled>First</sp-action-button>
|
|
257
267
|
<sp-action-button class="second">Second</sp-action-button>
|
|
258
268
|
<sp-action-button>Third</sp-action-button>
|
|
259
269
|
</sp-action-group>
|
|
260
270
|
`);
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
271
|
+
const secondButton = el.querySelector(".second");
|
|
272
|
+
await elementUpdated(el);
|
|
273
|
+
expect(secondButton.hasAttribute("tabindex"));
|
|
274
|
+
expect(secondButton.getAttribute("tabindex")).to.equal("0");
|
|
275
|
+
});
|
|
276
|
+
it('surfaces [selects="single"] selection', async () => {
|
|
277
|
+
const el = await fixture(html`
|
|
268
278
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
269
279
|
<sp-action-button>First</sp-action-button>
|
|
270
280
|
<sp-action-button>Second</sp-action-button>
|
|
271
281
|
<sp-action-button selected>Third</sp-action-button>
|
|
272
282
|
</sp-action-group>
|
|
273
283
|
`);
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
284
|
+
await elementUpdated(el);
|
|
285
|
+
expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
|
|
286
|
+
});
|
|
287
|
+
it('surfaces [selects="multiple"] selection', async () => {
|
|
288
|
+
const el = await fixture(html`
|
|
279
289
|
<sp-action-group
|
|
280
290
|
label="Selects Multiple Group"
|
|
281
291
|
selects="multiple"
|
|
@@ -285,29 +295,29 @@ describe('ActionGroup', () => {
|
|
|
285
295
|
<sp-action-button selected>Third</sp-action-button>
|
|
286
296
|
</sp-action-group>
|
|
287
297
|
`);
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
298
|
+
await elementUpdated(el);
|
|
299
|
+
expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
|
|
300
|
+
"Second",
|
|
301
|
+
"Third"
|
|
302
|
+
]);
|
|
303
|
+
});
|
|
304
|
+
it("does not select without [selects]", async () => {
|
|
305
|
+
const el = await fixture(html`
|
|
296
306
|
<sp-action-group label="No Selects Group">
|
|
297
307
|
<sp-action-button>First</sp-action-button>
|
|
298
308
|
<sp-action-button selected>Second</sp-action-button>
|
|
299
309
|
<sp-action-button class="third">Third</sp-action-button>
|
|
300
310
|
</sp-action-group>
|
|
301
311
|
`);
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
312
|
+
const thirdElement = el.querySelector(".third");
|
|
313
|
+
await elementUpdated(el);
|
|
314
|
+
expect(el.selected.length).to.equal(1);
|
|
315
|
+
thirdElement.click();
|
|
316
|
+
await elementUpdated(el);
|
|
317
|
+
expect(el.selected.length).to.equal(1);
|
|
318
|
+
});
|
|
319
|
+
it('selects via `click` while [selects="single"]', async () => {
|
|
320
|
+
const el = await fixture(html`
|
|
311
321
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
312
322
|
<sp-action-button value="first">First</sp-action-button>
|
|
313
323
|
<sp-action-button value="second" selected>
|
|
@@ -318,17 +328,17 @@ describe('ActionGroup', () => {
|
|
|
318
328
|
</sp-action-button>
|
|
319
329
|
</sp-action-group>
|
|
320
330
|
`);
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
331
|
+
const thirdElement = el.querySelector(".third");
|
|
332
|
+
await elementUpdated(el);
|
|
333
|
+
expect(el.selected.length).to.equal(1);
|
|
334
|
+
expect(el.selected.includes("second"));
|
|
335
|
+
thirdElement.click();
|
|
336
|
+
await elementUpdated(el);
|
|
337
|
+
expect(thirdElement.selected, "third child selected").to.be.true;
|
|
338
|
+
await waitUntil(() => el.selected.length === 1 && el.selected.includes("third"), "Updates value of `selected`");
|
|
339
|
+
});
|
|
340
|
+
it('selects via `click` while [selects="multiple"] selection', async () => {
|
|
341
|
+
const el = await fixture(html`
|
|
332
342
|
<sp-action-group
|
|
333
343
|
label="Selects Multiple Group"
|
|
334
344
|
selects="multiple"
|
|
@@ -340,92 +350,90 @@ describe('ActionGroup', () => {
|
|
|
340
350
|
<sp-action-button class="third">Third</sp-action-button>
|
|
341
351
|
</sp-action-group>
|
|
342
352
|
`);
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
it('does not respond to clicks on itself', async () => {
|
|
360
|
-
const el = await fixture(html `
|
|
353
|
+
const firstElement = el.querySelector(".first");
|
|
354
|
+
const secondElement = el.querySelector(".second");
|
|
355
|
+
const thirdElement = el.querySelector(".third");
|
|
356
|
+
await elementUpdated(el);
|
|
357
|
+
expect(el.selected.length).to.equal(1);
|
|
358
|
+
expect(el.selected.includes("First"));
|
|
359
|
+
firstElement.click();
|
|
360
|
+
secondElement.click();
|
|
361
|
+
thirdElement.click();
|
|
362
|
+
await elementUpdated(el);
|
|
363
|
+
expect(secondElement.selected, "second child selected").to.be.true;
|
|
364
|
+
expect(thirdElement.selected, "third child selected").to.be.true;
|
|
365
|
+
await waitUntil(() => el.selected.length === 2 && el.selected.includes("Second") && el.selected.includes("Third"), "Updates value of `selected`");
|
|
366
|
+
});
|
|
367
|
+
it("does not respond to clicks on itself", async () => {
|
|
368
|
+
const el = await fixture(html`
|
|
361
369
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
362
370
|
<sp-action-button>First</sp-action-button>
|
|
363
371
|
<sp-action-button>Second</sp-action-button>
|
|
364
372
|
<sp-action-button class="third">Third</sp-action-button>
|
|
365
373
|
</sp-action-group>
|
|
366
374
|
`);
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
+
await elementUpdated(el);
|
|
376
|
+
expect(el.selected.length).to.equal(0);
|
|
377
|
+
el.click();
|
|
378
|
+
await elementUpdated(el);
|
|
379
|
+
expect(el.selected.length).to.equal(0);
|
|
380
|
+
});
|
|
381
|
+
it("selection can be prevented", async () => {
|
|
382
|
+
const el = await fixture(html`
|
|
375
383
|
<sp-action-group
|
|
376
384
|
label="Selects Single Group"
|
|
377
385
|
selects="single"
|
|
378
386
|
@change=${(event) => {
|
|
379
|
-
|
|
380
|
-
|
|
387
|
+
event.preventDefault();
|
|
388
|
+
}}
|
|
381
389
|
>
|
|
382
390
|
<sp-action-button>First</sp-action-button>
|
|
383
391
|
<sp-action-button>Second</sp-action-button>
|
|
384
392
|
<sp-action-button class="third">Third</sp-action-button>
|
|
385
393
|
</sp-action-group>
|
|
386
394
|
`);
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
395
|
+
const thirdElement = el.querySelector(".third");
|
|
396
|
+
await elementUpdated(el);
|
|
397
|
+
expect(el.selected.length).to.equal(0);
|
|
398
|
+
thirdElement.click();
|
|
399
|
+
await elementUpdated(el);
|
|
400
|
+
expect(thirdElement.selected, "third child not selected").to.be.false;
|
|
401
|
+
expect(el.selected.length).to.equal(0);
|
|
402
|
+
});
|
|
403
|
+
it('selects user-passed value while [selects="single"]', async () => {
|
|
404
|
+
const el = await singleSelectedActionGroup(["first"]);
|
|
405
|
+
await elementUpdated(el);
|
|
406
|
+
expect(el.selected.length).to.equal(1);
|
|
407
|
+
const firstButton = el.querySelector(".first");
|
|
408
|
+
const secondButton = el.querySelector(".second");
|
|
409
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
410
|
+
expect(secondButton.selected, "second button not selected").to.be.false;
|
|
411
|
+
secondButton.click();
|
|
412
|
+
await elementUpdated(el);
|
|
413
|
+
expect(el.selected.length).to.equal(1);
|
|
414
|
+
expect(firstButton.selected, "first button not selected").to.be.false;
|
|
415
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
416
|
+
});
|
|
417
|
+
it('selects can be updated while [selects="single"]', async () => {
|
|
418
|
+
const el = await singleSelectedActionGroup(["first"]);
|
|
419
|
+
await elementUpdated(el);
|
|
420
|
+
expect(el.selected.length).to.equal(1);
|
|
421
|
+
const firstButton = el.querySelector(".first");
|
|
422
|
+
const secondButton = el.querySelector(".second");
|
|
423
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
424
|
+
expect(secondButton.selected, "second button not selected").to.be.false;
|
|
425
|
+
el.selected = ["second"];
|
|
426
|
+
await elementUpdated(el);
|
|
427
|
+
expect(el.selected.length).to.equal(1);
|
|
428
|
+
expect(firstButton.selected, "first button not selected").to.be.false;
|
|
429
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
430
|
+
});
|
|
431
|
+
it('selects user-passed value while [selects="multiple"]', async () => {
|
|
432
|
+
const el = await fixture(html`
|
|
425
433
|
<sp-action-group
|
|
426
434
|
label="Selects Multiple Group"
|
|
427
435
|
selects="multiple"
|
|
428
|
-
.selected=${[
|
|
436
|
+
.selected=${["first", "second"]}
|
|
429
437
|
>
|
|
430
438
|
<sp-action-button class="first" value="first">
|
|
431
439
|
First
|
|
@@ -438,33 +446,33 @@ describe('ActionGroup', () => {
|
|
|
438
446
|
</sp-action-button>
|
|
439
447
|
</sp-action-group>
|
|
440
448
|
`);
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
449
|
+
await elementUpdated(el);
|
|
450
|
+
const firstButton = el.querySelector(".first");
|
|
451
|
+
const secondButton = el.querySelector(".second");
|
|
452
|
+
const thirdButton = el.querySelector(".third");
|
|
453
|
+
expect(el.selected.length).to.equal(2);
|
|
454
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
455
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
456
|
+
expect(thirdButton.selected, "third button not selected").to.be.false;
|
|
457
|
+
thirdButton.click();
|
|
458
|
+
await elementUpdated(el);
|
|
459
|
+
expect(el.selected.length).to.equal(3);
|
|
460
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
461
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
462
|
+
expect(thirdButton.selected, "third button selected").to.be.true;
|
|
463
|
+
firstButton.click();
|
|
464
|
+
await elementUpdated(el);
|
|
465
|
+
expect(el.selected.length).to.equal(2);
|
|
466
|
+
expect(firstButton.selected, "first button not selected").to.be.false;
|
|
467
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
468
|
+
expect(thirdButton.selected, "third button selected").to.be.true;
|
|
469
|
+
});
|
|
470
|
+
it('selects can be updated while [selects="multiple"]', async () => {
|
|
471
|
+
const el = await fixture(html`
|
|
464
472
|
<sp-action-group
|
|
465
473
|
label="Selects Multiple Group"
|
|
466
474
|
selects="multiple"
|
|
467
|
-
.selected=${[
|
|
475
|
+
.selected=${["first", "second"]}
|
|
468
476
|
>
|
|
469
477
|
<sp-action-button class="first" value="first">
|
|
470
478
|
First
|
|
@@ -477,55 +485,55 @@ describe('ActionGroup', () => {
|
|
|
477
485
|
</sp-action-button>
|
|
478
486
|
</sp-action-group>
|
|
479
487
|
`);
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
488
|
+
await elementUpdated(el);
|
|
489
|
+
const firstButton = el.querySelector(".first");
|
|
490
|
+
const secondButton = el.querySelector(".second");
|
|
491
|
+
const thirdButton = el.querySelector(".third");
|
|
492
|
+
expect(el.selected.length).to.equal(2);
|
|
493
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
494
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
495
|
+
expect(thirdButton.selected, "third button not selected").to.be.false;
|
|
496
|
+
el.selected = ["first", "second", "third"];
|
|
497
|
+
await elementUpdated(el);
|
|
498
|
+
expect(el.selected.length).to.equal(3);
|
|
499
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
500
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
501
|
+
expect(thirdButton.selected, "third button selected").to.be.true;
|
|
502
|
+
el.selected = ["second", "third"];
|
|
503
|
+
await elementUpdated(el);
|
|
504
|
+
expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);
|
|
505
|
+
expect(firstButton.selected, "first button not selected").to.be.false;
|
|
506
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
507
|
+
expect(thirdButton.selected, "third button selected").to.be.true;
|
|
508
|
+
});
|
|
509
|
+
it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => {
|
|
510
|
+
const el = await singleSelectedActionGroup(["first", "second"]);
|
|
511
|
+
await elementUpdated(el);
|
|
512
|
+
expect(el.selected.length).to.equal(2);
|
|
513
|
+
const firstButton = el.querySelector(".first");
|
|
514
|
+
const secondButton = el.querySelector(".second");
|
|
515
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
516
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
517
|
+
secondButton.click();
|
|
518
|
+
await elementUpdated(el);
|
|
519
|
+
expect(el.selected.length).to.equal(1);
|
|
520
|
+
expect(firstButton.selected, "first button selected").to.be.false;
|
|
521
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
522
|
+
});
|
|
523
|
+
it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => {
|
|
524
|
+
const el = await multipleSelectedActionGroup(["second", "fourth"]);
|
|
525
|
+
await elementUpdated(el);
|
|
526
|
+
expect(el.selected.length).to.equal(1);
|
|
527
|
+
const secondButton = el.querySelector(".second");
|
|
528
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
529
|
+
const firstButton = el.querySelector(".first");
|
|
530
|
+
expect(firstButton.selected, "first button selected").to.be.false;
|
|
531
|
+
});
|
|
532
|
+
it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => {
|
|
533
|
+
const el = await fixture(html`
|
|
526
534
|
<sp-action-group
|
|
527
535
|
label="Selects User-Chosen Buttons"
|
|
528
|
-
.selected=${[
|
|
536
|
+
.selected=${["first"]}
|
|
529
537
|
>
|
|
530
538
|
<sp-action-button value="first" class="first">
|
|
531
539
|
First
|
|
@@ -535,23 +543,23 @@ describe('ActionGroup', () => {
|
|
|
535
543
|
</sp-action-button>
|
|
536
544
|
</sp-action-group>
|
|
537
545
|
`);
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
546
|
+
await elementUpdated(el);
|
|
547
|
+
expect(el.selected.length).to.equal(1);
|
|
548
|
+
const firstButton = el.querySelector(".first");
|
|
549
|
+
const secondButton = el.querySelector(".second");
|
|
550
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
551
|
+
expect(secondButton.selected, "second button selected").to.be.false;
|
|
552
|
+
secondButton.click();
|
|
553
|
+
await elementUpdated(el);
|
|
554
|
+
expect(el.selected.length).to.equal(1);
|
|
555
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
556
|
+
expect(secondButton.selected, "second button selected").to.be.false;
|
|
557
|
+
});
|
|
558
|
+
it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => {
|
|
559
|
+
const el = await fixture(html`
|
|
552
560
|
<sp-action-group
|
|
553
561
|
label="Selects User-Chosen Buttons"
|
|
554
|
-
.selected=${[
|
|
562
|
+
.selected=${["first", "second"]}
|
|
555
563
|
>
|
|
556
564
|
<sp-action-button class="first" value="first">
|
|
557
565
|
First
|
|
@@ -561,27 +569,27 @@ describe('ActionGroup', () => {
|
|
|
561
569
|
</sp-action-button>
|
|
562
570
|
</sp-action-group>
|
|
563
571
|
`);
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
572
|
+
await elementUpdated(el);
|
|
573
|
+
expect(el.selected.length).to.equal(2);
|
|
574
|
+
const firstButton = el.querySelector(".first");
|
|
575
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
576
|
+
const secondButton = el.querySelector(".second");
|
|
577
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
578
|
+
firstButton.click();
|
|
579
|
+
await elementUpdated(el);
|
|
580
|
+
expect(el.selected.length).to.equal(2);
|
|
581
|
+
expect(firstButton.selected, "first button selected").to.be.true;
|
|
582
|
+
expect(secondButton.selected, "second button selected").to.be.true;
|
|
583
|
+
});
|
|
584
|
+
it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
|
|
585
|
+
const el = await fixture(html`
|
|
578
586
|
<sp-action-group
|
|
579
587
|
label="Selects Multiple Group"
|
|
580
588
|
selects="multiple"
|
|
581
|
-
.selected=${[
|
|
589
|
+
.selected=${["first", "second"]}
|
|
582
590
|
@change=${(event) => {
|
|
583
|
-
|
|
584
|
-
|
|
591
|
+
event.preventDefault();
|
|
592
|
+
}}
|
|
585
593
|
>
|
|
586
594
|
<sp-action-button class="first" value="first">
|
|
587
595
|
First
|
|
@@ -594,34 +602,30 @@ describe('ActionGroup', () => {
|
|
|
594
602
|
</sp-action-button>
|
|
595
603
|
</sp-action-group>
|
|
596
604
|
`);
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
.true;
|
|
615
|
-
});
|
|
616
|
-
it('will not change .selected state if event is prevented while [selects="single"]', async () => {
|
|
617
|
-
const el = await fixture(html `
|
|
605
|
+
const firstElement = el.querySelector(".first");
|
|
606
|
+
const secondElement = el.querySelector(".second");
|
|
607
|
+
const thirdElement = el.querySelector(".third");
|
|
608
|
+
await elementUpdated(el);
|
|
609
|
+
expect(el.selected.length).to.equal(2);
|
|
610
|
+
expect(firstElement.selected, "first child selected").to.be.true;
|
|
611
|
+
expect(secondElement.selected, "second child selected").to.be.true;
|
|
612
|
+
thirdElement.click();
|
|
613
|
+
await elementUpdated(el);
|
|
614
|
+
expect(thirdElement.selected, "third child not selected").to.be.false;
|
|
615
|
+
expect(el.selected.length).to.equal(2);
|
|
616
|
+
secondElement.click();
|
|
617
|
+
await elementUpdated(el);
|
|
618
|
+
expect(secondElement.selected, "second element still selected").to.be.true;
|
|
619
|
+
});
|
|
620
|
+
it('will not change .selected state if event is prevented while [selects="single"]', async () => {
|
|
621
|
+
const el = await fixture(html`
|
|
618
622
|
<sp-action-group
|
|
619
623
|
label="Selects Single Group"
|
|
620
624
|
selects="single"
|
|
621
|
-
.selected=${[
|
|
625
|
+
.selected=${["first"]}
|
|
622
626
|
@change=${(event) => {
|
|
623
|
-
|
|
624
|
-
|
|
627
|
+
event.preventDefault();
|
|
628
|
+
}}
|
|
625
629
|
>
|
|
626
630
|
<sp-action-button class="first" value="first">
|
|
627
631
|
First
|
|
@@ -631,31 +635,27 @@ describe('ActionGroup', () => {
|
|
|
631
635
|
</sp-action-button>
|
|
632
636
|
</sp-action-group>
|
|
633
637
|
`);
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
.true;
|
|
650
|
-
});
|
|
651
|
-
it('will not change .selected state if event is prevented while selects is undefined', async () => {
|
|
652
|
-
const el = await fixture(html `
|
|
638
|
+
const firstElement = el.querySelector(".first");
|
|
639
|
+
const secondElement = el.querySelector(".second");
|
|
640
|
+
await elementUpdated(el);
|
|
641
|
+
expect(el.selected.length).to.equal(1);
|
|
642
|
+
expect(firstElement.selected, "first child selected").to.be.true;
|
|
643
|
+
secondElement.click();
|
|
644
|
+
await elementUpdated(el);
|
|
645
|
+
expect(secondElement.selected, "second child not selected").to.be.false;
|
|
646
|
+
expect(el.selected.length).to.equal(1);
|
|
647
|
+
firstElement.click();
|
|
648
|
+
await elementUpdated(el);
|
|
649
|
+
expect(firstElement.selected, "first element still selected").to.be.true;
|
|
650
|
+
});
|
|
651
|
+
it("will not change .selected state if event is prevented while selects is undefined", async () => {
|
|
652
|
+
const el = await fixture(html`
|
|
653
653
|
<sp-action-group
|
|
654
654
|
label="Selects Single Group"
|
|
655
|
-
.selected=${[
|
|
655
|
+
.selected=${["first"]}
|
|
656
656
|
@change=${(event) => {
|
|
657
|
-
|
|
658
|
-
|
|
657
|
+
event.preventDefault();
|
|
658
|
+
}}
|
|
659
659
|
>
|
|
660
660
|
<sp-action-button class="first" value="first">
|
|
661
661
|
First
|
|
@@ -665,21 +665,19 @@ describe('ActionGroup', () => {
|
|
|
665
665
|
</sp-action-button>
|
|
666
666
|
</sp-action-group>
|
|
667
667
|
`);
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
it('will accept selected as a JSON string', async () => {
|
|
682
|
-
const el = await fixture(html `
|
|
668
|
+
const firstElement = el.querySelector(".first");
|
|
669
|
+
const secondElement = el.querySelector(".second");
|
|
670
|
+
await elementUpdated(el);
|
|
671
|
+
expect(el.selected.length).to.equal(1);
|
|
672
|
+
expect(firstElement.selected, "first child selected").to.be.true;
|
|
673
|
+
secondElement.click();
|
|
674
|
+
await elementUpdated(el);
|
|
675
|
+
expect(el.selected.length).to.equal(1);
|
|
676
|
+
expect(firstElement.selected, "first child selected").to.be.true;
|
|
677
|
+
expect(secondElement.selected, "second child not selected").to.be.false;
|
|
678
|
+
});
|
|
679
|
+
it("will accept selected as a JSON string", async () => {
|
|
680
|
+
const el = await fixture(html`
|
|
683
681
|
<sp-action-group
|
|
684
682
|
label="Selects Single Group"
|
|
685
683
|
selects="single"
|
|
@@ -693,60 +691,59 @@ describe('ActionGroup', () => {
|
|
|
693
691
|
</sp-action-button>
|
|
694
692
|
</sp-action-group>
|
|
695
693
|
`);
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
const
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
const el = await fixture(html `
|
|
694
|
+
await elementUpdated(el);
|
|
695
|
+
const firstElement = el.querySelector(".first");
|
|
696
|
+
const secondElement = el.querySelector(".second");
|
|
697
|
+
expect(el.selected.length).to.equal(1);
|
|
698
|
+
expect(firstElement.selected, "first child selected").to.be.true;
|
|
699
|
+
expect(secondElement.selected, "second child selected").to.be.false;
|
|
700
|
+
});
|
|
701
|
+
const acceptKeyboardInput = async (el) => {
|
|
702
|
+
const thirdElement = el.querySelector(".third");
|
|
703
|
+
await elementUpdated(el);
|
|
704
|
+
expect(el.selected.length).to.equal(1);
|
|
705
|
+
expect(el.selected[0]).to.equal("Second");
|
|
706
|
+
thirdElement.click();
|
|
707
|
+
await elementUpdated(el);
|
|
708
|
+
expect(thirdElement.selected, "third child selected").to.be.true;
|
|
709
|
+
expect(el.selected.length).to.equal(1);
|
|
710
|
+
expect(el.selected[0]).to.equal("Third");
|
|
711
|
+
el.dispatchEvent(arrowRightEvent());
|
|
712
|
+
await sendKeys({ press: "Enter" });
|
|
713
|
+
await elementUpdated(el);
|
|
714
|
+
expect(el.selected.length).to.equal(1);
|
|
715
|
+
expect(el.selected[0]).to.equal("First");
|
|
716
|
+
el.dispatchEvent(arrowLeftEvent());
|
|
717
|
+
el.dispatchEvent(arrowUpEvent());
|
|
718
|
+
await sendKeys({ press: "Enter" });
|
|
719
|
+
expect(el.selected.length).to.equal(1);
|
|
720
|
+
expect(el.selected[0]).to.equal("Second");
|
|
721
|
+
el.dispatchEvent(endEvent());
|
|
722
|
+
await sendKeys({ press: "Enter" });
|
|
723
|
+
expect(el.selected.length).to.equal(1);
|
|
724
|
+
expect(el.selected[0]).to.equal("Third");
|
|
725
|
+
await sendKeys({ press: "Enter" });
|
|
726
|
+
el.dispatchEvent(homeEvent());
|
|
727
|
+
await sendKeys({ press: "Enter" });
|
|
728
|
+
expect(el.selected.length).to.equal(1);
|
|
729
|
+
expect(el.selected[0]).to.equal("First");
|
|
730
|
+
el.dispatchEvent(arrowDownEvent());
|
|
731
|
+
await sendKeys({ press: "Enter" });
|
|
732
|
+
expect(el.selected.length).to.equal(1);
|
|
733
|
+
expect(el.selected[0]).to.equal("Second");
|
|
734
|
+
};
|
|
735
|
+
it("accepts keybord input", async () => {
|
|
736
|
+
const el = await fixture(html`
|
|
740
737
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
741
738
|
<sp-action-button>First</sp-action-button>
|
|
742
739
|
<sp-action-button selected>Second</sp-action-button>
|
|
743
740
|
<sp-action-button class="third">Third</sp-action-button>
|
|
744
741
|
</sp-action-group>
|
|
745
742
|
`);
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
743
|
+
await acceptKeyboardInput(el);
|
|
744
|
+
});
|
|
745
|
+
it("accepts keybord input with tooltip", async () => {
|
|
746
|
+
const el = await fixture(html`
|
|
750
747
|
<sp-action-group label="Selects Single Group" selects="single">
|
|
751
748
|
<overlay-trigger>
|
|
752
749
|
<sp-action-button slot="trigger">
|
|
@@ -772,10 +769,10 @@ describe('ActionGroup', () => {
|
|
|
772
769
|
</overlay-trigger>
|
|
773
770
|
</sp-action-group>
|
|
774
771
|
`);
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
772
|
+
await acceptKeyboardInput(el);
|
|
773
|
+
});
|
|
774
|
+
it('accepts keybord input when [dir="ltr"]', async () => {
|
|
775
|
+
const el = await fixture(html`
|
|
779
776
|
<sp-action-group
|
|
780
777
|
label="Selects Single Group"
|
|
781
778
|
selects="single"
|
|
@@ -786,23 +783,23 @@ describe('ActionGroup', () => {
|
|
|
786
783
|
<sp-action-button class="third">Third</sp-action-button>
|
|
787
784
|
</sp-action-group>
|
|
788
785
|
`);
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
786
|
+
const thirdElement = el.querySelector(".third");
|
|
787
|
+
await elementUpdated(el);
|
|
788
|
+
expect(el.selected.length).to.equal(0);
|
|
789
|
+
thirdElement.click();
|
|
790
|
+
await elementUpdated(el);
|
|
791
|
+
expect(thirdElement.selected, "third child selected").to.be.true;
|
|
792
|
+
expect(el.selected.length).to.equal(1);
|
|
793
|
+
expect(el.selected[0]).to.equal("Third");
|
|
794
|
+
el.dispatchEvent(arrowRightEvent());
|
|
795
|
+
await sendKeys({ press: "Enter" });
|
|
796
|
+
await elementUpdated(el);
|
|
797
|
+
expect(el.selected.length).to.equal(1);
|
|
798
|
+
expect(el.selected[0]).to.equal("First");
|
|
799
|
+
el.dispatchEvent(arrowUpEvent());
|
|
800
|
+
await sendKeys({ press: "Enter" });
|
|
801
|
+
expect(el.selected.length).to.equal(1);
|
|
802
|
+
expect(el.selected[0]).to.equal("Third");
|
|
803
|
+
});
|
|
807
804
|
});
|
|
808
|
-
//# sourceMappingURL=action-group.test.js.map
|
|
805
|
+
//# sourceMappingURL=action-group.test.js.map
|