@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.
@@ -1,46 +1,49 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
13
- import '@spectrum-web-components/action-button/sp-action-button.js';
14
- import { LitElement } from '@spectrum-web-components/base';
15
- import '@spectrum-web-components/overlay/overlay-trigger.js';
16
- import '@spectrum-web-components/tooltip/sp-tooltip.js';
17
- import { arrowDownEvent, arrowLeftEvent, arrowRightEvent, arrowUpEvent, endEvent, homeEvent, } from '../../../test/testing-helpers';
18
- import { sendKeys } from '@web/test-runner-commands';
19
- import '../sp-action-group.js';
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
- render() {
22
- return html `
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('quiet-action-group', QuietActionGroup);
33
+ customElements.define("quiet-action-group", QuietActionGroup);
31
34
  class EmphasizedActionGroup extends LitElement {
32
- render() {
33
- return html `
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('emphasized-action-group', EmphasizedActionGroup);
44
+ customElements.define("emphasized-action-group", EmphasizedActionGroup);
42
45
  async function singleSelectedActionGroup(selected) {
43
- const el = await fixture(html `
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
- return el;
60
+ return el;
58
61
  }
59
62
  async function multipleSelectedActionGroup(selected) {
60
- const el = await fixture(html `
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
- return el;
77
+ return el;
75
78
  }
76
- describe('ActionGroup', () => {
77
- it('loads empty action-group accessibly', async () => {
78
- const el = await fixture(html `
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
- await elementUpdated(el);
82
- await expect(el).to.be.accessible();
83
- });
84
- it('loads default action-group accessibly', async () => {
85
- const el = await fixture(html `
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
- await elementUpdated(el);
93
- await expect(el).to.be.accessible();
94
- expect(el.getAttribute('aria-label')).to.equal('Default Group');
95
- expect(el.hasAttribute('role')).to.be.false;
96
- expect(el.children[0].getAttribute('role')).to.equal('button');
97
- });
98
- it('applies `quiet` attribute to its children', async () => {
99
- const el = await fixture(html `
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
- const firstButton = el.querySelector('#first');
106
- const secondButton = el.querySelector('#second');
107
- await elementUpdated(el);
108
- expect(firstButton.hasAttribute('quiet')).to.be.true;
109
- expect(firstButton.quiet).to.be.true;
110
- expect(secondButton.hasAttribute('quiet')).to.be.true;
111
- expect(secondButton.quiet).to.be.true;
112
- });
113
- it('applies `quiet` attribute to its slotted children', async () => {
114
- const el = await fixture(html `
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
- const firstButton = el.querySelector('#first');
125
- const secondButton = el.querySelector('#second');
126
- await elementUpdated(el);
127
- expect(firstButton.hasAttribute('quiet')).to.be.true;
128
- expect(firstButton.quiet).to.be.true;
129
- expect(secondButton.hasAttribute('quiet')).to.be.true;
130
- expect(secondButton.quiet).to.be.true;
131
- });
132
- it('applies `emphasized` attribute to its slotted children', async () => {
133
- const el = await fixture(html `
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
- const firstButton = el.querySelector('#first');
144
- const secondButton = el.querySelector('#second');
145
- await elementUpdated(el);
146
- expect(firstButton.hasAttribute('emphasized')).to.be.true;
147
- expect(firstButton.emphasized).to.be.true;
148
- expect(secondButton.hasAttribute('emphasized')).to.be.true;
149
- expect(secondButton.emphasized).to.be.true;
150
- });
151
- it('applies `quiet` attribute to slotted children with overlays', async () => {
152
- const el = await fixture(html `
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
- const firstButton = el.querySelector('#first');
167
- const secondButton = el.querySelector('#second');
168
- await elementUpdated(el);
169
- expect(firstButton.hasAttribute('quiet')).to.be.true;
170
- expect(firstButton.quiet).to.be.true;
171
- expect(secondButton.hasAttribute('quiet')).to.be.true;
172
- expect(secondButton.quiet).to.be.true;
173
- });
174
- it('applies `emphasized` attribute to slotted children with overlays', async () => {
175
- const el = await fixture(html `
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
- const firstButton = el.querySelector('#first');
190
- const secondButton = el.querySelector('#second');
191
- await elementUpdated(el);
192
- expect(firstButton.hasAttribute('emphasized')).to.be.true;
193
- expect(firstButton.emphasized).to.be.true;
194
- expect(secondButton.hasAttribute('emphasized')).to.be.true;
195
- expect(secondButton.emphasized).to.be.true;
196
- });
197
- it('loads [selects="single"] action-group accessibly', async () => {
198
- const el = await fixture(html `
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
- await elementUpdated(el);
206
- await expect(el).to.be.accessible();
207
- expect(el.getAttribute('aria-label')).to.equal('Selects Single Group');
208
- expect(el.getAttribute('role')).to.equal('radiogroup');
209
- expect(el.children[0].getAttribute('role')).to.equal('radio');
210
- });
211
- it('loads [selects="single"] action-group w/ selection accessibly', async () => {
212
- const el = await fixture(html `
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
- await elementUpdated(el);
220
- await expect(el).to.be.accessible();
221
- });
222
- it('loads [selects="multiple"] action-group accessibly', async () => {
223
- const el = await fixture(html `
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
- await elementUpdated(el);
234
- await expect(el).to.be.accessible();
235
- expect(el.getAttribute('aria-label')).to.equal('Selects Multiple Group');
236
- expect(el.getAttribute('role')).to.equal('group');
237
- expect(el.children[0].getAttribute('role')).to.equal('checkbox');
238
- });
239
- it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
240
- const el = await fixture(html `
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
- await elementUpdated(el);
251
- await expect(el).to.be.accessible();
252
- });
253
- it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
254
- const el = await fixture(html `
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
- const secondButton = el.querySelector('.second');
262
- await elementUpdated(el);
263
- expect(secondButton.hasAttribute('tabindex'));
264
- expect(secondButton.getAttribute('tabindex')).to.equal('0');
265
- });
266
- it('surfaces [selects="single"] selection', async () => {
267
- const el = await fixture(html `
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
- await elementUpdated(el);
275
- expect(el.selected, '"Third" selected').to.deep.equal(['Third']);
276
- });
277
- it('surfaces [selects="multiple"] selection', async () => {
278
- const el = await fixture(html `
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
- await elementUpdated(el);
289
- expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
290
- 'Second',
291
- 'Third',
292
- ]);
293
- });
294
- it('does not select without [selects]', async () => {
295
- const el = await fixture(html `
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
- const thirdElement = el.querySelector('.third');
303
- await elementUpdated(el);
304
- expect(el.selected.length).to.equal(1);
305
- thirdElement.click();
306
- await elementUpdated(el);
307
- expect(el.selected.length).to.equal(1);
308
- });
309
- it('selects via `click` while [selects="single"]', async () => {
310
- const el = await fixture(html `
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
- const thirdElement = el.querySelector('.third');
322
- await elementUpdated(el);
323
- expect(el.selected.length).to.equal(1);
324
- expect(el.selected.includes('second'));
325
- thirdElement.click();
326
- await elementUpdated(el);
327
- expect(thirdElement.selected, 'third child selected').to.be.true;
328
- await waitUntil(() => el.selected.length === 1 && el.selected.includes('third'), 'Updates value of `selected`');
329
- });
330
- it('selects via `click` while [selects="multiple"] selection', async () => {
331
- const el = await fixture(html `
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
- const firstElement = el.querySelector('.first');
344
- const secondElement = el.querySelector('.second');
345
- const thirdElement = el.querySelector('.third');
346
- await elementUpdated(el);
347
- expect(el.selected.length).to.equal(1);
348
- expect(el.selected.includes('First'));
349
- firstElement.click();
350
- secondElement.click();
351
- thirdElement.click();
352
- await elementUpdated(el);
353
- expect(secondElement.selected, 'second child selected').to.be.true;
354
- expect(thirdElement.selected, 'third child selected').to.be.true;
355
- await waitUntil(() => el.selected.length === 2 &&
356
- el.selected.includes('Second') &&
357
- el.selected.includes('Third'), 'Updates value of `selected`');
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
- await elementUpdated(el);
368
- expect(el.selected.length).to.equal(0);
369
- el.click();
370
- await elementUpdated(el);
371
- expect(el.selected.length).to.equal(0);
372
- });
373
- it('selection can be prevented', async () => {
374
- const el = await fixture(html `
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
- event.preventDefault();
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
- const thirdElement = el.querySelector('.third');
388
- await elementUpdated(el);
389
- expect(el.selected.length).to.equal(0);
390
- thirdElement.click();
391
- await elementUpdated(el);
392
- expect(thirdElement.selected, 'third child not selected').to.be.false;
393
- expect(el.selected.length).to.equal(0);
394
- });
395
- it('selects user-passed value while [selects="single"]', async () => {
396
- const el = await singleSelectedActionGroup(['first']);
397
- await elementUpdated(el);
398
- expect(el.selected.length).to.equal(1);
399
- const firstButton = el.querySelector('.first');
400
- const secondButton = el.querySelector('.second');
401
- expect(firstButton.selected, 'first button selected').to.be.true;
402
- expect(secondButton.selected, 'second button not selected').to.be.false;
403
- secondButton.click();
404
- await elementUpdated(el);
405
- expect(el.selected.length).to.equal(1);
406
- expect(firstButton.selected, 'first button not selected').to.be.false;
407
- expect(secondButton.selected, 'second button selected').to.be.true;
408
- });
409
- it('selects can be updated while [selects="single"]', async () => {
410
- const el = await singleSelectedActionGroup(['first']);
411
- await elementUpdated(el);
412
- expect(el.selected.length).to.equal(1);
413
- const firstButton = el.querySelector('.first');
414
- const secondButton = el.querySelector('.second');
415
- expect(firstButton.selected, 'first button selected').to.be.true;
416
- expect(secondButton.selected, 'second button not selected').to.be.false;
417
- el.selected = ['second'];
418
- await elementUpdated(el);
419
- expect(el.selected.length).to.equal(1);
420
- expect(firstButton.selected, 'first button not selected').to.be.false;
421
- expect(secondButton.selected, 'second button selected').to.be.true;
422
- });
423
- it('selects user-passed value while [selects="multiple"]', async () => {
424
- const el = await fixture(html `
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=${['first', 'second']}
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
- await elementUpdated(el);
442
- const firstButton = el.querySelector('.first');
443
- const secondButton = el.querySelector('.second');
444
- const thirdButton = el.querySelector('.third');
445
- expect(el.selected.length).to.equal(2);
446
- expect(firstButton.selected, 'first button selected').to.be.true;
447
- expect(secondButton.selected, 'second button selected').to.be.true;
448
- expect(thirdButton.selected, 'third button not selected').to.be.false;
449
- thirdButton.click();
450
- await elementUpdated(el);
451
- expect(el.selected.length).to.equal(3);
452
- expect(firstButton.selected, 'first button selected').to.be.true;
453
- expect(secondButton.selected, 'second button selected').to.be.true;
454
- expect(thirdButton.selected, 'third button selected').to.be.true;
455
- firstButton.click();
456
- await elementUpdated(el);
457
- expect(el.selected.length).to.equal(2);
458
- expect(firstButton.selected, 'first button not selected').to.be.false;
459
- expect(secondButton.selected, 'second button selected').to.be.true;
460
- expect(thirdButton.selected, 'third button selected').to.be.true;
461
- });
462
- it('selects can be updated while [selects="multiple"]', async () => {
463
- const el = await fixture(html `
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=${['first', 'second']}
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
- await elementUpdated(el);
481
- const firstButton = el.querySelector('.first');
482
- const secondButton = el.querySelector('.second');
483
- const thirdButton = el.querySelector('.third');
484
- expect(el.selected.length).to.equal(2);
485
- expect(firstButton.selected, 'first button selected').to.be.true;
486
- expect(secondButton.selected, 'second button selected').to.be.true;
487
- expect(thirdButton.selected, 'third button not selected').to.be.false;
488
- el.selected = ['first', 'second', 'third'];
489
- await elementUpdated(el);
490
- expect(el.selected.length).to.equal(3);
491
- expect(firstButton.selected, 'first button selected').to.be.true;
492
- expect(secondButton.selected, 'second button selected').to.be.true;
493
- expect(thirdButton.selected, 'third button selected').to.be.true;
494
- el.selected = ['second', 'third'];
495
- await elementUpdated(el);
496
- expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);
497
- expect(firstButton.selected, 'first button not selected').to.be.false;
498
- expect(secondButton.selected, 'second button selected').to.be.true;
499
- expect(thirdButton.selected, 'third button selected').to.be.true;
500
- });
501
- it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => {
502
- const el = await singleSelectedActionGroup(['first', 'second']);
503
- await elementUpdated(el);
504
- expect(el.selected.length).to.equal(2);
505
- const firstButton = el.querySelector('.first');
506
- const secondButton = el.querySelector('.second');
507
- expect(firstButton.selected, 'first button selected').to.be.true;
508
- expect(secondButton.selected, 'second button selected').to.be.true;
509
- secondButton.click();
510
- await elementUpdated(el);
511
- expect(el.selected.length).to.equal(1);
512
- expect(firstButton.selected, 'first button selected').to.be.false;
513
- expect(secondButton.selected, 'second button selected').to.be.true;
514
- });
515
- it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => {
516
- const el = await multipleSelectedActionGroup(['second', 'fourth']);
517
- await elementUpdated(el);
518
- expect(el.selected.length).to.equal(1);
519
- const secondButton = el.querySelector('.second');
520
- expect(secondButton.selected, 'second button selected').to.be.true;
521
- const firstButton = el.querySelector('.first');
522
- expect(firstButton.selected, 'first button selected').to.be.false;
523
- });
524
- it('selects user-passed values with no .selects value, but does not allow interaction afterwards', async () => {
525
- const el = await fixture(html `
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=${['first']}
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
- await elementUpdated(el);
539
- expect(el.selected.length).to.equal(1);
540
- const firstButton = el.querySelector('.first');
541
- const secondButton = el.querySelector('.second');
542
- expect(firstButton.selected, 'first button selected').to.be.true;
543
- expect(secondButton.selected, 'second button selected').to.be.false;
544
- secondButton.click();
545
- await elementUpdated(el);
546
- expect(el.selected.length).to.equal(1);
547
- expect(firstButton.selected, 'first button selected').to.be.true;
548
- expect(secondButton.selected, 'second button selected').to.be.false;
549
- });
550
- it('selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards', async () => {
551
- const el = await fixture(html `
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=${['first', 'second']}
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
- await elementUpdated(el);
565
- expect(el.selected.length).to.equal(2);
566
- const firstButton = el.querySelector('.first');
567
- expect(firstButton.selected, 'first button selected').to.be.true;
568
- const secondButton = el.querySelector('.second');
569
- expect(secondButton.selected, 'second button selected').to.be.true;
570
- firstButton.click();
571
- await elementUpdated(el);
572
- expect(el.selected.length).to.equal(2);
573
- expect(firstButton.selected, 'first button selected').to.be.true;
574
- expect(secondButton.selected, 'second button selected').to.be.true;
575
- });
576
- it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
577
- const el = await fixture(html `
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=${['first', 'second']}
589
+ .selected=${["first", "second"]}
582
590
  @change=${(event) => {
583
- event.preventDefault();
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
- const firstElement = el.querySelector('.first');
598
- const secondElement = el.querySelector('.second');
599
- const thirdElement = el.querySelector('.third');
600
- // checking if the first and second are selected
601
- await elementUpdated(el);
602
- expect(el.selected.length).to.equal(2);
603
- expect(firstElement.selected, 'first child selected').to.be.true;
604
- expect(secondElement.selected, 'second child selected').to.be.true;
605
- // making sure third element isn't selected
606
- thirdElement.click();
607
- await elementUpdated(el);
608
- expect(thirdElement.selected, 'third child not selected').to.be.false;
609
- expect(el.selected.length).to.equal(2);
610
- // making sure already-selected elements are not de-selected
611
- secondElement.click();
612
- await elementUpdated(el);
613
- expect(secondElement.selected, 'second element still selected').to.be
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=${['first']}
625
+ .selected=${["first"]}
622
626
  @change=${(event) => {
623
- event.preventDefault();
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
- const firstElement = el.querySelector('.first');
635
- const secondElement = el.querySelector('.second');
636
- // checking if the first element is selected
637
- await elementUpdated(el);
638
- expect(el.selected.length).to.equal(1);
639
- expect(firstElement.selected, 'first child selected').to.be.true;
640
- // making sure third element isn't selected
641
- secondElement.click();
642
- await elementUpdated(el);
643
- expect(secondElement.selected, 'second child not selected').to.be.false;
644
- expect(el.selected.length).to.equal(1);
645
- // making sure already-selected elements are not de-selected
646
- firstElement.click();
647
- await elementUpdated(el);
648
- expect(firstElement.selected, 'first element still selected').to.be
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=${['first']}
655
+ .selected=${["first"]}
656
656
  @change=${(event) => {
657
- event.preventDefault();
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
- const firstElement = el.querySelector('.first');
669
- const secondElement = el.querySelector('.second');
670
- // checking if the first element is selected
671
- await elementUpdated(el);
672
- expect(el.selected.length).to.equal(1);
673
- expect(firstElement.selected, 'first child selected').to.be.true;
674
- secondElement.click();
675
- await elementUpdated(el);
676
- // state should be exactly the same
677
- expect(el.selected.length).to.equal(1);
678
- expect(firstElement.selected, 'first child selected').to.be.true;
679
- expect(secondElement.selected, 'second child not selected').to.be.false;
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
- // checking if the first element is selected
697
- await elementUpdated(el);
698
- const firstElement = el.querySelector('.first');
699
- const secondElement = el.querySelector('.second');
700
- expect(el.selected.length).to.equal(1);
701
- expect(firstElement.selected, 'first child selected').to.be.true;
702
- expect(secondElement.selected, 'second child selected').to.be.false;
703
- });
704
- const acceptKeyboardInput = async (el) => {
705
- const thirdElement = el.querySelector('.third');
706
- await elementUpdated(el);
707
- expect(el.selected.length).to.equal(1);
708
- expect(el.selected[0]).to.equal('Second');
709
- thirdElement.click();
710
- await elementUpdated(el);
711
- expect(thirdElement.selected, 'third child selected').to.be.true;
712
- expect(el.selected.length).to.equal(1);
713
- expect(el.selected[0]).to.equal('Third');
714
- el.dispatchEvent(arrowRightEvent());
715
- await sendKeys({ press: 'Enter' });
716
- await elementUpdated(el);
717
- expect(el.selected.length).to.equal(1);
718
- expect(el.selected[0]).to.equal('First');
719
- el.dispatchEvent(arrowLeftEvent());
720
- el.dispatchEvent(arrowUpEvent());
721
- await sendKeys({ press: 'Enter' });
722
- expect(el.selected.length).to.equal(1);
723
- expect(el.selected[0]).to.equal('Second');
724
- el.dispatchEvent(endEvent());
725
- await sendKeys({ press: 'Enter' });
726
- expect(el.selected.length).to.equal(1);
727
- expect(el.selected[0]).to.equal('Third');
728
- await sendKeys({ press: 'Enter' });
729
- el.dispatchEvent(homeEvent());
730
- await sendKeys({ press: 'Enter' });
731
- expect(el.selected.length).to.equal(1);
732
- expect(el.selected[0]).to.equal('First');
733
- el.dispatchEvent(arrowDownEvent());
734
- await sendKeys({ press: 'Enter' });
735
- expect(el.selected.length).to.equal(1);
736
- expect(el.selected[0]).to.equal('Second');
737
- };
738
- it('accepts keybord input', async () => {
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
- await acceptKeyboardInput(el);
747
- });
748
- it('accepts keybord input with tooltip', async () => {
749
- const el = await fixture(html `
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
- await acceptKeyboardInput(el);
776
- });
777
- it('accepts keybord input when [dir="ltr"]', async () => {
778
- const el = await fixture(html `
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
- const thirdElement = el.querySelector('.third');
790
- await elementUpdated(el);
791
- expect(el.selected.length).to.equal(0);
792
- thirdElement.click();
793
- await elementUpdated(el);
794
- expect(thirdElement.selected, 'third child selected').to.be.true;
795
- expect(el.selected.length).to.equal(1);
796
- expect(el.selected[0]).to.equal('Third');
797
- el.dispatchEvent(arrowRightEvent());
798
- await sendKeys({ press: 'Enter' });
799
- await elementUpdated(el);
800
- expect(el.selected.length).to.equal(1);
801
- expect(el.selected[0]).to.equal('First');
802
- el.dispatchEvent(arrowUpEvent());
803
- await sendKeys({ press: 'Enter' });
804
- expect(el.selected.length).to.equal(1);
805
- expect(el.selected[0]).to.equal('Third');
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