@excom/data-table 0.1.0

package/support/tests/filter.view.test.ts

@@ -0,0 +1,33 @@
+import "@excom/quark-sheet";
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { flush, mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+const isFilteredOut = (tr: HTMLElement) =>
+  tr.style.getPropertyValue("--data-tr-display") === "none";
+
+describe("filter view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("filters rows as the user types", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "filter"));
+    const input = root.querySelector<HTMLInputElement>(
+      'input[name="filterValue"]',
+    )!;
+    input.value = "Bea";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await flush();
+    const rows = [...root.querySelectorAll("data-tbody data-tr")] as HTMLElement[];
+    const visible = rows.filter((row) => !isFilteredOut(row));
+    expect(visible.length).toBeGreaterThan(0);
+    expect(visible.every((row) => row.textContent?.includes("Bea"))).toBe(true);
+    expect(rows.some(isFilteredOut)).toBe(true);
+  });
+});

package/support/tests/simple.view.test.ts

@@ -0,0 +1,31 @@
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+  wait,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { click, flush, mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+const rowOrder = (tr: HTMLElement) =>
+  parseInt(tr.style.getPropertyValue("--data-tr-order") || "0", 10);
+
+describe("simple view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders rows and sorts by name", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "simple"));
+    await wait(0);
+    const rows = () =>
+      [...root.querySelectorAll("data-tbody data-tr")] as HTMLElement[];
+    const byOrder = () => [...rows()].sort((a, b) => rowOrder(a) - rowOrder(b));
+    expect(byOrder()[0].querySelector("data-td")?.textContent).toBe("Adam");
+    click(root.querySelector("data-th"));
+    await flush();
+    await wait(0);
+    expect(byOrder()[0].querySelector("data-td")?.textContent).toBe("Cynthia");
+  });
+});

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@excom/heft-rig/profiles/default/config/tsconfig.json",
+  "include": ["./*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
+}