搭建高效的tdd测试架构 - github pagescolorhook.github.io/efficient-frontend-tdd.pdf ·...
TRANSCRIPT
![Page 1: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/1.jpg)
搭建高效的TDD测试架构口碑网 F2E 正邪
前端测试
![Page 2: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/2.jpg)
单元测试 Unit Test目标:隔离程序单元并验证其正确性
http://zh.wikipedia.org/wiki/单元测试
![Page 3: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/3.jpg)
开发者怎么说?
• 单元测试很高深吧• 业务代码太简单,不需要单元测试• 写单元测试是在浪费青春
![Page 4: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/4.jpg)
管理层怎么说?
• 我们会在功能实现后写单元测试• 我们有专门的测试人员• 项目时间紧迫
![Page 5: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/5.jpg)
大师怎么说?
“我建议开发者花25%-50%的时
间在测试上。” —— @KentBeck
![Page 6: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/6.jpg)
TDD (Test Driven Development)
“极限编程原本有个规则,就是必须为每个可能出问题的地方编写测试,后来它发展成了测试驱动开发。” —— @RonJeffries
![Page 7: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/7.jpg)
TLD (Test Later Development)
目的:检验程序的正确性
未知生,焉知死
![Page 8: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/8.jpg)
TFD (Test First Development)
知其必死,该当何生目的:提供设计规范,而不仅是验证
![Page 9: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/9.jpg)
Why TDD?
• 强制解耦• 测试第一即用户第一• 减少迭代的代价
![Page 10: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/10.jpg)
JavaScript单元测试框架
JSUnit
QUnit YUITestJasmine
JSSpec JSpec
DOH
Crosscheck
RhinoUnit
Screw.Unit
Evidence
J3Unit
JSUnitTest
FireUnit
http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript
JSUnity
![Page 11: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/11.jpg)
前端TDD原则
• 测试代码在浏览器中运行• 支持多平台,多浏览器• 自动化执行• 即时响应
![Page 12: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/12.jpg)
jsTestDriver
• 基于Java
• 命令行工具• 支持多浏览器• 自带xUnit API
• 输入为JS文件
http://code.google.com/p/js-test-driver/
![Page 13: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/13.jpg)
Yeti (YUI easy testing interface)
• 基于NodeJS
• 命令行工具• 支持多浏览器• YUITest
• 输入为HTML文档
http://www.yuiblog.com/blog/2010/08/25/introducing-yeti-the-yui-easy-testing-interface/
![Page 14: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/14.jpg)
拥抱Yeti
• YUI
• 支持HTML文档
优势
劣势
• 在windows上部署困难
• 浏览器服务器不支持双向通信
![Page 15: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/15.jpg)
革命还在路上
• 利用socket.io提供双向通信
• 结合Selenium 2.0中的WebDriver REST API在中枢服务器上测试
@Reid (Reid Bucke)’s plan
![Page 16: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/16.jpg)
口碑特色
• 搭建中枢服务器• 集成到团队开发工具ATT(Auto Task Tool)
![Page 17: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/17.jpg)
一点实践• jsxml 一个操作XML的javascript库
• 降低开发难度• 记录开发过程• 及时发现问题• 提供文档
![Page 18: 搭建高效的TDD测试架构 - GitHub Pagescolorhook.github.io/efficient-frontend-tdd.pdf · 搭建高效的tdd测试架构 口碑网 f2e 正邪 前端测试](https://reader036.vdocuments.net/reader036/viewer/2022081418/5f1e2a4d4358ff2a7d18a3f8/html5/thumbnails/18.jpg)
Thank you!
• @colorhook
• http://colorhook.com/blog