import { describe, it, expect, beforeEach } from "vitest";
import { PettyRadioGroup } from "../src/components/radio-group/index";
import { h } from "./helpers";

describe("petty-radio-group", () => {
  let el: PettyRadioGroup;

  beforeEach(() => {
    document.body.textContent = "";
    el = document.createElement("petty-radio-group") as PettyRadioGroup;
    el.setAttribute("default-value", "a");
    el.appendChild(h("petty-radio-item", { value: "a" }, "Option A"));
    el.appendChild(h("petty-radio-item", { value: "b" }, "Option B"));
    el.appendChild(h("petty-radio-item", { value: "c" }, "Option C"));
    document.body.appendChild(el);
  });

  it("registers the custom elements", () => {
    expect(customElements.get("petty-radio-group")).toBe(PettyRadioGroup);
    expect(customElements.get("petty-radio-item")).toBeDefined();
  });

  it("sets role radiogroup on connect", () => {
    expect(el.getAttribute("role")).toBe("radiogroup");
  });

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

  it("syncs aria-checked on radio items", () => {
    const itemA = el.querySelector("[value=a]")!;
    const itemB = el.querySelector("[value=b]")!;
    expect(itemA.getAttribute("aria-checked")).toBe("true");
    expect(itemB.getAttribute("aria-checked")).toBe("false");
  });

  it("fires petty-change on selectValue", () => {
    let detail: { value: string } | null = null;
    el.addEventListener("petty-change", ((e: CustomEvent) => {
      detail = e.detail;
    }) as EventListener);
    el.selectValue("b");
    expect(detail).toEqual({ value: "b" });
    expect(el.value).toBe("b");
  });
});