- 修复 Claude Desktop 模型输入框失焦

- 为动态模型行添加稳定 rowId，避免编辑模型 ID 时重挂载 - 增加模型映射和直连模型列表焦点保持回归测试
2026-07-24 12:44:18 +08:00 · 2026-05-12 11:47:45 +08:00
parent 270f49a4a6
commit 44d4ea81af
2 changed files with 146 additions and 27 deletions
@@ -0,0 +1,94 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { ClaudeDesktopProviderForm } from "@/components/providers/forms/ClaudeDesktopProviderForm";
+import { createTestQueryClient } from "../utils/testQueryClient";
+
+vi.mock("@/lib/api/providers", () => ({
+  providersApi: {
+    getClaudeDesktopDefaultRoutes: () => Promise.resolve([]),
+  },
+}));
+
+function renderForm(
+  initialData: ComponentProps<typeof ClaudeDesktopProviderForm>["initialData"],
+) {
+  const queryClient = createTestQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ClaudeDesktopProviderForm
+        submitLabel="保存"
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        initialData={initialData}
+      />
+    </QueryClientProvider>,
+  );
+}
+
+describe("ClaudeDesktopProviderForm", () => {
+  it("编辑模型映射的 Desktop 模型 ID 时保持输入框焦点", () => {
+    renderForm({
+      name: "Proxy Provider",
+      settingsConfig: {
+        env: {
+          ANTHROPIC_BASE_URL: "https://api.example.com",
+          ANTHROPIC_AUTH_TOKEN: "sk-test",
+        },
+      },
+      meta: {
+        claudeDesktopMode: "proxy",
+        claudeDesktopModelRoutes: {
+          "claude-old": {
+            model: "upstream-old",
+          },
+        },
+      },
+    });
+
+    const input = screen.getByPlaceholderText("gpt-5.5") as HTMLInputElement;
+    input.focus();
+
+    fireEvent.change(input, { target: { value: "12345" } });
+
+    const currentInput = screen.getByPlaceholderText(
+      "gpt-5.5",
+    ) as HTMLInputElement;
+    expect(currentInput).toHaveValue("12345");
+    expect(document.activeElement).toBe(currentInput);
+  });
+
+  it("编辑直连模型列表的模型 ID 时保持输入框焦点", () => {
+    renderForm({
+      name: "Direct Provider",
+      settingsConfig: {
+        env: {
+          ANTHROPIC_BASE_URL: "https://api.example.com",
+          ANTHROPIC_AUTH_TOKEN: "sk-test",
+        },
+      },
+      meta: {
+        claudeDesktopMode: "direct",
+        claudeDesktopModelRoutes: {
+          "claude-old": {
+            model: "claude-old",
+          },
+        },
+      },
+    });
+
+    const input = screen.getByPlaceholderText(
+      "claude-deepseek-chat",
+    ) as HTMLInputElement;
+    input.focus();
+
+    fireEvent.change(input, { target: { value: "claude-12345" } });
+
+    const currentInput = screen.getByPlaceholderText(
+      "claude-deepseek-chat",
+    ) as HTMLInputElement;
+    expect(currentInput).toHaveValue("claude-12345");
+    expect(document.activeElement).toBe(currentInput);
+  });
+});