java script测试之js unit ut
TRANSCRIPT
![Page 1: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/1.jpg)
JavaScript Testing 之JSUnit UT
CBU- 技术部 - 商业产品开发部 -前端组
![Page 2: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/2.jpg)
Agenda:
• 什么是 UT• 前端为什么需要 UT• UT 的基础• UT 的框架选型• 怎么写 UT• 我们遇到的问题及如何解决的• QA
30mins+
![Page 3: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/3.jpg)
什么是 UT?
A
BC
![Page 4: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/4.jpg)
3 步• Set Up• Prepare an input • Call a method • Check an output• Tear down
t.test_methodA=function(){ var input={some input value}; var output=A(input); jsunit.assertEquals(output,expectValue);}
![Page 5: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/5.jpg)
A unit test is a piece of a code (usually a method) that invokes another piece of code and checks the correctness of some assumptions afterward.
If the assumptions turn out to be wrong, the unit test has failed.
A “unit” is a method or function. UT should be : Automated, trustworthy,
readable, and maintainable.
![Page 6: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/6.jpg)
前端为什么需要 UT?
前端逻辑复杂化 设备多样化 / 前端环境复杂化 前端开发模块化 前端组件重用化
减少 Bug 数目,提高前端的代码质量,
规范前端编码
![Page 7: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/7.jpg)
单元测试元素的组成 ✦ Test Suite
✦ Tests ✦ Assertions
✦ Async Tests
✦ Test Runner
![Page 8: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/8.jpg)
Assertions
✦assert([comment], booleanValue) ✦ assertTrue([comment], booleanValue) ✦ assertFalse([comment], booleanValue) ✦ assertEquals([comment], value1, value2) ✦ assertNotEquals([comment], value1, value2) ✦ assertNull([comment], value) ✦ assertNotNull([comment], value)
…• More http://www.jsunit.net/documentation/
![Page 9: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/9.jpg)
Tests
t.testEval3 =function(){ jsunit.assertEquals(4, eval("2 + 3")); };
t.testEval4 = function() { var a=function(){}; jsunit.assertTypeOf(a, "function");
};
![Page 10: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/10.jpg)
TestRunner
![Page 11: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/11.jpg)
UT 框架的选择
JSUnit QUnit …
![Page 12: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/12.jpg)
JSunit VS QUnitJSUnit QUnit
运行是否方便 不太方便,需要运行testRunner
很方便,写完,刷新,即可运行
语法风格 还是 2000 年时候的,有点过时
比较语义化 , 有 module的概念
是否支持异步 不支持,需要使用setTimeOut 等来解决
支持,使用 start ,stop 等
是否支持 Ant 支持 不支持
是否可以 CI 可以, Hudson 有现成的插件
不支持,输出的结果带html 标签, john 设计时就没考虑这个
是否适合大型或多个项目 比较适合,有 testsuit 和testpage 概念
多个项目,有点混乱
远程控制 支持 不支持
![Page 13: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/13.jpg)
为什么选择 JSUnit
• JSUnit 设计理念源于 Junit, 后端的开发同学容易接受
• Ant, CI, 多项目的支持
![Page 14: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/14.jpg)
语法改造• Ali.test.jsunit.defineTests("ali.ux.logging", function(t,
jsunit) { jsunit.require("logger/js/logging.js"); t._setUp = function() { //todo }; t._tearDown = function() { //todo };
• } );
![Page 15: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/15.jpg)
异步支持
t.testAsyncCall=function(){ jQuery.ajax({
url: jsunit.TEST_BASE+"wxb/data/data.json", success:t.asyncCallback(function(obj){ jsunit.assertEquals(1,obj.data.userType); }),
dataType: "json"
});
}; t.testAsyncCall._async=true;
![Page 16: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/16.jpg)
怎样写?
![Page 17: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/17.jpg)
Demo
![Page 18: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/18.jpg)
问题列表前端单元测试能带给我们什么?
1 : 产品的功能性描述2 : API 的浏览器兼容性测试3 : 重要 bug 的 fix 测试4 : 添加新功能,是否影响老功能的测试5 : 产品的可维护性更好
![Page 19: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/19.jpg)
在编写代码过程过,对于可测性,有个很重要的问题,就是有的私有函数,为了安全性,用闭包来封装,断绝其和外界的访问,但这就给可测性带来了问题。
方案: 在编写代码时,需要测试的方法,我们可以使用 _testName 来定义其为私有函数,然后使用 @aliobf-clobber 等这些meta-data 来描述,类似于 Google guice 的方式。使用 ant 和 Java 方式来解决。
![Page 20: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/20.jpg)
什么样的项目适合做单元测试? ✦ 需要 JS 处理业务逻辑 (Heavy JavaScript APP ) ✦ 后台拿到数据后,需要对数据进行处理的 ✦ 前端面向对象编程,而且最好 logic 和view 是分开的。
![Page 21: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/21.jpg)
什么样的项目不适合做单元测试? 单纯的从后端拿到数据,然后显示的项目
![Page 22: Java script测试之js unit ut](https://reader034.vdocuments.net/reader034/viewer/2022052118/55892ed0d8b42a22388b4710/html5/thumbnails/22.jpg)
QA