- 51 headless Web Components (45 core + 6 animation) - Shared helpers: emit(), part(), listen(), wireLabel(), initialValue() - Zero `new CustomEvent` or `static #counter` — all use shared utils - Zod schemas for all 44 core components - MCP package with discover, inspect, compose, validate tools - Showcase with Aperture Science theme, M3 Expressive motion - 81 tests passing, TypeScript strict mode clean - Signals (~500B), SPA router (~400B), zero dependencies
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
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");
|
|
});
|
|
});
|