42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
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%]");
|
|
});
|
|
});
|