48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
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);
|
|
});
|
|
});
|