feat(ts): 实现 Polaris 可交互首页

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-09-02 23:53:28 +08:00
parent 7eaa9e6f80
commit 9754d61ffe
71 changed files with 15613 additions and 46 deletions
@@ -0,0 +1,84 @@
+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()
+  })
+})