test: 重构测试体系 — 建立组件测试层、补充后端测试、清理低质量测试

- 新增 jsdom + @testing-library/react 组件测试环境
- 新增 12 个组件测试，覆盖所有前端组件
- 补充后端 middleware 和 helpers 单元测试
- 删除伪测试 use-target-detail-logic.test.ts
- 精简过度枚举的 color-threshold.test.ts
- 新增 bunfig.toml 配置测试 preload
- 更新 DEVELOPMENT.md 测试章节
- 安装 @types/jsdom 修复类型声明

tests/web/components/OverviewTab.test.tsx

@@ -0,0 +1,67 @@
+import "../../../tests/web/test-utils";
+import { render } from "@testing-library/react";
+import { describe, expect, test } from "bun:test";
+
+import type { TargetMetricsResponse, TargetStatus } from "../../../src/shared/api";
+
+import { OverviewTab } from "../../../src/web/components/OverviewTab";
+
+describe("OverviewTab", () => {
+  const target: TargetStatus = {
+    currentStreak: null,
+    group: "default",
+    id: 1,
+    interval: "30s",
+    latestCheck: {
+      durationMs: 100,
+      failure: null,
+      matched: true,
+      statusDetail: "200 OK",
+      timestamp: "2025-01-15T10:00:00.000Z",
+    },
+    name: "test-target",
+    recentSamples: [],
+    stats: { availability: 100, downChecks: 0, totalChecks: 10, upChecks: 10 },
+    target: "https://example.com",
+    type: "http",
+  };
+
+  const metricsData: TargetMetricsResponse = {
+    stats: {
+      availability: 95,
+      avgDurationMs: 150,
+      currentStreak: { count: 5, up: true },
+      downChecks: 1,
+      incidentCount: 1,
+      longestOutage: 60000,
+      mttr: 30000,
+      p95DurationMs: 200,
+      p99DurationMs: 250,
+      totalChecks: 20,
+      upChecks: 19,
+    },
+    targetId: 1,
+    trend: [],
+    window: { bucket: "1h", from: "", to: "" },
+  };
+
+  test("有数据不崩溃", () => {
+    const { container } = render(<OverviewTab metricsData={metricsData} metricsLoading={false} target={target} />);
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  test("loading 状态不崩溃", () => {
+    const { container } = render(<OverviewTab metricsData={null} metricsLoading={true} target={target} />);
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  test("无指标数据不崩溃", () => {
+    const { container } = render(<OverviewTab metricsData={null} metricsLoading={false} target={target} />);
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  test("显示趋势图表不崩溃", () => {
+    const { container } = render(<OverviewTab metricsData={metricsData} metricsLoading={false} target={target} />);
+    expect(container.firstChild).not.toBeNull();
+  });
+});