@spectrum-web-components/table 0.0.2-table.2609 → 0.0.2-table.2625

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +151 -63
  2. package/custom-elements.json +86 -59
  3. package/package.json +2 -9
  4. package/src/Table.d.ts +24 -0
  5. package/src/Table.js +68 -65
  6. package/src/Table.js.map +1 -1
  7. package/src/TableBody.js +1 -1
  8. package/src/TableBody.js.map +1 -1
  9. package/src/TableCell.d.ts +0 -1
  10. package/src/TableCell.js +0 -4
  11. package/src/TableCell.js.map +1 -1
  12. package/src/TableCheckboxCell.d.ts +1 -1
  13. package/src/TableCheckboxCell.js +8 -11
  14. package/src/TableCheckboxCell.js.map +1 -1
  15. package/src/TableHead.d.ts +1 -0
  16. package/src/TableHead.js +1 -1
  17. package/src/TableHead.js.map +1 -1
  18. package/src/TableHeadCell.d.ts +2 -1
  19. package/src/TableHeadCell.js +2 -4
  20. package/src/TableHeadCell.js.map +1 -1
  21. package/src/TableRow.d.ts +2 -0
  22. package/src/TableRow.js +2 -0
  23. package/src/TableRow.js.map +1 -1
  24. package/src/spectrum-config.js +10 -7
  25. package/src/spectrum-table-head-cell.css.js +1 -1
  26. package/src/spectrum-table-head-cell.css.js.map +1 -1
  27. package/src/spectrum-table.css.js +83 -103
  28. package/src/spectrum-table.css.js.map +1 -1
  29. package/src/table-checkbox-cell.css.js +1 -1
  30. package/src/table-checkbox-cell.css.js.map +1 -1
  31. package/src/table-head-cell.css.js +1 -1
  32. package/src/table-head-cell.css.js.map +1 -1
  33. package/src/table.css.js +83 -103
  34. package/src/table.css.js.map +1 -1
  35. package/stories/index.js +0 -12
  36. package/stories/index.js.map +1 -1
  37. package/stories/table-elements.stories.js +46 -21
  38. package/stories/table-elements.stories.js.map +1 -1
  39. package/stories/table-virtualized.stories.js +38 -25
  40. package/stories/table-virtualized.stories.js.map +1 -1
  41. package/test/benchmark/basic-test.js +39 -1
  42. package/test/benchmark/basic-test.js.map +1 -1
  43. package/test/table.test.js +75 -649
  44. package/test/table.test.js.map +1 -1
  45. package/test/virtualized-table.test.js +494 -0
  46. package/test/virtualized-table.test.js.map +1 -0
package/test/table.test.js CHANGED
@@ -9,17 +9,14 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
9
9
  OF ANY KIND, either express or implied. See the License for the specific language
10
10
  governing permissions and limitations under the License.
11
11
  */
12
- import { elementUpdated, expect, fixture, html, nextFrame, oneEvent, } from '@open-wc/testing';
12
+ import { elementUpdated, expect, fixture, html, nextFrame, } from '@open-wc/testing';
13
13
  import '../sp-table.js';
14
14
  import '../sp-table-head.js';
15
15
  import '../sp-table-head-cell.js';
16
16
  import '../sp-table-body.js';
17
17
  import '../sp-table-row.js';
18
18
  import '../sp-table-cell.js';
19
- import { elements, selectsMultiple, selectsSingle, } from '../stories/table-elements.stories.js';
20
- import { virtualized, virtualizedCustomValue, virtualizedMultiple, virtualizedSingle, } from '../stories/table-virtualized.stories.js';
21
- import { makeItemsTwo } from '../stories/index.js';
22
- import { sendKeys } from '@web/test-runner-commands';
19
+ import { elements, noSelectsSpecified, selectsMultiple, selectsSingle, } from '../stories/table-elements.stories.js';
23
20
  import { spy } from 'sinon';
24
21
  let globalErrorHandler = undefined;
