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

describe("petty-checkbox", () => {
  let el: PettyCheckbox;

  beforeEach(() => {
    document.body.textContent = "";
    el = document.createElement("petty-checkbox") as PettyCheckbox;
    const input = h("input", { type: "checkbox", "data-part": "control" });
    const label = h("label", { "data-part": "label" }, "Accept");
    el.appendChild(input);
    el.appendChild(label);
    document.body.appendChild(el);
  });

  it("registers the custom element", () => {
    expect(customElements.get("petty-checkbox")).toBe(PettyCheckbox);
  });

  it("defaults to unchecked state", () => {
    expect(el.checked).toBe(false);
    expect(el.dataset.state).toBe("unchecked");
  });

  it("sets checked state via property", () => {
    el.checked = true;
    const input = el.querySelector("input") as HTMLInputElement;
    expect(input.checked).toBe(true);
    expect(el.dataset.state).toBe("checked");
  });

  it("sets indeterminate state", () => {
    el.indeterminate = true;
    const input = el.querySelector("input") as HTMLInputElement;
    expect(input.indeterminate).toBe(true);
    expect(el.dataset.state).toBe("indeterminate");
  });

  it("wires label htmlFor to input id", () => {
    const input = el.querySelector("input") as HTMLInputElement;
    const label = el.querySelector("label") as HTMLLabelElement;
    expect(input.id).not.toBe("");
    expect(label.htmlFor).toBe(input.id);
  });
});