refactor(app): migrate shared styles to tailwind

2026-07-13 15:46:28 +08:00
parent 4682b4bf3f
commit 51462660a4
13 changed files with 145 additions and 289 deletions
@@ -0,0 +1,41 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { UserHeader } from "../user-header";
+
+describe("sidebar Tailwind components", () => {
+  it("renders guest, member, and VIP header states", () => {
+    const guestHtml = renderToStaticMarkup(
+      <UserHeader
+        state="guest"
+        name="User name"
+        avatarUrl={null}
+        onLoginClick={() => undefined}
+      />,
+    );
+    const memberHtml = renderToStaticMarkup(
+      <UserHeader state="member" name="Chase" avatarUrl={null} />,
+    );
+    const vipHtml = renderToStaticMarkup(
+      <UserHeader state="vip" name="Chase" avatarUrl={null} />,
+    );
+
+    expect(guestHtml).toContain("flex w-full items-center");
+    expect(guestHtml).toContain('aria-label="Log in"');
+    expect(guestHtml).toContain("login");
+    expect(memberHtml).toContain("VIP membership not activated");
+    expect(vipHtml).toContain("VIP Member");
+    expect(vipHtml).toContain("rounded-full");
+  });
+
+  it("renders the loading skeleton with stable utility dimensions", () => {
+    const html = renderToStaticMarkup(
+      <UserHeader state="member" name="Chase" avatarUrl={null} isLoading />,
+    );
+
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain("w-[60%]");
+    expect(html).toContain("w-[80%]");
+    expect(html).toContain("w-[40%]");
+  });
+});