Table style changes: tests (#4641)

components/table/demo/table-test.js

@@ -16,17 +16,17 @@ import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
-const fruits = ['Apples', 'Oranges', 'Bananas'];
+const columns = ['Population', 'Size', 'Elevation'];
 const thText = ['Additional', 'Placeholder', 'Header', 'Row'];
 
 const data = () => [
-	{ name: 'Canada', fruit: { 'apples': 356863, 'oranges': 0, 'bananas': 0 }, selected: true },
-	{ name: 'Australia', fruit: { 'apples': 308298, 'oranges': 398610, 'bananas': 354241 }, selected: true },
-	{ name: 'Mexico', fruit: { 'apples': 716931, 'oranges': 4603253, 'bananas': 2384778 }, selected: false },
-	{ name: 'Brazil', fruit: { 'apples': 1300000, 'oranges': 50000, 'bananas': 6429875 }, selected: false },
-	{ name: 'England', fruit: { 'apples': 345782, 'oranges': 4, 'bananas': 1249875 }, selected: false },
-	{ name: 'Hawaii', fruit: { 'apples': 129875, 'oranges': 856765, 'bananas': 123 }, selected: false },
-	{ name: 'Japan', fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false }
+	{ name: 'Ottawa, Canada', city: 'Ottawa', country: 'Canada', data: { 'population': 994837, 'size': 2790, 'elevation': 70 }, selected: true },
+	{ name: 'Toronto, Canada', city: 'Toronto', country: 'Canada', data: { 'population': 2930000, 'size': 630, 'elevation': 76 }, selected: true },
+	{ name: 'Sydney, Australia', city: 'Sydney', country: 'Australia', data: { 'population': 5312000, 'size': 12368, 'elevation': 3 }, selected: false },
+	{ name: 'Cairo, Egypt', city: 'Cairo', country: 'Egypt', data: { 'population': 9540000, 'size': 3085, 'elevation': 23 }, selected: false },
+	{ name: 'Moscow, Russia', city: 'Moscow', country: 'Russia', data: { 'population': 12712305, 'size': 2511, 'elevation': 124 }, selected: false },
+	{ name: 'London, England', city: 'London', country: 'England', data: { 'population': 8982000, 'size': 1572, 'elevation': 11 }, selected: false },
+	{ name: 'Tokyo, Japan', city: 'Tokyo', country: 'Japan', data: { 'population': 13960000, 'size': 2194, 'elevation': 40 }, selected: false }
 ];
 
 const formatter = new Intl.NumberFormat('en-US');
@@ -67,12 +67,6 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	}
 
 	render() {
-		const sorted = this._data.sort((a, b) => {
-			if (this._sortDesc) {
-				return b.fruit[this._sortField] - a.fruit[this._sortField];
-			}
-			return a.fruit[this._sortField] - b.fruit[this._sortField];
-		});
 		return html`
 			<d2l-table-wrapper item-count="${ifDefined(this.paging ? 500 : undefined)}">
 				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
@@ -92,21 +86,24 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 					<thead>
 						<tr>
 							<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-							<th scope="col">Country</th>
-							${fruits.map(fruit => this._renderSortButton(fruit))}
+							${this._renderDoubleSortButton('City', 'Country')}
+							${columns.map(columnHeading => this._renderSortButton(columnHeading))}
 						</tr>
 					</thead>
 					<tbody>
 						<tr class="d2l-table-header">
 							<th scope="col" sticky></th>
-							${this._renderSortButton('Avocado')}
-							${fruits.map(fruit => this._renderSortButton(fruit))}
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
 						</tr>
 						<tr header>
 							<th scope="col" sticky></th>
-							${thText.map(text => html`<th scope="col">${text}</th>`)}
+							${thText.map(text => html`
+								<th scope="col">
+									${text}
+								</th>
+							`)}
 						</tr>
-						${sorted.map(row => html`
+						${this._data.map(row => html`
 							<tr ?selected="${row.selected}" data-name="${row.name}">
 								<th scope="row" sticky>
 									<d2l-selection-input
@@ -117,9 +114,10 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 									</d2l-selection-input>
 								</th>
 								<th scope="row">${row.name}</th>
-								${fruits.map(fruit => html`<td>${formatter.format(row.fruit[fruit.toLowerCase()])}</td>`)}
+								${columns.map(columnHeading => html`<td>${formatter.format(row.data[columnHeading.toLowerCase()])}</td>`)}
 							</tr>
 						`)}
+
 					</tbody>
 				</table>
 				${this.paging ? html`<d2l-pager-load-more slot="pager"
@@ -134,7 +132,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_handlePagerLoadMore(e) {
 		const startIndex = this._data.length + 1;
 		for (let i = 0; i < e.target.pageSize; i++) {
-			this._data.push({ name: `Country ${startIndex + i}`, fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false });
+			this._data.push({ name: `Country ${startIndex + i}`, data: { 'population': 26320000, 'size': 6340, 'elevation': 4 }, selected: false });
 		}
 		this.requestUpdate();
 		e.detail.complete();
@@ -143,18 +141,50 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_handleSort(e) {
 		const field = e.target.innerText.toLowerCase();
 		const desc = e.target.hasAttribute('desc');
+		this._sortDesc = field === this._sortField ? !desc : false; // if sorting on same field then reverse, otherwise sort ascending
 		this._sortField = field;
-		this._sortDesc = !desc;
+
+		this._data = this._data.sort((a, b) => {
+			if (this._sortField === 'city' || this._sortField === 'country') {
+				if (this._sortDesc) {
+					if (a[this._sortField] > b[this._sortField]) return -1;
+					if (a[this._sortField] < b[this._sortField]) return 1;
+				} else {
+					if (a[this._sortField] < b[this._sortField]) return -1;
+					if (a[this._sortField] > b[this._sortField]) return 1;
+				}
+			} else {
+				if (this._sortDesc) {
+					return b.data[this._sortField] - a.data[this._sortField];
+				}
+				return a.data[this._sortField] - b.data[this._sortField];
+			}
+		});
+	}
+
+	_renderDoubleSortButton(item1, item2) {
+		return html`
+			<th scope="col">
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item1.toLowerCase()}">${item1}</d2l-table-col-sort-button>
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item2.toLowerCase()}">${item2}</d2l-table-col-sort-button>
+			</th>
+		`;
 	}
 
-	_renderSortButton(fruit) {
-		const noSort = this._sortField !== fruit.toLowerCase();
+	_renderSortButton(item) {
+		const noSort = this._sortField !== item.toLowerCase();
 		return html`
 			<th scope="col">
 				<d2l-table-col-sort-button
 					@click="${this._handleSort}"
 					?desc="${this._sortDesc}"
