QUnit jQuery的TDD框架

更新時(shí)間：2010年11月04日 22:46:29 作者：

我今天只討論基于JavaScript的TDD，可能有些公司是用C#做js單元測(cè)試的，但我不認(rèn)為這是個(gè)好主意，很多js運(yùn)行時(shí)的東西讓js來(lái)返回會(huì)更直觀，且易于維護(hù)。

在討論jQuery TDD之前，我們先來(lái)了解下什么才是一個(gè)標(biāo)準(zhǔn)的TDD框架。作為標(biāo)準(zhǔn)的TDD框架，必須滿足這么幾個(gè)要求：

1. 即使測(cè)試腳本出錯(cuò)了也要能繼續(xù)運(yùn)行接下來(lái)的腳本

2. 能夠不依賴被測(cè)試代碼寫(xiě)測(cè)試用例，即使代碼沒(méi)有實(shí)現(xiàn)也可以先寫(xiě)測(cè)試用例

3. 能夠顯示詳細(xì)的錯(cuò)誤信息和位置

4. 能夠統(tǒng)計(jì)通過(guò)和未通過(guò)的用例的數(shù)量

5. 有專門(mén)的可視化界面用于統(tǒng)計(jì)和跟蹤測(cè)試用例

6. 易于上手，通過(guò)一些簡(jiǎn)單的指導(dǎo)就可以馬上開(kāi)始寫(xiě)測(cè)試代碼。

以上這些要求QUnit都做到了，這也是我推薦QUnit的原因。

QUnit目前已經(jīng)可以脫離jQuery獨(dú)立運(yùn)行，這也是它成功的另外一個(gè)原因，即兼容性好，其實(shí)嚴(yán)格意義上它已經(jīng)不是一個(gè)jQuery的測(cè)試框架了，而是JavaScript測(cè)試框架。有意思的是你會(huì)發(fā)現(xiàn)QUnit的注釋曾經(jīng)發(fā)生過(guò)微小的變化，如下

這也說(shuō)明QUnit的代碼是做過(guò)專門(mén)的調(diào)整，使之能脫離JQuery運(yùn)行。

下載Qunit

下載qunit的代碼可以去http://github.com/jquery/qunit，那里的代碼是最新的。

如何使用QUnit

使用QUnit很簡(jiǎn)單，只需要下面這些html代碼，初始的設(shè)置就完成了。

<!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不僅僅為你提供了測(cè)試腳本函數(shù)，還為你的單元測(cè)試提供了一個(gè)標(biāo)準(zhǔn)化的測(cè)試界面，如下圖所示，紅色的表示這個(gè)測(cè)試用例沒(méi)有通過(guò)，綠色的表示通過(guò)。每一個(gè)框比表示一個(gè)測(cè)試函數(shù)，里面可能有多個(gè)斷言語(yǔ)句的結(jié)果，標(biāo)題中（x,y,z）表示總共有z個(gè)斷言，y個(gè)是正確的，x個(gè)是錯(cuò)誤的。

剛才只是初步看了下界面，現(xiàn)在我們來(lái)學(xué)習(xí)如何使用，我從http://github.com/jquery/jquery/raw/master/test/unit/core.js下載了一個(gè)core.js的范例測(cè)試代碼，這個(gè)是jQuery用來(lái)測(cè)試它的核心模塊的代碼。

在<head></head>中加入<script language="javascript" src="core.js" type="text/javascript"></script>，注意一定要在qunit.js聲明后面，因?yàn)閏ore.js中用到了qunit.js定義的函數(shù)。

這時(shí)你再運(yùn)行剛才我們創(chuàng)建的html文件，你就會(huì)看到類似上圖的結(jié)果，這就是core.js的測(cè)試結(jié)果，是不是一清二楚？如果是測(cè)試你自己的函數(shù)，你就可以根據(jù)紅色的錯(cuò)誤提示跟蹤問(wèn)題所在，直到把所有的測(cè)試結(jié)果都變成綠色。

測(cè)試腳本怎么寫(xiě)

測(cè)試腳本的寫(xiě)法，我建議你參考http://docs.jquery.com/Qunit#Reference_Test_Suites，這里面有提到一些測(cè)試用例的文件，你可以通過(guò)它們來(lái)研究怎么寫(xiě)測(cè)試用例，盡管有些測(cè)試用例已經(jīng)跑不通了。

比較常用的函數(shù)有：

expect(amount) - 指定某個(gè)函數(shù)中會(huì)有多少個(gè)斷言，通常寫(xiě)在測(cè)試函數(shù)開(kāi)頭。

module(name) - 模塊是測(cè)試函數(shù)的集合，使用該函數(shù)可以在UI中將測(cè)試函數(shù)按模塊歸類。

ok(state, message) – 布爾型斷言，message是專門(mén)顯示在QUnit界面上，用來(lái)區(qū)分不同的斷言的

equals(actual, expected, message) - 相等斷言，actual和expected的值相等時(shí)才能通過(guò)。

same(actual, expected, message) - 完全相等斷言，和equals的區(qū)別在于它會(huì)比較子元素，對(duì)于數(shù)組和一些自定義對(duì)象的比較十分有用。

這些是最常用的，其他的大家可以自己參考Qunit官方文檔。

第一個(gè)QUnit測(cè)試用例

假設(shè)我們寫(xiě)個(gè)這樣的函數(shù)，計(jì)算a+b的結(jié)果，如下

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

在頁(yè)面中加入一個(gè)單獨(dú)的js引用專門(mén)用來(lái)寫(xiě)單元測(cè)試的function，比如叫test.js

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

具體的測(cè)試代碼如下

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用來(lái)定義測(cè)試方法的語(yǔ)句，其第一個(gè)參數(shù)表示這個(gè)測(cè)試用例的名稱，第二個(gè)參數(shù)就是具體的實(shí)現(xiàn)。equals是用來(lái)比較期望值和實(shí)際值是否一致，ok是用來(lái)判斷結(jié)果是否為真。

如果一切順利，你將看到類似下面的結(jié)果。

這時(shí)應(yīng)該恭喜自己，因?yàn)樗械臏y(cè)試結(jié)果都是綠顏色的，這表示這些測(cè)試都通過(guò)了。當(dāng)然這里只是舉2個(gè)例子，你可以寫(xiě)更多的測(cè)試用例來(lái)測(cè)試這個(gè)方法，比如測(cè)測(cè)值溢出的情況。

參考資料

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/

您可能感興趣的文章: