Codex
113 lines
4.0 KiB
TypeScript
113 lines
4.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");
|
|
});
|
|
|
|
it("renders interactive avatars as accessible buttons", () => {
|
|
const characterHtml = renderToStaticMarkup(
|
|
<CharacterAvatar
|
|
src="/images/avatar/elio.png"
|
|
alt="Elio Silvestri"
|
|
actionLabel="Open Elio's private zone"
|
|
analyticsKey="chat.open_private_zone_from_avatar"
|
|
onClick={() => undefined}
|
|
/>,
|
|
);
|
|
const userHtml = renderToStaticMarkup(
|
|
<UserMessageAvatar
|
|
actionLabel="Open profile"
|
|
analyticsKey="chat.open_profile_from_avatar"
|
|
onClick={() => undefined}
|
|
/>,
|
|
);
|
|
|
|
expect(characterHtml).toContain('<button type="button"');
|
|
expect(characterHtml).toContain(
|
|
'aria-label="Open Elio's private zone"',
|
|
);
|
|
expect(characterHtml).toContain(
|
|
'data-analytics-key="chat.open_private_zone_from_avatar"',
|
|
);
|
|
expect(userHtml).toContain('<button type="button"');
|
|
expect(userHtml).toContain('aria-label="Open profile"');
|
|
expect(userHtml).toContain("focus-visible:outline-3");
|
|
});
|
|
});
|