diff --git a/frontend/src/components/ui/Skeleton.test.tsx b/frontend/src/components/ui/Skeleton.test.tsx new file mode 100644 index 00000000..9b6513ca --- /dev/null +++ b/frontend/src/components/ui/Skeleton.test.tsx @@ -0,0 +1,39 @@ +import { describe, it, expect } from "vitest"; +import { render } from "@testing-library/react"; +import { Skeleton } from "./Skeleton"; + +// Issue #1032 asks for a render test per exported skeleton *variant* +// asserting a row-count prop controls the number of rendered placeholder +// elements (e.g. a StreamListSkeleton with a `rows` prop). As of this +// change, Skeleton.tsx exports exactly one component — a single +// className-only placeholder `
` with no row-count prop and no other +// variants (StreamListSkeleton or otherwise) anywhere in the codebase. +// There is nothing matching that description to test without inventing a +// multi-variant API that doesn't exist today, so this covers the actual +// single export instead. +describe("Skeleton", () => { + it("renders a single placeholder element", () => { + const { container } = render(); + expect(container.children).toHaveLength(1); + }); + + it("applies the pulse/placeholder styling by default", () => { + const { container } = render(); + const el = container.firstElementChild as HTMLElement; + expect(el.className).toContain("animate-pulse"); + expect(el.className).toContain("rounded-md"); + }); + + it("merges a custom className with the default styling", () => { + const { container } = render(); + const el = container.firstElementChild as HTMLElement; + expect(el.className).toContain("animate-pulse"); + expect(el.className).toContain("h-4"); + expect(el.className).toContain("w-full"); + }); + + it("renders with no className without erroring", () => { + const { container } = render(); + expect(container.firstElementChild).not.toBeNull(); + }); +});