lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: waitFor→findBy 替换 + renderWithBasicProviders + jsdom 条件化回退

Browse Source
This commit is contained in:
兰缘小妖
2026-06-06 10:15:02 +08:00
parent 121c6f764f
commit 5c0f02f1f8
7 changed files with 81 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
tests/setup.ts
View File

@@ -1,10 +1,35 @@
/** /**
* 全局测试配置 * 全局测试配置
* 后端测试无需 DOM 环境，前端测试依赖 jsdom 及 antd polyfill * 为所有测试初始化 jsdom — bun worker 的 process.argv 无法保证携带文件路径
* 噪声过滤对所有测试生效
*/ */
// 仅当前端测试需要时初始化 jsdom（所有测试共享 preload，后端测试也在此环境中运行） const originalStderrWrite = process.stderr.write.bind(process.stderr);
import { JSDOM } from "jsdom"; process.stderr.write = (chunk: string | Uint8Array, encodingOrCb?: unknown, cb?: unknown) => {
const str = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString();
if (str.includes("NaN") && str.includes("height") && str.includes("css style property")) return true;
return originalStderrWrite(
chunk,
encodingOrCb as Parameters<typeof process.stderr.write>[1],
cb as Parameters<typeof process.stderr.write>[2],
);
};
const originalConsoleError = console.error;
console.error = (...args: unknown[]) => {
const message = args.map(String).join(" ");
if (message.includes("NaN") && message.includes("height") && message.includes("css style property")) return;
originalConsoleError(...args);
};
const originalConsoleWarn = console.warn;
console.warn = (...args: unknown[]) => {
const message = args.map(String).join(" ");
if (message.includes("NaN") && message.includes("height") && message.includes("css style property")) return;
originalConsoleWarn(...args);
};
const { JSDOM } = await import("jsdom");
const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", { const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
pretendToBeVisual: true, pretendToBeVisual: true,
@@ -41,31 +66,6 @@ Object.defineProperty(elementProto, "detachEvent", { configurable: true, value:
Object.defineProperty(htmlElementProto, "attachEvent", { configurable: true, value: attachEventFn, writable: true }); Object.defineProperty(htmlElementProto, "attachEvent", { configurable: true, value: attachEventFn, writable: true });
Object.defineProperty(htmlElementProto, "detachEvent", { configurable: true, value: detachEventFn, writable: true }); Object.defineProperty(htmlElementProto, "detachEvent", { configurable: true, value: detachEventFn, writable: true });
const originalStderrWrite = process.stderr.write.bind(process.stderr);
process.stderr.write = (chunk: string | Uint8Array, encodingOrCb?: unknown, cb?: unknown) => {
const str = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString();
if (str.includes("NaN") && str.includes("height") && str.includes("css style property")) return true;
return originalStderrWrite(
chunk,
encodingOrCb as Parameters<typeof process.stderr.write>[1],
cb as Parameters<typeof process.stderr.write>[2],
);
};
const originalConsoleError = console.error;
console.error = (...args: unknown[]) => {
const message = args.map(String).join(" ");
if (message.includes("NaN") && message.includes("height") && message.includes("css style property")) return;
originalConsoleError(...args);
};
const originalConsoleWarn = console.warn;
console.warn = (...args: unknown[]) => {
const message = args.map(String).join(" ");
if (message.includes("NaN") && message.includes("height") && message.includes("css style property")) return;
originalConsoleWarn(...args);
};
globalThis.ResizeObserver = class { globalThis.ResizeObserver = class {
disconnect() {} disconnect() {}
observe() {} observe() {}
@@ -128,7 +128,7 @@ globalThis.Selection = class Selection {
} as unknown as typeof Selection; } as unknown as typeof Selection;
globalThis.Range = class Range extends dom.window.DocumentFragment {} as unknown as typeof Range; globalThis.Range = class Range extends dom.window.DocumentFragment {} as unknown as typeof Range;
import { afterEach } from "bun:test"; const { afterEach } = await import("bun:test");
afterEach(() => { afterEach(() => {
document.body.innerHTML = ""; document.body.innerHTML = "";

2
tests/web/components/ResourceTable.test.tsx
View File

@@ -168,7 +168,7 @@ describe("ResourceTable", () => {
expect(onEdit).toHaveBeenCalledWith(tc.editArg); expect(onEdit).toHaveBeenCalledWith(tc.editArg);
fireEvent.click(screen.getAllByRole("button", { name: /删除/ })[0]!); fireEvent.click(screen.getAllByRole("button", { name: /删除/ })[0]!);
await waitFor(() => expect(screen.getByText(tc.deleteConfirmText)).not.toBeNull()); await screen.findByText(tc.deleteConfirmText);
clickLatestConfirmButton(); clickLatestConfirmButton();
await waitFor(() => expect(onDelete).toHaveBeenCalledWith(tc.deleteId)); await waitFor(() => expect(onDelete).toHaveBeenCalledWith(tc.deleteId));
}); });

24
tests/web/routes/models.test.tsx
View File

@@ -67,7 +67,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入模型名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入模型名称");
fireEvent.change(screen.getByPlaceholderText("请输入模型名称"), { target: { value: "GPT-4o Mini" } }); fireEvent.change(screen.getByPlaceholderText("请输入模型名称"), { target: { value: "GPT-4o Mini" } });
clickLatestConfirmButton(); clickLatestConfirmButton();
@@ -93,7 +93,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入模型名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入模型名称");
clickLatestConfirmButton(); clickLatestConfirmButton();
expect(onCreate).not.toHaveBeenCalled(); expect(onCreate).not.toHaveBeenCalled();
}); });
@@ -114,7 +114,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByLabelText("文本")).not.toBeNull()); await screen.findByLabelText("文本");
const textCheckbox = screen.getByLabelText("文本"); const textCheckbox = screen.getByLabelText("文本");
const reasoningCheckbox = screen.getByLabelText("推理"); const reasoningCheckbox = screen.getByLabelText("推理");
expect((textCheckbox as { checked?: boolean }).checked).toBe(true); expect((textCheckbox as { checked?: boolean }).checked).toBe(true);
@@ -137,7 +137,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入模型名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入模型名称");
fireEvent.mouseDown(screen.getByRole("combobox")); fireEvent.mouseDown(screen.getByRole("combobox"));
expect(await screen.findByText("OpenAI")).not.toBeNull(); expect(await screen.findByText("OpenAI")).not.toBeNull();
@@ -160,7 +160,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入模型名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入模型名称");
fireEvent.mouseDown(screen.getByRole("combobox")); fireEvent.mouseDown(screen.getByRole("combobox"));
expect(await screen.findByText("供应商加载失败：options failed")).not.toBeNull(); expect(await screen.findByText("供应商加载失败：options failed")).not.toBeNull();
@@ -185,7 +185,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByRole("button", { name: "测试连接" })).not.toBeNull()); await screen.findByRole("button", { name: "测试连接" });
fireEvent.click(screen.getByRole("button", { name: "测试连接" })); fireEvent.click(screen.getByRole("button", { name: "测试连接" }));
await waitFor(() => await waitFor(() =>
@@ -213,7 +213,7 @@ describe("ModelFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByRole("button", { name: "测试连接" })).not.toBeNull()); await screen.findByRole("button", { name: "测试连接" });
}); });
}); });
@@ -295,9 +295,7 @@ describe("ModelListPage", () => {
renderWithProviders(createElement(App), { initialRoute: "/models" }); renderWithProviders(createElement(App), { initialRoute: "/models" });
await waitFor(() => { await screen.findByText("GPT-4o");
expect(screen.getByText("GPT-4o")).not.toBeNull();
});
expect(screen.getByPlaceholderText("搜索模型名称或 ID")).not.toBeNull(); expect(screen.getByPlaceholderText("搜索模型名称或 ID")).not.toBeNull();
expect(screen.getByRole("button", { name: /新建模型/ })).not.toBeNull(); expect(screen.getByRole("button", { name: /新建模型/ })).not.toBeNull();
@@ -308,7 +306,7 @@ describe("ModelListPage", () => {
const calls = createModelFetchMock(); const calls = createModelFetchMock();
renderWithProviders(createElement(App), { initialRoute: "/models" }); renderWithProviders(createElement(App), { initialRoute: "/models" });
await waitFor(() => expect(screen.getByText("GPT-4o")).not.toBeNull()); await screen.findByText("GPT-4o");
const input = screen.getByPlaceholderText("搜索模型名称或 ID"); const input = screen.getByPlaceholderText("搜索模型名称或 ID");
fireEvent.change(input, { target: { value: "gpt" } }); fireEvent.change(input, { target: { value: "gpt" } });
@@ -320,9 +318,9 @@ describe("ModelListPage", () => {
createModelFetchMock(); createModelFetchMock();
renderWithProviders(createElement(App), { initialRoute: "/models" }); renderWithProviders(createElement(App), { initialRoute: "/models" });
await waitFor(() => expect(screen.getByRole("button", { name: /新建模型/ })).not.toBeNull()); await screen.findByRole("button", { name: /新建模型/ });
fireEvent.click(screen.getByRole("button", { name: /新建模型/ })); fireEvent.click(screen.getByRole("button", { name: /新建模型/ }));
await waitFor(() => expect(screen.getByPlaceholderText("请输入模型名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入模型名称");
}, 15000); }, 15000);
}); });

