import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SelectWidget } from "./SelectWidget";

test("picking an option responds with its id", async () => {
  const onRespond = vi.fn();
  render(<SelectWidget descriptor={{ id: "u1", widget: "select", options: [{ id: "a", label: "A" }, { id: "b", label: "B", recommended: true }] }} onRespond={onRespond} />);
  expect(screen.getByText(/consigliato/i)).toBeInTheDocument();
  await userEvent.click(screen.getByRole("button", { name: /A/ }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", kind: "select", choices: ["a"] });
});
test("intro bullets render as a list with the lead term bolded", () => {
  render(
    <SelectWidget
      descriptor={{
        id: "u1",
        widget: "select",
        intro: "Le famiglie:\n• fact_impianto → IMPIANTO INIZIALE\n• fact_controllo → CONTROLLO",
        options: [{ id: "a", label: "A" }],
      }}
      onRespond={vi.fn()}
    />
  );
  const items = screen.getAllByRole("listitem");
  expect(items).toHaveLength(2);
  // Lead term is emphasised via <strong>, remainder stays normal weight.
  const lead = screen.getByText("fact_impianto");
  expect(lead.tagName).toBe("STRONG");
  // The "•" is now a CSS marker, not literal text in the content.
  expect(screen.queryByText(/•/)).toBeNull();
});
test("a reserved control responds with control, not a choice", async () => {
  const onRespond = vi.fn();
  render(<SelectWidget descriptor={{ id: "u1", widget: "select", options: [{ id: "a", label: "A" }], reserved: ["back"] }} onRespond={onRespond} />);
  await userEvent.click(screen.getByRole("button", { name: /back/i }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", control: "back" });
});