From d0563cf44bfc13ec8313dc5c9ce68f4a696e1ba5 Mon Sep 17 00:00:00 2001
From: tosin-zoffun <zerosum.gamingarena@gmail.com>
Date: Wed, 29 Jul 2026 17:44:22 +0100
Subject: [PATCH] test: add render coverage for Skeleton.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skeleton.tsx currently exports a single component (a className-only
placeholder <div>) — no row-count prop, no StreamListSkeleton or other
named variants exist anywhere in the codebase, so there's nothing
matching the multi-variant "assert placeholder count equals the row
prop" description to test without inventing that API from scratch.
Added coverage for the one export that does exist: renders exactly one
placeholder element, applies the default pulse/rounded styling, and
correctly merges a caller-supplied className.

Closes #1032
---
 frontend/src/components/ui/Skeleton.test.tsx | 39 ++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 frontend/src/components/ui/Skeleton.test.tsx

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 `<div>` 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(<Skeleton />);
+    expect(container.children).toHaveLength(1);
+  });
+
+  it("applies the pulse/placeholder styling by default", () => {
+    const { container } = render(<Skeleton />);
+    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(<Skeleton className="h-4 w-full" />);
+    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(<Skeleton />);
+    expect(container.firstElementChild).not.toBeNull();
+  });
+});