51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { describe, expect, test } from "vitest";
|
|
import { fireEvent, screen } from "@testing-library/react";
|
|
import { Avatar } from "../../../components/shared/Avatar.tsx";
|
|
import { AvatarOverrideContext } from "../../../contexts/ws/AvatarOverrideContext.ts";
|
|
import { renderWithContexts } from "../../render.tsx";
|
|
|
|
describe("Avatar", () => {
|
|
test("an image when the user has one, versioned, at the size shown", () => {
|
|
renderWithContexts(
|
|
<Avatar userId="u1" username="ann" hasAvatar version={7} size={32} />,
|
|
);
|
|
const img = screen.getByRole("img", { name: "ann" });
|
|
expect(img).toHaveAttribute(
|
|
"src",
|
|
"http://localhost:8000/api/users/u1/avatar?v=7&w=128",
|
|
);
|
|
expect(img).toHaveAttribute("sizes", "32px");
|
|
expect(img.getAttribute("srcset")).toContain("avatar?v=7&w=320 320w");
|
|
});
|
|
|
|
test("initials otherwise, and after the image fails", () => {
|
|
renderWithContexts(<Avatar userId="u1" username="bob" hasAvatar />);
|
|
fireEvent.error(screen.getByRole("img"));
|
|
expect(screen.queryByRole("img")).not.toBeInTheDocument();
|
|
expect(screen.getByTitle("bob")).toHaveTextContent("B");
|
|
});
|
|
|
|
test("a live override wins over stale props, and retries a failed image", () => {
|
|
const { rerender } = renderWithContexts(
|
|
<AvatarOverrideContext.Provider
|
|
value={{ u1: { hasAvatar: false, version: 1 } }}
|
|
>
|
|
<Avatar userId="u1" username="cy" hasAvatar />
|
|
</AvatarOverrideContext.Provider>,
|
|
);
|
|
expect(screen.queryByRole("img")).not.toBeInTheDocument();
|
|
rerender(
|
|
<AvatarOverrideContext.Provider
|
|
value={{ u1: { hasAvatar: true, version: 2 } }}
|
|
>
|
|
<Avatar userId="u1" username="cy" hasAvatar={false} />
|
|
</AvatarOverrideContext.Provider>,
|
|
);
|
|
// rerender replaces the tree under the same router wrapper
|
|
expect(screen.getByRole("img")).toHaveAttribute(
|
|
"src",
|
|
expect.stringContaining("?v=2"),
|
|
);
|
|
});
|
|
});
|