lab/ts/web/nextjs/polaris/src/components/shared/site-icon.test.tsx

import { fireEvent, render, screen } from "@testing-library/react"
import { describe, expect, it } from "vitest"

import { SiteIcon } from "./site-icon"

describe("SiteIcon", () => {
  it("渲染已知 Simple Icon", () => {
    const { container } = render(
      <SiteIcon
        link={{ title: "GitHub", url: "https://github.com", icon: "si:github" }}
        size={28}
      />,
    )
    const icon = container.querySelector("svg")
    expect(icon).toBeInTheDocument()
    expect(icon).toHaveAttribute("width", "28")
    expect(icon).toHaveAttribute("height", "28")
  })

  it("远程图片加载完成前显示首字符占位", () => {
    const { container } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    const wrapper = container.querySelector(".site-icon")
    const image = container.querySelector("img")
    expect(wrapper).toHaveAttribute("data-initial", "E")
    expect(image).toHaveClass("site-icon__image--loading")

    fireEvent.load(image!)
    expect(wrapper).not.toHaveAttribute("data-initial")
    expect(image).not.toHaveClass("site-icon__image--loading")
  })

  it("链接变化后从新候选链的首项重新开始", () => {
    const { container, rerender } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    fireEvent.error(container.querySelector("img")!)
    rerender(
      <SiteIcon
        link={{
          title: "Other",
          url: "https://other.example.com",
          icon: "url:https://cdn.example.com/other.png",
        }}
      />,
    )

    expect(container.querySelector("img")).toHaveAttribute(
      "src",
      "https://cdn.example.com/other.png",
    )
  })

  it("远程图片连续失败后显示首字符", () => {
    const { container } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    fireEvent.error(container.querySelector("img")!)
    fireEvent.error(container.querySelector("img")!)
    expect(screen.getByText("E")).toBeInTheDocument()
  })
})