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

describe("petty-dialog", () => {
  let el: PettyDialog;

  beforeEach(() => {
    document.body.textContent = "";
    el = document.createElement("petty-dialog") as PettyDialog;
    const heading = h("h2", {}, "Title");
    const dlg = document.createElement("dialog");
    dlg.appendChild(heading);
    el.appendChild(dlg);
    document.body.appendChild(el);
  });

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

  it("links aria-labelledby to heading", () => {
    const dlg = el.querySelector("dialog")!;
    const heading = el.querySelector("h2")!;
    expect(heading.id).not.toBe("");
    expect(dlg.getAttribute("aria-labelledby")).toBe(heading.id);
  });

  it("exposes isOpen as false by default", () => {
    expect(el.isOpen).toBe(false);
  });

  it("returns dialogElement", () => {
    expect(el.dialogElement).toBeInstanceOf(HTMLDialogElement);
  });
});