1. 前端测试

2. 个人介绍： 赵勇/ 淘宝UED / 前端 / 遇春（花名）

3. 前端测试

5. 找一个 说服自己的理由

6. 产品的变化 • RIA • Base on Browser • Heavy Javascript • Html 5

7. 开发量的变化 Server Browser Server Browser

8. 前端关注点的变化 外部质量 功能 界面 内部质量 可维护性 性能 设计模式 开发效率 前端质量

9. 前端团队的变化 游击队 正规军

10. 测试同学： “前端的问题越来越多了”

11. 别再找理由了 先搞起来再说

13. 产品界面 • 功能可用 • 性能高效稳定 • 代码可维护性强 前端测试目标

14. 声音 “前端不好测” “界面老是改，改完用例就没用了” “单元测试不好做，很难隔离，不好做mock” “业内没有成熟的实践” “项目太紧，没时间” “前端测试性价比不高”

15. 前端的痛 Dom 兼容性 匿名函数 Ajax 面向过程 闭包 异步 浏览器 性能

16. 分而治之 匿名函数 浏览器 兼容性 Ajax 闭包 Dom 单元测试 Dom测试 性能测试 功能测试 面向过程 性能 异步

17. 单元测试 • 对象属性，方法 • 过程函数 • Dom测试 • 结构，布局 • 兼容性 前端测试 • 功能测试 • 过程 • 性能测试 • 动态执行响应

18. DOM测试

19. DOM结构完整 • 模块布局样式无错乱 • 浏览器兼容性 测试目标

20. 谁动了我的Tag </div>

21. 还有 • 加个样式，Ie6乱掉了 • 开发html嵌套时，标签没闭合 • 某个元素的样式名写错了 • …

22. Demo http://www.labs.com/sample/ershou.html#testOn

23. 代码 describe('UI-logo',function(){ varlogo = KISSY.get('#logo'); it('exist',function(){ expect(logo).toBeNode(); }); })

24. 代码 describe('UI-logo',function(){ varlogo = KISSY.one('#logo'); it('position is right',function(){ varoPos = (KISSY.DOM.viewportWidth() – 990)/2; expect(logo.width()).toNear(177); expect(logo.height()).toNear(48); expect(logo.offset().left).toNear(oPos); expect(logo.offset().top).toNear(47); }); })

25. 代码 describe('UI-新鲜货',function(){ varfreshItem = KISSY.one('#J_FreshItems'); it('childNode is right',function(){ expect(freshItem.children().length).toBe(2); }); })

26. 功能测试

27. 功能可用 • 交互过程正确 功能测试目标

28. Demo http://www.labs.com/sample/ershou.html#testOn

29. 代码 describe('功能-城市切换', function(){ varcityTrigger = KISSY.get('.J_CityPicker'), cityPopup= KISSY.get('.more-city-bd'); it('打开地区浮出层', function(){ jasmine.simulate(cityTrigger, 'mouseover'); expect(cityPopup).toBeVisible(); }); })

30. 性能测试

31. 同步执行耗时 • 异步响应耗时 性能测试目标

32. Demo http://www.labs.com/sample/ershou.html#testOn

33. 代码 describe('功能-城市切换', function(){ varcityTrigger = KISSY.one('.J_CityPicker').getDOMNode(), cityPopup= KISSY.one('.more-city-bd').getDOMNode(); it('打开速度', function(){ var start = +new Date(); jasmine.simulate(cityTrigger, 'mouseover'); var end = +new Date(); var runtime = end-start; expect(cityPopup).toBeVisible(); expect(runtime).toBeLessThan(500); }); })

34. 代码 describe('搜索推荐-城市切换',function(){ varsearchInput = KISSY.get('#J_TBSearchQuery'); it('自动搜索推荐', function(){ searchInput.value= 'nokia'; jasmine.simulate(searchInput,'keydown'); waits(1000); runs(function(){ varsuggestContainer = KISSY.get('.ks-suggest-container'); varsuggestContent = KISSY.one('.ks-suggest-content').children().length; expect(suggestContainer).toBeVisible(); expect(suggestContent).toBe(1); }); }); })

35. 单元测试

36. 函数 • 对象的属性和方法 • 业务逻辑 单元测试目标

37. 代码可测试性问题 面向过程，过程嵌套 太多的DOM操作 展现逻辑和业务逻辑混淆 闭包

38. 语言特性 本地对象 & 宿主对象 静态作用域链 动态 & 弱类型

39. 提升可测试性 抽象

40. 过程式函数结构 function(){ var CONSTANTS = 'constants value', ELEMENTID = 'J_EId'; varlocalVariable, result; var element = KISSY.one(ELEMENTID); localVariable = element.attr('data-need'); result = handle(localVariable); update(element,result); E.on(element, 'event', EventHandler); } 定义常量 定义变量 从UI层获取数据 处理数据 更新DOM 绑定事件回调

41. 对象结构 Obj :{ attr-data:'value', attr-ui:D.get('xid'), method-data:function(){ // deal attr-data... }, method-ui:function(){ // deal attr-ui... }, process:function(){ method-data(); method-ui(); } } 数据属性 DOM相关属性 处理数据的方法 操作DOM的方法 功能或过程方法

42. 如何抽象 单一职责法则，更细颗粒的过程抽象 避免使用匿名函数 将数据处理和DOM操作完全分开 分离业务逻辑和展现逻辑 减少闭包，为闭包中待测函数提供全局命名空间

43. 过程抽象范例 //...calculate point var level; if (point < 100){ level = '文艺青年'; }else if (point >= 100 && point < 200){ level = ‘2B青年’; }else{ level = '普通青年‘; } //...use level function getLevel(point){ var level; if (point < 100){ level = '文艺青年'; }else if (point >= 100 && point < 200){ level = '2B青年‘; }else{ level = '普通青年‘; } return level; } //... var level = getLevel(point); //...

44. 闭包内函数暴露测试接口范例 (function(){ var a = 1; function method1(m){ return a + m; } testTarget = window['testTarget‘] || {}; testTarget.method1 = method1; })();

45. 逻辑分离范例 Event.on('#content','blur',function(){ if(hasError(this.value)){ showError(); } }) function hasError(v){ return isBlank(v); } function isBlank(v){ var BLANK = ''; return KISSY.trim(v) === BLANK; } function showError(){ varerrMsg = '输入有误，不能为空'; alert(errMsg); } Event.on('#content','blur',function(){ if(this.value=== ''){ alert('输入有误，不能为空') } }) hasError(this.value) showError()

46. 提升可测试性 分层

47. 构建Js本地对象 处理数据逻辑 与 Server 通信 添加事件回调 操作DOM，BOM Javascript

48. DOM BOM Javascript Control UI Model Server

49. MVC对象结构 View Control obj obj obj instantiation obj obj process bindEvent … Model obj obj obj obj

50. ViewObj 获取DOM，BOM数据 修改DOM和BOM 处理展现层逻辑 _Attr：value1 AttrEl：someEl getUIData：function(){ //… } setUI：function(){ //… }