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");
  });
});