当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往，单元测试往往多见于服务端的开发中，但随着Web编程领域的分工逐渐明细，在前端Javascript开发领域中，也可以进行相关的单元测试，以保障前端开发的质量。
在服务器端的单元测试中，都有各种各样的测试框架，在JavaScript中现在也有一些很优秀的框架，但在本文中，我们将自己动手一步步来实现一个简单的单元测试框架。
这段代码目前没有发现比较严重的bug，本文为了测试，我们把 .replace(/MM/g,time.TMonth) 改为 .replace(/MM/g,time.Month)，这个错误是当月份小于10时，没有用两位数表示月份。
Demo 输出方法PrintMessage：
代码如下:
function PrintMessage(text,color){
var div=document.createElement("div");
div.innerHTML=text;
div.style.color=color;
document.body.appendChild(div);
delete div;
}
下面，我们就写一个类似jsTestDriver中的TestCase方法，来进行批量测试：
代码如下:
function testCase(name,tests){
var successCount=0;
var testCount=0;
for(var test in tests){
testCount++;
try{
tests[test]();
PrintMessage(test+" success","#080");
successCount++;
}
catch(e){
PrintMessage(test+" failed:"+e.message,"#800");
}
}
PrintMessage("Test result: "+testCount+" tests,"+successCount+" success, "+ (testCount-successCount)+" failures","#800");
}
测试代码：
代码如下:
var date=new Date(2012,3,9);
testCase("date toString test",{
yyyy:function(){
assert("yyyy should return 2012",date.toString("yyyy")==="2012");
},
MM:function(){
assert("MM should return 04",date.toString("MM")==="04");
},
dd:function(){
assert("dd should return 09",date.toString("dd")==="09");
}
});
结果为：
这样我们一眼就可以看出哪个出错了。但这样是否就完美了呢，我们可以看到最后那个测试中 var date=new Date(2012,3,9)是放在testCase外面定义的，并且整个testCase的测试代码中共用了date，这里因为各个方法中没有对date的值进行修改，所以没出问题，如果某个测试方法中对date的值修改了呢，测试的结果就是不准确的，所以在很多测试框架中都提供了setUp和tearDown方法，用来对统一提供和销毁测试数据，下面我们就在我们的testCase中加上setUp和tearDown方法。
第四版：统一提供测试数据的批量测试
首先我们添加setUp和tearDown方法：
代码如下:
testCase("date toString",{
setUp:function(){
this.date=new Date(2012,3,9);
},
tearDown:function(){
delete this.date;
},
yyyy:function(){
assert("yyyy should return 2012",this.date.toString("yyyy")==="2012");
},
MM:function(){
assert("MM should return 04",this.date.toString("MM")==="04");
},
dd:function(){
assert("dd should return 09",this.date.toString("dd")==="09");
}
});
由于setUp和tearDown方法不参与测试，所以我们要修改testCase代码：
代码如下:
function testCase(name,tests){
var successCount=0;
var testCount=0;
var hasSetUp=typeof tests.setUp == "function";
var hasTearDown=typeof tests.tearDown == "function";
for(var test in tests){
if(test==="setUp"||test==="tearDown"){
continue;
}
testCount++;
try{
if(hasSetUp){
tests.setUp();
}
tests[test]();
PrintMessage(test+" success","#080");
if(hasTearDown){
tests.tearDown();
}
successCount++;
}
catch(e){
PrintMessage(test+" failed:"+e.message,"#800");
}
}
PrintMessage("Test result: "+testCount+" tests,"+successCount+" success, "+ (testCount-successCount)+" failures","#800");
}
运行后的结果跟第三版相同。
小结及参考文章
上面说了，好的设计是不断重构的结果，上面的第四版是不是就完美了呢，远远没有达到，这里只是一个示例。如果大家需要这方面的知识，我后面可以再写写各个测试框架的使用。
本文只是JS单元测试入门级的示例，让初学者对JS的单元测试有个初步概念，属于抛砖引玉，欢迎各位高人拍砖补充。
本文参考了《测试驱动的JavaScript开发》(个人觉得还不错，推荐下)一书第一章，书中的测试用例也是一个时间函数，不过写的比较复杂，初学者不太容易看懂。
作者：Artwl
