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

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

  beforeEach(() => {
    document.body.textContent = "";
    el = document.createElement("petty-accordion");
    const itemA = h("petty-accordion-item", { value: "a" },
      h("details", {},
        h("summary", {}, "Section A"),
        h("div", { "data-part": "content" }, "Content A"),
      ),
    );
    const itemB = h("petty-accordion-item", { value: "b" },
      h("details", {},
        h("summary", {}, "Section B"),
        h("div", { "data-part": "content" }, "Content B"),
      ),
    );
    el.appendChild(itemA);
    el.appendChild(itemB);
    document.body.appendChild(el);
  });

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

  it("defaults to single type", () => {
    expect((el as HTMLElement & { type: string }).type).toBe("single");
  });

  it("accordion-item sets data-state closed on connect", () => {
    const item = el.querySelector("petty-accordion-item")!;
    expect(item.getAttribute("data-state")).toBe("closed");
  });

  it("accordion-item sets aria-expanded false on summary", () => {
    const summary = el.querySelector("summary")!;
    expect(summary.getAttribute("aria-expanded")).toBe("false");
  });

  it("supports multiple type attribute", () => {
    el.setAttribute("type", "multiple");
    expect((el as HTMLElement & { type: string }).type).toBe("multiple");
  });
});