import { describe, it, expect, beforeEach } from "vitest";
import { PettySelect } from "../src/components/select/index";
import { h } from "./helpers";

describe("petty-select", () => {
  let el: PettySelect;

  beforeEach(() => {
    document.body.textContent = "";
    el = document.createElement("petty-select") as PettySelect;
    el.setAttribute("default-value", "apple");
    const trigger = h("button", { "data-part": "trigger" }, "Pick a fruit");
    const opt1 = h("petty-select-option", { value: "apple" }, "Apple");
    const opt2 = h("petty-select-option", { value: "banana" }, "Banana");
    const listbox = h("div", { id: "fruit-list", popover: "", "data-part": "listbox", role: "listbox" }, opt1, opt2);
    const hidden = h("input", { type: "hidden", name: "fruit" });
    el.appendChild(trigger);
    el.appendChild(listbox);
    el.appendChild(hidden);
    document.body.appendChild(el);
  });

  it("registers the custom elements", () => {
    expect(customElements.get("petty-select")).toBe(PettySelect);
    expect(customElements.get("petty-select-option")).toBeDefined();
  });

  it("initializes with default-value", () => {
    expect(el.value).toBe("apple");
  });

  it("sets aria-haspopup on trigger", () => {
    const trigger = el.querySelector("[data-part=trigger]")!;
    expect(trigger.getAttribute("aria-haspopup")).toBe("listbox");
    expect(trigger.getAttribute("aria-expanded")).toBe("false");
  });

  it("syncs hidden input value", () => {
    const input = el.querySelector("input[type=hidden]") as HTMLInputElement;
    expect(input.value).toBe("apple");
  });

  it("marks selected option with aria-selected true", () => {
    const apple = el.querySelector("[value=apple]")!;
    const banana = el.querySelector("[value=banana]")!;
    expect(apple.getAttribute("aria-selected")).toBe("true");
    expect(banana.getAttribute("aria-selected")).toBe("false");
  });
});