47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { createElement } from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { HexAvatar, HEX_SIZES, HEX_TONES, toneFor } from "@/components/HexAvatar";
|
|
|
|
const render = (props: Parameters<typeof HexAvatar>[0]) => renderToStaticMarkup(createElement(HexAvatar, props));
|
|
|
|
describe("HexAvatar", () => {
|
|
it("renders the photo when there is one", () => {
|
|
const html = render({ name: "Ada Lovelace", pictureUrl: "https://img/a.jpg", size: "lg" });
|
|
expect(html).toContain("<img");
|
|
expect(html).toContain('src="https://img/a.jpg"');
|
|
expect(html).toContain('width="46"');
|
|
expect(html).toContain('height="53"');
|
|
expect(html).not.toContain("AL");
|
|
});
|
|
|
|
it("renders initials on a tone gradient without a photo", () => {
|
|
const html = render({ name: "Ada Lovelace", pictureUrl: null, size: "md" });
|
|
expect(html).not.toContain("<img");
|
|
expect(html).toContain(">AL<");
|
|
expect(html).toContain("hex-avatar-initials");
|
|
expect(html).toContain(`hex-avatar-${toneFor("Ada Lovelace")}`);
|
|
expect(html).toContain('aria-hidden="true"');
|
|
});
|
|
|
|
it("falls back to initials for an empty picture url", () => {
|
|
expect(render({ name: "Bo", pictureUrl: "" })).toContain(">B<");
|
|
});
|
|
|
|
it("has the three spec sizes at a 0.866 ratio", () => {
|
|
expect(HEX_SIZES).toEqual({
|
|
lg: { width: 46, height: 53 },
|
|
md: { width: 38, height: 44 },
|
|
sm: { width: 30, height: 35 },
|
|
});
|
|
for (const { width, height } of Object.values(HEX_SIZES)) {
|
|
expect(width / height).toBeCloseTo(0.866, 1);
|
|
}
|
|
});
|
|
|
|
it("picks the same tone for the same name, from the six tones", () => {
|
|
expect(toneFor("Ada Lovelace")).toBe(toneFor(" ada lovelace "));
|
|
for (const n of ["A", "Bo", "Carl Sagan", "Dee"]) expect(HEX_TONES).toContain(toneFor(n));
|
|
});
|
|
});
|