24
tests/web/routes/projects.test.tsx
View File

@@ -130,7 +130,7 @@ describe("ProjectsPage", () => {
const calls = createProjectFetchMock(); const calls = createProjectFetchMock();
renderWithProviders(createElement(App), { initialRoute: "/projects" }); renderWithProviders(createElement(App), { initialRoute: "/projects" });
await waitFor(() => expect(screen.getByText("活跃项目")).not.toBeNull()); await screen.findByText("活跃项目");
const searchInput1 = screen.getByPlaceholderText("搜索名称或描述"); const searchInput1 = screen.getByPlaceholderText("搜索名称或描述");
fireEvent.change(searchInput1, { target: { value: "归档" } }); fireEvent.change(searchInput1, { target: { value: "归档" } });
@@ -147,14 +147,14 @@ describe("ProjectsPage", () => {
}); });
await waitFor(() => expect(calls.some((call) => call.url.includes("status=archived"))).toBe(true)); await waitFor(() => expect(calls.some((call) => call.url.includes("status=archived"))).toBe(true));
await waitFor(() => expect(screen.getByText("归档项目")).not.toBeNull()); await screen.findByText("归档项目");
}); });
test("清空搜索条件复位请求参数并重新展示全部项目", async () => { test("清空搜索条件复位请求参数并重新展示全部项目", async () => {
const calls = createProjectFetchMock(); const calls = createProjectFetchMock();
renderWithProviders(createElement(App), { initialRoute: "/projects" }); renderWithProviders(createElement(App), { initialRoute: "/projects" });
await waitFor(() => expect(screen.getByText("活跃项目")).not.toBeNull()); await screen.findByText("活跃项目");
const searchInput2 = screen.getByPlaceholderText("搜索名称或描述"); const searchInput2 = screen.getByPlaceholderText("搜索名称或描述");
fireEvent.change(searchInput2, { target: { value: "归档" } }); fireEvent.change(searchInput2, { target: { value: "归档" } });
@@ -169,23 +169,23 @@ describe("ProjectsPage", () => {
const lastProjectCall = [...calls].reverse().find((call) => call.url.includes("/api/projects")); const lastProjectCall = [...calls].reverse().find((call) => call.url.includes("/api/projects"));
expect(lastProjectCall && !lastProjectCall.url.includes("keyword=")).toBe(true); expect(lastProjectCall && !lastProjectCall.url.includes("keyword=")).toBe(true);
}); });
await waitFor(() => expect(screen.getByText("活跃项目")).not.toBeNull()); await screen.findByText("活跃项目");
}); });
test("新建项目提交请求 body 并显示创建结果", async () => { test("新建项目提交请求 body 并显示创建结果", async () => {
const calls = createProjectFetchMock([]); const calls = createProjectFetchMock([]);
renderWithProviders(createElement(App), { initialRoute: "/projects" }); renderWithProviders(createElement(App), { initialRoute: "/projects" });
await waitFor(() => expect(screen.getByRole("button", { name: /新建项目/ })).not.toBeNull()); await screen.findByRole("button", { name: /新建项目/ });
fireEvent.click(screen.getByRole("button", { name: /新建项目/ })); fireEvent.click(screen.getByRole("button", { name: /新建项目/ }));
await waitFor(() => expect(screen.getAllByText("新建项目").length).toBeGreaterThan(1)); await waitFor(() => expect(screen.getAllByText("新建项目").length).toBeGreaterThan(1));
await waitFor(() => expect(screen.getByPlaceholderText("请输入项目名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入项目名称");
fireEvent.change(screen.getByPlaceholderText("请输入项目名称"), { target: { value: "新增项目" } }); fireEvent.change(screen.getByPlaceholderText("请输入项目名称"), { target: { value: "新增项目" } });
fireEvent.change(screen.getByPlaceholderText("请输入项目描述"), { target: { value: "新增描述" } }); fireEvent.change(screen.getByPlaceholderText("请输入项目描述"), { target: { value: "新增描述" } });
await clickLatestConfirmButton(); await clickLatestConfirmButton();
await waitFor(() => expect(screen.getByText("新增项目")).not.toBeNull()); await screen.findByText("新增项目");
const createCall = calls.find((call) => call.url.endsWith("/api/projects") && call.method === "POST"); const createCall = calls.find((call) => call.url.endsWith("/api/projects") && call.method === "POST");
expect(createCall).toBeDefined(); expect(createCall).toBeDefined();
@@ -211,7 +211,7 @@ describe("ProjectsPage", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入项目名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入项目名称");
fireEvent.change(screen.getByPlaceholderText("请输入项目名称"), { target: { value: "编辑项目" } }); fireEvent.change(screen.getByPlaceholderText("请输入项目名称"), { target: { value: "编辑项目" } });
await clickLatestConfirmButton(); await clickLatestConfirmButton();
@@ -235,7 +235,7 @@ describe("ProjectsPage", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入项目名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入项目名称");
await clickLatestConfirmButton(); await clickLatestConfirmButton();
expect(onCreate).not.toHaveBeenCalled(); expect(onCreate).not.toHaveBeenCalled();
@@ -274,17 +274,17 @@ describe("ProjectsPage", () => {
expect(screen.getByText("当前路径：/workbench/p1")).not.toBeNull(); expect(screen.getByText("当前路径：/workbench/p1")).not.toBeNull();
fireEvent.click(screen.getByRole("button", { name: /归档/ })); fireEvent.click(screen.getByRole("button", { name: /归档/ }));
await waitFor(() => expect(screen.getByText("确认归档此项目？")).not.toBeNull()); await screen.findByText("确认归档此项目？");
await clickLatestConfirmButton(); await clickLatestConfirmButton();
await waitFor(() => expect(onArchive).toHaveBeenCalledWith("p1")); await waitFor(() => expect(onArchive).toHaveBeenCalledWith("p1"));
fireEvent.click(screen.getByRole("button", { name: /恢复/ })); fireEvent.click(screen.getByRole("button", { name: /恢复/ }));
await waitFor(() => expect(screen.getByText("确认恢复此项目？")).not.toBeNull()); await screen.findByText("确认恢复此项目？");
await clickLatestConfirmButton(); await clickLatestConfirmButton();
await waitFor(() => expect(onRestore).toHaveBeenCalledWith("p2")); await waitFor(() => expect(onRestore).toHaveBeenCalledWith("p2"));
fireEvent.click(screen.getByRole("button", { name: /删除/ })); fireEvent.click(screen.getByRole("button", { name: /删除/ }));
await waitFor(() => expect(screen.getByText("确认永久删除此项目？")).not.toBeNull()); await screen.findByText("确认永久删除此项目？");
await clickLatestConfirmButton(); await clickLatestConfirmButton();
await waitFor(() => expect(onDelete).toHaveBeenCalledWith("p2")); await waitFor(() => expect(onDelete).toHaveBeenCalledWith("p2"));
}, 15000); }, 15000);

10
tests/web/routes/providers.test.tsx
View File

@@ -43,7 +43,7 @@ describe("ProviderFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入供应商名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入供应商名称");
fireEvent.change(screen.getByPlaceholderText("请输入供应商名称"), { target: { value: "New OpenAI" } }); fireEvent.change(screen.getByPlaceholderText("请输入供应商名称"), { target: { value: "New OpenAI" } });
clickLatestConfirmButton(); clickLatestConfirmButton();
@@ -70,7 +70,7 @@ describe("ProviderFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入供应商名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入供应商名称");
fireEvent.change(screen.getByPlaceholderText("请输入供应商名称"), { target: { value: "兼容供应商" } }); fireEvent.change(screen.getByPlaceholderText("请输入供应商名称"), { target: { value: "兼容供应商" } });
fireEvent.change(screen.getByPlaceholderText("https://api.openai.com/v1"), { fireEvent.change(screen.getByPlaceholderText("https://api.openai.com/v1"), {
target: { value: "https://api.test.com/v1" }, target: { value: "https://api.test.com/v1" },
@@ -106,7 +106,7 @@ describe("ProviderFormModal", () => {
}), }),
); );
await waitFor(() => expect(screen.getByPlaceholderText("请输入供应商名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入供应商名称");
fireEvent.change(screen.getByPlaceholderText("请输入供应商名称"), { target: { value: "兼容供应商" } }); fireEvent.change(screen.getByPlaceholderText("请输入供应商名称"), { target: { value: "兼容供应商" } });
fireEvent.change(screen.getByPlaceholderText("https://api.openai.com/v1"), { fireEvent.change(screen.getByPlaceholderText("https://api.openai.com/v1"), {
target: { value: "https://api.test.com/v1" }, target: { value: "https://api.test.com/v1" },
@@ -215,9 +215,9 @@ describe("ProviderListPage", () => {
createProviderFetchMock(); createProviderFetchMock();
renderWithProviders(createElement(App), { initialRoute: "/models/providers" }); renderWithProviders(createElement(App), { initialRoute: "/models/providers" });
await waitFor(() => expect(screen.getByRole("button", { name: /新建供应商/ })).not.toBeNull()); await screen.findByRole("button", { name: /新建供应商/ });
fireEvent.click(screen.getByRole("button", { name: /新建供应商/ })); fireEvent.click(screen.getByRole("button", { name: /新建供应商/ }));
await waitFor(() => expect(screen.getByPlaceholderText("请输入供应商名称")).not.toBeNull()); await screen.findByPlaceholderText("请输入供应商名称");
}, 15000); }, 15000);
}); });

42
tests/web/routes/workbench.test.tsx
View File

@@ -74,12 +74,7 @@ describe("Workbench 路由", () => {
initialRoute: `/workbench/${MOCK_PROJECT.id}`, initialRoute: `/workbench/${MOCK_PROJECT.id}`,
}); });
await waitFor( await screen.findByText("返回管理台", {}, { timeout: 10000 });
() => {
expect(screen.getByText("返回管理台")).not.toBeNull();
},
{ timeout: 10000 },
);
}); });
test("不存在项目显示不可访问", async () => { test("不存在项目显示不可访问", async () => {
@@ -89,12 +84,7 @@ describe("Workbench 路由", () => {
initialRoute: "/workbench/nonexistent-id", initialRoute: "/workbench/nonexistent-id",
}); });
await waitFor( await screen.findByText("项目不存在或不可访问", {}, { timeout: 10000 });
() => {
expect(screen.getByText("项目不存在或不可访问")).not.toBeNull();
},
{ timeout: 10000 },
);
}); });
test("archived 项目显示不可访问", async () => { test("archived 项目显示不可访问", async () => {
@@ -104,12 +94,7 @@ describe("Workbench 路由", () => {
initialRoute: `/workbench/${MOCK_PROJECT.id}`, initialRoute: `/workbench/${MOCK_PROJECT.id}`,
}); });
await waitFor( await screen.findByText("项目不存在或不可访问", {}, { timeout: 10000 });
() => {
expect(screen.getByText("项目不存在或不可访问")).not.toBeNull();
},
{ timeout: 10000 },
);
}); });
test("Workbench 显示聊天室菜单", async () => { test("Workbench 显示聊天室菜单", async () => {
@@ -119,12 +104,7 @@ describe("Workbench 路由", () => {
initialRoute: `/workbench/${MOCK_PROJECT.id}`, initialRoute: `/workbench/${MOCK_PROJECT.id}`,
}); });
await waitFor( await screen.findByText("聊天室", {}, { timeout: 10000 });
() => {
expect(screen.getByText("聊天室")).not.toBeNull();
},
{ timeout: 10000 },
);
}); });
test("Workbench 收集箱路由可达", async () => { test("Workbench 收集箱路由可达", async () => {
@@ -134,12 +114,7 @@ describe("Workbench 路由", () => {
initialRoute: `/workbench/${MOCK_PROJECT.id}/inbox`, initialRoute: `/workbench/${MOCK_PROJECT.id}/inbox`,
}); });
await waitFor( await screen.findByText("新增素材", {}, { timeout: 10000 });
() => {
expect(screen.getByText("新增素材")).not.toBeNull();
},
{ timeout: 10000 },
);
}); });
test("Workbench 显示收集箱菜单", async () => { test("Workbench 显示收集箱菜单", async () => {
@@ -149,11 +124,6 @@ describe("Workbench 路由", () => {
initialRoute: `/workbench/${MOCK_PROJECT.id}`, initialRoute: `/workbench/${MOCK_PROJECT.id}`,
}); });
await waitFor( await screen.findByText("收集箱", {}, { timeout: 10000 });
() => {
expect(screen.getByText("收集箱")).not.toBeNull();
},
{ timeout: 10000 },
);
}); });
}); });

17
tests/web/test-utils.tsx
View File

@@ -90,6 +90,23 @@ export function renderWithProviders(ui: React.ReactElement, options?: RenderWith
); );
} }
export function renderWithBasicProviders(ui: React.ReactElement, options?: RenderWithProvidersOptions) {
const queryClient = createTestQueryClient();
const initialRoute = options?.initialRoute ?? "/";
return render(
createElement(
StrictMode,
null,
createElement(
QueryClientProvider,
{ client: queryClient },
createElement(MemoryRouter, { initialEntries: [initialRoute] }, ui),
),
),
);
}
function createTestQueryClient() { function createTestQueryClient() {
return new QueryClient({ return new QueryClient({
defaultOptions: { defaultOptions: {