AI Agent 课程文档

切换日光/暗黑模式

081. 分页状态、Loading 管理与前端测试 ​

学习目标 ​

这一节继续完善 useAutoTable，并引入前端自动化测试。

学完后，你应该能理解：

  • Ant Design Table 分页状态怎么维护；
  • 为什么查询完成后再更新页码；
  • satisfies 和 as 的区别；
  • 为什么 loading 不能只用一个布尔值；
  • Vitest 如何跑 React 组件测试；
  • 前端覆盖率报告怎么看。

分页状态 ​

表格需要分页配置。

常见字段包括：

  • 当前页；
  • 每页数量；
  • 总数；
  • 是否显示每页数量切换器；
  • 每页数量选项。

Ant Design Table 的分页页码从 1 开始。

但后端或内部逻辑可能从 0 开始。

所以请求和展示之间要注意转换。

初始化分页 ​

分页初始值可以来自运行时配置。

例如：

ts
pageSize: runningConfig.pageSize

如果调用方没有配置，就使用默认值。

这样页面可以控制默认每页显示多少条。

不同表格也可以有不同默认页大小。

自动加载数据 ​

通用表格可以支持自动加载。

默认情况下，组件挂载后自动请求第一页数据。

但有些业务不希望自动加载。

例如页面需要先等某个条件准备好。

所以配置里需要一个开关。

如果 autoLoad 为 false，就不在初始化时自动请求。

查询完成后再更新分页 ​

切换页码时，不要先更新页码再发请求。

更稳的做法是：

  1. 发起请求；
  2. 请求成功；
  3. 更新数据；
  4. 更新分页状态。

如果先更新页码，后面请求失败或被取消，界面就会显示一个没有真正加载成功的页码。

这会让状态和数据不一致。

总数必须返回 ​

Ant Design Table 的分页器需要总数。

如果不返回总数，分页器显示会有问题。

所以前端请求后端时要带：

ts
withCount: true

后端再返回 total。

这和前面后端讲的总数查询有直接关系。

前端组件需要总数，就必须接受多一次查询的成本。

请求参数类型 ​

请求体要有类型约束。

否则写错字段也不报错。

例如把 withCount 写成别的名字，TypeScript 不知道这个对象应该长什么样，就不会提示。

给请求体标注类型后，错误字段和错误类型会立刻暴露。

satisfies ​

satisfies 可以用来检查一个对象是否满足某个类型。

例如：

ts
const body = {
  page: 0,
  pageSize: 10,
  withCount: true,
} satisfies QueryBody;

它会检查每个属性是否符合 QueryBody。

如果某个字段类型不对，会在对应字段上报错。

satisfies 和 as ​

as 更像类型断言。

它告诉 TypeScript：“把这个当成某个类型”。

如果乱用，可能把错误压下去。

satisfies 更像类型检查。

它不会把错误强行盖过去。

写配置对象、请求参数、测试数据时，satisfies 经常更安全。

Loading 不能只用布尔值 ​

如果只有一个请求，loading 用布尔值就够了。

但通用表格会有多个异步动作。

例如：

  • 列表查询；
  • 批量编辑；
  • 批量删除；
  • AI 查询；
  • AI 新增。

多个请求并发时，一个请求结束不能直接把 loading 关掉。

因为其他请求可能还没结束。

Loading ID 管理 ​

更稳的方式是维护 loading ID 列表。

每次开始一个异步任务时，创建一个 ID。

任务结束时释放这个 ID。

只要列表里还有 ID，就说明仍然有任务在运行。

当所有 ID 都释放后，loading 才变成 false。

这样可以处理并发请求。

表格 Loading ​

Hook 内部维护 loading 状态。

再把它传给 Table：

tsx
<Table loading={loading} />

这样查询时表格能显示加载状态。

后面批量编辑、AI 操作等功能也可以共用同一套 loading 管理。

前端测试工具 ​

项目使用 Vite 后，对应测试工具使用 Vitest。

它适合 Vite 项目。

可以跑：

  • 工具函数测试；
  • React 组件测试；
  • Hook 相关测试；
  • 覆盖率报告。

需要安装测试依赖，并配置测试脚本。

测试环境补丁 ​

前端测试运行在 Node 环境里。

它不是浏览器。

所以有些浏览器 API 不存在。

例如：

ts
window.matchMedia

Ant Design 或组件代码可能会依赖它。

测试初始化文件里可以手动 mock 这些 API。

这和后端测试里准备 conftest.py 的思路类似。

组件测试基本结构 ​

React 组件测试通常会：

  1. 渲染组件；
  2. 找到页面元素；
  3. 断言元素存在；
  4. 断言文本内容；
  5. 模拟点击或输入；
  6. 断言界面变化。

测试里常用 data-testid 定位元素。

它是专门给测试用的属性。

覆盖率报告 ​

Vitest 也能生成覆盖率报告。

报告会显示：

  • 文件覆盖率；
  • 行覆盖率；
  • 哪些行没跑到；
  • 每行执行次数。

红色行表示没有被测试覆盖。

这能帮助你补测试。

AI 生成测试 ​

可以让 AI 帮你生成测试用例。

但测试不一定一次就能跑通。

它可能缺少上下文，也可能误解组件行为。

更现实的方式是：

  • 让 AI 生成初稿；
  • 自己运行；
  • 根据错误调整；
  • 必要时补充项目说明文件；
  • 再让 AI 继续修。

测试本身也是代码，也需要调试。

项目说明文件 ​

如果经常让 AI 写测试，可以在项目根目录放说明文件。

里面写清楚：

  • 测试工具；
  • 组件约定；
  • 文件命名；
  • mock 方式；
  • 哪些行为必须覆盖。

AI 工具读取后，生成的测试更容易贴合项目。

这一节的重点 ​

这一节让表格从“能查数据”变成“有分页、有 loading、有测试基础”。

你需要记住：

  • Table 分页页码通常从 1 开始；
  • 查询成功后再更新分页状态；
  • Ant Design 分页器需要总数；
  • satisfies 更适合检查配置对象；
  • 并发 loading 要用 ID 列表管理；
  • Vitest 是 Vite 项目的常用测试工具；
  • Node 测试环境需要补齐浏览器 API；
  • AI 能写测试初稿，但仍要人工运行和修正。

AI Agent 课程学习文档。

Copyright © 2026