147 lines
4.5 KiB
TypeScript
147 lines
4.5 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react"
|
|
import { afterEach, describe, expect, it, vi } from "vitest"
|
|
|
|
import { SiteIcon } from "./site-icon"
|
|
|
|
afterEach(() => {
|
|
vi.restoreAllMocks()
|
|
})
|
|
|
|
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()
|
|
})
|
|
|
|
it("缓存或水合前已加载完成的图片挂载后直接显示，不再停留首字母", () => {
|
|
// 模拟图片在 React 附加 onLoad 之前（如缓存命中 + 水合竞态）已完成：不再有 load 事件。
|
|
vi.spyOn(HTMLImageElement.prototype, "complete", "get").mockReturnValue(true)
|
|
vi.spyOn(HTMLImageElement.prototype, "naturalWidth", "get").mockReturnValue(
|
|
48,
|
|
)
|
|
|
|
const { container } = render(
|
|
<SiteIcon
|
|
link={{
|
|
title: "go-zero",
|
|
url: "https://go-zero.dev",
|
|
icon: "local:go-zero",
|
|
}}
|
|
/>,
|
|
)
|
|
|
|
const wrapper = container.querySelector(".site-icon")!
|
|
const image = container.querySelector("img")!
|
|
expect(image).toHaveAttribute("src", "/icons/go-zero.svg")
|
|
expect(wrapper).not.toHaveAttribute("data-initial")
|
|
expect(wrapper).not.toHaveClass("site-icon--initial")
|
|
expect(image).not.toHaveClass("site-icon__image--loading")
|
|
})
|
|
|
|
it("缓存或水合前已失败的图片挂载后推进候选链，不卡死占位", () => {
|
|
// complete 为真但 naturalWidth 为 0 表示解码失败的坏图，同样不会补发 error 事件。
|
|
// 仅首项候选处于该状态；推进后的候选按全新加载处理（complete 为假，等待事件）。
|
|
vi.spyOn(HTMLImageElement.prototype, "complete", "get").mockImplementation(
|
|
function (this: HTMLImageElement) {
|
|
return this.getAttribute("src") === "https://cdn.example.com/icon.png"
|
|
},
|
|
)
|
|
vi.spyOn(HTMLImageElement.prototype, "naturalWidth", "get").mockReturnValue(
|
|
0,
|
|
)
|
|
|
|
const { container } = render(
|
|
<SiteIcon
|
|
link={{
|
|
title: "Example",
|
|
url: "https://example.com",
|
|
icon: "url:https://cdn.example.com/icon.png",
|
|
}}
|
|
/>,
|
|
)
|
|
|
|
// 候选链：自定义图片 → favicon → 首字母；首项挂载前已坏，应停在 favicon。
|
|
expect(container.querySelector("img")).toHaveAttribute(
|
|
"src",
|
|
"https://example.com/favicon.ico",
|
|
)
|
|
expect(container.querySelector(".site-icon")).toHaveAttribute(
|
|
"data-initial",
|
|
"E",
|
|
)
|
|
})
|
|
})
|