From 5fc2ec827b755e5b16967a43b76699da6be5bf0b Mon Sep 17 00:00:00 2001 From: Vlad Jimenez Date: Fri, 28 Oct 2022 18:04:12 -0700 Subject: [PATCH 1/3] Highlight columns to show current sorted --- lib/ts/controllers/s-table.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/ts/controllers/s-table.ts b/lib/ts/controllers/s-table.ts index ff7aa975cb..ce05305a8f 100644 --- a/lib/ts/controllers/s-table.ts +++ b/lib/ts/controllers/s-table.ts @@ -1,5 +1,8 @@ import * as Stacks from "../stacks"; +const sortedHeaderBackground = 'bg-powder-200'; +const sortedColumnBackground = 'bg-powder-100'; + export class TableController extends Stacks.StacksController { static targets = ["column"]; readonly columnTarget!: Element; @@ -15,7 +18,7 @@ export class TableController extends Stacks.StacksController { const isCurrrent = target === headElem; target.classList.toggle("is-sorted", isCurrrent && direction !== "none"); - + target.classList.toggle(sortedHeaderBackground, isCurrrent); target.querySelectorAll(".js-sorting-indicator").forEach(function (icon) { const visible = isCurrrent ? direction : "none"; icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible)); @@ -118,6 +121,13 @@ export class TableController extends Stacks.StacksController { data.forEach(function (tup) { const row = rows[tup[1]]; row.parentElement!.removeChild(row); + + for (let i = 0; i < row.cells.length; i++) { + const cell = row.cells.item(i); + + cell?.classList.toggle(sortedColumnBackground, i === colno); + } + if (firstBottomRow) { tbody.insertBefore(row, firstBottomRow); } else { From 8b665b60a2e4f799dde37fc1e3daa74f6f3e8118 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 24 Feb 2023 17:47:03 -0500 Subject: [PATCH 2/3] test(table): add test for sortable table --- lib/test/s-table.test.ts | 129 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 lib/test/s-table.test.ts diff --git a/lib/test/s-table.test.ts b/lib/test/s-table.test.ts new file mode 100644 index 0000000000..830771d27a --- /dev/null +++ b/lib/test/s-table.test.ts @@ -0,0 +1,129 @@ +import { html, fixture, expect } from "@open-wc/testing"; +import { screen } from "@testing-library/dom"; +import userEvent from "@testing-library/user-event"; +import "../ts/index"; + +const user = userEvent.setup(); + +const testSortableTable = () => { + const testSortabledIcons = (modifier: string) => html` + + + + `; + + return html` +
+ + + + + + + + + + + + + + + + + + +
+ + + + + +
WinterDecember2
SpringMarch13
SummerJune25
FallSeptember13
Average temperature13
+
+ `; +}; + +const testAriaHiddenSvgs = (allSvgs: string[], visible?: string) => { + return allSvgs.forEach((svg) => { + const svgEl = screen.getByTestId(svg); + + if (svg === visible) { + expect(svgEl).to.have.attribute("aria-hidden", "false"); + } else { + expect(svgEl).to.have.attribute("aria-hidden", "true"); + } + }); +} + +describe("s-table", () => { + it("table sort updates on click", async () => { + await fixture(testSortableTable()); + + const sortButtonSeason = screen.getByTestId("test-sortable-season-button"); + const sortButtonMonth = screen.getByTestId("test-sortable-month-button"); + + // const table = screen.getByTestId("test-sortable-table"); + const allSvgs = [ + "test-sortable-season-svg-asc", + "test-sortable-season-svg-desc", + "test-sortable-season-svg-none", + "test-sortable-month-svg-asc", + "test-sortable-month-svg-desc", + "test-sortable-month-svg-none", + ]; + + testAriaHiddenSvgs(allSvgs); + + // Cycle through all season sort options + await user.click(sortButtonSeason); + testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-asc"); + await user.click(sortButtonSeason); + testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-desc"); + await user.click(sortButtonSeason); + testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-none"); + await user.click(sortButtonSeason); + testAriaHiddenSvgs(allSvgs); + + // Set month sort then switch to season sort + await user.click(sortButtonMonth); + testAriaHiddenSvgs(allSvgs, "test-sortable-month-svg-asc"); + await user.click(sortButtonSeason); + testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-asc"); + }); +}); From 1e69a87365c549b1d5e4b06e7a4cd4d71e842236 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 24 Feb 2023 17:50:58 -0500 Subject: [PATCH 3/3] Revert "test(table): add test for sortable table" This reverts commit 8b665b60a2e4f799dde37fc1e3daa74f6f3e8118. --- lib/test/s-table.test.ts | 129 --------------------------------------- 1 file changed, 129 deletions(-) delete mode 100644 lib/test/s-table.test.ts diff --git a/lib/test/s-table.test.ts b/lib/test/s-table.test.ts deleted file mode 100644 index 830771d27a..0000000000 --- a/lib/test/s-table.test.ts +++ /dev/null @@ -1,129 +0,0 @@ -import { html, fixture, expect } from "@open-wc/testing"; -import { screen } from "@testing-library/dom"; -import userEvent from "@testing-library/user-event"; -import "../ts/index"; - -const user = userEvent.setup(); - -const testSortableTable = () => { - const testSortabledIcons = (modifier: string) => html` - - - - `; - - return html` -
- - - - - - - - - - - - - - - - - - -
- - - - - -
WinterDecember2
SpringMarch13
SummerJune25
FallSeptember13
Average temperature13
-
- `; -}; - -const testAriaHiddenSvgs = (allSvgs: string[], visible?: string) => { - return allSvgs.forEach((svg) => { - const svgEl = screen.getByTestId(svg); - - if (svg === visible) { - expect(svgEl).to.have.attribute("aria-hidden", "false"); - } else { - expect(svgEl).to.have.attribute("aria-hidden", "true"); - } - }); -} - -describe("s-table", () => { - it("table sort updates on click", async () => { - await fixture(testSortableTable()); - - const sortButtonSeason = screen.getByTestId("test-sortable-season-button"); - const sortButtonMonth = screen.getByTestId("test-sortable-month-button"); - - // const table = screen.getByTestId("test-sortable-table"); - const allSvgs = [ - "test-sortable-season-svg-asc", - "test-sortable-season-svg-desc", - "test-sortable-season-svg-none", - "test-sortable-month-svg-asc", - "test-sortable-month-svg-desc", - "test-sortable-month-svg-none", - ]; - - testAriaHiddenSvgs(allSvgs); - - // Cycle through all season sort options - await user.click(sortButtonSeason); - testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-asc"); - await user.click(sortButtonSeason); - testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-desc"); - await user.click(sortButtonSeason); - testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-none"); - await user.click(sortButtonSeason); - testAriaHiddenSvgs(allSvgs); - - // Set month sort then switch to season sort - await user.click(sortButtonMonth); - testAriaHiddenSvgs(allSvgs, "test-sortable-month-svg-asc"); - await user.click(sortButtonSeason); - testAriaHiddenSvgs(allSvgs, "test-sortable-season-svg-asc"); - }); -});