Track HiveGrid Cloud planning reference

hivegrid-cloud/packages/ui-subframe/src/renderDataTable.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, test } from "vitest";
+import type { DataTableModel } from "@toolctrl/view-models";
+
+import { renderDataTable } from "./index.js";
+
+const model: DataTableModel = {
+  captionKey: "ui.data-table.caption",
+  columns: [
+    { key: "name", labelKey: "ui.data-table.column.name", align: "left" },
+    { key: "amount", labelKey: "ui.data-table.column.amount", align: "right" },
+  ],
+  rows: [
+    { id: "row-1", cells: { name: "Alpha", amount: "10" } },
+    { id: "row-2", cells: { name: "Beta", amount: "20" } },
+  ],
+  emptyLabelKey: "ui.data-table.empty",
+  rowCount: 2,
+};
+
+const emptyModel: DataTableModel = {
+  columns: [{ key: "name", labelKey: "ui.data-table.column.name", align: "left" }],
+  rows: [],
+  emptyLabelKey: "ui.data-table.empty",
+  rowCount: 0,
+};
+
+describe("renderDataTable (subframe impl)", () => {
+  test("renders a semantic table with the subframe implementation markers", () => {
+    const html = renderDataTable(model);
+    expect(html).toContain('<table data-ui-impl="subframe" data-ui-id="ui.data-table"');
+    expect(html).toContain("</table>");
+    expect(html).toContain("<thead>");
+    expect(html).toContain("<tbody>");
+  });
+
+  test("emits header cells with i18n keys and align attributes", () => {
+    const html = renderDataTable(model);
+    expect(html).toContain('data-i18n-key="ui.data-table.column.name"');
+    expect(html).toContain('data-i18n-key="ui.data-table.column.amount"');
+    expect(html).toContain('data-align="left"');
+    expect(html).toContain('data-align="right"');
+  });
+
+  test("renders a caption with its i18n key when captionKey is present", () => {
+    const html = renderDataTable(model);
+    expect(html).toContain('<caption data-i18n-key="ui.data-table.caption"></caption>');
+  });
+
+  test("renders rows with row ids and escaped cell data", () => {
+    const html = renderDataTable(model);
+    expect(html).toContain('data-row-id="row-1"');
+    expect(html).toContain('data-row-id="row-2"');
+    expect(html).toContain(">Alpha<");
+    expect(html).toContain(">20<");
+  });
+
+  test("renders an empty row with the empty i18n key when there are no rows", () => {
+    const html = renderDataTable(emptyModel);
+    expect(html).toContain('data-empty="true"');
+    expect(html).toContain('data-i18n-key="ui.data-table.empty"');
+    expect(html).not.toContain("data-row-id=");
+  });
+
+  test("escapes hostile cell content", () => {
+    const html = renderDataTable({
+      ...model,
+      rows: [{ id: "row-x", cells: { name: '<script>"&"</script>', amount: "" } }],
+      rowCount: 1,
+    });
+    expect(html).not.toContain("<script>");
+    expect(html).toContain("&lt;script&gt;");
+  });
+
+  test("is visually stable: identical input renders identical output (M016)", () => {
+    expect(renderDataTable(model)).toBe(renderDataTable(model));
+  });
+});