首頁  >  文章  >  web前端  >  Javascript單元測試框架QUnitjs詳細介紹_javascript技巧

Javascript單元測試框架QUnitjs詳細介紹_javascript技巧

WBOY
WBOY原創
2016-05-16 16:49:151401瀏覽

一、什麼是 QUnit

QUnit(http://qunitjs.com/) 是一個非常強大的javascript單元測試框架,可以幫你偵錯程式碼。它是由 jQuery 團隊的成員寫的,而且是 jQuery 的官方測試套裝。但QUnit一般是足以測試任何常規 javascript 程式碼,它甚至可能透過一些 javascript 引擎例如 Rhino 或 V8 來測試伺服器端 JavaScript。
如果你不熟悉「單元測試」的概念,請不要擔心。這不是很難理解的:

複製程式碼 程式碼如下:

在電腦程式設計中,單元測試(又稱為模組測試)是針對程式模組(軟體設計的最小單位)來進行正確性檢驗的測試工作。程式單元是應用的最小可測試部件。在過程化編程中,一個單元就是單一程式、函數、過程等;對於物件導向編程,最小單元就是方法,包括基底類別(超類別)、抽象類別、或衍生類別(子類別)中的方法。 — 引自維基百科。


簡單地說,你為你的程式碼的每個功能寫測試,如果所有這些測試都通過了,那麼你可以肯定的是,程式碼沒有缺陷(通常,還是由你的測試有多徹底而定)。


二、為什麼要測試你的程式碼

如果你以前從未寫過任何單元測試,你可能直接將你的程式碼上到網站上,點擊一會兒看看是否有什麼問題出現,並且嘗試去解決你所發現的問題,採用這種方法會有很多的問題。
首先,這是很膩煩的。點擊事實上並不是一件輕鬆的工作,因為你必須確保每樣東西都被點到而且很有可能你錯過了一個或兩個。

其次,你為測驗做的每件事情是不能重複使用的,這意味著它很難回歸。什麼是回歸?想像一下你寫了一些程式碼並測試,修復了所有你發現的缺陷,然後發布。此時,一個 用戶發送了一些關於新缺陷的回饋,並且需要一些新功能。你回到程式碼中,修復這些新缺陷並增加新功能。接下來可能會發生的就是一些舊的缺陷又重現了,這就 叫「回歸」。看,現在你還得再去點擊一遍,而且有可能你還找不到這些舊的擔擔缺陷;即使你這麼做,這還需要一段時間才能弄清楚你的問題是由回歸引起的。使用單元測試,你寫測試去發現缺陷,一旦程式碼被修改,您透過測試再篩選一次。如果回歸出現,有些測試一定會失敗,你可以很容易地認出他們,知道哪個部分程式碼包含了錯誤。既然你知道你剛才修改了什麼,就可以很容易解決。

另外一個單元測試的優點,尤其是對於web開發來說: 它使跨瀏覽器相容性測試很容易。僅僅在不同瀏覽器中運行你的測試案例就行,如果一個瀏覽器出現問題,你修復它並重新運行這些測試案例,確保不會在別的瀏覽器引起回歸,一旦全部通過測試,你可以肯定的說,所有的目標瀏覽器都支援。

我想提及一個 John Resig 的專案:TestSwarm(http://testswarm.com/)。 它將 Javascript 單元測試帶到了一個新的層次,透過使其分佈,這是一個網站,其中包含很多測試案例,任何人都可以去那裡運行一些測試案例,然後返回結果會回到伺服器。透過這種方式,程式碼會非常迅速的在不同的瀏覽器進行測試,甚至不同的平台運行。

三、如何用 QUnit 寫單元測試

那麼,你如何正確地用QUnit寫單元測試呢?首先,您需要設定一個測試環境:

複製程式碼 程式碼如下:




    QUnit 測試套件
   
   
   
    < ;script type="text/javascript" src= "myTests.js">


   

QUnit 測試套件


   


   
div>
   


    ol id="qunit-tests">



如你所見,這裡有一個被託管的QUnit使用框架版本。寫一些測驗的時間了。
斷言是一個命題,預測你的程式碼的回傳結果。如果預測是假的,斷言失敗,你就知道衍生問題了。

運行斷言,你應該把它們放入測試案例:


複製程式碼程式碼如下://我們來測試一下這個函數isEven( val) {    return val % 2 === 0;
}

test('isEven()', function() {
    ok(isEven(0), '零是偶數');
    ok(isEven(2), '所以是二') ;
    ok(isEven(-4), '負四也是如此');    ok(!isEven(1), '一不是偶數');

    ok(!isEven(- 7), '都不是負七');
})




這裡我們定義了一個函數:isEven,用來檢測一個數字是否為奇數,並且我們希望測試這個函數來確認它不會回傳錯誤答案。
我們首先呼叫 test(),它建構有了一個測試案例;第一個參數是一個將被顯示在結果中的字串,第二個參數是包括我們斷主的一個回調函數。

我們寫了5個斷言,所有的都是布林類型的。一個布林型的斷言,希望它的第一個參數為真。參數仍然是要顯示在結果中的消息。 這裡是你想要得到的,只要你執行測試:





四、深入學習參考

Javascript單元測試框架QUnitjs詳細介紹_javascript技巧
以上只是簡單的介紹了qunit.js ,其斷言方法還有很多,具體可參考api 文檔:
http://api.qunitjs.com/ 單元測試是一個在你發布你程式碼前測試你的程式碼的非常好的方法。如果你以前沒有寫過任何單元測試,現在是時候開始了!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn