83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
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" />,
|
|
);
|
|
const darkHtml = renderToStaticMarkup(
|
|
<BackButton
|
|
href="/splash"
|
|
variant="dark"
|
|
ariaLabel="Back to home"
|
|
analyticsKey="chat.back_to_home"
|
|
/>,
|
|
);
|
|
const unstyledHtml = renderToStaticMarkup(
|
|
<BackButton
|
|
onClick={() => undefined}
|
|
variant="unstyled"
|
|
className="custom-back"
|
|
/>,
|
|
);
|
|
|
|
expect(linkHtml).toContain('href="/chat"');
|
|
expect(linkHtml).toContain('aria-label="Back to chat"');
|
|
expect(linkHtml).toContain("inline-flex");
|
|
expect(linkHtml).toContain("size-(--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");
|
|
expect(darkHtml).toContain('href="/splash"');
|
|
expect(darkHtml).toContain('aria-label="Back to home"');
|
|
expect(darkHtml).toContain('data-analytics-key="chat.back_to_home"');
|
|
expect(darkHtml).toContain("bg-[rgba(13,11,20,0.7)]");
|
|
expect(darkHtml).toContain("text-white");
|
|
expect(unstyledHtml).toContain("custom-back");
|
|
expect(unstyledHtml).not.toContain("size-8");
|
|
});
|
|
|
|
it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
|
|
const html = renderToStaticMarkup(
|
|
<CharacterAvatar
|
|
src="/images/avatar/maya.png"
|
|
alt="Maya Tan"
|
|
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%2Favatar%2Fmaya.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%2Favatar%2Fplaceholder.png");
|
|
});
|
|
});
|