feat(polaris): 更新导航链接并修复图标加载

调整链接数据、图标映射和相关测试，新增 go-zero 本地图标。修复图片在事件绑定前已加载或失败时的显示问题。
2026-10-08 19:49:30 +08:00
parent 1a48960022
commit 39bde32376
9 changed files with 173 additions and 136 deletions
@@ -1,8 +1,12 @@
 import { fireEvent, render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
+import { afterEach, describe, expect, it, vi } from "vitest"

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

+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
 describe("SiteIcon", () => {
  it("渲染已知 Simple Icon", () => {
    const { container } = render(
@@ -81,4 +85,62 @@ describe("SiteIcon", () => {
    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",
+    )
+  })
 })