QUnit jQuery的TDD框架

在议论jQuery TDD以前,大家先来打听下怎么才是二个正式的TDD框架。作为规范的TDD框架,必得知足那样多少个供给:

  1. 就算测验脚本出错了也要能继续运营接下去的脚本

  2. 能够不依赖被测量试验代码写测验用例,就算代码未有落实也足以先写测量检验用例

  3. 可见体现详细的错误音信和职位

  4. 能够总结通过和未通过的用例的数码

  5. 有极度的可视化分界面用于计算和追踪测量检验用例

  6. 轻便上手,通过有个别轻巧的点拨就足以即时初叶写测量检验代码。

 

上述那一个需求QUnit都完结了, 这也是自己引入QUnit的因由。

 

QUnit方今已经足以脱离jQuery独立运转,那也是它成功的别的三个原因,即包容性好,其实严峻意义上它曾经不是五个jQuery的测量试验框架了,而是JavaScript测量检验框架。有趣的是你会发觉QUnit的评释曾经发生过一线的变化,如下

图片 1

这也认证QUnit的代码是做过特地的调动,使之能脱离JQuery运行。

下载Qunit

下载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个是不对的。

图片 2

刚才只是发端看了下分界面,未来我们来学学如何运用,笔者从下载了二个core.js的楷模测量试验代码,那么些是jQuery用来测量检验它的主导模块的代码。

在<head></head>中参预<script language="javascript" src="core.js" type="text/javascript"></script>,注意必得求在qunit.js评释前面,因为core.js中用到了qunit.js定义的函数。

此时你再运营刚才大家成立的html文件,你就拜候到类似上海体育场地的结果,那便是core.js的测量试验结果,是或不是分明?倘使是测验你自个儿的函数,你就能够依据水草绿的一无可取提醒追踪难题所在,直到把装有的测验结果都改成青灰。

测验脚本怎么写

测量检验脚本的写法,小编提出你参谋,那之中有提到一些测量检验用例的公文,你能够通过它们来研讨怎么写测验用例,尽管有个别测量检验用例已经跑不通了。

比较常用的函数有:

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是用来判别结果是不是为真。

假使一切顺遂,你将看到类似上面包车型大巴结果。

图片 3

此刻应该恭喜本身,因为有着的测量检验结果都以绿颜色的,那意味着这么些测验都因而了。 当然这里只是举2个例子,你能够写更加多的测量检验用例来测量检验那一个措施,举个例子测测值溢出的情形。

 

参谋资料

你也许感兴趣的作品:

  • Jquery AJAX 框架的施用格局
  • 基于JQuery框架的AJAX实例代码
  • asp.net省市三级联合浮动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
  • 修改jquery里的dialog对话框插件为框架页(iframe) 的主意
  • JQueryEasyUI datagrid框架的进级使用
  • JQueryEasyUI datagrid框架的大旨采取
  • JQueryEasyUI Layout布局框架的选取
  • 引入10款最看好jQuery UI框架
  • jQuery前端框架easyui使用Dialog时bug管理
  • jQuery的框架介绍

本文由华夏彩票发布于关于计算机,转载请注明出处:QUnit jQuery的TDD框架

您可能还会对下面的文章感兴趣: