import { render, screen } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";
import { Image } from "../../../src/components/image/index";

describe("Image", () => {
  it("renders img element", () => {
    render(() => (
      <Image>
        <Image.Img src="test.jpg" alt="Test" />
        <Image.Fallback>FB</Image.Fallback>
      </Image>
    ));
    expect(screen.getByRole("img")).toBeTruthy();
  });
  it("img has alt text", () => {
    render(() => (
      <Image>
        <Image.Img src="test.jpg" alt="Photo" />
      </Image>
    ));
    expect(screen.getByAltText("Photo")).toBeTruthy();
  });
  it("fallback renders when no src", () => {
    render(() => (
      <Image>
        <Image.Img src="" alt="Test" />
        <Image.Fallback>FB</Image.Fallback>
      </Image>
    ));
    expect(screen.getByText("FB")).toBeTruthy();
  });
  it("data-state reflects loading status", () => {
    render(() => (
      <Image>
        <Image.Img src="test.jpg" alt="Test" data-testid="img" />
      </Image>
    ));
    expect(screen.getByTestId("img").getAttribute("data-state")).toBeTruthy();
  });
});