25
22
  before(function () {
@@ -39,112 +36,11 @@ before(function () {
39
36
  after(function () {
40
37
  window.onerror = globalErrorHandler;
41
38
  });
42
- const renderItem = (item, index) => {
43
- return html `
44
- <sp-table-cell>Rowsa Item Alpha ${item.name}</sp-table-cell>
45
- <sp-table-cell>Row Item Alpha ${item.date}</sp-table-cell>
46
- <sp-table-cell>Row Item Alpha ${index}</sp-table-cell>
47
- `;
48
- };
49
39
  describe('Table', () => {
50
40
  it('loads default table accessibly', async () => {
51
41
  const el = await fixture(elements());
52
42
  await expect(el).to.be.accessible();
53
43
  });
54
- it('loads virtualized table accessibly', async () => {
55
- const el = await fixture(virtualized());
56
- await expect(el).to.be.accessible();
57
- });
58
- it('creates tab stops for `<sp-table-head-cell sortable>`', async () => {
59
- var _a, _b, _c;
60
- const input = document.createElement('input');
61
- const test = await fixture(virtualized());
62
- const el = (_a = test.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('sp-table');
63
- test.insertAdjacentElement('beforebegin', input);
64
- input.focus();
65
- expect(input === document.activeElement).to.be.true;
66
- const firstSortable = el.querySelector('[sortable]:nth-of-type(1)');
67
- const secondSortable = el.querySelector('[sortable]:nth-of-type(2)');
68
- await sendKeys({
69
- press: 'Tab',
70
- });
71
- expect(firstSortable === ((_b = test.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)).to.be.true;
72
- await sendKeys({
73
- press: 'Tab',
74
- });
75
- expect(secondSortable === ((_c = test.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement)).to.be.true;
76
- });
77
- it('does not tab stop on non-sortable `<sp-table-head-cell>`s', async () => {
78
- var _a, _b, _c, _d;
79
- const input = document.createElement('input');
80
- const test = await fixture(virtualized());
81
- const el = (_a = test.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('sp-table');
82
- test.insertAdjacentElement('beforebegin', input);
83
- input.focus();
84
- expect(input === document.activeElement).to.be.true;
85
- const firstHeadCell = el.querySelector('sp-table-head-cell:nth-of-type(1)');
86
- const secondHeadCell = el.querySelector('sp-table-head-cell:nth-of-type(2)');
87
- const thirdHeadCell = el.querySelector('sp-table-head-cell:nth-of-type(3)');
88
- await sendKeys({
89
- press: 'Tab',
90
- });
91
- expect(firstHeadCell === ((_b = test.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)).to.be.true;
92
- await sendKeys({
93
- press: 'Tab',
94
- });
95
- expect(secondHeadCell === ((_c = test.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement)).to.be.true;
96
- await sendKeys({
97
- press: 'Tab',
98
- });
99
- expect(thirdHeadCell === ((_d = test.shadowRoot) === null || _d === void 0 ? void 0 : _d.activeElement)).to.be.false;
100
- // Passes on firefox only, not sure why... Scrollable content should
101
- // recieve tabstop. TableBody should be scrollable.
102
- // expect(tableBody === test.shadowRoot?.activeElement).to.be.true;
103
- });
104
- it('can be focus()ed from the `<sp-table>`', async () => {
105
- var _a, _b;
106
- const input = document.createElement('input');
107
- const test = await fixture(virtualized());
108
- const el = (_a = test.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('sp-table');
109
- test.insertAdjacentElement('beforebegin', input);
110
- // we should be able to do el.focus()
111
- el.focus();
112
- // should focus the first sortable descendant
113
- const firstSortable = el.querySelector('[sortable]:nth-of-type(1)');
114
- expect(firstSortable === ((_b = test.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)).to.be.true;
115
- });
116
- it('dispatches `sorted` events', async () => {
117
- const el = await fixture(html `
118
- <sp-table size="m">
119
- <sp-table-head>
120
- <sp-table-head-cell sortable sorted="desc">
121
- Column Title
122
- </sp-table-head-cell>
123
- <sp-table-head-cell sortable>
124
- Column Title
125
- </sp-table-head-cell>
126
- <sp-table-head-cell>Column Title</sp-table-head-cell>
127
- </sp-table-head>
128
- </sp-table>
129
- `);
130
- const tableHeadCell1 = el.querySelector('[sortable][sorted]');
131
- const tableHeadCell2 = el.querySelector('[sortable]:not([sorted])');
132
- tableHeadCell2.click();
133
- await nextFrame();
134
- expect(tableHeadCell1.hasAttribute('sorted')).to.be.false;
135
- expect(tableHeadCell2.hasAttribute('sorted')).to.be.true;
136
- expect(tableHeadCell2.getAttribute('sorted')).to.equal('asc');
137
- tableHeadCell2.click();
138
- await nextFrame();
139
- expect(tableHeadCell1.hasAttribute('sorted')).to.be.false;
140
- expect(tableHeadCell2.hasAttribute('sorted')).to.be.true;
141
- expect(tableHeadCell2.getAttribute('sorted')).to.equal('desc');
142
- tableHeadCell1.click();
143
- await nextFrame();
144
- expect(tableHeadCell2.hasAttribute('sorted')).to.be.false;
145
- expect(tableHeadCell1.hasAttribute('sorted')).to.be.true;
146
- expect(tableHeadCell1.getAttribute('sorted')).to.equal('asc');
147
- });
148
44
  it('dispatches `change` events', async () => {
149
45
  const changeSpy = spy();
150
46
  const el = await fixture(html `
@@ -157,12 +53,8 @@ describe('Table', () => {
157
53
  }}
158
54
  >
159
55
  <sp-table-head>
160
- <sp-table-head-cell sortable sorted="desc">
161
- Column Title
162
- </sp-table-head-cell>
163
- <sp-table-head-cell sortable>
164
- Column Title
165
- </sp-table-head-cell>
56
+ <sp-table-head-cell>Column Title</sp-table-head-cell>
57
+ <sp-table-head-cell>Column Title</sp-table-head-cell>
166
58
  <sp-table-head-cell>Column Title</sp-table-head-cell>
167
59
  </sp-table-head>
168
60
  <sp-table-body style="height: 120px">
@@ -193,7 +85,6 @@ describe('Table', () => {
193
85
  </sp-table-row>
194
86
  </sp-table-body>
195
87
  </sp-table>
196
- <div>Selected:</div>
197
88
  `);
198
89
  const rowThreeCheckboxCell = el.querySelector('[value="row3"] sp-table-checkbox-cell');
199
90
  const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
@@ -202,6 +93,7 @@ describe('Table', () => {
202
93
  expect(el.selected).to.deep.equal(['row1', 'row2', 'row3']);
203
94
  expect(changeSpy.calledOnce).to.be.true;
204
95
  expect(changeSpy.calledWithExactly(el)).to.be.true;
96
+ changeSpy.resetHistory();
205
97
  tableHeadCheckboxCell.checkbox.click();
206
98
  expect(el.selected).to.deep.equal([
207
99
  'row1',
@@ -210,10 +102,10 @@ describe('Table', () => {
210
102
  'row4',
211
103
  'row5',
212
104
  ]);
213
- expect(changeSpy.callCount).to.equal(2);
105
+ expect(changeSpy.calledOnce).to.to.true;
214
106
  expect(changeSpy.calledWithExactly(el)).to.be.true;
215
107
  });
216
- it('accepts change events on TableHead `<sp-table-checkbox-cell>`', async () => {
108
+ it('accepts change events dispatched from TableHead `<sp-table-checkbox-cell>`', async () => {
217
109
  const changeSpy = spy();
218
110
  const el = await fixture(html `
219
111
  <sp-table
@@ -225,12 +117,8 @@ describe('Table', () => {
225
117
  }}
226
118
  >
227
119
  <sp-table-head>
228
- <sp-table-head-cell sortable sorted="desc">
229
- Column Title
230
- </sp-table-head-cell>
231
- <sp-table-head-cell sortable>
232
- Column Title
233
- </sp-table-head-cell>
120
+ <sp-table-head-cell>Column Title</sp-table-head-cell>
121
+ <sp-table-head-cell>Column Title</sp-table-head-cell>
234
122
  <sp-table-head-cell>Column Title</sp-table-head-cell>
235
123
  </sp-table-head>
236
124
  <sp-table-body style="height: 120px">
@@ -261,13 +149,17 @@ describe('Table', () => {
261
149
  </sp-table-row>
262
150
  </sp-table-body>
263
151
  </sp-table>
264
- <div>Selected:</div>
265
152
  `);
266
153
  const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
267
154
  expect(el.selected).to.deep.equal(['row1', 'row2']);
155
+ expect(tableHeadCheckboxCell.checkbox.indeterminate).to.be.true;
156
+ expect(tableHeadCheckboxCell.checkbox.checked).to.be.false;
268
157
  tableHeadCheckboxCell.checkbox.click();
158
+ await elementUpdated(el);
269
159
  expect(changeSpy.calledOnce).to.be.true;
270
160
  expect(changeSpy.calledWithExactly(el)).to.be.true;
161
+ expect(tableHeadCheckboxCell.checkbox.checked).to.be.true;
162
+ expect(tableHeadCheckboxCell.checkbox.indeterminate).to.be.false;
271
163
  expect(el.selected).to.deep.equal([
272
164
  'row1',
273
165
  'row2',
@@ -275,416 +167,78 @@ describe('Table', () => {
275
167
  'row4',
276
168
  'row5',
277
169
  ]);
278
- });
279
- xit('dispatches `rangeChanged` events on Virtualized Table', async () => {
280
- // console.log('This test');
281
- const virtualItems = makeItemsTwo(50);
282
- const el = await fixture(html `
283
- <sp-table
284
- selects="multiple"
285
- .selected=${['1', '47']}
286
- style="height: 120px"
287
- .items=${virtualItems}
288
- .renderItem=${renderItem}
289
- scroller?="true"
290
- >
291
- <sp-table-head>
292
- <sp-table-head-cell>Column Title</sp-table-head-cell>
293
- <sp-table-head-cell>Column Title</sp-table-head-cell>
294
- <sp-table-head-cell>Column Title</sp-table-head-cell>
295
- </sp-table-head>
296
- </sp-table>
297
- `);
298
- // console.log(1);
299
- await nextFrame();
300
- // console.log(2);
301
- await nextFrame();
302
- // console.log(3);
303
- await nextFrame();
304
- // debugger;
305
- expect(el.selected).to.deep.equal(['1', '47']);
306
- // console.log('4a');
307
- const rangeChanged = oneEvent(el, 'rangeChanged');
308
- // console.log(4);
309
- let tableRow = el.querySelector('sp-table-row');
310
- const initialValue = tableRow.value;
311
- el.scrollToIndex(47);
312
- // (el as unknown as { tableBody: TableBody }).tableBody.scrollTop = (el as unknown as { tableBody: TableBody }).tableBody.scrollHeight;
313
- // console.log('we await after this...');
314
- await nextFrame();
315
- await nextFrame();
316
- // debugger;
317
- await rangeChanged;
318
- tableRow = el.querySelector('sp-table-row');
319
- const newValue = tableRow.value;
320
- expect(newValue).to.not.equal(initialValue);
321
- });
322
- it('dispatches `visibilityChanged` events on Virtualized Table', async () => {
323
- // console.log('NOT this test');
324
- const visibilityChangedSpy = spy();
325
- const virtualItems = makeItemsTwo(50);
326
- const el = await fixture(html `
327
- <sp-table
328
- selects="multiple"
329
- .selected=${['1', '47']}
330
- style="height: 120px"
331
- .items=${virtualItems}
332
- .renderItem=${renderItem}
333
- scroller?="true"
334
- @visibilityChanged=${({ target, }) => {
335
- visibilityChangedSpy(target);
336
- }}
337
- >
338
- <sp-table-head>
339
- <sp-table-head-cell>Column Title</sp-table-head-cell>
340
- <sp-table-head-cell>Column Title</sp-table-head-cell>
341
- <sp-table-head-cell>Column Title</sp-table-head-cell>
342
- </sp-table-head>
343
- </sp-table>
344
- `);
345
- await nextFrame();
346
- await nextFrame();
347
- await nextFrame();
348
- expect(el.selected).to.deep.equal(['1', '47']);
349
- el.scrollToIndex(47);
350
- await nextFrame();
351
- await nextFrame();
352
- await elementUpdated(el);
353
- expect(visibilityChangedSpy.called).to.be.true;
354
- });
355
- it('selects all checkboxes in Virtualized Table when clicking the TableHeadCheckboxCell', async () => {
356
- const virtualItems = makeItemsTwo(50);
357
- const el = await fixture(html `
358
- <sp-table
359
- selects="multiple"
360
- .selected=${['1', '47']}
361
- style="height: 120px"
362
- .items=${virtualItems}
363
- .renderItem=${renderItem}
364
- scroller?="true"
365
- >
366
- <sp-table-head>
367
- <sp-table-head-cell sortable sortby="name" sorted="desc">
368
- Column Title
369
- </sp-table-head-cell>
370
- <sp-table-head-cell>Column Title</sp-table-head-cell>
371
- <sp-table-head-cell>Column Title</sp-table-head-cell>
372
- </sp-table-head>
373
- </sp-table>
374
- `);
375
- await elementUpdated(el);
376
- expect(el.selected).to.deep.equal(['1', '47']);
377
- const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
378
170
  tableHeadCheckboxCell.checkbox.click();
379
171
  await elementUpdated(el);
172
+ expect(el.selected).to.deep.equal([]);
173
+ expect(tableHeadCheckboxCell.checkbox.checked).to.be.false;
174
+ expect(tableHeadCheckboxCell.checkbox.indeterminate).to.be.false;
380
175
  });
381
- it('validates `value` property to make sure it matches the values in `selected`', async () => {
382
- const el = await fixture(virtualizedCustomValue(virtualizedCustomValue.args));
383
- expect(el.selected).to.deep.equal(['applied-47']);
176
+ it('selects items not initially visible in the <sp-table-body>', async () => {
177
+ const el = await fixture(elements());
178
+ el.selects = 'single';
179
+ el.selected = ['row5'];
180
+ await elementUpdated(el);
181
+ const rowFive = el.querySelector('.row5');
182
+ const rowFiveCheckbox = rowFive.querySelector('sp-table-checkbox-cell');
183
+ const checkboxes = el.querySelectorAll('sp-table-checkbox-cell:nth-child(n+1):nth-child(n+4)');
184
+ checkboxes.forEach((checkbox) => {
185
+ expect(checkbox.checkbox.checked).to.be.false;
186
+ });
187
+ el.scrollTop = el.scrollHeight;
188
+ await nextFrame();
189
+ expect(rowFiveCheckbox.checkbox.checked).to.be.true;
384
190
  });
385
191
  it('surfaces [selects="single"] selection', async () => {
386
192
  const el = await fixture(selectsSingle());
387
193
  expect(el.selected, "'Row 1 selected").to.deep.equal(['row1']);
388
194
  });
389
- it('surfaces [selects="single"] selection on Virtualized Table', async () => {
390
- // TODO fix the args
391
- const el = await fixture(virtualizedSingle(Object.assign(Object.assign({}, virtualizedSingle.args), { onChange: () => {
392
- return;
393
- } })));
394
- expect(el.selected, "'Row 1 selected").to.deep.equal(['0']);
395
- });
396
- it('surfaces [selects="multiple"] selection', async () => {
397
- const el = await fixture(selectsMultiple());
398
- expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal([
399
- 'row1',
400
- 'row2',
401
- ]);
402
- });
403
- it('surfaces [selects="multiple"] selection on Virtualized Table', async () => {
404
- const el = await fixture(virtualizedMultiple(virtualizedMultiple.args));
405
- expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal(['0', '48']);
406
- });
407
- it('selects a user-passed value for .selected array with no [selects="single"] specified, but does not allow interaction afterwards', async () => {
408
- const el = await fixture(html `
409
- <sp-table size="m" .selected=${['row3']}>
410
- <sp-table-head>
411
- <sp-table-head-cell sortable sorted="desc">
412
- Column Title
413
- </sp-table-head-cell>
414
- <sp-table-head-cell>Column Title</sp-table-head-cell>
415
- <sp-table-head-cell>Column Title</sp-table-head-cell>
416
- </sp-table-head>
417
- <sp-table-body style="height: 120px">
418
- <sp-table-row value="row1" class="row1">
419
- <sp-table-cell>Row Item Alpha</sp-table-cell>
420
- <sp-table-cell>Row Item Alpha</sp-table-cell>
421
- <sp-table-cell>Row Item Alpha</sp-table-cell>
422
- </sp-table-row>
423
- <sp-table-row value="row2" class="row2">
424
- <sp-table-cell>Row Item Bravo</sp-table-cell>
425
- <sp-table-cell>Row Item Bravo</sp-table-cell>
426
- <sp-table-cell>Row Item Bravo</sp-table-cell>
427
- </sp-table-row>
428
- <sp-table-row value="row3" class="row3">
429
- <sp-table-cell>Row Item Charlie</sp-table-cell>
430
- <sp-table-cell>Row Item Charlie</sp-table-cell>
431
- <sp-table-cell>Row Item Charlie</sp-table-cell>
432
- </sp-table-row>
433
- </sp-table-body>
434
- </sp-table>
435
- `);
436
- await elementUpdated(el);
437
- expect(el.selected.length).to.equal(1);
438
- const rowThree = el.querySelector('.row3');
439
- const rowTwo = el.querySelector('.row2');
440
- const rowTwoCheckbox = rowTwo.querySelector('sp-table-checkbox-cell');
441
- expect(rowThree.selected, 'third row selected').to.be.true;
442
- expect(rowTwo.selected, 'second row selected').to.be.false;
443
- expect(rowTwoCheckbox).to.be.null;
444
- });
445
- it('selects a user-passed value for .selected array with no [selects="single"] specified on Virtualized `<sp-table>`, but does not allow interaction afterwards', async () => {
446
- const virtualItems = makeItemsTwo(50);
447
- const el = await fixture(html `
448
- <sp-table
449
- .selected=${['0']}
450
- style="height: 120px"
451
- .items=${virtualItems}
452
- .renderItem=${renderItem}
453
- scroller?="true"
454
- >
455
- <sp-table-head>
456
- <sp-table-head-cell sortable sortby="name" sorted="desc">
457
- Column Title
458
- </sp-table-head-cell>
459
- <sp-table-head-cell>Column Title</sp-table-head-cell>
460
- <sp-table-head-cell>Column Title</sp-table-head-cell>
461
- </sp-table-head>
462
- </sp-table>
463
- `);
464
- expect(el.selected.length).to.equal(1);
465
- await oneEvent(el, 'rangeChanged');
466
- await elementUpdated(el);
467
- const rowOneItem = el.querySelector('[value="0"]');
468
- expect(rowOneItem.value).to.equal('0');
469
- });
470
- it('selects user-passed values for .selected array with no [selects="multiple"] specified, but does not allow interaction afterwards', async () => {
471
- const el = await fixture(html `
472
- <sp-table size="m" .selected=${['row2', 'row3']}>
473
- <sp-table-head>
474
- <sp-table-head-cell sortable sorted="desc">
475
- Column Title
476
- </sp-table-head-cell>
477
- <sp-table-head-cell>Column Title</sp-table-head-cell>
478
- <sp-table-head-cell>Column Title</sp-table-head-cell>
479
- </sp-table-head>
480
- <sp-table-body style="height: 120px">
481
- <sp-table-row value="row1" class="row1">
482
- <sp-table-cell>Row Item Alpha</sp-table-cell>
483
- <sp-table-cell>Row Item Alpha</sp-table-cell>
484
- <sp-table-cell>Row Item Alpha</sp-table-cell>
485
- </sp-table-row>
486
- <sp-table-row value="row2" class="row2">
487
- <sp-table-cell>Row Item Bravo</sp-table-cell>
488
- <sp-table-cell>Row Item Bravo</sp-table-cell>
489
- <sp-table-cell>Row Item Bravo</sp-table-cell>
490
- </sp-table-row>
491
- <sp-table-row value="row3" class="row3">
492
- <sp-table-cell>Row Item Charlie</sp-table-cell>
493
- <sp-table-cell>Row Item Charlie</sp-table-cell>
494
- <sp-table-cell>Row Item Charlie</sp-table-cell>
495
- </sp-table-row>
496
- </sp-table-body>
497
- </sp-table>
498
- `);
499
- await elementUpdated(el);
500
- expect(el.selected.length).to.equal(2);
501
- const rowThree = el.querySelector('.row3');
502
- const rowTwo = el.querySelector('.row2');
503
- const rowOne = el.querySelector('.row1');
504
- const rowOneCheckbox = rowOne.querySelector('sp-table-checkbox-cell');
505
- expect(rowThree.selected, 'third row selected').to.be.true;
506
- expect(rowTwo.selected, 'second row selected').to.be.true;
507
- expect(rowOne.selected, 'first row selected').to.be.false;
508
- expect(rowOneCheckbox).to.be.null;
509
- });
510
- it('selects user-passed values for .selected array with no [selects="multiple"] specified on Virtualized `<sp-table>`, but does not allow interaction afterwards', async () => {
511
- const virtualItems = makeItemsTwo(5);
512
- const el = await fixture(html `
513
- <sp-table
514
- .selected=${['0', '4']}
515
- style="height: 120px"
516
- .items=${virtualItems}
517
- .renderItem=${renderItem}
518
- scroller?="true"
519
- >
520
- <sp-table-head>
521
- <sp-table-head-cell sortable sortby="name" sorted="desc">
522
- Column Title
523
- </sp-table-head-cell>
524
- <sp-table-head-cell>Column Title</sp-table-head-cell>
525
- <sp-table-head-cell>Column Title</sp-table-head-cell>
526
- </sp-table-head>
527
- </sp-table>
528
- `);
529
- await oneEvent(el, 'rangeChanged');
530
- await elementUpdated(el);
531
- expect(el.selected.length).to.equal(2);
532
- const rowOneItem = el.querySelector('[value="0"]');
533
- const rowFiveItem = el.querySelector('[value="4"]');
534
- expect(rowOneItem.value).to.equal('0');
535
- expect(rowFiveItem.value).to.equal('4');
536
- });
537
195
  it('selects via `click` while [selects="single"]', async () => {
538
- const el = await fixture(html `
539
- <sp-table size="m" selects="single">
540
- <sp-table-head>
541
- <sp-table-head-cell sortable sorted="desc">
542
- Column Title
543
- </sp-table-head-cell>
544
- <sp-table-head-cell sortable>
545
- Column Title
546
- </sp-table-head-cell>
547
- <sp-table-head-cell>Column Title</sp-table-head-cell>
548
- </sp-table-head>
549
- <sp-table-body style="height: 120px">
550
- <sp-table-row value="row1">
551
- <sp-table-cell>Row Item Alpha</sp-table-cell>
552
- <sp-table-cell>Row Item Alpha</sp-table-cell>
553
- <sp-table-cell>Row Item Alpha</sp-table-cell>
554
- </sp-table-row>
555
- <sp-table-row value="row2" class="row2">
556
- <sp-table-cell>Row Item Bravo</sp-table-cell>
557
- <sp-table-cell>Row Item Bravo</sp-table-cell>
558
- <sp-table-cell>Row Item Bravo</sp-table-cell>
559
- </sp-table-row>
560
- <sp-table-row value="row3" class="row3">
561
- <sp-table-cell>Row Item Charlie</sp-table-cell>
562
- <sp-table-cell>Row Item Charlie</sp-table-cell>
563
- <sp-table-cell>Row Item Charlie</sp-table-cell>
564
- </sp-table-row>
565
- <sp-table-row value="row4">
566
- <sp-table-cell>Row Item Delta</sp-table-cell>
567
- <sp-table-cell>Row Item Delta</sp-table-cell>
568
- <sp-table-cell>Row Item Delta</sp-table-cell>
569
- </sp-table-row>
570
- <sp-table-row value="row5">
571
- <sp-table-cell>Row Item Echo</sp-table-cell>
572
- <sp-table-cell>Row Item Echo</sp-table-cell>
573
- <sp-table-cell>Row Item Echo</sp-table-cell>
574
- </sp-table-row>
575
- </sp-table-body>
576
- </sp-table>
577
- `);
196
+ const el = await fixture(selectsSingle());
578
197
  const rowTwo = el.querySelector('.row2');
579
198
  const rowTwoCheckbox = rowTwo.querySelector('sp-table-checkbox-cell');
580
- await elementUpdated(el);
581
- expect(el.selected.length).to.equal(0);
199
+ const rowThree = el.querySelector('.row3');
200
+ const rowThreeCheckbox = rowThree.querySelector('sp-table-checkbox-cell');
582
201
  rowTwoCheckbox.checkbox.click();
583
202
  await elementUpdated(el);
584
203
  expect(rowTwoCheckbox.checked).to.be.true;
585
204
  expect(el.selected).to.deep.equal(['row2']);
205
+ rowThreeCheckbox.checkbox.click();
206
+ await elementUpdated(el);
207
+ await elementUpdated(rowTwoCheckbox); // webkit needs this
208
+ expect(rowThreeCheckbox.checkbox.checked).to.be.true;
209
+ expect(rowTwoCheckbox.checkbox.checked).to.be.false;
210
+ expect(el.selected.length).to.equal(1);
586
211
  });
587
- it('selects via `click` while [selects="multiple"] selection', async () => {
588
- const el = await fixture(html `
589
- <sp-table size="m" selects="multiple">
590
- <sp-table-head>
591
- <sp-table-head-cell sortable sorted="desc">
592
- Column Title
593
- </sp-table-head-cell>
594
- <sp-table-head-cell sortable>
595
- Column Title
596
- </sp-table-head-cell>
597
- <sp-table-head-cell>Column Title</sp-table-head-cell>
598
- </sp-table-head>
599
- <sp-table-body style="height: 120px">
600
- <sp-table-row value="row1">
601
- <sp-table-cell>Row Item Alpha</sp-table-cell>
602
- <sp-table-cell>Row Item Alpha</sp-table-cell>
603
- <sp-table-cell>Row Item Alpha</sp-table-cell>
604
- </sp-table-row>
605
- <sp-table-row value="row2" class="row2">
606
- <sp-table-cell>Row Item Bravo</sp-table-cell>
607
- <sp-table-cell>Row Item Bravo</sp-table-cell>
608
- <sp-table-cell>Row Item Bravo</sp-table-cell>
609
- </sp-table-row>
610
- <sp-table-row value="row3" class="row3">
611
- <sp-table-cell>Row Item Charlie</sp-table-cell>
612
- <sp-table-cell>Row Item Charlie</sp-table-cell>
613
- <sp-table-cell>Row Item Charlie</sp-table-cell>
614
- </sp-table-row>
615
- <sp-table-row value="row4">
616
- <sp-table-cell>Row Item Delta</sp-table-cell>
617
- <sp-table-cell>Row Item Delta</sp-table-cell>
618
- <sp-table-cell>Row Item Delta</sp-table-cell>
619
- </sp-table-row>
620
- <sp-table-row value="row5">
621
- <sp-table-cell>Row Item Echo</sp-table-cell>
622
- <sp-table-cell>Row Item Echo</sp-table-cell>
623
- <sp-table-cell>Row Item Echo</sp-table-cell>
624
- </sp-table-row>
625
- </sp-table-body>
626
- </sp-table>
627
- `);
628
- const rowTwo = el.querySelector('.row2');
212
+ it('surfaces [selects="multiple"] selection', async () => {
213
+ const el = await fixture(selectsMultiple());
214
+ expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal([
215
+ 'row1',
216
+ 'row2',
217
+ ]);
218
+ });
219
+ it('selects via `click` while [selects="multiple"] selection', async () => {
220
+ const el = await fixture(selectsMultiple());
221
+ const rowFour = el.querySelector('.row4');
629
222
  const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
630
- const rowTwoCheckbox = rowTwo.querySelector('sp-table-checkbox-cell');
223
+ const rowFourCheckbox = rowFour.querySelector('sp-table-checkbox-cell');
631
224
  await elementUpdated(el);
632
- expect(el.selected.length).to.equal(0);
633
- rowTwoCheckbox.checkbox.click();
225
+ expect(el.selected.length).to.equal(2);
226
+ rowFourCheckbox.checkbox.click();
634
227
  await elementUpdated(el);
635
- expect(rowTwoCheckbox.checked).to.be.true;
636
- expect(el.selected).to.deep.equal(['row2']);
228
+ expect(rowFourCheckbox.checked).to.be.true;
229
+ expect(el.selected).to.deep.equal(['row1', 'row2', 'row4']);
637
230
  tableHeadCheckboxCell.checkbox.click();
638
231
  await elementUpdated(el);
639
232
  expect(el.selected).to.deep.equal([
640
- 'row2',
641
233
  'row1',
642
- 'row3',
234
+ 'row2',
643
235
  'row4',
236
+ 'row3',
644
237
  'row5',
645
238
  ]);
646
239
  });
647
240
  it('allows [selects] to be changed by the application', async () => {
648
- const el = await fixture(html `
649
- <sp-table size="m">
650
- <sp-table-head>
651
- <sp-table-head-cell sortable sorted="desc">
652
- Column Title
653
- </sp-table-head-cell>
654
- <sp-table-head-cell sortable>
655
- Column Title
656
- </sp-table-head-cell>
657
- <sp-table-head-cell>Column Title</sp-table-head-cell>
658
- </sp-table-head>
659
- <sp-table-body style="height: 120px">
660
- <sp-table-row value="row1" class="row1">
661
- <sp-table-cell>Row Item Alpha</sp-table-cell>
662
- <sp-table-cell>Row Item Alpha</sp-table-cell>
663
- <sp-table-cell>Row Item Alpha</sp-table-cell>
664
- </sp-table-row>
665
- <sp-table-row value="row2" class="row2">
666
- <sp-table-cell>Row Item Bravo</sp-table-cell>
667
- <sp-table-cell>Row Item Bravo</sp-table-cell>
668
- <sp-table-cell>Row Item Bravo</sp-table-cell>
669
- </sp-table-row>
670
- <sp-table-row value="row3">
671
- <sp-table-cell>Row Item Charlie</sp-table-cell>
672
- <sp-table-cell>Row Item Charlie</sp-table-cell>
673
- <sp-table-cell>Row Item Charlie</sp-table-cell>
674
- </sp-table-row>
675
- <sp-table-row value="row4">
676
- <sp-table-cell>Row Item Delta</sp-table-cell>
677
- <sp-table-cell>Row Item Delta</sp-table-cell>
678
- <sp-table-cell>Row Item Delta</sp-table-cell>
679
- </sp-table-row>
680
- <sp-table-row value="row5">
681
- <sp-table-cell>Row Item Echo</sp-table-cell>
682
- <sp-table-cell>Row Item Echo</sp-table-cell>
683
- <sp-table-cell>Row Item Echo</sp-table-cell>
684
- </sp-table-row>
685
- </sp-table-body>
686
- </sp-table>
687
- `);
241
+ const el = await fixture(elements());
688
242
  expect(el.selects).to.be.undefined;
689
243
  el.selects = 'single';
690
244
  await elementUpdated(el);
@@ -713,158 +267,30 @@ describe('Table', () => {
713
267
  expect(rowTwoCheckboxCell.checkbox.checked).to.be.true;
714
268
  expect(tableHeadCheckboxCell.indeterminate).to.be.true;
715
269
  });
270
+ it('selects a user-passed value for .selected array with no [selects] specified, but does not allow interaction afterwards', async () => {
271
+ const el = await fixture(noSelectsSpecified());
272
+ await elementUpdated(el);
273
+ expect(el.selected.length).to.equal(2);
274
+ const rows = el.querySelectorAll('sp-table-row');
275
+ rows.forEach((row) => {
276
+ const checkbox = row.querySelector('sp-table-checkbox-cell');
277
+ expect(checkbox).to.be.null;
278
+ });
279
+ });
716
280
  it('allows .selected values to be changed by the application when [selects="multiple"]', async () => {
717
- const el = await fixture(html `
718
- <sp-table size="m" selects="multiple" .selected=${['row1']}>
719
- <sp-table-head>
720
- <sp-table-head-cell sortable sorted="desc">
721
- Column Title
722
- </sp-table-head-cell>
723
- <sp-table-head-cell sortable>
724
- Column Title
725
- </sp-table-head-cell>
726
- <sp-table-head-cell>Column Title</sp-table-head-cell>
727
- </sp-table-head>
728
- <sp-table-body style="height: 120px">
729
- <sp-table-row value="row1" class="row1">
730
- <sp-table-cell>Row Item Alpha</sp-table-cell>
731
- <sp-table-cell>Row Item Alpha</sp-table-cell>
732
- <sp-table-cell>Row Item Alpha</sp-table-cell>
733
- </sp-table-row>
734
- <sp-table-row value="row2" class="row2">
735
- <sp-table-cell>Row Item Bravo</sp-table-cell>
736
- <sp-table-cell>Row Item Bravo</sp-table-cell>
737
- <sp-table-cell>Row Item Bravo</sp-table-cell>
738
- </sp-table-row>
739
- <sp-table-row value="row3">
740
- <sp-table-cell>Row Item Charlie</sp-table-cell>
741
- <sp-table-cell>Row Item Charlie</sp-table-cell>
742
- <sp-table-cell>Row Item Charlie</sp-table-cell>
743
- </sp-table-row>
744
- <sp-table-row value="row4">
745
- <sp-table-cell>Row Item Delta</sp-table-cell>
746
- <sp-table-cell>Row Item Delta</sp-table-cell>
747
- <sp-table-cell>Row Item Delta</sp-table-cell>
748
- </sp-table-row>
749
- <sp-table-row value="row5">
750
- <sp-table-cell>Row Item Echo</sp-table-cell>
751
- <sp-table-cell>Row Item Echo</sp-table-cell>
752
- <sp-table-cell>Row Item Echo</sp-table-cell>
753
- </sp-table-row>
754
- </sp-table-body>
755
- </sp-table>
756
- `);
281
+ const el = await fixture(selectsMultiple());
757
282
  await elementUpdated(el);
758
- const rowTwoCheckboxCell = el.querySelector('.row2 sp-table-checkbox-cell');
283
+ const rowThreeCheckboxCell = el.querySelector('.row3 sp-table-checkbox-cell');
759
284
  const rowOneCheckboxCell = el.querySelector('.row1 sp-table-checkbox-cell');
760
- expect(el.selected).to.deep.equal(['row1']);
761
- expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
762
- expect(rowTwoCheckboxCell.checkbox.checked).to.be.false;
763
- el.selected = ['row1', 'row2'];
764
- await elementUpdated(el);
765
- await elementUpdated(rowTwoCheckboxCell);
766
285
  expect(el.selected).to.deep.equal(['row1', 'row2']);
767
286
  expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
768
- expect(rowTwoCheckboxCell.checkbox.checked).to.be.true;
769
- });
770
- it('ensures that virtualized elements with values in .selected are visually selected when brought into view using scrollTop', async () => {
771
- const virtualItems = makeItemsTwo(50);
772
- const el = await fixture(html `
773
- <sp-table
774
- selects="multiple"
775
- .selected=${['1', '47']}
776
- style="height: 120px"
777
- .items=${virtualItems}
778
- .renderItem=${renderItem}
779
- scroller?="true"
780
- >
781
- <sp-table-head>
782
- <sp-table-head-cell sortable sortby="name" sorted="desc">
783
- Column Title
784
- </sp-table-head-cell>
785
- <sp-table-head-cell>Column Title</sp-table-head-cell>
786
- <sp-table-head-cell>Column Title</sp-table-head-cell>
787
- </sp-table-head>
788
- </sp-table>
789
- `);
790
- await oneEvent(el, 'rangeChanged');
791
- await elementUpdated(el);
792
- const rowOne = el.querySelector('[value="1"]');
793
- const rowOneCheckboxCell = rowOne.querySelector('sp-table-checkbox-cell');
794
- expect(el.selected).to.deep.equal(['1', '47']);
795
- expect(rowOne.selected).to.be.true;
796
- expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
797
- el.scrollTop = el.scrollHeight;
798
- await nextFrame();
799
- await nextFrame();
287
+ expect(rowThreeCheckboxCell.checkbox.checked).to.be.false;
288
+ el.selected = ['row1', 'row3'];
800
289
  await elementUpdated(el);
801
- const unseenRow = el.querySelector('[value="47"]');
802
- const unseenRowCheckboxCell = unseenRow.querySelector('sp-table-checkbox-cell');
803
- expect(unseenRow.selected).to.be.true;
804
- expect(unseenRowCheckboxCell.checkbox.checked).to.be.true;
805
- });
806
- it('ensures that virtualized elements with values in .selected are visually selected when brought into view using scrollToIndex', async () => {
807
- const virtualItems = makeItemsTwo(50);
808
- const el = await fixture(html `
809
- <sp-table
810
- selects="multiple"
811
- .selected=${['1', '47']}
812
- style="height: 120px"
813
- .items=${virtualItems}
814
- .renderItem=${renderItem}
815
- scroller?="true"
816
- >
817
- <sp-table-head>
818
- <sp-table-head-cell sortable sortby="name" sorted="desc">
819
- Column Title
820
- </sp-table-head-cell>
821
- <sp-table-head-cell>Column Title</sp-table-head-cell>
822
- <sp-table-head-cell>Column Title</sp-table-head-cell>
823
- </sp-table-head>
824
- </sp-table>
825
- `);
826
- await elementUpdated(el);
827
- await oneEvent(el, 'rangeChanged');
828
- await elementUpdated(el);
829
- const rowOne = el.querySelector('[value="1"]');
830
- const rowOneCheckboxCell = rowOne.querySelector('sp-table-checkbox-cell');
831
- expect(el.selected).to.deep.equal(['1', '47']);
832
- expect(rowOne.selected).to.be.true;
290
+ await elementUpdated(rowThreeCheckboxCell);
291
+ expect(el.selected).to.deep.equal(['row1', 'row3']);
833
292
  expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
834
- el.scrollToIndex(47);
835
- await nextFrame();
836
- await nextFrame();
837
- await elementUpdated(el);
838
- const unseenRow = el.querySelector('[value="47"]');
839
- const unseenRowCheckboxCell = unseenRow.querySelector('sp-table-checkbox-cell');
840
- expect(unseenRow.selected).to.be.true;
841
- expect(unseenRowCheckboxCell.checkbox.checked).to.be.true;
842
- });
843
- it('does not set `allSelected` to true by default on Virtualised `<sp-table>`', async () => {
844
- const virtualItems = makeItemsTwo(50);
845
- const el = await fixture(html `
846
- <sp-table
847
- selects="multiple"
848
- style="height: 120px"
849
- .selected=${['1', '47']}
850
- .items=${virtualItems}
851
- .renderItem=${renderItem}
852
- scroller?="true"
853
- >
854
- <sp-table-head>
855
- <sp-table-head-cell sortable sortby="name" sorted="desc">
856
- Column Title
857
- </sp-table-head-cell>
858
- <sp-table-head-cell>Column Title</sp-table-head-cell>
859
- <sp-table-head-cell>Column Title</sp-table-head-cell>
860
- </sp-table-head>
861
- </sp-table>
862
- `);
863
- await elementUpdated(el);
864
- const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
865
- expect(el.selected).to.deep.equal(['1', '47']);
866
- expect(tableHeadCheckboxCell.checkbox.checked).to.be.false;
867
- expect(tableHeadCheckboxCell.checkbox.indeterminate).to.be.true;
293
+ expect(rowThreeCheckboxCell.checkbox.checked).to.be.true;
868
294
  });
869
295
  });
870
296
  //# sourceMappingURL=table.test.js.map