QUnit jQuery的TDD框架
在讨论jQuery TDD之前，我们先来了解下什么才是一个标准的TDD框架。作为标准的TDD框架，必须满足这么几个要求：
1. 即使测试脚本出错了也要能继续运行接下来的脚本
2. 能够不依赖被测试代码写测试用例，即使代码没有实现也可以先写测试用例
3. 能够显示详细的错误信息和位置
4. 能够统计通过和未通过的用例的数量
5. 有专门的可视化界面用于统计和跟踪测试用例
6. 易于上手，通过一些简单的指导就可以马上开始写测试代码。
以上这些要求QUnit都做到了， 这也是我推荐QUnit的原因。
QUnit目前已经可以脱离jQuery独立运行，这也是它成功的另外一个原因，即兼容性好，其实严格意义上它已经不是一个jQuery的测试框架了，而是JavaScript测试框架。有意思的是你会发现QUnit的注释曾经发生过微小的变化，如下
这也说明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个是错误的。
刚才只是初步看了下界面，现在我们来学习如何使用，我从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是用来判断结果是否为真。
如果一切顺利，你将看到类似下面的结果。
这时应该恭喜自己，因为所有的测试结果都是绿颜色的，这表示这些测试都通过了。 当然这里只是举2个例子，你可以写更多的测试用例来测试这个方法，比如测测值溢出的情况。
参考资料
http://www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit/
相关推荐
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
Jquery AJAX 框架的使用方法
刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了.暂时就放弃了.后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程. 激起我客户端编程的兴趣,才想起学习一下了 Jquery.随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写
-
JQueryEasyUI datagrid框架的基本使用
今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码 代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引
-
JQueryEasyUI Layout布局框架的使用
layout就是一个布局面板: 也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心.其中中心区域面板是必需的,但中心区域面板边缘区域面板是可选的.通过拖动它的边框,面板,可以调整每一个边缘地区.可以嵌套的布局,以便用户可以建立复杂的布局. 如果想要各个区域中的框架随框架的大小改变,请嵌套到layout框架中: 复制代码 代码如下: <script type="text/javascript"> //split属性:如果设置为true将显示一个分隔条
-
基于JQuery框架的AJAX实例代码
index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum
-
jQuery前端框架easyui使用Dialog时bug处理
最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: 复制代码 代码如下: <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" /> <div id="confirmd">
-
JQueryEasyUI datagrid框架的进阶使用
由于datagrid接收数据为Json格式,所以我们在前台展示数据的时候会出现问题,尤其是时间格式,在Json序列化之后,前台无法展示正确的时间数据,那么我们如何解决这样的问题呢?首先我们可以使用datapattern.js来解决这个问题:无需废话,直接上代码: <script src="Scripts/datapattern.js" type="text/javascript"></script> 复制代码 代码如下: //列表初始化fun
-
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/ ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx 就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用mo
-
推荐10款最热门jQuery UI框架 原创
1.国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本. 欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平. 在线演示地址:http://j-ui.com http://runjs.cn/detail/x9c7d6qb 2.jQuery的界面插件 Ninja UI jQuer
-
jQuery的框架介绍
jQuery使用有一段时间了,但是有一些API的实现实在想不通.小编参考相关资料源码,现在把我的学习过程和收获分享给大家. 下面将使用简化的代码来介绍,主要关注jQuery的实现思想~>_<~ //匿名立即执行函数 //.防止污染全局空间 //.选择性保护内部变量 (function(window, undefined){ //第二参数undefined设置而不传的原因: // 外部发生这种情况:var undefined = 时,undefined会被篡改 // 设置第二参数而不传,则und