import { fireEvent, render } from "@testing-library/react";
import { examples } from "../../lib/examples";
import useNavStore from "../../store/navStore";
import CelexSelector from "./CelexSelector";

describe("CelexSelector", () => {
  it("renders the dropdown with options", () => {
    const { getByLabelText, getAllByRole, getByRole } = render(
      <CelexSelector />
    );

    expect(getByLabelText("Select example:")).toBeInTheDocument();
    expect(getByRole("combobox")).toBeInTheDocument();

    const options = getAllByRole("option");
    expect(options).toHaveLength(examples.length);
    for (const i in examples) {
      expect(options[i]).toHaveValue(examples[i].id);
      expect(options[i]).toHaveTextContent(examples[i].name);
    }
  });

  it("calls setCelexId and setArticleId on selection change", async () => {
    const celexId = examples[2].id;
    const { getByRole } = render(<CelexSelector />);

    fireEvent.change(getByRole("combobox"), {
      target: { value: celexId },
    });

    expect(useNavStore.getState().celexId).toEqual(celexId);
    expect(useNavStore.getState().articleId).toEqual(1);
  });
});