Image + fallback pattern with idle/loading/loaded/error status tracking via context. 4 tests passing.
35 lines
1.2 KiB
TypeScript
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");
|
|
});
|
|
});
|