首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript单元测试ABC

Posted in Javascript onApril 12, 2012

前言

当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往，单元测试往往多见于服务端的开发中，但随着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.Month<10?"0"+time.Month:time.Month; 
time.Day=this.getDate(); 
time.TDay=time.Day<10?"0"+time.Day:time.Day; 
time.Hour=this.getHours(); 
time.THour=time.Hour<10?"0"+time.Hour:time.Hour; 
time.hour=time.Hour<13?time.Hour:time.Hour-12; 
time.Thour=time.hour<10?"0"+time.hour:time.hour; 
time.Minute=this.getMinutes(); 
time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute; 
time.Second=this.getSeconds(); 
time.TSecond=time.Second<10?"0"+time.Second:time.Second; 
time.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来检查，完整代码如下： 

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta charset="utf-8"/> 
</head> 
<body> 
<script type="text/javascript"> 
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.Month<10?"0"+time.Month:time.Month; 
time.Day=this.getDate(); 
time.TDay=time.Day<10?"0"+time.Day:time.Day; 
time.Hour=this.getHours(); 
time.THour=time.Hour<10?"0"+time.Hour:time.Hour; 
time.hour=time.Hour<13?time.Hour:time.Hour-12; 
time.Thour=time.hour<10?"0"+time.hour:time.hour; 
time.Minute=this.getMinutes(); 
time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute; 
time.Second=this.getSeconds(); 
time.TSecond=time.Second<10?"0"+time.Second:time.Second; 
time.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.Month) 
.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; 
} 
var date=new Date(2012,3,9); 
alert(date.toString("yyyy")); 
alert(date.toString("MM")); 
</script> 
</body> 
</html>

运行后会弹出 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); 
}

运行后会弹出如下窗口：

JavaScript单元测试ABC

第三版：进行批量测试

在第二版中，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"); 
} 
});

结果为：

JavaScript单元测试ABC

这样我们一眼就可以看出哪个出错了。但这样是否就完美了呢，我们可以看到最后那个测试中 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

JavaScript单元测试ABC

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
JS简单实现文件上传实例代码（无需插件）
Nov 15 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 #Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 #Javascript
JQuery学习笔录 简单的JQuery
Apr 09 #Javascript
广泛收集的jQuery拖放插件集合
Apr 09 #Javascript
深入分析js中的constructor和prototype
Apr 07 #Javascript
浅谈javascript中的作用域
Apr 07 #Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）
Apr 07 #Javascript
中国购物网站(172) 加拿大购物网站(185) SLi Minor 2020(63) 韩国购物网站(27) 巴西购物网站(71) 新加坡购物网站(41) 美国购物网站(1542) 爱尔兰购物网站(30) 英国购物网站(954) 香港购物网站(84)
You might like
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP中的闭包（匿名函数）浅析
2015/02/07 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访：LGDNewbee顺利过关
2014/07/13 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python用什么编辑器进行项目开发
2020/06/17 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
NIHAOMARKET官方海外旗舰店：意大利你好华人超市
2018/01/27 全球购物
品质主管的岗位职责
2013/12/04 职场文书
心理健康教育制度
2014/01/27 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL