Mats Bosson 80f7af401a Avatar component
Image + fallback pattern with idle/loading/loaded/error status tracking via context. 4 tests passing.
2026-03-29 20:52:04 +07:00

35 lines
1.2 KiB
TypeScript

import { render, screen } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";
import { Avatar } from "../../../src/components/avatar/index";
import { AvatarRootPropsSchema, AvatarMeta } from "../../../src/components/avatar/avatar.props";
describe("Avatar", () => {
it("renders fallback when no image", () => {
render(() => <Avatar><Avatar.Fallback data-testid="fallback">MB</Avatar.Fallback></Avatar>);
expect(screen.getByTestId("fallback")).toBeTruthy();
expect(screen.getByText("MB")).toBeTruthy();
});
it("renders image element", () => {
render(() => (
<Avatar>
<Avatar.Image src="test.jpg" alt="User" data-testid="img" />
<Avatar.Fallback>MB</Avatar.Fallback>
</Avatar>
));
const img = screen.getByTestId("img");
expect(img.tagName).toBe("IMG");
});
it("schema validates", () => {
expect(AvatarRootPropsSchema.safeParse({}).success).toBe(true);
});
it("meta has fields", () => {
expect(AvatarMeta.name).toBe("Avatar");
expect(AvatarMeta.parts).toContain("Root");
expect(AvatarMeta.parts).toContain("Image");
expect(AvatarMeta.parts).toContain("Fallback");
});
});