前言
当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往，单元测试往往多见于服务端的开发中，但随着web编程领域的分工逐渐明细，在前端javascript开发领域中，也可以进行相关的单元测试，以保障前端开发的质量。
在服务器端的单元测试中，都有各种各样的测试框架，在javascript中现在也有一些很优秀的框架，但在本文中，我们将自己动手一步步来实现一个简单的单元测试框架。
js单元测试有很多方面，比较多的是对方法功能检查，对浏览器兼容性检查，本文主要谈第一种。
本文检查的js代码是我以前写的一个js日期格式化的方法，原文在这里(javascript日期格式化函数，跟c#中的使用方法类似)，代码如下：
复制代码 代码如下:
date.prototype.tostring=function(format){
var time={};
time.year=this.getfullyear();
time.tyear=(+time.year).substr(2);
time.month=this.getmonth()+1;
time.tmonth=time.monthtime.day=this.getdate();
time.tday=time.daytime.hour=this.gethours();
time.thour=time.hourtime.hour=time.hourtime.thour=time.hourtime.minute=this.getminutes();
time.tminute=time.minutetime.second=this.getseconds();
time.tsecond=time.secondtime.millisecond=this.getmilliseconds();
var onumber=time.millisecond/1000;
if(format!=undefined && format.replace(/\s/g,).length>0){
format=format
.replace(/yyyy/ig,time.year)
.replace(/yyy/ig,time.year)
.replace(/yy/ig,time.tyear)
.replace(/y/ig,time.tyear)
.replace(/mm/g,time.tmonth)
.replace(/m/g,time.month)
.replace(/dd/ig,time.tday)
.replace(/d/ig,time.day)
.replace(/hh/g,time.thour)
.replace(/h/g,time.hour)
.replace(/hh/g,time.thour)
.replace(/h/g,time.hour)
.replace(/mm/g,time.tminute)
.replace(/m/g,time.minute)
.replace(/ss/ig,time.tsecond)
.replace(/s/ig,time.second)
.replace(/fff/ig,time.millisecond)
.replace(/ff/ig,onumber.tofixed(2)*100)
.replace(/f/ig,onumber.tofixed(1)*10);
}
else{
format=time.year+-+time.month+-+time.day+ +time.hour+:+time.minute+:+time.second;
}
return format;
}
这段代码目前没有发现比较严重的bug，本文为了测试，我们把 .replace(/mm/g,time.tmonth) 改为 .replace(/mm/g,time.month)，这个错误是当月份小于10时，没有用两位数表示月份。
现在有这么一句话，好的设计都是重构出来的，在本文中也一样，我们从最简单的开始。
第一版：用最原始的alert
作为第一版，我们很偷懒的直接用alert来检查，完整代码如下：
复制代码 代码如下:
demo
运行后会弹出 2012 和 4 ，观察结果我们知道 date.tostring(mm)方法是有问题的。
这种方式很不方便，最大的问题是它只弹出了结果，并没有给出正确或错误的信息，除非对代码非常熟悉，否则很难知道弹出的结果是正是误，下面，我们写一个断言(assert)方法来进行测试，明确给出是正是误的信息。
第二版：用assert进行检查
断言是表达程序设计人员对于系统应该达到状态的一种预期，比如有一个方法用于把两个数字加起来，对于3+2，我们预期这个方法返回的结果是5，如果确实返回5那么就通过，否则给出错误提示。
断言是单元测试的核心，在各种单元测试的框架中都提供了断言功能，这里我们写一个简单的断言(assert)方法：
复制代码 代码如下:
function assert(message,result){
if(!result){
throw new error(message);
}
return true;
}
这个方法接受两个参数，第一个是错误后的提示信息，第二个是断言结果
用断言测试代码如下：
复制代码 代码如下:
var date=new date(2012,3,9);
try{
assert(yyyy should return full year,date.tostring(yyyy)===2012);
}catch(e){
alert(test failed:+e.message);
}
try{
assert(mm should return full month,date.tostring(mm)===04);
}
catch(e){
alert(test failed:+e.message);
}
运行后会弹出如下窗口：
第三版：进行批量测试
在第二版中，assert方法可以给出明确的结果，但如果想进行一系列的测试，每个测试都要进行异常捕获，还是不够方便。另外，在一般的测试框架中都可以给出成功的个数，失败的个数，及失败的错误信息。
为了可以方便在看到测试结果，这里我们把结果用有颜色的文字显示的页面上，所以这里要写一个小的输出方法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