// @vitest-environment jsdom
//
// The R14 zoom-fit foundation: DataTable's opt-in `fixedLayout` renders a <colgroup> and puts the
// table into `table-layout: fixed`, so columns with a width keep it and the rest (fluid text columns)
// split the remainder + truncate instead of pushing the table wider than its container. Off by
// default so existing content-sized tables are untouched.
import { describe, it, expect, afterEach, vi } from "vitest";
import { render, cleanup } from "@testing-library/react";
import DataTable, { type Column } from "./DataTable";

vi.mock("react-i18next", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react-i18next")>();
  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
});

afterEach(cleanup);

type Row = { a: string; b: string };
const columns: Column<Row>[] = [
  { key: "a", header: "A", width: "5rem", render: (r) => r.a },
  { key: "b", header: "B", render: (r) => r.b }, // fluid — no width
];
const rows: Row[] = [{ a: "1", b: "hello" }];

describe("DataTable fixedLayout", () => {
  it("renders a width-bearing colgroup and table-fixed only when fixedLayout is set", () => {
    const { container } = render(
      <DataTable rows={rows} columns={columns} rowKey={(r) => r.a} fixedLayout />,
    );
    const table = container.querySelector("table");
    expect(table?.className).toContain("table-fixed");

    const cols = container.querySelectorAll("colgroup col");
    expect(cols).toHaveLength(2);
    expect((cols[0] as HTMLElement).style.width).toBe("5rem"); // fixed column keeps its width
    expect((cols[1] as HTMLElement).style.width).toBe(""); // fluid column: no width, splits remainder
  });

  it("omits the colgroup and stays auto-layout by default", () => {
    const { container } = render(<DataTable rows={rows} columns={columns} rowKey={(r) => r.a} />);
    expect(container.querySelector("colgroup")).toBeNull();
    expect(container.querySelector("table")?.className).not.toContain("table-fixed");
  });
});