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

describe("Avatar", () => {
  test("an image when the user has one, versioned, at the size shown", () => {
    renderWithContexts(
      <Avatar userId="u1" username="ann" hasAvatar version={7} size={32} />,
    );
    const img = screen.getByRole("img", { name: "ann" });
    expect(img).toHaveAttribute(
      "src",
      "http://localhost:8000/api/users/u1/avatar?v=7&w=128",
    );
    expect(img).toHaveAttribute("sizes", "32px");
    expect(img.getAttribute("srcset")).toContain("avatar?v=7&w=320 320w");
  });

  test("initials otherwise, and after the image fails", () => {
    renderWithContexts(<Avatar userId="u1" username="bob" hasAvatar />);
    fireEvent.error(screen.getByRole("img"));
    expect(screen.queryByRole("img")).not.toBeInTheDocument();
    expect(screen.getByTitle("bob")).toHaveTextContent("B");
  });

  test("a live override wins over stale props, and retries a failed image", () => {
    const { rerender } = renderWithContexts(
      <AvatarOverrideContext.Provider
        value={{ u1: { hasAvatar: false, version: 1 } }}
      >
        <Avatar userId="u1" username="cy" hasAvatar />
      </AvatarOverrideContext.Provider>,
    );
    expect(screen.queryByRole("img")).not.toBeInTheDocument();
    rerender(
      <AvatarOverrideContext.Provider
        value={{ u1: { hasAvatar: true, version: 2 } }}
      >
        <Avatar userId="u1" username="cy" hasAvatar={false} />
      </AvatarOverrideContext.Provider>,
    );
    // rerender replaces the tree under the same router wrapper
    expect(screen.getByRole("img")).toHaveAttribute(
      "src",
      expect.stringContaining("?v=2"),
    );
  });
});