feat: Header 倒计时数字滚动动画 — @number-flow/react 替换静态文本

tests/web/components/RefreshCountdown.test.tsx

@@ -1,27 +1,57 @@
 import "../../../tests/web/test-utils";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { describe, expect, test, vi } from "bun:test";
 
 import { RefreshCountdown } from "../../../src/web/components/RefreshCountdown";
 
 describe("RefreshCountdown", () => {
-  test("手动模式不崩溃", () => {
-    const { container } = render(
+  test("手动模式渲染刷新按钮", () => {
+    const onRefresh = vi.fn();
+    render(
       <RefreshCountdown
         dashboardUpdatedAt={0}
         isFetching={false}
         isManualRefresh={true}
+        onRefresh={onRefresh}
+        refreshInterval={30000}
+      />,
+    );
+
+    const button = screen.getByRole("button", { name: "刷新 Dashboard" });
+    expect(button).toBeTruthy();
+  });
+
+  test("等待首次刷新显示文本", () => {
+    render(
+      <RefreshCountdown
+        dashboardUpdatedAt={0}
+        isFetching={false}
+        isManualRefresh={false}
         onRefresh={vi.fn()}
         refreshInterval={30000}
       />,
     );
 
-    expect(container.firstChild).not.toBeNull();
+    expect(screen.getByText("等待首次刷新")).toBeTruthy();
   });
 
-  test("自动模式不崩溃", () => {
+  test("刷新中显示文本", () => {
+    render(
+      <RefreshCountdown
+        dashboardUpdatedAt={Date.now()}
+        isFetching={true}
+        isManualRefresh={false}
+        onRefresh={vi.fn()}
+        refreshInterval={30000}
+      />,
+    );
+
+    expect(screen.getByText("刷新中...")).toBeTruthy();
+  });
+
+  test("秒级间隔渲染 NumberFlow 倒计时", () => {
     const now = Date.now();
-    const { container } = render(
+    render(
       <RefreshCountdown
         dashboardUpdatedAt={now - 10000}
         isFetching={false}
@@ -31,34 +61,42 @@ describe("RefreshCountdown", () => {
       />,
     );
 
-    expect(container.firstChild).not.toBeNull();
+    const countdown = screen.getByLabelText(/秒$/);
+    expect(countdown).toBeTruthy();
+    expect(countdown.className).toContain("refresh-countdown-flow");
   });
 
-  test("fetching 状态不崩溃", () => {
-    const { container } = render(
+  test("分钟级间隔渲染带分秒的 NumberFlow 倒计时", () => {
+    const now = Date.now();
+    render(
       <RefreshCountdown
-        dashboardUpdatedAt={1000}
-        isFetching={true}
-        isManualRefresh={false}
-        onRefresh={vi.fn()}
-        refreshInterval={30000}
-      />,
-    );
-
-    expect(container.firstChild).not.toBeNull();
-  });
-
-  test("未刷新状态不崩溃", () => {
-    const { container } = render(
-      <RefreshCountdown
-        dashboardUpdatedAt={0}
+        dashboardUpdatedAt={now - 10000}
         isFetching={false}
         isManualRefresh={false}
         onRefresh={vi.fn()}
-        refreshInterval={30000}
+        refreshInterval={60000}
       />,
     );
 
-    expect(container.firstChild).not.toBeNull();
+    const countdown = screen.getByLabelText(/分\d{2}秒$/);
+    expect(countdown).toBeTruthy();
+    expect(countdown.className).toContain("refresh-countdown-flow");
+  });
+
+  test("5 分钟间隔使用稳定分钟格式", () => {
+    const now = Date.now();
+    const { container } = render(
+      <RefreshCountdown
+        dashboardUpdatedAt={now - 290000}
+        isFetching={false}
+        isManualRefresh={false}
+        onRefresh={vi.fn()}
+        refreshInterval={300000}
+      />,
+    );
+
+    const countdown = container.querySelector(".refresh-countdown-flow");
+    expect(countdown).toBeTruthy();
+    expect(countdown?.getAttribute("aria-label")).toMatch(/分\d{2}秒$/);
   });
 });