QUnit jQuery的TDD框架


Posted in Javascript onNovember 04, 2010

在讨论jQuery TDD之前,我们先来了解下什么才是一个标准的TDD框架。作为标准的TDD框架,必须满足这么几个要求:

1. 即使测试脚本出错了也要能继续运行接下来的脚本

2. 能够不依赖被测试代码写测试用例,即使代码没有实现也可以先写测试用例

3. 能够显示详细的错误信息和位置

4. 能够统计通过和未通过的用例的数量

5. 有专门的可视化界面用于统计和跟踪测试用例

6. 易于上手,通过一些简单的指导就可以马上开始写测试代码。

 

以上这些要求QUnit都做到了, 这也是我推荐QUnit的原因。

 

QUnit目前已经可以脱离jQuery独立运行,这也是它成功的另外一个原因,即兼容性好,其实严格意义上它已经不是一个jQuery的测试框架了,而是JavaScript测试框架。有意思的是你会发现QUnit的注释曾经发生过微小的变化,如下

QUnit jQuery的TDD框架

这也说明QUnit的代码是做过专门的调整,使之能脱离JQuery运行。

下载Qunit

下载qunit的代码可以去http://github.com/jquery/qunit,那里的代码是最新的。

 

如何使用QUnit

使用QUnit很简单,只需要下面这些html代码,初始的设置就完成了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>My Foo Tests</title>  
  <link href="qunit.css" type="text/css" rel="stylesheet"/>  
  <script language="javascript" src="jquery-1.4.2.js" type="text/javascript" />
  <script language="javascript" src="qunit.js" type="text/javascript"/>
</head>
<body>
   <h1 id="qunit-header">QUnit Test Suite</h1> 
  <h2 id="qunit-banner"></h2> 
  <div id="qunit-testrunner-toolbar"></div> 
  <h2 id="qunit-userAgent"></h2> 
  <ol id="qunit-tests"></ol> 
</body>
</html>

QUnit不仅仅为你提供了测试脚本函数,还为你的单元测试提供了一个标准化的测试界面,如下图所示,红色的表示这个测试用例没有通过,绿色的表示通过。每一个框比表示一个测试函数,里面可能有多个断言语句的结果,标题中(x,y,z)表示总共有z个断言,y个是正确的,x个是错误的。

QUnit jQuery的TDD框架

刚才只是初步看了下界面,现在我们来学习如何使用,我从http://github.com/jquery/jquery/raw/master/test/unit/core.js下载了一个core.js的范例测试代码,这个是jQuery用来测试它的核心模块的代码。

在<head></head>中加入<script language="javascript" src="core.js" type="text/javascript"></script>,注意一定要在qunit.js声明后面,因为core.js中用到了qunit.js定义的函数。

这时你再运行刚才我们创建的html文件,你就会看到类似上图的结果,这就是core.js的测试结果,是不是一清二楚?如果是测试你自己的函数,你就可以根据红色的错误提示跟踪问题所在,直到把所有的测试结果都变成绿色。

测试脚本怎么写

测试脚本的写法,我建议你参考http://docs.jquery.com/Qunit#Reference_Test_Suites,这里面有提到一些测试用例的文件,你可以通过它们来研究怎么写测试用例,尽管有些测试用例已经跑不通了。

比较常用的函数有:

expect(amount) - 指定某个函数中会有多少个断言,通常写在测试函数开头。

module(name) - 模块是测试函数的集合,使用该函数可以在UI中将测试函数按模块归类。

ok(state, message) ? 布尔型断言,message是专门显示在QUnit界面上,用来区分不同的断言的

equals(actual, expected, message) - 相等断言,actual和expected的值相等时才能通过。

same(actual, expected, message) - 完全相等断言,和equals的区别在于它会比较子元素,对于数组和一些自定义对象的比较十分有用。

这些是最常用的,其他的大家可以自己参考Qunit官方文档。

 

第一个QUnit测试用例

假设我们写个这样的函数,计算a+b的结果,如下

function CalculateAPlusB(a,b)
{
  return a+b;
}

在页面中加入一个单独的js引用专门用来写单元测试的function,比如叫test.js

<script language="javascript" src="test.js" type="text/javascript"/>

具体的测试代码如下

test("basic calculation", function() {
    equals(CalculateAPlusB(1,5),6,"1+5=6");
    equals(CalculateAPlusB(1.2,5.5),6.7,"1.2+5.5=6.7");
    equals(CalculateAPlusB(-1,10),9,"-1+10=9");
  });

test("pass null test", function() {
    ok(isNaN(CalculateAPlusB(null,5)),"pass null as the first argument");
    ok(isNaN(CalculateAPlusB(5,null)),"pass null as the second argument");
    ok(isNaN(CalculateAPlusB(null,null)),"no argument pass in");
  });

其中test方法是qunit用来定义测试方法的语句,其第一个参数表示这个测试用例的名称,第二个参数就是具体的实现。equals是用来比较期望值和实际值是否一致,ok是用来判断结果是否为真。

如果一切顺利,你将看到类似下面的结果。

QUnit jQuery的TDD框架

这时应该恭喜自己,因为所有的测试结果都是绿颜色的,这表示这些测试都通过了。 当然这里只是举2个例子,你可以写更多的测试用例来测试这个方法,比如测测值溢出的情况。

 

参考资料

http://www.lostechies.com/blogs/chad_myers/archive/2008/08/28/getting-started-with-jquery-qunit-for-client-side-javascript-testing.aspx

http://docs.jquery.com/Qunit

http://www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit/

http://www.agiledata.org/essays/tdd.html

http://www.oncoding.cn/2010/javascript-unit-testing-qunit/

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
vue项目中axios使用详解
Feb 07 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 #Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
关于document.cookie的使用javascript
Oct 29 #Javascript
深入理解JavaScript定时机制
Oct 29 #Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php中序列化与反序列化详解
2017/02/13 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
五一促销活动总结
2014/07/01 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
生死抉择观后感
2015/06/09 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
golang中字符串MD5生成方式总结
2021/07/04 Golang
react 路由Link配置详解
2021/11/11 Javascript