import { describe, expect, test } from "vitest";
import { fireEvent, screen } from "@testing-library/react";
import { Thumbnail } from "../../../components/shared/Thumbnail.tsx";
import { renderWithContexts } from "../../render.tsx";

describe("Thumbnail", () => {
  const placeholder = { url: "https://site.test/page", siteName: "Site" };

  test("direct, then proxied, then the placeholder", () => {
    renderWithContexts(
      <Thumbnail
        src="https://img.test/a.png"
        alt="art"
        sizes={128}
        placeholder={placeholder}
      />,
    );
    const img = screen.getByRole("img", { name: "art" });
    expect(img).toHaveAttribute("src", "https://img.test/a.png");
    expect(img).toHaveAttribute("referrerpolicy", "no-referrer");
    // Another site's image comes as that site sends it.
    expect(img).not.toHaveAttribute("srcset");
    fireEvent.error(img);
    const proxied = screen.getByRole("img", { name: "art" });
    expect(proxied.getAttribute("src")).toContain("/api/remote/image?url=");
    // Through the proxy, it is scaled as the site's own are.
    expect(proxied.getAttribute("srcset")).toContain("a.png&w=128 128w");
    fireEvent.error(screen.getByRole("img", { name: "art" }));
    expect(screen.queryByRole("img", { name: "art" })).not.toBeInTheDocument();
    expect(screen.getByText("S")).toBeInTheDocument();
  });

  test("our own images skip the proxy retry", () => {
    renderWithContexts(
      <Thumbnail
        src="http://localhost:8000/api/dumps/d/thumbnail"
        alt="t"
        sizes="(max-width: 512px) 100vw, 180px"
        placeholder={placeholder}
      />,
    );
    const img = screen.getByRole("img", { name: "t" });
    expect(img).toHaveAttribute(
      "src",
      "http://localhost:8000/api/dumps/d/thumbnail?w=960",
    );
    expect(img.getAttribute("srcset")).toContain("thumbnail?w=320 320w");
    expect(img).toHaveAttribute("sizes", "(max-width: 512px) 100vw, 180px");
    fireEvent.error(img);
    expect(screen.queryByRole("img", { name: "t" })).not.toBeInTheDocument();
  });

  test("no src: straight to the placeholder; a new src tries again", () => {
    const { rerender } = renderWithContexts(
      <Thumbnail placeholder={placeholder} alt="t" sizes={128} />,
    );
    expect(screen.queryByRole("img", { name: "t" })).not.toBeInTheDocument();
    rerender(
      <Thumbnail
        src="https://img.test/b.png"
        placeholder={placeholder}
        alt="t"
        sizes={128}
      />,
    );
    expect(screen.getByRole("img", { name: "t" })).toBeInTheDocument();
  });
});