refactor(components): migrate shared styles to tailwind

2026-07-11 13:25:58 +08:00
parent 04af0e25f1
commit bbe1825bb3
7 changed files with 89 additions and 119 deletions
@@ -0,0 +1,54 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { BackButton } from "../back-button";
+import { CharacterAvatar } from "../character-avatar";
+import { UserMessageAvatar } from "../user-message-avatar";
+
+describe("shared Tailwind components", () => {
+  it("renders BackButton link and action variants with Tailwind classes", () => {
+    const linkHtml = renderToStaticMarkup(
+      <BackButton href="/chat" variant="soft" ariaLabel="Back to chat" />,
+    );
+    const actionHtml = renderToStaticMarkup(
+      <BackButton onClick={() => undefined} variant="ghost" />,
+    );
+
+    expect(linkHtml).toContain('href="/chat"');
+    expect(linkHtml).toContain('aria-label="Back to chat"');
+    expect(linkHtml).toContain("inline-flex");
+    expect(linkHtml).toContain("size-[var(--responsive-icon-button-size,42px)]");
+    expect(linkHtml).toContain("hover:bg-white");
+    expect(actionHtml).toContain("<button");
+    expect(actionHtml).toContain("size-8");
+    expect(actionHtml).toContain("hover:opacity-70");
+  });
+
+  it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
+    const html = renderToStaticMarkup(
+      <CharacterAvatar size={48} imageSize={96} className="custom-avatar" />,
+    );
+
+    expect(html).toContain("inline-flex");
+    expect(html).toContain("custom-avatar");
+    expect(html).toContain("width:48px");
+    expect(html).toContain("height:48px");
+    expect(html).toContain("size-full object-cover");
+    expect(html).toContain("%2Fimages%2Fchat%2Fpic-chat-elio.png");
+  });
+
+  it("renders UserMessageAvatar custom and fallback images", () => {
+    const userHtml = renderToStaticMarkup(
+      <UserMessageAvatar avatarUrl="/avatar.png" size="3rem" />,
+    );
+    const guestHtml = renderToStaticMarkup(<UserMessageAvatar />);
+
+    expect(userHtml).toContain('aria-label="User avatar"');
+    expect(userHtml).toContain("width:3rem");
+    expect(userHtml).toContain("height:3rem");
+    expect(userHtml).toContain("size-full object-cover");
+    expect(userHtml).toContain("%2Favatar.png");
+    expect(guestHtml).toContain('aria-label="Guest avatar"');
+    expect(guestHtml).toContain("%2Fimages%2Fchat%2Fpic-chat-guest.png");
+  });
+});