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

describe("petty-button", () => {
  let el: HTMLElement;

  beforeEach(() => {
    document.body.textContent = "";
    el = document.createElement("petty-button");
    el.appendChild(h("button", {}, "Click"));
    document.body.appendChild(el);
  });

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

  it("syncs disabled state to child button", () => {
    el.setAttribute("disabled", "");
    const btn = el.querySelector("button")!;
    expect(btn.disabled).toBe(true);
    expect(btn.getAttribute("aria-disabled")).toBe("true");
    expect(el.dataset.state).toBe("disabled");
  });

  it("syncs loading state to child button", () => {
    el.setAttribute("loading", "");
    const btn = el.querySelector("button")!;
    expect(btn.disabled).toBe(true);
    expect(btn.getAttribute("aria-busy")).toBe("true");
    expect(el.dataset.state).toBe("loading");
  });

  it("clears loading and disabled state", () => {
    el.setAttribute("loading", "");
    el.removeAttribute("loading");
    const btn = el.querySelector("button")!;
    expect(btn.disabled).toBe(false);
    expect(btn.getAttribute("aria-busy")).toBeNull();
    expect(el.dataset.state).toBe("idle");
  });
});