-					?nosort="${noSort}">${fruit}</d2l-table-col-sort-button>
+					?nosort="${noSort}">${item}</d2l-table-col-sort-button>
 			</th>
 		`;
 	}

components/table/test/table.vdiff.js

@@ -1,8 +1,9 @@
 import '../../inputs/input-number.js';
 import '../../inputs/input-text.js';
+import '../../button/button-icon.js';
 import '../demo/table-test.js';
 import '../table-col-sort-button.js';
-import { defineCE, expect, fixture, focusElem, html, nextFrame } from '@brightspace-ui/testing';
+import { defineCE, expect, fixture, focusElem, hoverElem, html, nextFrame } from '@brightspace-ui/testing';
 import { LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -27,6 +28,24 @@ function createSortableHeaderRow() {
 		</tr>
 	`;
 }
+function createDoubleSortableHeaderRow(text) {
+	return html`
+		<tr>
+			<th><d2l-table-col-sort-button>Asc 1</d2l-table-col-sort-button><d2l-table-col-sort-button>${text ?? 'Asc 2'}</d2l-table-col-sort-button></th>
+			<th><d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button></th>
+			<th><d2l-table-col-sort-button nosort>No Sort</d2l-table-col-sort-button></th>
+		</tr>
+	`;
+}
+function createSortableButtonIconHeaderRow() {
+	return html`
+		<tr>
+			<th><d2l-table-col-sort-button>Ascending</d2l-table-col-sort-button><d2l-button-icon text="Help" icon="tier1:help"></d2l-button-icon></th>
+			<th><d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button></th>
+			<th><d2l-table-col-sort-button nosort>No Sort</d2l-table-col-sort-button></th>
+		</tr>
+	`;
+}
 function createFruitHeaderRows(opts) {
 	const { selectable, headerAttribute, stickyAttribute, stickyClass, trClass } = { selectable: false, headerAttribute: false, stickyAttribute: false, ...opts };
 	return html`
@@ -423,6 +442,108 @@ describe('table', () => {
 					await focusElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
 					await expect(elem).to.be.golden();
 				});
+
+				it('col-sort-button-hover', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await hoverElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('col-sort-button-hover-focus', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await hoverElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await focusElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('two-col-sort-button', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createDoubleSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await expect(elem).to.be.golden();
+				});
+
+				it('two-col-sort-button-wrap', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createDoubleSortableHeaderRow('Ascending')}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await expect(elem).to.be.golden();
+				});
+
+				it('two-col-sort-button-focus-first', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createDoubleSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await focusElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('two-col-sort-button-hover-first', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createDoubleSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await hoverElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('two-col-sort-button-focus-second', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createDoubleSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await focusElem(elem.shadowRoot.querySelectorAll('d2l-table-col-sort-button')[1]);
+					await expect(elem).to.be.golden();
+				});
+
+				it('two-col-sort-button-hover-second', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createDoubleSortableHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await hoverElem(elem.shadowRoot.querySelectorAll('d2l-table-col-sort-button')[1]);
+					await expect(elem).to.be.golden();
+				});
+
+				it('col-sort-button-icon-button', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createSortableButtonIconHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await expect(elem).to.be.golden();
+				});
+
+				it('col-sort-button-icon-button-focus-first', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createSortableButtonIconHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await focusElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('col-sort-button-icon-button-focus-second', async() => {
+					const elem = await createTableFixture(html`
+						<thead>${createSortableButtonIconHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await focusElem(elem.shadowRoot.querySelector('d2l-button-icon'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('wrapper component', async() => {
+					const elem = await fixture(html`<d2l-test-table type="${type}"></d2l-test-table>`, { rtl });
+					await expect(elem).to.be.golden();
+				});
 			});
 
 			// only test the default type to minimize permutations (hasStickyHeadersScrollWrapper isn't expected to have a different impact on the light vs default type)