136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import React from "react";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
import {
|
|
renderWithProviders as render,
|
|
screen,
|
|
fireEvent,
|
|
} from "../utils/test-utils";
|
|
import Avatar from "../../app/components/asset/Avatar";
|
|
import {
|
|
componentTestSuite,
|
|
type ComponentTestSuiteConfig,
|
|
} from "../utils/componentTestSuite";
|
|
|
|
type AvatarProps = React.ComponentProps<typeof Avatar>;
|
|
|
|
const baseProps: AvatarProps = {
|
|
src: "/assets/marketing/avatar-1.svg",
|
|
alt: "User avatar",
|
|
size: "medium",
|
|
};
|
|
|
|
const config: ComponentTestSuiteConfig<AvatarProps> = {
|
|
component: Avatar,
|
|
name: "Avatar",
|
|
props: baseProps,
|
|
primaryRole: "img",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: false,
|
|
disabledState: false,
|
|
errorState: false,
|
|
},
|
|
};
|
|
|
|
componentTestSuite<AvatarProps>(config);
|
|
|
|
describe("Avatar (behavioral tests)", () => {
|
|
it("renders the image with alt text", () => {
|
|
render(<Avatar {...baseProps} />);
|
|
const img = screen.getByRole("img", { name: "User avatar" });
|
|
expect(img).toHaveAttribute("src", baseProps.src);
|
|
});
|
|
|
|
it("does not show initials while the image is loading", () => {
|
|
render(
|
|
<Avatar
|
|
src="/assets/marketing/avatar-1.svg"
|
|
alt="Ada Lovelace"
|
|
initials="AL"
|
|
/>,
|
|
);
|
|
expect(screen.queryByText("AL")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("applies the small photo ring after the image loads", () => {
|
|
const { container } = render(
|
|
<Avatar
|
|
src="/assets/marketing/avatar-1.svg"
|
|
alt="User avatar"
|
|
size="small"
|
|
/>,
|
|
);
|
|
fireEvent.load(screen.getByRole("img", { name: "User avatar" }));
|
|
expect(container.firstChild).toHaveClass("border-[#FFFFFF4D]");
|
|
expect(container.firstChild).toHaveClass("box-border");
|
|
});
|
|
|
|
it("shows initials when src is omitted", () => {
|
|
render(<Avatar alt="Ada Lovelace" initials="Ada Lovelace" />);
|
|
expect(screen.getByRole("img", { name: "Ada Lovelace" })).toHaveTextContent(
|
|
"AL",
|
|
);
|
|
expect(document.querySelector("img")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("shows a person mark when src and initials are omitted", () => {
|
|
const { container } = render(<Avatar alt="Member" />);
|
|
expect(screen.getByRole("img", { name: "Member" })).toBeInTheDocument();
|
|
expect(container.querySelector("svg")).toBeInTheDocument();
|
|
expect(document.querySelector("img")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("switches to initials when the image errors", () => {
|
|
render(
|
|
<Avatar
|
|
src="/missing-avatar.png"
|
|
alt="Ada Lovelace"
|
|
initials="AL"
|
|
size="large"
|
|
/>,
|
|
);
|
|
fireEvent.error(screen.getByRole("img", { name: "Ada Lovelace" }));
|
|
expect(document.querySelector("img")).not.toBeInTheDocument();
|
|
expect(screen.getByRole("img", { name: "Ada Lovelace" })).toHaveTextContent(
|
|
"AL",
|
|
);
|
|
});
|
|
|
|
it("applies rounded-square radius", () => {
|
|
const { container } = render(
|
|
<Avatar alt="Org" initials="CR" shape="rounded-square" />,
|
|
);
|
|
expect(container.firstChild).toHaveClass(
|
|
"rounded-[var(--measures-radius-200,8px)]",
|
|
);
|
|
});
|
|
|
|
it("applies outlined fallback chrome", () => {
|
|
render(
|
|
<Avatar alt="Ada Lovelace" initials="AL" variant="outlined" />,
|
|
);
|
|
const mark = screen.getByText("AL");
|
|
expect(mark).toHaveClass(
|
|
"border-[var(--color-content-default-brand-primary)]",
|
|
);
|
|
});
|
|
|
|
it("renders a button with hover treatment when onClick is set", () => {
|
|
const onClick = vi.fn();
|
|
render(
|
|
<Avatar alt="Ada Lovelace" initials="AL" onClick={onClick} />,
|
|
);
|
|
const button = screen.getByRole("button", { name: "Ada Lovelace" });
|
|
fireEvent.click(button);
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
expect(button).toHaveClass("hover:opacity-90");
|
|
});
|
|
|
|
it("hides decorative fallbacks from the accessibility tree", () => {
|
|
render(<Avatar alt="" initials="AB" />);
|
|
expect(screen.queryByRole("img")).not.toBeInTheDocument();
|
|
});
|
|
});
|