业务应用测试与调试
组件库本身的测试不能替代业务应用验证。消费端至少应覆盖应用能否挂载、页面组合是否正确、关键状态是否联动，以及复杂页面在真实浏览器中的交互和性能。
建议测试层次
| 层次 | 验证目标 | 推荐方式 |
|---|---|---|
| 纯业务状态 | 查询条件、校验、权限、命令状态 | 普通 TypeScript 单元测试 |
| Render Tree 组合 | 页面是否创建正确组件与层级 | Vitest，直接实例化页面或页面工厂 |
| 应用生命周期 | Canvas 挂载、首帧、释放、重复进入 | jsdom 或浏览器测试 |
| 关键交互 | 点击、键盘、焦点、弹窗、编辑 | 浏览器自动化测试 |
| 视觉与性能 | 布局、主题、虚拟滚动、帧耗时 | 固定视口截图与 runtime 诊断 |
页面工厂测试
把业务页面构建集中在工厂或类中，测试不需要启动整个站点。
import { describe, expect, it } from 'vitest'
import { RenderPage, RenderText } from 'ds-ui'
function createGreetingPage(name: string): RenderPage {
return new RenderPage({ child: new RenderText(`你好，${name}`) })
}
describe('greeting page', () => {
it('creates a page for the current user', () => {
expect(createGreetingPage('Alice')).toBeInstanceOf(RenderPage)
})
})
业务断言应优先检查状态、命令和公开行为，不要依赖内部私有字段或绘制调用次数。
应用级冒烟测试
挂载测试需要提供有尺寸的 Canvas，并在每个用例结束后释放 AppHost。如果测试环境不实现 Canvas 2D，应使用浏览器测试，或安装项目统一的 Canvas mock；不要在每个用例里各写一套不一致的假实现。
重点覆盖：
- 宿主存在时可以完成
Application.mount(...).run(...)。 - 宿主缺失或类型错误时给出明确错误。
dispose()后事件监听、浮层和调度停止。- 同一路由反复进入退出不会产生重复事件。
- 字体加载失败或页面数据失败时仍有可诊断状态。
调试顺序
出现空白、错位或卡顿时按下面顺序定位：
- 检查 Canvas CSS 宽高是否非零。
- 检查主窗口是否已经接入页面子节点。
- 检查是否过早调用
dispose()，或存在旧 host 未释放。 - 开启 Layout Inspector 查看约束与最终尺寸。
- 开启 Performance Overlay 判断耗时发生在 layout、paint 还是 composite。
- 对 DataGrid、TreeGrid 等大数据控件确认是否启用虚拟化，并避免每次输入重建全量数据。
业务项目构建校验
业务项目应在持续集成中至少执行类型检查、生产构建和关键页面烟雾测试。校验时只依赖实际安装的 ds-ui 制品，这样可以及时发现版本升级后公共导出、主题资源或运行时行为的变化。