SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场write-frontend-tests

write-frontend-tests

测试与质量

查看项目

更新于 10-16 04:23

技能介绍

用途

该技能面向 AutoGPT 前端仓库（autogpt_platform/frontend），用于根据当前分支相对 dev 分支的前端代码变更，规划并编写集成测试。适用于用户要求为改动的前端页面或组件编写测试的场景。

主要能力

技能的工作流程分为若干步骤：

  1. 识别变更的前端文件：以 BASE_BRANCH（默认 dev）为基准，通过 git diff "$BASE_BRANCH"...HEAD --name-only -- src/ 列出改动文件，并过滤掉 generated、tests、.test.、.stories.、.spec. 等。同时读取 diff 内容以理解改动。

  2. 归类变更并确定测试目标：区分页面（page.tsx）、Hook（use*.ts）、组件（components/ 下的 .tsx）与工具函数（helpers.ts、utils.ts）。优先级依次为：有新/变更数据获取或交互的页面、内部逻辑复杂的组件（模态框、表单、向导）、具有独立业务逻辑的共享 Hook、纯工具函数。仅样式、类型或配置的变更会跳过。

  3. 检查已有测试：在对应 __tests__/ 目录下查看是否已有测试，区分需新建还是需更新。

  4. 识别所用的 API 端点：通过 grep 查找生成式 API Hook 的导入（如 __generated__/endpoints、use[A-Z].*V[12]），并定位对应的 MSW 处理器（如 getGetV2ListLibraryAgents.*Handler），列出所需的 200 与 4xx 处理器。

  5. 编写测试计划：在写代码前输出编号列表计划，标明每个文件（NEW 或 UPDATE）及其用例，并提交给用户确认，等待反馈后再继续。

  6. 编写测试：遵循项目约定，包括从 @/tests/integrations/test-utils 导入 render、在渲染前用 server.use() 设置 MSW、对数据获取后出现的元素使用 findBy*、只对立即存在的元素用 getBy*、用 screen 查询而非解构 render、交互后用 waitFor、从 test-utils 导入 fireEvent/userEvent、不在 API 边界以外 mock、优先使用 Orval 生成的 MSW 处理器、不手动使用 act()、每个测试聚焦一个行为、使用描述性测试名。自定义 MSW 覆盖时使用代理 URL 模式 http://localhost:3000/api/proxy/api/v{version}/{path}。

  7. 运行并验证：执行 pnpm test:unit --reporter=verbose，失败时修复测试（除非确有源码缺陷），随后运行 pnpm format、pnpm lint、pnpm types。

使用方式

技能作为自动化步骤执行，触发命令位于 autogpt_platform/frontend 目录下，接受可选参数作为基准分支。执行过程中会先输出测试计划并暂停等待用户确认。

参考文件

  • autogpt_platform/frontend/TESTING.md
  • autogpt_platform/frontend/src/tests/AGENTS.md
  • autogpt_platform/frontend/src/tests/integrations/test-utils.tsx
  • autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsx

适用场景与限制

适用于 AutoGPT 前端仓库内有实际代码变更、需要补充集成测试的场景。若仅有样式、类型或配置变更则跳过。测试目标的选取与优先级、MSW 处理器的使用方式均遵循上述规则。价格、平台支持范围、其他效果说明资料未提供。