1. JavaScript Testing之
JSUnit UT
CBU-技术部-商业产品开发部-
前端组

2. Agenda:
• 什么是UT
• 前端为什么需要UT
• UT的基础
• UT的框架选型
• 怎么写UT
• 我们遇到的问题及如何解决的
• QA
30mins+

3. 什么是UT?
A
B
C

4. 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);
}

5. 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.

6. 前端为什么需要UT?
前端逻辑复杂化
设备多样化/前端环境复杂化
前端开发模块化
前端组件重用化
减少Bug数目，提高前端的代码质量，
规范前端编码

7. 单元测试元素的组成
✦ Test Suite
✦ Tests
✦ Assertions
✦ Async Tests
✦ Test Runner

8. 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/

9. Tests
t.testEval3 =function(){
jsunit.assertEquals(4, eval("2 + 3"));
};
t.testEval4 = function() {
var a=function(){};
jsunit.assertTypeOf(a, "function");
};

10. TestRunner

11. UT框架的选择
JSUnit QUnit …

12. JSunit VS QUnit
JSUnit QUnit
运行是否方便 不太方便，需要运行 很方便，写完，刷新，即
testRunner 可运行
语法风格 还是2000年时候的，有点 比较语义化,有module的
过时 概念
是否支持异步 不支持，需要使用 支持，使用start ,stop等
setTimeOut等来解决
是否支持Ant 支持 不支持
是否可以CI 可以，Hudson有现成的插 不支持，输出的结果带
件 html标签，john设计时就
没考虑这个
是否适合大型或多个项目 比较适合，有testsuit和 多个项目，有点混乱
testpage概念
远程控制 支持 不支持

13. 为什么选择JSUnit
• JSUnit设计理念源于Junit,后端的开发同学容
易接受
• Ant, CI,多项目的支持

14. 语法改造
• Ali.test.jsunit.defineTests("ali.ux.logging", function(t, js
unit) {
jsunit.require("logger/js/logging.js");
t._setUp = function() {
//todo
};
t._tearDown = function() {
//todo
};
• }）；

15. 异步支持
t.testAsyncCall=function(){
jQuery.ajax({
url:
jsunit.TEST_BASE+"wxb/data/data.json", success:t.asy
ncCallback(function(obj){
jsunit.assertEquals(1,obj.data.userType);
}),
dataType: "json"
});
};
t.testAsyncCall._async=true;

16. 怎样写？

17. Demo

18. 问题列表
前端单元测试能带给我们什么？
1： 产品的功能性描述
2： API的浏览器兼容性测试
3： 重要bug的fix测试
4： 添加新功能，是否影响老功能的测试
5： 产品的可维护性更好

19. 在编写代码过程过，对于可测性，有个很重
要的问题，就是有的私有函数，为了安全
性，用闭包来封装，断绝其和外界的访问，
但这就给可测性带来了问题。
方案： 在编写代码时，需要测试的方法，
我们可以使用_testName来定义其为私有函
数，然后使用@aliobf-clobber等这些meta-
data来描述，类似于Google guice的方式。
使用ant和Java方式来解决。

20. 什么样的项目适合做单元测试？
✦需要JS处理业务逻辑 (Heavy JavaScript
APP )
✦后台拿到数据后，需要对数据进行处理的
✦前端面向对象编程，而且最好logic和view
是分开的。

21. 什么样的项目不适合做单元测试？
单纯的从后端拿到数据，然后显示的项目

22. QA