fix: 修正 markdown-to-jsx 导入方式 + 新增 formatDateLabel 日期工具函数

- TextPart: default import → named import - MaterialCard: 使用 formatDateLabel 显示今天/昨天/日期 - 清理旧测试文件，新增 ResourceTable 测试
2026-06-03 21:08:00 +08:00
parent 83cc28fe1b
commit eb93de52d8
17 changed files with 252 additions and 1177 deletions
--- a/tests/web/components/ModelTable.test.tsx
+++ b/tests/web/components/ModelTable.test.tsx
@@ -1,99 +0,0 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
-import { describe, expect, mock, test } from "bun:test";
-import { createElement } from "react";
-
-import type { Model, ProviderOption } from "../../../src/shared/api";
-
-import { ModelTable } from "../../../src/web/features/models/components/ModelTable";
-import { renderWithProviders } from "../test-utils";
-
-const OPENAI_PROVIDER: ProviderOption = {
-  id: "pv1",
-  name: "OpenAI",
-  type: "openai",
-};
-
-const DEEPSEEK_PROVIDER: ProviderOption = {
-  id: "pv2",
-  name: "DeepSeek",
-  type: "openai-compatible",
-};
-
-const ENABLED_MODEL: Model = {
-  capabilities: ["text", "reasoning"],
-  contextLength: 128000,
-  createdAt: "2024-01-01T00:00:00.000Z",
-  id: "m1",
-  maxOutputTokens: 4096,
-  modelId: "gpt-4o",
-  name: "GPT-4o",
-  providerId: "pv1",
-  updatedAt: "2024-01-01T00:00:00.000Z",
-};
-
-const DISABLED_MODEL: Model = {
-  capabilities: ["text"],
-  contextLength: null,
-  createdAt: "2024-01-01T00:00:00.000Z",
-  id: "m2",
-  maxOutputTokens: null,
-  modelId: "deepseek-chat",
-  name: "DeepSeek Chat",
-  providerId: "pv2",
-  updatedAt: "2024-01-01T00:00:00.000Z",
-};
-
-function clickLatestConfirmButton() {
-  const buttons = screen.getAllByRole("button", { name: /OK|确定/ });
-  fireEvent.click(buttons[buttons.length - 1]!);
-}
-
-describe("ModelTable", () => {
-  test("渲染模型表格数据", () => {
-    renderWithProviders(
-      createElement(ModelTable, {
-        data: { items: [ENABLED_MODEL, DISABLED_MODEL], page: 1, pageSize: 20, total: 2 },
-        loading: false,
-        onDelete: () => Promise.resolve(),
-        onEdit: () => undefined,
-        onPageChange: () => undefined,
-        page: 1,
-        pageSize: 20,
-        providers: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER],
-      }),
-    );
-
-    expect(screen.getByText("GPT-4o")).not.toBeNull();
-    expect(screen.getByText("DeepSeek Chat")).not.toBeNull();
-    expect(screen.getByText("OpenAI")).not.toBeNull();
-    expect(screen.getByText("DeepSeek")).not.toBeNull();
-    expect(screen.queryByText("状态")).toBeNull();
-    expect(screen.queryByRole("button", { name: /启用|禁用/ })).toBeNull();
-  });
-
-  test("模型表格操作触发 edit/delete", async () => {
-    const onDelete = mock(() => Promise.resolve());
-    const onEdit = mock(() => undefined);
-
-    renderWithProviders(
-      createElement(ModelTable, {
-        data: { items: [ENABLED_MODEL, DISABLED_MODEL], page: 1, pageSize: 20, total: 2 },
-        loading: false,
-        onDelete,
-        onEdit,
-        onPageChange: () => undefined,
-        page: 1,
-        pageSize: 20,
-        providers: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER],
-      }),
-    );
-
-    fireEvent.click(screen.getAllByRole("button", { name: /编辑/ })[0]!);
-    expect(onEdit).toHaveBeenCalledWith(ENABLED_MODEL);
-
-    fireEvent.click(screen.getAllByRole("button", { name: /删除/ })[0]!);
-    await waitFor(() => expect(screen.getByText("确认删除此模型？")).not.toBeNull());
-    clickLatestConfirmButton();
-    await waitFor(() => expect(onDelete).toHaveBeenCalledWith("m1"));
-  });
-});
--- a/tests/web/components/ProviderTable.test.tsx
+++ b/tests/web/components/ProviderTable.test.tsx
@@ -1,81 +0,0 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
-import { describe, expect, mock, test } from "bun:test";
-import { createElement } from "react";
-
-import type { Provider } from "../../../src/shared/api";
-
-import { ProviderTable } from "../../../src/web/features/models/components/ProviderTable";
-import { renderWithProviders } from "../test-utils";
-
-const OPENAI_PROVIDER: Provider = {
-  apiKey: "sk-test",
-  baseUrl: "https://api.openai.com/v1",
-  createdAt: "2024-01-01T00:00:00.000Z",
-  id: "pv1",
-  name: "OpenAI",
-  type: "openai",
-  updatedAt: "2024-01-01T00:00:00.000Z",
-};
-
-const DEEPSEEK_PROVIDER: Provider = {
-  apiKey: "sk-off",
-  baseUrl: "https://api.deepseek.com/v1",
-  createdAt: "2024-01-01T00:00:00.000Z",
-  id: "pv2",
-  name: "DeepSeek",
-  type: "openai-compatible",
-  updatedAt: "2024-01-01T00:00:00.000Z",
-};
-
-function clickLatestConfirmButton() {
-  const buttons = screen.getAllByRole("button", { name: /OK|确定/ });
-  fireEvent.click(buttons[buttons.length - 1]!);
-}
-
-describe("ProviderTable", () => {
-  test("渲染供应商表格数据", () => {
-    renderWithProviders(
-      createElement(ProviderTable, {
-        data: { items: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER], page: 1, pageSize: 20, total: 2 },
-        loading: false,
-        onDelete: () => Promise.resolve(),
-        onEdit: () => undefined,
-        onPageChange: () => undefined,
-        page: 1,
-        pageSize: 20,
-      }),
-    );
-
-    expect(screen.getAllByText("OpenAI").length).toBeGreaterThan(0);
-    expect(screen.getByText("DeepSeek")).not.toBeNull();
-    expect(screen.getByText("https://api.openai.com/v1")).not.toBeNull();
-    expect(screen.queryByText("状态")).toBeNull();
-    expect(screen.queryByRole("button", { name: "测试连接" })).toBeNull();
-    expect(screen.queryByRole("button", { name: /启用|禁用/ })).toBeNull();
-  });
-
-  test("供应商表格操作触发 edit/delete", async () => {
-    const onDelete = mock(() => Promise.resolve());
-    const onEdit = mock(() => undefined);
-
-    renderWithProviders(
-      createElement(ProviderTable, {
-        data: { items: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER], page: 1, pageSize: 20, total: 2 },
-        loading: false,
-        onDelete,
-        onEdit,
-        onPageChange: () => undefined,
-        page: 1,
-        pageSize: 20,
-      }),
-    );
-
-    fireEvent.click(screen.getAllByRole("button", { name: /编辑/ })[0]!);
-    expect(onEdit).toHaveBeenCalledWith(OPENAI_PROVIDER);
-
-    fireEvent.click(screen.getAllByRole("button", { name: /删除/ })[0]!);
-    await waitFor(() => expect(screen.getByText("确认删除此供应商？")).not.toBeNull());
-    clickLatestConfirmButton();
-    await waitFor(() => expect(onDelete).toHaveBeenCalledWith("pv1"));
-  });
-});
--- a/tests/web/components/ResourceTable.test.tsx
+++ b/tests/web/components/ResourceTable.test.tsx
@@ -0,0 +1,176 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, mock, test } from "bun:test";
+import { createElement } from "react";
+
+import type { Model, Provider, ProviderOption } from "../../../src/shared/api";
+
+import { ModelTable } from "../../../src/web/features/models/components/ModelTable";
+import { ProviderTable } from "../../../src/web/features/models/components/ProviderTable";
+import { renderWithProviders } from "../test-utils";
+
+const OPENAI_PROVIDER_OPTION: ProviderOption = {
+  id: "pv1",
+  name: "OpenAI",
+  type: "openai",
+};
+
+const DEEPSEEK_PROVIDER_OPTION: ProviderOption = {
+  id: "pv2",
+  name: "DeepSeek",
+  type: "openai-compatible",
+};
+
+const ENABLED_MODEL: Model = {
+  capabilities: ["text", "reasoning"],
+  contextLength: 128000,
+  createdAt: "2024-01-01T00:00:00.000Z",
+  id: "m1",
+  maxOutputTokens: 4096,
+  modelId: "gpt-4o",
+  name: "GPT-4o",
+  providerId: "pv1",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+const DISABLED_MODEL: Model = {
+  capabilities: ["text"],
+  contextLength: null,
+  createdAt: "2024-01-01T00:00:00.000Z",
+  id: "m2",
+  maxOutputTokens: null,
+  modelId: "deepseek-chat",
+  name: "DeepSeek Chat",
+  providerId: "pv2",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+const OPENAI_PROVIDER: Provider = {
+  apiKey: "sk-test",
+  baseUrl: "https://api.openai.com/v1",
+  createdAt: "2024-01-01T00:00:00.000Z",
+  id: "pv1",
+  name: "OpenAI",
+  type: "openai",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+const DEEPSEEK_PROVIDER: Provider = {
+  apiKey: "sk-off",
+  baseUrl: "https://api.deepseek.com/v1",
+  createdAt: "2024-01-01T00:00:00.000Z",
+  id: "pv2",
+  name: "DeepSeek",
+  type: "openai-compatible",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+function clickLatestConfirmButton() {
+  const buttons = screen.getAllByRole("button", { name: /OK|确定/ });
+  fireEvent.click(buttons[buttons.length - 1]!);
+}
+
+function renderModelTable(overrides?: Record<string, unknown>) {
+  renderWithProviders(
+    createElement(ModelTable, {
+      data: { items: [ENABLED_MODEL, DISABLED_MODEL], page: 1, pageSize: 20, total: 2 },
+      loading: false,
+      onDelete: () => Promise.resolve(),
+      onEdit: () => undefined,
+      onPageChange: () => undefined,
+      page: 1,
+      pageSize: 20,
+      providers: [OPENAI_PROVIDER_OPTION, DEEPSEEK_PROVIDER_OPTION],
+      ...overrides,
+    }),
+  );
+}
+
+function renderProviderTable(overrides?: Record<string, unknown>) {
+  renderWithProviders(
+    createElement(ProviderTable, {
+      data: { items: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER], page: 1, pageSize: 20, total: 2 },
+      loading: false,
+      onDelete: () => Promise.resolve(),
+      onEdit: () => undefined,
+      onPageChange: () => undefined,
+      page: 1,
+      pageSize: 20,
+      ...overrides,
+    }),
+  );
+}
+
+const TABLE_TEST_CASES = [
+  {
+    assertData: () => {
+      expect(screen.getByText("GPT-4o")).not.toBeNull();
+      expect(screen.getByText("DeepSeek Chat")).not.toBeNull();
+      expect(screen.getByText("OpenAI")).not.toBeNull();
+      expect(screen.getByText("DeepSeek")).not.toBeNull();
+    },
+    assertNoExtra: () => {
+      expect(screen.queryByText("状态")).toBeNull();
+      expect(screen.queryByRole("button", { name: /启用|禁用/ })).toBeNull();
+    },
+    componentName: "ModelTable",
+    render: () => renderModelTable(),
+  },
+  {
+    assertData: () => {
+      expect(screen.getAllByText("OpenAI").length).toBeGreaterThan(0);
+      expect(screen.getByText("DeepSeek")).not.toBeNull();
+      expect(screen.getByText("https://api.openai.com/v1")).not.toBeNull();
+    },
+    assertNoExtra: () => {
+      expect(screen.queryByText("状态")).toBeNull();
+      expect(screen.queryByRole("button", { name: "测试连接" })).toBeNull();
+      expect(screen.queryByRole("button", { name: /启用|禁用/ })).toBeNull();
+    },
+    componentName: "ProviderTable",
+    render: () => renderProviderTable(),
+  },
+];
+
+const TABLE_ACTION_TEST_CASES = [
+  {
+    componentName: "ModelTable",
+    deleteConfirmText: "确认删除此模型？",
+    deleteId: "m1",
+    editArg: ENABLED_MODEL,
+    render: (overrides?: Record<string, unknown>) => renderModelTable(overrides),
+  },
+  {
+    componentName: "ProviderTable",
+    deleteConfirmText: "确认删除此供应商？",
+    deleteId: "pv1",
+    editArg: OPENAI_PROVIDER,
+    render: (overrides?: Record<string, unknown>) => renderProviderTable(overrides),
+  },
+];
+
+describe("ResourceTable", () => {
+  for (const tc of TABLE_TEST_CASES) {
+    test(`${tc.componentName} 渲染表格数据`, () => {
+      tc.render();
+      tc.assertData();
+      tc.assertNoExtra();
+    });
+  }
+
+  for (const tc of TABLE_ACTION_TEST_CASES) {
+    test(`${tc.componentName} 表格操作触发 edit/delete`, async () => {
+      const onDelete = mock(() => Promise.resolve());
+      const onEdit = mock(() => undefined);
+
+      tc.render({ onDelete, onEdit });
+
+      fireEvent.click(screen.getAllByRole("button", { name: /编辑/ })[0]!);
+      expect(onEdit).toHaveBeenCalledWith(tc.editArg);
+
+      fireEvent.click(screen.getAllByRole("button", { name: /删除/ })[0]!);
+      await waitFor(() => expect(screen.getByText(tc.deleteConfirmText)).not.toBeNull());
+      clickLatestConfirmButton();
+      await waitFor(() => expect(onDelete).toHaveBeenCalledWith(tc.deleteId));
+    });
+  }
+});
--- a/tests/web/components/chat/MarkdownTable.test.tsx
+++ b/tests/web/components/chat/MarkdownTable.test.tsx
@@ -1,43 +0,0 @@
-import { screen } from "@testing-library/react";
-import { describe, expect, test } from "bun:test";
-import { createElement } from "react";
-
-import { MarkdownTable } from "../../../../src/web/features/chat/parts/MarkdownTable";
-import { renderWithProviders } from "../../test-utils";
-
-describe("MarkdownTable 渲染表格", () => {
-  test("渲染原生 table 元素并添加 class", () => {
-    const children = createElement(
-      "thead",
-      null,
-      createElement("tr", null, createElement("th", null, "列1"), createElement("th", null, "列2")),
-    );
-
-    renderWithProviders(createElement(MarkdownTable, { children }));
-
-    const table = document.querySelector(".markdown-table");
-    expect(table).toBeTruthy();
-    expect(table!.tagName).toBe("TABLE");
-    expect(screen.getByText("列1")).toBeTruthy();
-    expect(screen.getByText("列2")).toBeTruthy();
-  });
-
-  test("正确传递 children 内容", () => {
-    const children = createElement(
-      "tbody",
-      null,
-      createElement("tr", null, createElement("td", null, "值1"), createElement("td", null, "值2")),
-    );
-
-    renderWithProviders(createElement(MarkdownTable, { children }));
-
-    expect(screen.getByText("值1")).toBeTruthy();
-    expect(screen.getByText("值2")).toBeTruthy();
-  });
-
-  test("只有传入 table 元素时才有 class", () => {
-    const { container } = renderWithProviders(createElement(MarkdownTable, { children: null }));
-
-    expect(container.querySelector(".markdown-table")).toBeTruthy();
-  });
-});
--- a/tests/web/components/query-client-logging.test.tsx
+++ b/tests/web/components/query-client-logging.test.tsx
@@ -1,102 +0,0 @@
-import { MutationCache, QueryCache, QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-import { render } from "@testing-library/react";
-import { describe, expect, test } from "bun:test";
-import { createElement, useRef } from "react";
-
-import { useCreateProject } from "../../../src/web/shared/hooks/use-projects";
-import { installFetchMock, jsonResponse } from "../test-utils";
-
-describe("QueryClient MutationCache onError", () => {
-  test("mutation 错误触发 MutationCache onError 回调", async () => {
-    installFetchMock(() => jsonResponse({ error: "项目名称已存在" }, { status: 409 }));
-
-    const errors: string[] = [];
-    const queryClient = new QueryClient({
-      defaultOptions: { queries: { retry: false } },
-      mutationCache: new MutationCache({
-        onError: (error: Error) => {
-          errors.push(error.message);
-        },
-      }),
-    });
-
-    function TestComponent({ onResult }: { onResult: (mutate: () => void) => void }) {
-      const { mutate } = useCreateProject();
-      const called = useRef(false);
-
-      if (!called.current) {
-        called.current = true;
-        onResult(() => {
-          mutate(
-            { name: "test" },
-            {
-              onError: () => {},
-            },
-          );
-        });
-      }
-
-      return null;
-    }
-
-    render(
-      createElement(
-        QueryClientProvider,
-        { client: queryClient },
-        createElement(TestComponent, { onResult: (fn) => fn() }),
-      ),
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
-    expect(errors.length).toBe(1);
-    expect(errors[0]).toBe("项目名称已存在");
-  });
-});
-
-describe("QueryClient QueryCache onError", () => {
-  test("query 错误触发 QueryCache onError 回调", async () => {
-    installFetchMock(() => new Response("broken", { status: 500 }));
-
-    const errors: string[] = [];
-    const queryClient = new QueryClient({
-      defaultOptions: { queries: { retry: false } },
-      queryCache: new QueryCache({
-        onError: (error: Error) => {
-          errors.push(error.message);
-        },
-      }),
-    });
-
-    function TestComponent({ onResult }: { onResult: (trigger: () => void) => void }) {
-      const called = useRef(false);
-
-      useQuery({
-        queryFn: () => Promise.reject(new Error("test query error")),
-        queryKey: ["test-query-error"],
-      });
-
-      if (!called.current) {
-        called.current = true;
-        onResult(() => {
-          // no-op trigger
-        });
-      }
-
-      return null;
-    }
-
-    render(
-      createElement(
-        QueryClientProvider,
-        { client: queryClient },
-        createElement(TestComponent, { onResult: (fn) => fn() }),
-      ),
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
-    expect(errors.length).toBe(1);
-    expect(errors[0]).toBe("test query error");
-  });
-});