一、什么是 QUnit
QUnit（http://qunitjs.com/） 是一個(gè)非常強(qiáng)大的javascript單元測(cè)試框架，可以幫你調(diào)試代碼。它是由 jQuery 團(tuán)隊(duì)的成員寫(xiě)的，而且是 jQuery 的官方測(cè)試套裝。但QUnit一般是足以測(cè)試任何常規(guī) javascript 代碼，它甚至可能通過(guò)一些 javascript 引擎比如 Rhino 或 V8 來(lái)測(cè)試服務(wù)器端 JavaScript。
如果你不熟悉“單元測(cè)試”的概念，請(qǐng)不要擔(dān)心。這不是很難理解的：
代碼如下:
>在計(jì)算機(jī)編程中，單元測(cè)試（又稱為模塊測(cè)試）是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來(lái)進(jìn)行正確性檢驗(yàn)的測(cè)試工作。程序單元是應(yīng)用的最小可測(cè)試部件。在過(guò)程化編程中，一個(gè)單元就是單個(gè)程序、函數(shù)、過(guò)程等；對(duì)于面向?qū)ο缶幊?，最小單元就是方法，包括基類（超類）、抽象類、或者派生類（子類）中的方法?— 引自維基百科。
簡(jiǎn)單地說(shuō)，你為你的代碼的每個(gè)功能寫(xiě)測(cè)試，如果所有這些測(cè)試都通過(guò)了，那么你可以肯定的是，代碼沒(méi)有缺陷（通常，還是由你的測(cè)試有多徹底而定）。
二、為什么你要測(cè)試你的代碼
如果你以前從未寫(xiě)過(guò)任何單元測(cè)試，你可能直接將你的代碼上到網(wǎng)站上，點(diǎn)擊一會(huì)看看是否有什么問(wèn)題出現(xiàn)，并且嘗試去解決你所發(fā)現(xiàn)的問(wèn)題，采用這種方法會(huì)有很多的問(wèn)題。
首先，這是很膩煩的。點(diǎn)擊事實(shí)上并不是一件輕松的工作，因?yàn)槟悴坏貌淮_保每樣?xùn)|西都被點(diǎn)到而且很有可能你錯(cuò)過(guò)了一個(gè)或兩個(gè)。
其次，你為測(cè)試做的每件事情是不能復(fù)用的，這意味著它很難回歸。什么是回歸？想像一下你寫(xiě)了一些代碼并測(cè)試，修復(fù)了所有你發(fā)現(xiàn)的缺陷，然后發(fā)布。此時(shí)，一個(gè) 用戶發(fā)送了一些關(guān)于新缺陷的反饋，并且需要一些新功能。你返回到代碼中，修復(fù)這些新缺陷并增加新功能。接下來(lái)可能會(huì)發(fā)生的就是一些舊的缺陷又重現(xiàn)了，這就 叫“回歸”。看，現(xiàn)在你還得再去點(diǎn)擊一遍，而且有可能你還找不到這些舊的擔(dān)擔(dān)缺陷；即使你這么做，這還需要一段時(shí)間才能弄清楚你的問(wèn)題是由回歸引起的。使用單元測(cè)試，你寫(xiě)測(cè)試去發(fā)現(xiàn)缺陷，一旦代碼被修改，您通過(guò)測(cè)試再篩選一次。如果回歸出現(xiàn)，一些測(cè)試一定會(huì)失敗，你可以很容易地認(rèn)出他們，知道哪部分代碼包含了錯(cuò)誤。既然你知道你剛才修改了什么，就可以很容易地解決。
另外一個(gè)單元測(cè)試的優(yōu)點(diǎn)，尤其是對(duì)于web開(kāi)發(fā)來(lái)說(shuō): 它使跨瀏覽器兼容性測(cè)試很容易。僅僅在不同瀏覽器中運(yùn)行你的測(cè)試案例就行，如果一個(gè)瀏覽器出現(xiàn)問(wèn)題，你修復(fù)它并重新運(yùn)行這些測(cè)試案例，確保不會(huì)在別的瀏覽器引起回歸，一旦全部通過(guò)測(cè)試，你可以肯定的說(shuō)，所有的目標(biāo)瀏覽器都支持。
我想提及一個(gè) John Resig 的項(xiàng)目：TestSwarm(http://testswarm.com/)。 它將 Javascript 單元測(cè)試帶到了一個(gè)新的層次，通過(guò)使其分布，這是一個(gè)網(wǎng)站，其中包含很多測(cè)試案例，任何人都可以去那運(yùn)行一些測(cè)試案例，然后返回結(jié)果會(huì)返回到服務(wù)器。通過(guò)這種方式，代碼會(huì)非常迅速的在不同的瀏覽器進(jìn)行測(cè)試，甚至不同的平臺(tái)運(yùn)行。
三、如何用 QUnit 寫(xiě)單元測(cè)試
那么，你如何正確地用QUnit寫(xiě)單元測(cè)試呢？首先，您需要設(shè)置一個(gè)測(cè)試環(huán)境：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
<!-- Your project file goes here -->
<script type="text/javascript" src="myProject.js"></script>
<!-- Your tests file goes here -->
<script type="text/javascript" src="myTests.js"></script>
</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>
正如你所見(jiàn)，在這里使用了一個(gè)被托管的QUnit框架版本。
將要被測(cè)試的代碼已被添加到 myProject.js 中，而且你的測(cè)試應(yīng)該插入到 myTest.js 。要運(yùn)行這些測(cè)試，只需在一個(gè)瀏覽器中打開(kāi)這個(gè) HTML 文件?，F(xiàn)在到了寫(xiě)些測(cè)試的時(shí)間了。
單元測(cè)試的基石是斷言：
斷言是一個(gè)命題，預(yù)測(cè)你的代碼的返回結(jié)果。如果預(yù)測(cè)是假的，斷言失敗，你就知道出了問(wèn)題。
運(yùn)行斷言，你應(yīng)該把它們放入測(cè)試案例：
代碼如下:
// Let's test this function
function isEven(val) {
return val % 2 === 0;
}
test('isEven()', function() {
ok(isEven(0), 'Zero is an even number');
ok(isEven(2), 'So is two');
ok(isEven(-4), 'So is negative four');
ok(!isEven(1), 'One is not an even number');
ok(!isEven(-7), 'Neither is negative seven');
})
這里我們定義一個(gè)函數(shù)：isEven，用來(lái)檢測(cè)一個(gè)數(shù)字是否為奇數(shù)，并且我們希望測(cè)試這個(gè)函數(shù)來(lái)確認(rèn)它不會(huì)返回錯(cuò)誤答案。
我們首先調(diào)用 test()，它構(gòu)建了一個(gè)測(cè)試案例；第一個(gè)參數(shù)是一個(gè)將被顯示在結(jié)果中的字符串，第二個(gè)參數(shù)是包括我們斷主的一個(gè)回調(diào)函數(shù)。
我們寫(xiě)了5個(gè)斷言，所有的都是布爾型的。一個(gè)布爾型的斷言，期望它的第一個(gè)參數(shù)為true。第二個(gè)參數(shù)依然是要顯示在結(jié)果中的消息。
這里是你想要得到的，只要你運(yùn)行測(cè)試：
四、深入學(xué)習(xí)參考
以上只簡(jiǎn)單的介紹了 qunit.js ，其斷言方法還有很多，具體可參考 api 文檔：
http://api.qunitjs.com/
單元測(cè)試是一個(gè)在你發(fā)布你的代碼前測(cè)試你的代碼的非常好的方法。如果你以前沒(méi)有寫(xiě)過(guò)任何的單元測(cè)試，現(xiàn)在是時(shí)候開(kāi)始了！
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試