test(e2e): add DataTable tests

metonym · metonym · commit 0524e16bec2b · 2026-03-07T12:12:29.000-08:00
Made-with: Cursor
diff --git a/e2e/data-table.test.ts b/e2e/data-table.test.ts
@@ -0,0 +1,27 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("DataTable", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/data-table.html");
+  });
+
+  test("renders table with headers", async ({ page }) => {
+    await expect(
+      page.getByRole("columnheader", { name: "Name" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("columnheader", { name: "Value" }),
+    ).toBeVisible();
+  });
+
+  test("renders rows with data", async ({ page }) => {
+    const table = page.locator(".bx--data-table");
+    await expect(table).toBeVisible();
+    await expect(
+      page.getByRole("cell", { name: "Row 0", exact: true }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("cell", { name: "Row 1", exact: true }),
+    ).toBeVisible();
+  });
+});
diff --git a/e2e/fixtures/DataTableFixture.svelte b/e2e/fixtures/DataTableFixture.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "value", value: "Value" },
+  ];
+
+  const rows = Array.from({ length: 20 }, (_, i) => ({
+    id: i,
+    name: `Row ${i}`,
+    value: `Value ${i}`,
+  }));
+</script>
+
+<div data-testid="data-table-virtual">
+  <DataTable {headers} {rows} />
+</div>
diff --git a/e2e/fixtures/data-table.html b/e2e/fixtures/data-table.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DataTable Fixture</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./data-table.ts"></script>
+  </body>
+</html>
diff --git a/e2e/fixtures/data-table.ts b/e2e/fixtures/data-table.ts
@@ -0,0 +1,4 @@
+import DataTableFixture from "./DataTableFixture.svelte";
+import { mount } from "./mount";
+
+mount(DataTableFixture);
diff --git a/e2e/fixtures/index.html b/e2e/fixtures/index.html
@@ -19,6 +19,7 @@
       <a href="/context-menu.html">ContextMenu</a>
       <a href="/composed-modal.html">ComposedModal</a>
       <a href="/code-snippet.html">CodeSnippet</a>
+      <a href="/data-table.html">DataTable</a>
     </nav>
   </body>
 </html>
