8f075f1792
Skeleton, Breadcrumbs, Link, Button, Image, Meter, NumberField Floating components: Tooltip (hover/focus), Popover (click, with focus trap and dismiss), HoverCard (hover with safe area). Simple components: Alert (role=alert), Badge (role=status), Skeleton (loading placeholder with data attributes). Navigation: Breadcrumbs (nav>ol>li with separators), Link (accessible anchor with disabled), Button (with disabled click suppression). Data/Form: Image (Img+Fallback with loading status), Meter (like Progress for known ranges), NumberField (spinbutton with inc/dec). 302 tests across 46 files, typecheck clean, build produces 176 files.
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import { render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Skeleton } from "../../../src/components/skeleton/index";
|
|
|
|
describe("Skeleton", () => {
|
|
it("is aria-hidden", () => {
|
|
render(() => <Skeleton data-testid="s" />);
|
|
expect(screen.getByTestId("s").getAttribute("aria-hidden")).toBe("true");
|
|
});
|
|
it("has data-visible by default", () => {
|
|
render(() => <Skeleton data-testid="s" />);
|
|
expect(screen.getByTestId("s")).toHaveAttribute("data-visible");
|
|
});
|
|
it("no data-visible when visible=false", () => {
|
|
render(() => <Skeleton data-testid="s" visible={false} />);
|
|
expect(screen.getByTestId("s")).not.toHaveAttribute("data-visible");
|
|
});
|
|
it("data-circle when circle=true", () => {
|
|
render(() => <Skeleton data-testid="s" circle />);
|
|
expect(screen.getByTestId("s")).toHaveAttribute("data-circle");
|
|
});
|
|
it("applies width and height", () => {
|
|
render(() => <Skeleton data-testid="s" width="100px" height="20px" />);
|
|
const el = screen.getByTestId("s");
|
|
expect(el.style.width).toBe("100px");
|
|
expect(el.style.height).toBe("20px");
|
|
});
|
|
});
|