content-explorer/ui/components/ResultsTable.test.tsx

import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { ResultsTable } from "./ResultsTable";

type Row = { title: string; kindLabel: string };

const columns = [
  { key: "title", label: "Title", sortable: true, render: (row: Row) => row.title },
  { key: "kindLabel", label: "Kind", sortable: true, render: (row: Row) => row.kindLabel },
];

describe("ResultsTable", () => {
  it("renders an empty state", () => {
    const html = renderToStaticMarkup(
      <ResultsTable columns={columns} rows={[]} rowKey={() => "none"} onSort={() => undefined} />,
    );
    expect(html).toContain("No records.");
    expect(html).not.toContain("aria-sort");
  });

  it("exposes sort buttons and aria-sort for the active column", () => {
    const html = renderToStaticMarkup(
      <ResultsTable
        columns={columns}
        rows={[{ title: "Feedback", kindLabel: "Concept" } satisfies Row]}
        rowKey={(row) => row.title}
        sort={{ key: "title", dir: 1 }}
        onSort={() => undefined}
      />,
    );
    expect(html).toContain("Sort by Kind");
    expect(html).toContain('aria-sort="ascending"');
    expect(html).toContain("Feedback");
    expect(html).toContain(">Title");
  });
});