@spectrum-web-components/radio 0.9.16-devmode2.0 → 0.11.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/README.md +51 -5
- package/custom-elements.json +4 -0
- package/package.json +8 -8
- package/sp-radio-group.dev.js +1 -0
- package/sp-radio-group.dev.js.map +1 -1
- package/sp-radio-group.js +1 -2
- package/sp-radio-group.js.map +2 -2
- package/sp-radio.dev.js +1 -0
- package/sp-radio.dev.js.map +1 -1
- package/sp-radio.js +1 -2
- package/sp-radio.js.map +2 -2
- package/src/Radio.d.ts +4 -1
- package/src/Radio.dev.js +16 -8
- package/src/Radio.dev.js.map +2 -2
- package/src/Radio.js +2 -121
- package/src/Radio.js.map +3 -3
- package/src/RadioGroup.dev.js +17 -8
- package/src/RadioGroup.dev.js.map +1 -1
- package/src/RadioGroup.js +1 -111
- package/src/RadioGroup.js.map +2 -2
- package/src/index.dev.js +1 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js +1 -2
- package/src/index.js.map +1 -1
- package/src/radio.css.dev.js +211 -102
- package/src/radio.css.dev.js.map +2 -2
- package/src/radio.css.js +212 -106
- package/src/radio.css.js.map +3 -3
- package/src/spectrum-config.js +25 -1
- package/src/spectrum-radio.css.dev.js +211 -102
- package/src/spectrum-radio.css.dev.js.map +2 -2
- package/src/spectrum-radio.css.js +212 -106
- package/src/spectrum-radio.css.js.map +3 -3
- package/stories/radio-sizes.stories.js +76 -0
- package/stories/radio-sizes.stories.js.map +7 -0
- package/stories/radio.stories.js +1 -0
- package/stories/radio.stories.js.map +2 -2
- package/test/benchmark/test-basic.js +1 -0
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/radio-group.test.js +139 -47
- package/test/radio-group.test.js.map +1 -1
- package/test/radio-sizes.test-vrt.js +5 -0
- package/test/radio-sizes.test-vrt.js.map +7 -0
- package/test/radio.test-vrt.js +1 -0
- package/test/radio.test-vrt.js.map +1 -1
- package/test/radio.test.js +12 -4
- package/test/radio.test.js.map +1 -1
package/test/radio-group.test.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import "@spectrum-web-components/radio/sp-radio-group.js";
|
|
2
3
|
import "@spectrum-web-components/radio/sp-radio.js";
|
|
3
4
|
import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
|
|
@@ -19,9 +20,11 @@ import { sendMouse } from "../../../test/plugins/browser.js";
|
|
|
19
20
|
import { spy } from "sinon";
|
|
20
21
|
describe("Radio Group - focus control", () => {
|
|
21
22
|
it("does not accept focus when empty", async () => {
|
|
22
|
-
const el = await fixture(
|
|
23
|
+
const el = await fixture(
|
|
24
|
+
html`
|
|
23
25
|
<sp-radio-group></sp-radio-group>
|
|
24
|
-
`
|
|
26
|
+
`
|
|
27
|
+
);
|
|
25
28
|
await elementUpdated(el);
|
|
26
29
|
expect(document.activeElement === el).to.be.false;
|
|
27
30
|
el.focus();
|
|
@@ -30,13 +33,15 @@ describe("Radio Group - focus control", () => {
|
|
|
30
33
|
});
|
|
31
34
|
it("focuses selected before first", async () => {
|
|
32
35
|
const values = ["first", "second", "third"];
|
|
33
|
-
const el = await fixture(
|
|
36
|
+
const el = await fixture(
|
|
37
|
+
html`
|
|
34
38
|
<sp-radio-group selected="second">
|
|
35
39
|
<sp-radio value=${values[0]}>Option 1</sp-radio>
|
|
36
40
|
<sp-radio value=${values[1]}>Option 2</sp-radio>
|
|
37
41
|
<sp-radio value=${values[2]}>Option 3</sp-radio>
|
|
38
42
|
</sp-radio-group>
|
|
39
|
-
`
|
|
43
|
+
`
|
|
44
|
+
);
|
|
40
45
|
await elementUpdated(el);
|
|
41
46
|
const selected = el.querySelector('[value="second"]');
|
|
42
47
|
expect(document.activeElement === el).to.be.false;
|
|
@@ -46,13 +51,15 @@ describe("Radio Group - focus control", () => {
|
|
|
46
51
|
});
|
|
47
52
|
it("focuses the child input not the root when [tabindex=-1]", async () => {
|
|
48
53
|
const values = ["first", "second", "third"];
|
|
49
|
-
const el = await fixture(
|
|
54
|
+
const el = await fixture(
|
|
55
|
+
html`
|
|
50
56
|
<sp-radio-group selected="second">
|
|
51
57
|
<sp-radio value=${values[0]}>Option 1</sp-radio>
|
|
52
58
|
<sp-radio value=${values[1]}>Option 2</sp-radio>
|
|
53
59
|
<sp-radio value=${values[2]}>Option 3</sp-radio>
|
|
54
60
|
</sp-radio-group>
|
|
55
|
-
`
|
|
61
|
+
`
|
|
62
|
+
);
|
|
56
63
|
await elementUpdated(el);
|
|
57
64
|
const first = el.querySelector('[value="first"]');
|
|
58
65
|
const selected = el.querySelector('[value="second"]');
|
|
@@ -71,10 +78,14 @@ describe("Radio Group - focus control", () => {
|
|
|
71
78
|
]
|
|
72
79
|
});
|
|
73
80
|
await elementUpdated(el);
|
|
74
|
-
expect(
|
|
81
|
+
expect(
|
|
82
|
+
!first.matches(":focus") || first.matches(":focus-within"),
|
|
83
|
+
"root should not"
|
|
84
|
+
).to.be.true;
|
|
75
85
|
});
|
|
76
86
|
it("does not select on focus", async () => {
|
|
77
|
-
const el = await fixture(
|
|
87
|
+
const el = await fixture(
|
|
88
|
+
html`
|
|
78
89
|
<sp-radio-group>
|
|
79
90
|
<sp-radio value="1">Options 1</sp-radio>
|
|
80
91
|
<sp-radio value="2">Options 2</sp-radio>
|
|
@@ -82,7 +93,8 @@ describe("Radio Group - focus control", () => {
|
|
|
82
93
|
<sp-radio value="4">Options 4</sp-radio>
|
|
83
94
|
<sp-radio value="5">Options 5</sp-radio>
|
|
84
95
|
</sp-radio-group>
|
|
85
|
-
`
|
|
96
|
+
`
|
|
97
|
+
);
|
|
86
98
|
await elementUpdated(el);
|
|
87
99
|
const radio1 = el.querySelector("sp-radio:nth-child(1)");
|
|
88
100
|
const radio2 = el.querySelector("sp-radio:nth-child(2)");
|
|
@@ -100,7 +112,8 @@ describe("Radio Group - focus control", () => {
|
|
|
100
112
|
expect(radio1.checked).to.be.true;
|
|
101
113
|
});
|
|
102
114
|
it("loads accepts keyboard events while focused", async () => {
|
|
103
|
-
const el = await fixture(
|
|
115
|
+
const el = await fixture(
|
|
116
|
+
html`
|
|
104
117
|
<sp-radio-group>
|
|
105
118
|
<sp-radio>Options 1</sp-radio>
|
|
106
119
|
<sp-radio>Options 2</sp-radio>
|
|
@@ -108,7 +121,8 @@ describe("Radio Group - focus control", () => {
|
|
|
108
121
|
<sp-radio>Options 4</sp-radio>
|
|
109
122
|
<sp-radio>Options 5</sp-radio>
|
|
110
123
|
</sp-radio-group>
|
|
111
|
-
`
|
|
124
|
+
`
|
|
125
|
+
);
|
|
112
126
|
await elementUpdated(el);
|
|
113
127
|
const radio1 = el.querySelector("sp-radio:nth-child(1)");
|
|
114
128
|
const radio2 = el.querySelector("sp-radio:nth-child(2)");
|
|
@@ -138,7 +152,8 @@ describe("Radio Group - focus control", () => {
|
|
|
138
152
|
radio1.blur();
|
|
139
153
|
});
|
|
140
154
|
it("accepts keyboard interactions where `checked` and `calculateFocusInIndex` might conflict", async () => {
|
|
141
|
-
const el = await fixture(
|
|
155
|
+
const el = await fixture(
|
|
156
|
+
html`
|
|
142
157
|
<sp-radio-group>
|
|
143
158
|
<sp-radio>Options 1</sp-radio>
|
|
144
159
|
<sp-radio>Options 2</sp-radio>
|
|
@@ -146,7 +161,8 @@ describe("Radio Group - focus control", () => {
|
|
|
146
161
|
<sp-radio>Options 4</sp-radio>
|
|
147
162
|
<sp-radio>Options 5</sp-radio>
|
|
148
163
|
</sp-radio-group>
|
|
149
|
-
`
|
|
164
|
+
`
|
|
165
|
+
);
|
|
150
166
|
await elementUpdated(el);
|
|
151
167
|
const radio1 = el.querySelector("sp-radio:nth-child(1)");
|
|
152
168
|
const radio5 = el.querySelector("sp-radio:nth-child(5)");
|
|
@@ -162,7 +178,8 @@ describe("Radio Group - focus control", () => {
|
|
|
162
178
|
expect(radio1.checked).to.be.true;
|
|
163
179
|
});
|
|
164
180
|
it("acknowledges `disabled` and accepts keyboard events while focused", async () => {
|
|
165
|
-
const el = await fixture(
|
|
181
|
+
const el = await fixture(
|
|
182
|
+
html`
|
|
166
183
|
<sp-radio-group>
|
|
167
184
|
<sp-radio value="1" disabled>Option 1</sp-radio>
|
|
168
185
|
<sp-radio value="2">Option 2</sp-radio>
|
|
@@ -170,7 +187,8 @@ describe("Radio Group - focus control", () => {
|
|
|
170
187
|
<sp-radio value="4">Option 4</sp-radio>
|
|
171
188
|
<sp-radio value="5" disabled>Option 5</sp-radio>
|
|
172
189
|
</sp-radio-group>
|
|
173
|
-
`
|
|
190
|
+
`
|
|
191
|
+
);
|
|
174
192
|
await elementUpdated(el);
|
|
175
193
|
const radio2 = el.querySelector("sp-radio:nth-child(2)");
|
|
176
194
|
const radio4 = el.querySelector("sp-radio:nth-child(4)");
|
|
@@ -203,16 +221,37 @@ describe("Group Accessibility", () => {
|
|
|
203
221
|
<sp-radio value="third">Option 3</sp-radio>
|
|
204
222
|
</sp-radio-group>
|
|
205
223
|
`);
|
|
206
|
-
const snapshot = await a11ySnapshot(
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
expect(
|
|
224
|
+
const snapshot = await a11ySnapshot(
|
|
225
|
+
{}
|
|
226
|
+
);
|
|
227
|
+
expect(
|
|
228
|
+
findAccessibilityNode(
|
|
229
|
+
snapshot,
|
|
230
|
+
(node) => (node.role === "radiogroup" || node.role === "group") && node.name === "Testing Label"
|
|
231
|
+
),
|
|
232
|
+
'Has a "radiogroup" with the supplied name'
|
|
233
|
+
).to.not.be.null;
|
|
234
|
+
expect(
|
|
235
|
+
findAccessibilityNode(
|
|
236
|
+
snapshot,
|
|
237
|
+
(node) => node.role === "radio" && node.checked && node.name === "Option 2"
|
|
238
|
+
),
|
|
239
|
+
'Has a named and checked "radio" element'
|
|
240
|
+
).to.not.be.null;
|
|
241
|
+
expect(
|
|
242
|
+
findAccessibilityNode(
|
|
243
|
+
snapshot,
|
|
244
|
+
(node) => node.name === "Option 2" && node.role.startsWith("text")
|
|
245
|
+
),
|
|
246
|
+
'Does not have a text leaf named like the "radio" element'
|
|
247
|
+
).to.be.null;
|
|
210
248
|
});
|
|
211
249
|
});
|
|
212
250
|
describe("Radio Group", () => {
|
|
213
251
|
let testDiv;
|
|
214
252
|
beforeEach(async () => {
|
|
215
|
-
testDiv = await fixture(
|
|
253
|
+
testDiv = await fixture(
|
|
254
|
+
html`
|
|
216
255
|
<div id="test-radio-group">
|
|
217
256
|
<sp-radio-group id="test-default">
|
|
218
257
|
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
@@ -259,10 +298,13 @@ describe("Radio Group", () => {
|
|
|
259
298
|
<sp-radio value="third">Option 3</sp-radio>
|
|
260
299
|
</sp-radio-group>
|
|
261
300
|
</div>
|
|
262
|
-
`
|
|
301
|
+
`
|
|
302
|
+
);
|
|
263
303
|
});
|
|
264
304
|
it("loads", () => {
|
|
265
|
-
const radioGroup = testDiv.querySelector(
|
|
305
|
+
const radioGroup = testDiv.querySelector(
|
|
306
|
+
"sp-radio-group#test-default"
|
|
307
|
+
);
|
|
266
308
|
const radioChildren = radioGroup.querySelectorAll("sp-radio");
|
|
267
309
|
expect(radioGroup).to.exist;
|
|
268
310
|
expect(radioChildren.length).to.equal(3);
|
|
@@ -271,14 +313,18 @@ describe("Radio Group", () => {
|
|
|
271
313
|
await expect(testDiv).to.be.accessible();
|
|
272
314
|
});
|
|
273
315
|
it("validates selection", async () => {
|
|
274
|
-
const radioGroup = testDiv.querySelector(
|
|
316
|
+
const radioGroup = testDiv.querySelector(
|
|
317
|
+
"sp-radio-group#test-none-selected"
|
|
318
|
+
);
|
|
275
319
|
expect(radioGroup.selected).to.equal("");
|
|
276
320
|
radioGroup.selected = "missing";
|
|
277
321
|
await elementUpdated(radioGroup);
|
|
278
322
|
expect(radioGroup.selected).to.equal("");
|
|
279
323
|
});
|
|
280
324
|
it("can have selection prevented", async () => {
|
|
281
|
-
const el = testDiv.querySelector(
|
|
325
|
+
const el = testDiv.querySelector(
|
|
326
|
+
"sp-radio-group#test-default"
|
|
327
|
+
);
|
|
282
328
|
const secondRadio = el.querySelector("sp-radio[value=second]");
|
|
283
329
|
const thirdRadio = el.querySelector("sp-radio[value=third]");
|
|
284
330
|
await elementUpdated(el);
|
|
@@ -292,10 +338,18 @@ describe("Radio Group", () => {
|
|
|
292
338
|
expect(el.selected).to.equal("second");
|
|
293
339
|
});
|
|
294
340
|
it("reflects checked radio with selected property", async () => {
|
|
295
|
-
const radioGroup = testDiv.querySelector(
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
const
|
|
341
|
+
const radioGroup = testDiv.querySelector(
|
|
342
|
+
"sp-radio-group#test-default"
|
|
343
|
+
);
|
|
344
|
+
const firstRadio = radioGroup.querySelector(
|
|
345
|
+
"sp-radio[value=first]"
|
|
346
|
+
);
|
|
347
|
+
const secondRadio = radioGroup.querySelector(
|
|
348
|
+
"sp-radio[value=second]"
|
|
349
|
+
);
|
|
350
|
+
const thirdRadio = radioGroup.querySelector(
|
|
351
|
+
"sp-radio[value=third]"
|
|
352
|
+
);
|
|
299
353
|
expect(firstRadio.checked).to.be.true;
|
|
300
354
|
expect(secondRadio.checked).to.be.false;
|
|
301
355
|
expect(thirdRadio.checked).to.be.false;
|
|
@@ -314,15 +368,23 @@ describe("Radio Group", () => {
|
|
|
314
368
|
expect(radioGroup.selected).to.equal(thirdRadio.value);
|
|
315
369
|
});
|
|
316
370
|
it("forces only one radio to be checked", () => {
|
|
317
|
-
const radioGroup = testDiv.querySelector(
|
|
371
|
+
const radioGroup = testDiv.querySelector(
|
|
372
|
+
"sp-radio-group#test-multiple-checked"
|
|
373
|
+
);
|
|
318
374
|
const checkedRadios = radioGroup.querySelectorAll("sp-radio[checked]");
|
|
319
375
|
expect(radioGroup.selected).to.equal("first");
|
|
320
376
|
expect(checkedRadios.length).to.equal(1);
|
|
321
377
|
});
|
|
322
378
|
it("respects clicking on disabled attribute causing nothing to happen", async () => {
|
|
323
|
-
const radioGroup = testDiv.querySelector(
|
|
324
|
-
|
|
325
|
-
|
|
379
|
+
const radioGroup = testDiv.querySelector(
|
|
380
|
+
"sp-radio-group#test-disabled"
|
|
381
|
+
);
|
|
382
|
+
const checkedRadio = radioGroup.querySelector(
|
|
383
|
+
"sp-radio[checked]"
|
|
384
|
+
);
|
|
385
|
+
const disabledRadio = radioGroup.querySelector(
|
|
386
|
+
"sp-radio[disabled]"
|
|
387
|
+
);
|
|
326
388
|
disabledRadio.click();
|
|
327
389
|
await elementUpdated(radioGroup);
|
|
328
390
|
expect(disabledRadio.checked).to.be.false;
|
|
@@ -330,18 +392,32 @@ describe("Radio Group", () => {
|
|
|
330
392
|
expect(radioGroup.selected).to.equal(checkedRadio.value);
|
|
331
393
|
});
|
|
332
394
|
it("de-checks all but first checked radio if multiple checked", () => {
|
|
333
|
-
const radioGroup = testDiv.querySelector(
|
|
334
|
-
|
|
335
|
-
|
|
395
|
+
const radioGroup = testDiv.querySelector(
|
|
396
|
+
"sp-radio-group#test-multiple-checked"
|
|
397
|
+
);
|
|
398
|
+
const radio1 = radioGroup.querySelector(
|
|
399
|
+
"sp-radio[value=first]"
|
|
400
|
+
);
|
|
401
|
+
const radio2 = radioGroup.querySelector(
|
|
402
|
+
"sp-radio[value=second]"
|
|
403
|
+
);
|
|
336
404
|
expect(radioGroup.selected).to.equal("first");
|
|
337
405
|
expect(radio1.checked).to.be.true;
|
|
338
406
|
expect(radio2.checked).to.be.false;
|
|
339
407
|
});
|
|
340
408
|
it("ensures setting selection updates checked radio", async () => {
|
|
341
|
-
const radioGroup = testDiv.querySelector(
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
const
|
|
409
|
+
const radioGroup = testDiv.querySelector(
|
|
410
|
+
"sp-radio-group#test-selected"
|
|
411
|
+
);
|
|
412
|
+
const radio1 = radioGroup.querySelector(
|
|
413
|
+
"sp-radio[value=first]"
|
|
414
|
+
);
|
|
415
|
+
const radio2 = radioGroup.querySelector(
|
|
416
|
+
"sp-radio[value=second]"
|
|
417
|
+
);
|
|
418
|
+
const radio3 = radioGroup.querySelector(
|
|
419
|
+
"sp-radio[value=third]"
|
|
420
|
+
);
|
|
345
421
|
expect(radioGroup.selected).to.equal("third");
|
|
346
422
|
expect(radio1.checked).to.be.false;
|
|
347
423
|
expect(radio2.checked).to.be.false;
|
|
@@ -360,10 +436,18 @@ describe("Radio Group", () => {
|
|
|
360
436
|
expect(radio3.checked).to.be.false;
|
|
361
437
|
});
|
|
362
438
|
it("ensures setting selected and clicking on radio both work together", async () => {
|
|
363
|
-
const radioGroup = testDiv.querySelector(
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
const
|
|
439
|
+
const radioGroup = testDiv.querySelector(
|
|
440
|
+
"sp-radio-group#test-selected-click"
|
|
441
|
+
);
|
|
442
|
+
const radio1 = radioGroup.querySelector(
|
|
443
|
+
"sp-radio[value=first]"
|
|
444
|
+
);
|
|
445
|
+
const radio2 = radioGroup.querySelector(
|
|
446
|
+
"sp-radio[value=second]"
|
|
447
|
+
);
|
|
448
|
+
const radio3 = radioGroup.querySelector(
|
|
449
|
+
"sp-radio[value=third]"
|
|
450
|
+
);
|
|
367
451
|
expect(radioGroup.selected).to.equal("third");
|
|
368
452
|
radio2.click();
|
|
369
453
|
await elementUpdated(radioGroup);
|
|
@@ -379,15 +463,23 @@ describe("Radio Group", () => {
|
|
|
379
463
|
expect(radio3.checked).to.be.false;
|
|
380
464
|
});
|
|
381
465
|
it("prioritizes checked over selected on initialization when conflicting", () => {
|
|
382
|
-
const radioGroup = testDiv.querySelector(
|
|
383
|
-
|
|
384
|
-
|
|
466
|
+
const radioGroup = testDiv.querySelector(
|
|
467
|
+
"sp-radio-group#test-checked-prioritized"
|
|
468
|
+
);
|
|
469
|
+
const radio1 = radioGroup.querySelector(
|
|
470
|
+
"sp-radio[value=first]"
|
|
471
|
+
);
|
|
472
|
+
const radio2 = radioGroup.querySelector(
|
|
473
|
+
"sp-radio[value=second]"
|
|
474
|
+
);
|
|
385
475
|
expect(radioGroup.selected).to.equal("first");
|
|
386
476
|
expect(radio1.checked).to.be.true;
|
|
387
477
|
expect(radio2.checked).to.be.false;
|
|
388
478
|
});
|
|
389
479
|
it("handles integer values for radio buttons", () => {
|
|
390
|
-
const radioGroup = testDiv.querySelector(
|
|
480
|
+
const radioGroup = testDiv.querySelector(
|
|
481
|
+
"sp-radio-group#test-integer-value"
|
|
482
|
+
);
|
|
391
483
|
expect(radioGroup.selected).to.equal("5");
|
|
392
484
|
});
|
|
393
485
|
it("prevents `change` events from radio buttons", async () => {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["radio-group.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*/\n\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport { Radio, RadioGroup } from '@spectrum-web-components/radio';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n} from '../../../test/testing-helpers.js';\nimport {\n a11ySnapshot,\n findAccessibilityNode,\n sendKeys,\n} from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\n\ndescribe('Radio Group - focus control', () => {\n it('does not accept focus when empty', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group></sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('focuses selected before first', async () => {\n const values = ['first', 'second', 'third'];\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group selected=\"second\">\n <sp-radio value=${values[0]}>Option 1</sp-radio>\n <sp-radio value=${values[1]}>Option 2</sp-radio>\n <sp-radio value=${values[2]}>Option 3</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n const selected = el.querySelector('[value=\"second\"]') as Radio;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === selected).to.be.true;\n });\n it('focuses the child input not the root when [tabindex=-1]', async () => {\n const values = ['first', 'second', 'third'];\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group selected=\"second\">\n <sp-radio value=${values[0]}>Option 1</sp-radio>\n <sp-radio value=${values[1]}>Option 2</sp-radio>\n <sp-radio value=${values[2]}>Option 3</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n const first = el.querySelector('[value=\"first\"]') as Radio;\n const selected = el.querySelector('[value=\"second\"]') as Radio;\n expect(selected.tabIndex).to.equal(0);\n expect(first.tabIndex).to.equal(-1);\n\n const firstRect = first.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [firstRect.x + 2, firstRect.y + 2],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n // Safari can have a situation where it thinks the root is focused, but really something inside of the\n // element is focused instead, this tests for both no focus on the root or focus inside of the element.\n expect(\n !first.matches(':focus') || first.matches(':focus-within'),\n 'root should not'\n ).to.be.true;\n });\n it('does not select on focus', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio value=\"1\">Options 1</sp-radio>\n <sp-radio value=\"2\">Options 2</sp-radio>\n <sp-radio value=\"3\">Options 3</sp-radio>\n <sp-radio value=\"4\">Options 4</sp-radio>\n <sp-radio value=\"5\">Options 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;\n const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;\n\n expect(el.selected).to.equal('');\n\n radio1.focus();\n await elementUpdated(el);\n\n expect(el.selected).to.equal('');\n el.selected = '1';\n await elementUpdated(el);\n\n expect(el.selected).to.equal('1');\n expect(radio1.checked).to.be.true;\n radio2.focus();\n await elementUpdated(el);\n\n expect(el.selected).to.equal('1');\n expect(radio1.checked).to.be.true;\n });\n it('loads accepts keyboard events while focused', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio>Options 1</sp-radio>\n <sp-radio>Options 2</sp-radio>\n <sp-radio>Options 3</sp-radio>\n <sp-radio>Options 4</sp-radio>\n <sp-radio>Options 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;\n const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;\n const radio3 = el.querySelector('sp-radio:nth-child(3)') as Radio;\n const radio4 = el.querySelector('sp-radio:nth-child(4)') as Radio;\n const radio5 = el.querySelector('sp-radio:nth-child(5)') as Radio;\n\n radio1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(arrowRightEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio3).to.be.true;\n\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio3).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio1).to.be.true;\n\n radio1.blur();\n });\n it('accepts keyboard interactions where `checked` and `calculateFocusInIndex` might conflict', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio>Options 1</sp-radio>\n <sp-radio>Options 2</sp-radio>\n <sp-radio>Options 3</sp-radio>\n <sp-radio>Options 4</sp-radio>\n <sp-radio>Options 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;\n const radio5 = el.querySelector('sp-radio:nth-child(5)') as Radio;\n\n radio5.focus();\n await elementUpdated(el);\n expect(document.activeElement === radio5).to.be.true;\n expect(radio5.checked).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n\n expect(document.activeElement === radio1).to.be.true;\n expect(radio1.checked).to.be.true;\n });\n it('acknowledges `disabled` and accepts keyboard events while focused', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio value=\"1\" disabled>Option 1</sp-radio>\n <sp-radio value=\"2\">Option 2</sp-radio>\n <sp-radio value=\"3\">Option 3</sp-radio>\n <sp-radio value=\"4\">Option 4</sp-radio>\n <sp-radio value=\"5\" disabled>Option 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;\n const radio4 = el.querySelector('sp-radio:nth-child(4)') as Radio;\n\n radio2.focus();\n await elementUpdated(el);\n expect(document.activeElement === radio2, 'start 2').to.be.true;\n expect(el.selected).to.equal('');\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n expect(document.activeElement === radio4, 'first 4').to.be.true;\n expect(el.selected).to.equal('4');\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio2, 'second 2').to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio4, 'third 4').to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio2, 'fourth 2').to.be.true;\n });\n});\n\ndescribe('Group Accessibility', () => {\n it('created the expected accessibility tree', async () => {\n await fixture(html`\n <sp-radio-group label=\"Testing Label\" tabindex=\"0\">\n <sp-radio value=\"first\">Option 1</sp-radio>\n <sp-radio value=\"second\" checked>Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n `);\n\n type NamedRoledAndCheckedNode = {\n name: string;\n role: string;\n checked: boolean;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as NamedRoledAndCheckedNode & {\n children: NamedRoledAndCheckedNode[];\n };\n\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (\n node // Firefox uses 'group' instead of 'radiogroup' here.\n ) =>\n (node.role === 'radiogroup' || node.role === 'group') &&\n node.name === 'Testing Label'\n ),\n 'Has a \"radiogroup\" with the supplied name'\n ).to.not.be.null;\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.role === 'radio' &&\n node.checked &&\n node.name === 'Option 2'\n ),\n 'Has a named and checked \"radio\" element'\n ).to.not.be.null;\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.name === 'Option 2' && node.role.startsWith('text')\n ),\n 'Does not have a text leaf named like the \"radio\" element'\n ).to.be.null;\n });\n});\n\ndescribe('Radio Group', () => {\n let testDiv!: HTMLDivElement;\n\n beforeEach(async () => {\n testDiv = await fixture<HTMLDivElement>(\n html`\n <div id=\"test-radio-group\">\n <sp-radio-group id=\"test-default\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-multiple-checked\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\" checked>Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-disabled\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\" disabled>Option 2</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-all-checked\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\" checked>Option 2</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-selected\" selected=\"third\">\n <sp-radio value=\"first\">Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-selected-click\" selected=\"third\">\n <sp-radio value=\"first\">Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n <sp-radio-group\n id=\"test-checked-prioritized\"\n selected=\"second\"\n >\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-integer-value\" selected=\"5\">\n <sp-radio value=\"5\" checked>Option 5</sp-radio>\n <sp-radio value=\"7\">Option 7</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-none-selected\">\n <sp-radio value=\"first\">Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n </div>\n `\n );\n });\n\n it('loads', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-default'\n ) as RadioGroup;\n const radioChildren = radioGroup.querySelectorAll('sp-radio');\n\n expect(radioGroup).to.exist;\n expect(radioChildren.length).to.equal(3);\n });\n\n it('loads accessibly', async () => {\n await expect(testDiv).to.be.accessible();\n });\n\n it('validates selection', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-none-selected'\n ) as RadioGroup;\n expect(radioGroup.selected).to.equal('');\n\n radioGroup.selected = 'missing';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('');\n });\n\n it('can have selection prevented', async () => {\n const el = testDiv.querySelector(\n 'sp-radio-group#test-default'\n ) as RadioGroup;\n const secondRadio = el.querySelector('sp-radio[value=second]') as Radio;\n const thirdRadio = el.querySelector('sp-radio[value=third]') as Radio;\n\n await elementUpdated(el);\n expect(el.selected).to.equal('first');\n\n secondRadio.click();\n\n await elementUpdated(el);\n expect(el.selected).to.equal('second');\n\n el.addEventListener('change', (event) => event.preventDefault());\n\n thirdRadio.click();\n\n await elementUpdated(el);\n expect(el.selected).to.equal('second');\n });\n\n it('reflects checked radio with selected property', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-default'\n ) as RadioGroup;\n const firstRadio = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const secondRadio = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n const thirdRadio = radioGroup.querySelector(\n 'sp-radio[value=third]'\n ) as Radio;\n\n expect(firstRadio.checked).to.be.true;\n expect(secondRadio.checked).to.be.false;\n expect(thirdRadio.checked).to.be.false;\n expect(radioGroup.selected).to.equal(firstRadio.value);\n\n secondRadio.click();\n await elementUpdated(radioGroup);\n\n expect(firstRadio.checked).to.be.false;\n expect(secondRadio.checked).to.be.true;\n expect(thirdRadio.checked).to.be.false;\n expect(radioGroup.selected).to.equal(secondRadio.value);\n\n thirdRadio.click();\n await elementUpdated(radioGroup);\n\n expect(firstRadio.checked).to.be.false;\n expect(secondRadio.checked).to.be.false;\n expect(thirdRadio.checked).to.be.true;\n expect(radioGroup.selected).to.equal(thirdRadio.value);\n });\n\n it('forces only one radio to be checked', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-multiple-checked'\n ) as RadioGroup;\n const checkedRadios = radioGroup.querySelectorAll('sp-radio[checked]');\n\n expect(radioGroup.selected).to.equal('first');\n expect(checkedRadios.length).to.equal(1);\n });\n\n it('respects clicking on disabled attribute causing nothing to happen', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-disabled'\n ) as RadioGroup;\n const checkedRadio = radioGroup.querySelector(\n 'sp-radio[checked]'\n ) as Radio;\n const disabledRadio = radioGroup.querySelector(\n 'sp-radio[disabled]'\n ) as Radio;\n\n disabledRadio.click();\n await elementUpdated(radioGroup);\n\n expect(disabledRadio.checked).to.be.false;\n expect(checkedRadio.checked).to.be.true;\n expect(radioGroup.selected).to.equal(checkedRadio.value);\n });\n\n it('de-checks all but first checked radio if multiple checked', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-multiple-checked'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked).to.be.true;\n expect(radio2.checked).to.be.false;\n });\n\n it('ensures setting selection updates checked radio', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-selected'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n const radio3 = radioGroup.querySelector(\n 'sp-radio[value=third]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('third');\n expect(radio1.checked).to.be.false;\n expect(radio2.checked).to.be.false;\n expect(radio3.checked, 'initial').to.be.true;\n\n radioGroup.selected = 'second';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('second');\n expect(radio1.checked).to.be.false;\n expect(radio2.checked, 'second').to.be.true;\n expect(radio3.checked).to.be.false;\n\n radioGroup.selected = 'first';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked, 'third').to.be.true;\n expect(radio2.checked).to.be.false;\n expect(radio3.checked).to.be.false;\n });\n\n it('ensures setting selected and clicking on radio both work together', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-selected-click'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n const radio3 = radioGroup.querySelector(\n 'sp-radio[value=third]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('third');\n radio2.click();\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('second');\n expect(radio1.checked).to.be.false;\n expect(radio2.checked).to.be.true;\n expect(radio3.checked).to.be.false;\n\n radioGroup.selected = 'first';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked, 'moved to checked').to.be.true;\n expect(radio2.checked).to.be.false;\n expect(radio3.checked).to.be.false;\n });\n\n it('prioritizes checked over selected on initialization when conflicting', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-checked-prioritized'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked).to.be.true;\n expect(radio2.checked).to.be.false;\n });\n\n it('handles integer values for radio buttons', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-integer-value'\n ) as RadioGroup;\n expect(radioGroup.selected).to.equal('5');\n });\n\n it('prevents `change` events from radio buttons', async () => {\n const changeSpy = spy();\n const onChange = (event: Event & { target: RadioGroup }): void => {\n changeSpy(event.target.selected);\n };\n const el = await fixture(html`\n <sp-radio-group @change=${onChange}>\n <sp-radio value=\"bulbasaur\">Bulbasaur</sp-radio>\n <sp-radio value=\"squirtle\">Squirtle</sp-radio>\n <sp-radio value=\"charmander\">Charmander</sp-radio>\n </sp-radio-group>\n `);\n\n const bulbasaur = el.querySelector('[value=\"bulbasaur\"]') as Radio;\n const charmander = el.querySelector('[value=\"charmander\"]') as Radio;\n bulbasaur.click();\n bulbasaur.click();\n charmander.click();\n\n expect(changeSpy.calledWith(undefined)).to.be.false;\n });\n});\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["radio-sizes.test-vrt.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/radio-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('RadioSizesStories', stories);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,qBAAqB,OAAO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/test/radio.test-vrt.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["radio.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/radio.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('RadioStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,gBAAgB,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/radio.test.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import "@spectrum-web-components/radio/sp-radio.js";
|
|
2
3
|
import {
|
|
3
4
|
elementUpdated,
|
|
@@ -18,14 +19,16 @@ function labelNodeForRadio(radio) {
|
|
|
18
19
|
describe("Radio", () => {
|
|
19
20
|
let testDiv;
|
|
20
21
|
beforeEach(async () => {
|
|
21
|
-
testDiv = await fixture(
|
|
22
|
+
testDiv = await fixture(
|
|
23
|
+
html`
|
|
22
24
|
<div id="test-radio">
|
|
23
25
|
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
24
26
|
<sp-radio value="second">Option 2</sp-radio>
|
|
25
27
|
<sp-radio value="third" autofocus>Option 3</sp-radio>
|
|
26
28
|
<sp-radio value="fourth" disabled>Option 4</sp-radio>
|
|
27
29
|
</div>
|
|
28
|
-
`
|
|
30
|
+
`
|
|
31
|
+
);
|
|
29
32
|
});
|
|
30
33
|
it("loads", async () => {
|
|
31
34
|
const el = testDiv.querySelector("sp-radio[value=first]");
|
|
@@ -62,9 +65,14 @@ describe("Radio", () => {
|
|
|
62
65
|
expect(checked).to.be.true;
|
|
63
66
|
});
|
|
64
67
|
it("autofocuses", async () => {
|
|
65
|
-
const autoElement = testDiv.querySelector(
|
|
68
|
+
const autoElement = testDiv.querySelector(
|
|
69
|
+
"sp-radio[autofocus]"
|
|
70
|
+
);
|
|
66
71
|
expect(autoElement).to.exist;
|
|
67
|
-
await waitUntil(
|
|
72
|
+
await waitUntil(
|
|
73
|
+
() => document.activeElement === autoElement,
|
|
74
|
+
"Autofocused"
|
|
75
|
+
);
|
|
68
76
|
await triggerBlurFor(autoElement);
|
|
69
77
|
expect(document.activeElement).to.not.equal(autoElement);
|
|
70
78
|
});
|
package/test/radio.test.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["radio.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*/\n\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport { Radio } from '@spectrum-web-components/radio';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n triggerBlurFor,\n waitUntil,\n} from '@open-wc/testing';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nfunction labelNodeForRadio(radio: Radio): Node {\n if (!radio.shadowRoot) throw new Error('No shadowRoot');\n const slotEl = radio.shadowRoot.querySelector('slot') as HTMLSlotElement;\n\n return slotEl.assignedNodes()[0];\n}\n\ndescribe('Radio', () => {\n let testDiv!: HTMLDivElement;\n\n beforeEach(async () => {\n testDiv = await fixture<HTMLDivElement>(\n html`\n <div id=\"test-radio\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\" autofocus>Option 3</sp-radio>\n <sp-radio value=\"fourth\" disabled>Option 4</sp-radio>\n </div>\n `\n );\n });\n it('loads', async () => {\n const el = testDiv.querySelector('sp-radio[value=first]') as Radio;\n const textNode = labelNodeForRadio(el as Radio);\n\n expect(el).to.not.equal(undefined);\n expect(el.innerText).to.equal('Option 1');\n expect(textNode.textContent).to.equal('Option 1');\n });\n\n it('loads accessibly', async () => {\n await expect(testDiv).to.be.accessible();\n });\n\n it('respects checked attribute', () => {\n const el1 = document.querySelector('[value=first]') as Radio;\n const el2 = testDiv.querySelector('[value=second]') as Radio;\n\n expect(el1.checked).to.be.true;\n expect(el2.checked).to.be.false;\n });\n\n it('handles click events', async () => {\n let value = '';\n let checked = false;\n const el = testDiv.querySelector('[value=third]') as Radio;\n el.addEventListener('change', (event) => {\n const target = event.target as Radio;\n value = target.value;\n checked = target.checked;\n });\n\n expect(el.checked).to.be.false;\n expect(value).to.equal('');\n expect(checked).to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n expect(value).to.equal('third');\n expect(checked).to.be.true;\n });\n\n it('autofocuses', async () => {\n const autoElement = testDiv.querySelector(\n 'sp-radio[autofocus]'\n ) as Radio;\n\n expect(autoElement).to.exist;\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n\n await triggerBlurFor(autoElement);\n\n expect(document.activeElement).to.not.equal(autoElement);\n });\n\n it('ensures clicking disabled does not check them', async () => {\n const el = testDiv.querySelector('sp-radio[disabled]') as Radio;\n\n expect(el.checked).to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n });\n\n it('renders [invalid]', async () => {\n const el = await fixture<Radio>(html`\n <sp-radio invalid>Component</sp-radio>\n `);\n\n expect(el.getAttribute('aria-invalid')).to.equal('true');\n });\n\n describe('accepts \"clicks\"', () => {\n let el!: Radio;\n beforeEach(async () => {\n el = await fixture<Radio>(html`\n <sp-radio>Component</sp-radio>\n `);\n });\n it('imperatively', async () => {\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('as events', async () => {\n el.dispatchEvent(new Event('click'));\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('from the keyboard', async () => {\n el.focus();\n await elementUpdated(el);\n await sendKeys({\n press: 'Space',\n });\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('imperatively', async () => {\n const boundingClientRecrt = el.getBoundingClientRect();\n const radioPosition: [number, number] = [\n boundingClientRecrt.x + boundingClientRecrt.width / 2,\n boundingClientRecrt.y + boundingClientRecrt.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: radioPosition,\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n });\n\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Radio>(html`\n <sp-radio checked readonly>Component</sp-radio>\n `);\n expect(el.checked).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n});\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|