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

package/test/table.test.js

@@ -0,0 +1,870 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { elementUpdated, expect, fixture, html, nextFrame, oneEvent, } from '@open-wc/testing';
+import '../sp-table.js';
+import '../sp-table-head.js';
+import '../sp-table-head-cell.js';
+import '../sp-table-body.js';
+import '../sp-table-row.js';
+import '../sp-table-cell.js';
+import { elements, selectsMultiple, selectsSingle, } from '../stories/table-elements.stories.js';
+import { virtualized, virtualizedCustomValue, virtualizedMultiple, virtualizedSingle, } from '../stories/table-virtualized.stories.js';
+import { makeItemsTwo } from '../stories/index.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { spy } from 'sinon';
+let globalErrorHandler = undefined;
+before(function () {
+    // Save Mocha's handler.
+    Mocha.process.removeListener('uncaughtException');
+    globalErrorHandler = window.onerror;
+    addEventListener('error', (error) => {
+        var _a, _b;
+        if ((_b = (_a = error.message) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.call(_a, /ResizeObserver loop limit exceeded/)) {
+            return;
+        }
+        else {
+            globalErrorHandler === null || globalErrorHandler === void 0 ? void 0 : globalErrorHandler(error);
+        }
+    });
+});
+after(function () {
+    window.onerror = globalErrorHandler;
+});
+const renderItem = (item, index) => {
+    return html `
+        <sp-table-cell>Rowsa Item Alpha ${item.name}</sp-table-cell>
+        <sp-table-cell>Row Item Alpha ${item.date}</sp-table-cell>
+        <sp-table-cell>Row Item Alpha ${index}</sp-table-cell>
+    `;
+};
+describe('Table', () => {
+    it('loads default table accessibly', async () => {
+        const el = await fixture(elements());
+        await expect(el).to.be.accessible();
+    });
+    it('loads virtualized table accessibly', async () => {
+        const el = await fixture(virtualized());
+        await expect(el).to.be.accessible();
+    });
+    it('creates tab stops for `<sp-table-head-cell sortable>`', async () => {
+        var _a, _b, _c;
+        const input = document.createElement('input');
+        const test = await fixture(virtualized());
+        const el = (_a = test.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('sp-table');
+        test.insertAdjacentElement('beforebegin', input);
+        input.focus();
+        expect(input === document.activeElement).to.be.true;
+        const firstSortable = el.querySelector('[sortable]:nth-of-type(1)');
+        const secondSortable = el.querySelector('[sortable]:nth-of-type(2)');
+        await sendKeys({
+            press: 'Tab',
+        });
+        expect(firstSortable === ((_b = test.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)).to.be.true;
+        await sendKeys({
+            press: 'Tab',
+        });
+        expect(secondSortable === ((_c = test.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement)).to.be.true;
+    });
+    it('does not tab stop on non-sortable `<sp-table-head-cell>`s', async () => {
+        var _a, _b, _c, _d;
+        const input = document.createElement('input');
+        const test = await fixture(virtualized());
+        const el = (_a = test.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('sp-table');
+        test.insertAdjacentElement('beforebegin', input);
+        input.focus();
+        expect(input === document.activeElement).to.be.true;
+        const firstHeadCell = el.querySelector('sp-table-head-cell:nth-of-type(1)');
+        const secondHeadCell = el.querySelector('sp-table-head-cell:nth-of-type(2)');
+        const thirdHeadCell = el.querySelector('sp-table-head-cell:nth-of-type(3)');
+        await sendKeys({
+            press: 'Tab',
+        });
+        expect(firstHeadCell === ((_b = test.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)).to.be.true;
+        await sendKeys({
+            press: 'Tab',
+        });
+        expect(secondHeadCell === ((_c = test.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement)).to.be.true;
+        await sendKeys({
+            press: 'Tab',
+        });
+        expect(thirdHeadCell === ((_d = test.shadowRoot) === null || _d === void 0 ? void 0 : _d.activeElement)).to.be.false;
+        // Passes on firefox only, not sure why... Scrollable content should
+        // recieve tabstop. TableBody should be scrollable.
+        // expect(tableBody === test.shadowRoot?.activeElement).to.be.true;
+    });
+    it('can be focus()ed from the `<sp-table>`', async () => {
+        var _a, _b;
+        const input = document.createElement('input');
+        const test = await fixture(virtualized());
+        const el = (_a = test.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('sp-table');
+        test.insertAdjacentElement('beforebegin', input);
+        // we should be able to do el.focus()
+        el.focus();
+        // should focus the first sortable descendant
+        const firstSortable = el.querySelector('[sortable]:nth-of-type(1)');
+        expect(firstSortable === ((_b = test.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)).to.be.true;
+    });
+    it('dispatches `sorted` events', async () => {
+        const el = await fixture(html `
+            <sp-table size="m">
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        const tableHeadCell1 = el.querySelector('[sortable][sorted]');
+        const tableHeadCell2 = el.querySelector('[sortable]:not([sorted])');
+        tableHeadCell2.click();
+        await nextFrame();
+        expect(tableHeadCell1.hasAttribute('sorted')).to.be.false;
+        expect(tableHeadCell2.hasAttribute('sorted')).to.be.true;
+        expect(tableHeadCell2.getAttribute('sorted')).to.equal('asc');
+        tableHeadCell2.click();
+        await nextFrame();
+        expect(tableHeadCell1.hasAttribute('sorted')).to.be.false;
+        expect(tableHeadCell2.hasAttribute('sorted')).to.be.true;
+        expect(tableHeadCell2.getAttribute('sorted')).to.equal('desc');
+        tableHeadCell1.click();
+        await nextFrame();
+        expect(tableHeadCell2.hasAttribute('sorted')).to.be.false;
+        expect(tableHeadCell1.hasAttribute('sorted')).to.be.true;
+        expect(tableHeadCell1.getAttribute('sorted')).to.equal('asc');
+    });
+    it('dispatches `change` events', async () => {
+        const changeSpy = spy();
+        const el = await fixture(html `
+            <sp-table
+                size="m"
+                selects="multiple"
+                .selected=${['row1', 'row2']}
+                @change=${({ target }) => {
+            changeSpy(target);
+        }}
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row4">
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row5">
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+            <div>Selected:</div>
+        `);
+        const rowThreeCheckboxCell = el.querySelector('[value="row3"] sp-table-checkbox-cell');
+        const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
+        expect(el.selected).to.deep.equal(['row1', 'row2']);
+        rowThreeCheckboxCell.checkbox.click();
+        expect(el.selected).to.deep.equal(['row1', 'row2', 'row3']);
+        expect(changeSpy.calledOnce).to.be.true;
+        expect(changeSpy.calledWithExactly(el)).to.be.true;
+        tableHeadCheckboxCell.checkbox.click();
+        expect(el.selected).to.deep.equal([
+            'row1',
+            'row2',
+            'row3',
+            'row4',
+            'row5',
+        ]);
+        expect(changeSpy.callCount).to.equal(2);
+        expect(changeSpy.calledWithExactly(el)).to.be.true;
+    });
+    it('accepts change events on TableHead `<sp-table-checkbox-cell>`', async () => {
+        const changeSpy = spy();
+        const el = await fixture(html `
+            <sp-table
+                size="m"
+                selects="multiple"
+                .selected=${['row1', 'row2']}
+                @change=${({ target }) => {
+            changeSpy(target);
+        }}
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row4">
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row5">
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+            <div>Selected:</div>
+        `);
+        const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
+        expect(el.selected).to.deep.equal(['row1', 'row2']);
+        tableHeadCheckboxCell.checkbox.click();
+        expect(changeSpy.calledOnce).to.be.true;
+        expect(changeSpy.calledWithExactly(el)).to.be.true;
+        expect(el.selected).to.deep.equal([
+            'row1',
+            'row2',
+            'row3',
+            'row4',
+            'row5',
+        ]);
+    });
+    xit('dispatches `rangeChanged` events on Virtualized Table', async () => {
+        // console.log('This test');
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                selects="multiple"
+                .selected=${['1', '47']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        // console.log(1);
+        await nextFrame();
+        // console.log(2);
+        await nextFrame();
+        // console.log(3);
+        await nextFrame();
+        // debugger;
+        expect(el.selected).to.deep.equal(['1', '47']);
+        // console.log('4a');
+        const rangeChanged = oneEvent(el, 'rangeChanged');
+        // console.log(4);
+        let tableRow = el.querySelector('sp-table-row');
+        const initialValue = tableRow.value;
+        el.scrollToIndex(47);
+        // (el as unknown as { tableBody: TableBody }).tableBody.scrollTop = (el as unknown as { tableBody: TableBody }).tableBody.scrollHeight;
+        // console.log('we await after this...');
+        await nextFrame();
+        await nextFrame();
+        // debugger;
+        await rangeChanged;
+        tableRow = el.querySelector('sp-table-row');
+        const newValue = tableRow.value;
+        expect(newValue).to.not.equal(initialValue);
+    });
+    it('dispatches `visibilityChanged` events on Virtualized Table', async () => {
+        // console.log('NOT this test');
+        const visibilityChangedSpy = spy();
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                selects="multiple"
+                .selected=${['1', '47']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+                @visibilityChanged=${({ target, }) => {
+            visibilityChangedSpy(target);
+        }}
+            >
+                <sp-table-head>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        expect(el.selected).to.deep.equal(['1', '47']);
+        el.scrollToIndex(47);
+        await nextFrame();
+        await nextFrame();
+        await elementUpdated(el);
+        expect(visibilityChangedSpy.called).to.be.true;
+    });
+    it('selects all checkboxes in Virtualized Table when clicking the TableHeadCheckboxCell', async () => {
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                selects="multiple"
+                .selected=${['1', '47']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sortby="name" sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        await elementUpdated(el);
+        expect(el.selected).to.deep.equal(['1', '47']);
+        const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
+        tableHeadCheckboxCell.checkbox.click();
+        await elementUpdated(el);
+    });
+    it('validates `value` property to make sure it matches the values in `selected`', async () => {
+        const el = await fixture(virtualizedCustomValue(virtualizedCustomValue.args));
+        expect(el.selected).to.deep.equal(['applied-47']);
+    });
+    it('surfaces [selects="single"] selection', async () => {
+        const el = await fixture(selectsSingle());
+        expect(el.selected, "'Row 1 selected").to.deep.equal(['row1']);
+    });
+    it('surfaces [selects="single"] selection on Virtualized Table', async () => {
+        // TODO fix the args
+        const el = await fixture(virtualizedSingle(Object.assign(Object.assign({}, virtualizedSingle.args), { onChange: () => {
+                return;
+            } })));
+        expect(el.selected, "'Row 1 selected").to.deep.equal(['0']);
+    });
+    it('surfaces [selects="multiple"] selection', async () => {
+        const el = await fixture(selectsMultiple());
+        expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal([
+            'row1',
+            'row2',
+        ]);
+    });
+    it('surfaces [selects="multiple"] selection on Virtualized Table', async () => {
+        const el = await fixture(virtualizedMultiple(virtualizedMultiple.args));
+        expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal(['0', '48']);
+    });
+    it('selects a user-passed value for .selected array with no [selects="single"] specified, but does not allow interaction afterwards', async () => {
+        const el = await fixture(html `
+            <sp-table size="m" .selected=${['row3']}>
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1" class="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2" class="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3" class="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+        `);
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(1);
+        const rowThree = el.querySelector('.row3');
+        const rowTwo = el.querySelector('.row2');
+        const rowTwoCheckbox = rowTwo.querySelector('sp-table-checkbox-cell');
+        expect(rowThree.selected, 'third row selected').to.be.true;
+        expect(rowTwo.selected, 'second row selected').to.be.false;
+        expect(rowTwoCheckbox).to.be.null;
+    });
+    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 () => {
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                .selected=${['0']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sortby="name" sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        expect(el.selected.length).to.equal(1);
+        await oneEvent(el, 'rangeChanged');
+        await elementUpdated(el);
+        const rowOneItem = el.querySelector('[value="0"]');
+        expect(rowOneItem.value).to.equal('0');
+    });
+    it('selects user-passed values for .selected array with no [selects="multiple"] specified, but does not allow interaction afterwards', async () => {
+        const el = await fixture(html `
+            <sp-table size="m" .selected=${['row2', 'row3']}>
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1" class="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2" class="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3" class="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+        `);
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(2);
+        const rowThree = el.querySelector('.row3');
+        const rowTwo = el.querySelector('.row2');
+        const rowOne = el.querySelector('.row1');
+        const rowOneCheckbox = rowOne.querySelector('sp-table-checkbox-cell');
+        expect(rowThree.selected, 'third row selected').to.be.true;
+        expect(rowTwo.selected, 'second row selected').to.be.true;
+        expect(rowOne.selected, 'first row selected').to.be.false;
+        expect(rowOneCheckbox).to.be.null;
+    });
+    it('selects user-passed values for .selected array with no [selects="multiple"] specified on Virtualized `<sp-table>`, but does not allow interaction afterwards', async () => {
+        const virtualItems = makeItemsTwo(5);
+        const el = await fixture(html `
+            <sp-table
+                .selected=${['0', '4']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sortby="name" sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        await oneEvent(el, 'rangeChanged');
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(2);
+        const rowOneItem = el.querySelector('[value="0"]');
+        const rowFiveItem = el.querySelector('[value="4"]');
+        expect(rowOneItem.value).to.equal('0');
+        expect(rowFiveItem.value).to.equal('4');
+    });
+    it('selects via `click` while [selects="single"]', async () => {
+        const el = await fixture(html `
+            <sp-table size="m" selects="single">
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2" class="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3" class="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row4">
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row5">
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+        `);
+        const rowTwo = el.querySelector('.row2');
+        const rowTwoCheckbox = rowTwo.querySelector('sp-table-checkbox-cell');
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(0);
+        rowTwoCheckbox.checkbox.click();
+        await elementUpdated(el);
+        expect(rowTwoCheckbox.checked).to.be.true;
+        expect(el.selected).to.deep.equal(['row2']);
+    });
+    it('selects via `click` while  [selects="multiple"] selection', async () => {
+        const el = await fixture(html `
+            <sp-table size="m" selects="multiple">
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2" class="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3" class="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row4">
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row5">
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+        `);
+        const rowTwo = el.querySelector('.row2');
+        const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
+        const rowTwoCheckbox = rowTwo.querySelector('sp-table-checkbox-cell');
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(0);
+        rowTwoCheckbox.checkbox.click();
+        await elementUpdated(el);
+        expect(rowTwoCheckbox.checked).to.be.true;
+        expect(el.selected).to.deep.equal(['row2']);
+        tableHeadCheckboxCell.checkbox.click();
+        await elementUpdated(el);
+        expect(el.selected).to.deep.equal([
+            'row2',
+            'row1',
+            'row3',
+            'row4',
+            'row5',
+        ]);
+    });
+    it('allows [selects] to be changed by the application', async () => {
+        const el = await fixture(html `
+            <sp-table size="m">
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1" class="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2" class="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row4">
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row5">
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+        `);
+        expect(el.selects).to.be.undefined;
+        el.selects = 'single';
+        await elementUpdated(el);
+        expect(el.selects).to.equal('single');
+        await elementUpdated(el);
+        await nextFrame();
+        await nextFrame();
+        const rowTwoCheckboxCell = el.querySelector('.row2 sp-table-checkbox-cell');
+        const rowOneCheckboxCell = el.querySelector('.row1 sp-table-checkbox-cell');
+        const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
+        expect(tableHeadCheckboxCell.selectsSingle).to.be.true;
+        rowOneCheckboxCell.checkbox.click();
+        await elementUpdated(el);
+        expect(el.selected).to.deep.equal(['row1']);
+        expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
+        expect(rowTwoCheckboxCell.checkbox.checked).to.be.false;
+        el.selects = 'multiple';
+        await elementUpdated(el);
+        expect(el.selects).to.equal('multiple');
+        expect(tableHeadCheckboxCell.indeterminate).to.be.true;
+        rowTwoCheckboxCell.checkbox.click();
+        await elementUpdated(el);
+        await elementUpdated(rowTwoCheckboxCell);
+        expect(el.selected).to.deep.equal(['row1', 'row2']);
+        expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
+        expect(rowTwoCheckboxCell.checkbox.checked).to.be.true;
+        expect(tableHeadCheckboxCell.indeterminate).to.be.true;
+    });
+    it('allows .selected values to be changed by the application when [selects="multiple"]', async () => {
+        const el = await fixture(html `
+            <sp-table size="m" selects="multiple" .selected=${['row1']}>
+                <sp-table-head>
+                    <sp-table-head-cell sortable sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell sortable>
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body style="height: 120px">
+                    <sp-table-row value="row1" class="row1">
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                        <sp-table-cell>Row Item Alpha</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row2" class="row2">
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                        <sp-table-cell>Row Item Bravo</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row3">
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                        <sp-table-cell>Row Item Charlie</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row4">
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                        <sp-table-cell>Row Item Delta</sp-table-cell>
+                    </sp-table-row>
+                    <sp-table-row value="row5">
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                        <sp-table-cell>Row Item Echo</sp-table-cell>
+                    </sp-table-row>
+                </sp-table-body>
+            </sp-table>
+        `);
+        await elementUpdated(el);
+        const rowTwoCheckboxCell = el.querySelector('.row2 sp-table-checkbox-cell');
+        const rowOneCheckboxCell = el.querySelector('.row1 sp-table-checkbox-cell');
+        expect(el.selected).to.deep.equal(['row1']);
+        expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
+        expect(rowTwoCheckboxCell.checkbox.checked).to.be.false;
+        el.selected = ['row1', 'row2'];
+        await elementUpdated(el);
+        await elementUpdated(rowTwoCheckboxCell);
+        expect(el.selected).to.deep.equal(['row1', 'row2']);
+        expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
+        expect(rowTwoCheckboxCell.checkbox.checked).to.be.true;
+    });
+    it('ensures that virtualized elements with values in .selected are visually selected when brought into view using scrollTop', async () => {
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                selects="multiple"
+                .selected=${['1', '47']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sortby="name" sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        await oneEvent(el, 'rangeChanged');
+        await elementUpdated(el);
+        const rowOne = el.querySelector('[value="1"]');
+        const rowOneCheckboxCell = rowOne.querySelector('sp-table-checkbox-cell');
+        expect(el.selected).to.deep.equal(['1', '47']);
+        expect(rowOne.selected).to.be.true;
+        expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
+        el.scrollTop = el.scrollHeight;
+        await nextFrame();
+        await nextFrame();
+        await elementUpdated(el);
+        const unseenRow = el.querySelector('[value="47"]');
+        const unseenRowCheckboxCell = unseenRow.querySelector('sp-table-checkbox-cell');
+        expect(unseenRow.selected).to.be.true;
+        expect(unseenRowCheckboxCell.checkbox.checked).to.be.true;
+    });
+    it('ensures that virtualized elements with values in .selected are visually selected when brought into view using scrollToIndex', async () => {
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                selects="multiple"
+                .selected=${['1', '47']}
+                style="height: 120px"
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sortby="name" sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        await elementUpdated(el);
+        await oneEvent(el, 'rangeChanged');
+        await elementUpdated(el);
+        const rowOne = el.querySelector('[value="1"]');
+        const rowOneCheckboxCell = rowOne.querySelector('sp-table-checkbox-cell');
+        expect(el.selected).to.deep.equal(['1', '47']);
+        expect(rowOne.selected).to.be.true;
+        expect(rowOneCheckboxCell.checkbox.checked).to.be.true;
+        el.scrollToIndex(47);
+        await nextFrame();
+        await nextFrame();
+        await elementUpdated(el);
+        const unseenRow = el.querySelector('[value="47"]');
+        const unseenRowCheckboxCell = unseenRow.querySelector('sp-table-checkbox-cell');
+        expect(unseenRow.selected).to.be.true;
+        expect(unseenRowCheckboxCell.checkbox.checked).to.be.true;
+    });
+    it('does not set `allSelected` to true by default on Virtualised `<sp-table>`', async () => {
+        const virtualItems = makeItemsTwo(50);
+        const el = await fixture(html `
+            <sp-table
+                selects="multiple"
+                style="height: 120px"
+                .selected=${['1', '47']}
+                .items=${virtualItems}
+                .renderItem=${renderItem}
+                scroller?="true"
+            >
+                <sp-table-head>
+                    <sp-table-head-cell sortable sortby="name" sorted="desc">
+                        Column Title
+                    </sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                    <sp-table-head-cell>Column Title</sp-table-head-cell>
+                </sp-table-head>
+            </sp-table>
+        `);
+        await elementUpdated(el);
+        const tableHeadCheckboxCell = el.querySelector('sp-table-head sp-table-checkbox-cell');
+        expect(el.selected).to.deep.equal(['1', '47']);
+        expect(tableHeadCheckboxCell.checkbox.checked).to.be.false;
+        expect(tableHeadCheckboxCell.checkbox.indeterminate).to.be.true;
+    });
+});
+//# sourceMappingURL=table.test.js.map