企业官网建设流程全解析

• 前端
• UI库/组件

CanJS 是一个用更少代码构建 CRUD 应用的开源 JavaScript 客户端框架，其核心——Observable（可观察对象）与 StacheElement 组件——正是 CanJS 测试的主战场。本指南精选 7 种 CanJS 测试技术，从 Observable 属性、异步逻辑到组件 DOM 事件、路由，让你对每次提交都充满信心 🧪

开始之前：CanJS 测试环境一览

在动手写测试前，先认识一下生态里的常用工具：

官方测试套件的运行方式都定义在 package.json 中：npm run test会依次执行开发构建、生产构建、构建器与全局构建四层测试，保证代码在每种打包形态下行为一致。

技术1：Observable 基础测试——五步走

Observable 承载了 CanJS 应用中绝大部分业务逻辑，而测试它和测试普通 JS 对象几乎一样。标准流程是：

1. 创建 Observable 实例
2. 断言属性的默认值
3. 设置属性（或调用方法）
4. 断言相关属性的新值
5. 重复第 3、4 步

完整可运行的示例见 observable-objects-basic-setup.html，核心思路如下（Mocha + Chai 风格）：

const vm = new Person({}); assert.equal(vm.name, ""); // 2. 测默认值 vm.first = "Kevin"; assert.equal(vm.name, "Kevin"); // 3. 设属性 → 4. 测新值 vm.setName("Marv Merchants"); // 方法同样这样测 assert.equal(vm.first, "Marv");

💡 这套五步法对ObservableObject和ObservableArray都有效，是后续所有技术的基座。

技术2：用 listenTo 替代 setTimeout，测异步逻辑

节流、防抖是常见需求。例如输入框停止输入 500ms 后才更新text（示例：demos/testing/throttled-input.html）。

❌ 如果测试里写setTimeout(断言, 500)，不同浏览器执行时机略有差异，测试会随时间推移越来越"脆"，半年后莫名失败。

✅ 正确做法：不要猜时间，而是监听变化。先给text属性挂listenTo监听器，再触发赋值，在回调中断言：

throttled.listenTo("text", () => { assert.equal(throttled.text, "Hi there!"); done(); }); throttled.text = "Hi there!"; // 触发异步行为

完整实现见 observable-objects-asynchronous-behavior.html。想直观理解 CanJS 内部事件队列如何调度这些异步行为，可以参考下面这张 can-queues 可视化截图：

技术3：让异步派生属性可测——拆分属性 + 注入 Promise

异步属性（async property）常从 Model 拉取数据，直接测会把 Model 逻辑也卷进来。指南推荐两步改造（详见 testing.md）：

1. 拆分：把todoCount（最终值）拆成todoCount+todoCountPromise（Model 返回的 Promise）两个属性
2. 注入：利用 getter 的lastSet参数，允许构造时传入一个自定义 Promise 作为默认值，测试数据永远"恰好"满足断言

这样一来，真实的getList请求根本不会发生，todoCount就能按技术2的方式测异步更新。示例：observable-objects-properties-derived-from-asynchronous-behavior-async.html。

💡 还可以更彻底：给todoCountPromise注入一个"鸭子类型"的同步伪 Promise，断言就可以完全同步执行，连done()都不用了——见 observable-objects-properties-derived-from-asynchronous-behavior-sync.html。

技术4：模型依赖可注入，单元测试更纯粹

上一节测了"拿到数据后做了什么"，但还没验证"是否正确调用了 Model"。解决办法是依赖注入：把导入的todoConnection改为 Observable 上的一个属性（默认值指向真实连接），代码内部改用this.todoConnection.getList(...)。

测试时通过构造函数注入一个假的testTodoConnection，即可精确断言：

• getList被调用了，且参数正确（如complete: true）
• getter 返回的就是getList的结果

示例：observable-objects-properties-derived-from-models.html。这个技巧对任何"直接从别的模块导入函数"的场景都通用。

技术5：组件 DOM 事件测试——render + dispatch

组件（StacheElement）是连接 Observable 与 DOM 的胶水。对于模板里的绑定（如value:bind="first"），不必真的在浏览器里敲键盘，四步即可模拟：

1. 创建组件实例
2. 调用实例的render()，把视图渲染进组件的innerHTML
3. 用querySelector在组件内找到事件目标元素
4. 设置元素值后，用domEvents.dispatch派发事件，断言属性更新

nameForm.render(); const input = nameForm.querySelector("input.first"); input.value = "Marv"; domEvents.dispatch(input, "change"); assert.equal(nameForm.first, "Marv");

✅ 即使组件不在文档中，这套测试也能正常工作。完整示例：custom-elements-dom-events-form.html；用listenTo监听 DOM 事件的场景见 custom-elements-dom-events-modal.html。

调试绑定时，官方 DevTools 的 bindings graph 能帮你快速看清属性与 DOM 节点的绑定关系：

技术6：测试 connected 钩子里的代码

connected生命周期钩子是"组件进入文档后执行一次"的代码的理想位置。测试这类代码，关键是确保connect被调用：

• 手动调用：直接element.connect()，适合逻辑不依赖真实文档的场景——custom-elements-connect-manually.html
• appendChild：若代码依赖元素真实在文档中，就把元素appendChild到测试区域——custom-elements-connect-append-child.html

⚠️ 若测试框架没有自动清理机制（如 QUnit 的 fixture 区域），请记得在测试后自己移除元素，避免测试间互相污染。

技术7：路由测试——RouteMock 不动真实 URL

路由测试的最大坑：断言过程中 URL 突然跳到/list/5，整个测试页面就废了。CanJS 官方提供RouteMock来解决——把它赋给route.urlData后：

• 修改routeMock.value = "#!list/5"，模拟 URL 变化，断言routeData正确更新
• 修改routeData，用routeMock.on(...)监听 URL 的异步回写

双向测试示例：routing-route-data.html。

更进一步，把"显示哪个组件""传什么数据"都设计为从routeData派生的属性，就能完全脱离真实路由独立测试：

• 显示正确组件：routing-displaying-custom-elements.html
• 向组件传递数据：routing-passing-data.html

进阶：Model 与集成测试

用 can-fixture 测 Model 连接。can-fixture会拦截 connection 发出的真实请求并返回模拟数据，四步走：

1. 创建示例数据 → 2. 为指定 URL 注册 fixture → 3. 调用 Model 方法（如Todo.getList()）→ 4. 断言返回的正是示例数据

示例：models-connections.html。

用 QueryLogic 测查询逻辑。Model 内部靠 QueryLogic 决定缓存与实时行为，可直接用filterMembers验证查询能否正确过滤数组、用isMember验证记录是否命中查询——遇到缓存不生效时，这类测试是最好的排错工具：models-query-logic.html。

集成测试验证核心流程。集成测试成本高，只建议覆盖最重要的功能，或在大型重构之前先补上。通用模式五步：渲染应用 → 验证渲染结果 → 模拟用户交互 → 验证响应 → 清理。以 ToDo 应用为例（FuncUnit 编写，Cypress 等同样适用）：integration-testing.html

总结：按测试对象选技术

掌握这 7 种技术后，无论是 Observable 里的一行 getter，还是整个应用的路由流转，你都能写出稳定、快速、不脆弱的测试——放心重构，大胆提交 ✅

• 前端
• UI库/组件