import { expect, test } from "vitest";
import { screen } from "@testing-library/react";

import { renderApp } from "../test/render";
import { FieldsPage } from "./fields-page";

test("renders the field list and form in a responsive grid", async () => {
  const { container } = renderApp(<FieldsPage />);

  // both panes are present (master list + detail form)
  expect(await screen.findByText(/fields/i)).toBeInTheDocument();

  // responsive: single-column by default, two-column at lg
  const grid = container.querySelector("div.grid");
  expect(grid?.className).toContain("grid-cols-1");
  expect(grid?.className).toContain("lg:grid-cols-[20rem_1fr]");
});
