import { useForm } from "react-hook-form";
import { describe, it, expect } from "vitest";
import { renderWithProviders, screen } from "@/test/render";
import { UoMCell } from "./uom-cell";

interface FormValues {
  lines: { unitSymbol: string | null }[];
}

function Harness({ symbol }: { symbol: string | null }) {
  const form = useForm<FormValues>({ defaultValues: { lines: [{ unitSymbol: symbol }] } });
  return <UoMCell control={form.control} name="lines.0.unitSymbol" />;
}

describe("UoMCell", () => {
  it("renders the watched unit symbol", async () => {
    await renderWithProviders(<Harness symbol="kg" />, { waitForButton: false });
    expect(await screen.findByText("kg")).toBeInTheDocument();
  });

  it("renders the placeholder dash when the symbol is empty", async () => {
    await renderWithProviders(<Harness symbol={null} />, { waitForButton: false });
    expect(await screen.findByText("—")).toBeInTheDocument();
  });
});