// @vitest-environment jsdom
//
// Below `md` a table is a list of cards, its columns flowing one after another. A column marked
// `cardRow` takes a line of its own there — a row's lone "…" otherwise landed at the end of one
// card's line and on the next line of another.
import { describe, it, expect, afterEach, vi } from "vitest";
import { render, cleanup, screen } from "@testing-library/react";
import DataTable, { type Column } from "./DataTable";

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

const narrow = (matches: boolean) =>
  vi.stubGlobal(
    "matchMedia",
    (query: string) =>
      ({
        matches,
        media: query,
        addEventListener: () => {},
        removeEventListener: () => {},
      }) as unknown as MediaQueryList,
  );

afterEach(() => {
  cleanup();
  vi.unstubAllGlobals();
});

type Row = { id: string };
const columns: Column<Row>[] = [
  { key: "name", header: "Name", cardPrimary: true, render: (r) => r.id },
  { key: "size", header: "Size", render: () => "1 MB" },
  { key: "menu", header: "", cardLabel: false, cardRow: true, render: () => <button>more</button> },
];

describe("DataTable cards", () => {
  it("gives a cardRow column a line of its own; the others flow", () => {
    narrow(false);
    render(<DataTable rows={[{ id: "a" }]} columns={columns} rowKey={(r) => r.id} />);
    expect(screen.getByText("more").parentElement!.className).toContain("basis-full");
    expect(screen.getByText("1 MB").parentElement!.className).not.toContain("basis-full");
  });
});