第1页
七牛前端测试实践
第2页
马逸清
第3页
我们的代码
理想中
理想中
第4页
现实
第5页
代码越来越乱
一开始是没有测试的 动一动代码产生 bug 代码放久了，不敢重构
测试
一开始是没有测试的 动一动代码产生 bug 代码放久了，不敢重构
测试
第6页
早期尝试
selenium + phantom 模拟用户点点点，自动化端到端测试
selenium + phantom 模拟用户点点点，自动化端到端测试
第7页
工作量比较大，难以坚持
第8页
早期尝试
测试 基础函数 但是对于 DOM 有依赖的部分不好测试
测试 基础函数 但是对于 DOM 有依赖的部分不好测试
第11页
隔离 DOM 注意力集中到 逻辑 部分
注入的方式 使依赖的处理更加方便
注入的方式 使依赖的处理更加方便
第12页
utils model 状态
view 状态
view 状态
第13页
Utils
第14页
service
第15页
controller
第16页
controller
第17页
依赖不好处理情况
容易想到的是 mock module 另一种方式是用 stub 来处理依赖
容易想到的是 mock module 另一种方式是用 stub 来处理依赖
第19页
stub 和 mock 的区别
stub 适合处理仅关注返回值的依赖 mock 关注依赖的行为验证，如无返回的依赖 关注行为验证的 stub 叫 spy
stub 适合处理仅关注返回值的依赖 mock 关注依赖的行为验证，如无返回的依赖 关注行为验证的 stub 叫 spy
第20页
mock data
第22页
fixture
load html and json
load html and json
第23页
目前用到的
+
+
or
karma-coverage + karma-fixture + karma-coffee
+
+
or
karma-coverage + karma-fixture + karma-coffee
第24页
karma config
第25页
karma config
第26页
配置 gulp
第27页
后续
持续集成 覆盖率报告
mock data 的改进 UI 自动化测试
持续集成 覆盖率报告
mock data 的改进 UI 自动化测试
第28页
实际体会到的好处
找出没有察觉的 bug 加深对问题的理解 降低修改代码的心理负担
找出没有察觉的 bug 加深对问题的理解 降低修改代码的心理负担
第29页
前端 MVC 框架展示和逻辑分离 Node 的发展产生了完善的工具 搭建测试环境更加容易了
第30页
这样就可以愉快的测试了么
第31页
迭代速度快 业务需求不稳定 人就那么些
理想和现实之间的平衡
理想和现实之间的平衡
第32页
实际情况比解决方案复杂
测试重要的部分 - 评估出错的风险 测试稳定的部分 - 分离模块 测试依赖少的部分 - 良好的设计 养成验证的习惯
测试重要的部分 - 评估出错的风险 测试稳定的部分 - 分离模块 测试依赖少的部分 - 良好的设计 养成验证的习惯
第33页
Q&A
https://plus.google.com/+马逸清
https://plus.google.com/+马逸清