日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
對(duì)JavaScript進(jìn)行單元測(cè)試的工具

簡(jiǎn)介

單元測(cè)試關(guān)注的是驗(yàn)證一個(gè)模塊或一段代碼的執(zhí)行效果是否和設(shè)計(jì)或預(yù)期一樣。有些開發(fā)人員認(rèn)為,編寫測(cè)試用例浪費(fèi)時(shí)間而寧愿去編寫新的模塊。然而,在處理大型應(yīng)用程序時(shí),單元測(cè)試實(shí)際上會(huì)節(jié)省時(shí)間;它能幫助您跟蹤問題并安全地更新代碼。

常用縮略語(yǔ)

DOM:文檔對(duì)象模型

HTML:超文本標(biāo)記語(yǔ)言

JSTD:JSTestDriver

YUI:Yahoo! User Interface

在過(guò)去,只對(duì)服務(wù)器端語(yǔ)言進(jìn)行單元測(cè)試。但前端組件越來(lái)越復(fù)雜,使得編寫 JavaScript 代碼測(cè)試用例的需求日益提高。如果您不經(jīng)常編寫客戶端腳本的測(cè)試,學(xué)習(xí)進(jìn)度可能非常難。測(cè)試用戶界面可能需要在思路上做一些調(diào)整。(有些程序開發(fā)人員一時(shí)半會(huì)還不能相信 JavaScript 是合適的編程語(yǔ)言。)

在本文中,您將學(xué)習(xí)如何使用 QUnit、YUI Test 和 JSTestDriver 對(duì) JavaScript 進(jìn)行單元測(cè)試。

下載 本文的源代碼。

JavaScript 單元測(cè)試

為了演示 JavaScript 測(cè)試,這一節(jié)將分析 JavaScript 中一個(gè)基本函數(shù)測(cè)試用例。清單 1 顯示了要測(cè)試的函數(shù):將 3(作為一個(gè)數(shù))添加到傳遞的變量中。

清單 1. 源代碼 (example1/script.js)

 
 
 
 
  1. function addThreeToNumber(el){  
  2.     return el + 3;  

清單 2 在自執(zhí)行的函數(shù)中包含了測(cè)試用例。

清單 2.測(cè)試用例 (example1/test.js)

 
 
 
 
  1. (function testAddThreeToNumber (){  
  2.     var a = 5,  
  3.         valueExpected= 8;  
  4.    
  5.     if (addThreeToNumber (a) === valueExpected) {  
  6.         console.log("Passed!");  
  7.     } else {  
  8.         console.log("Failed!");  
  9.     }  
  10. }()); 

將 5 傳遞給測(cè)試的函數(shù)之后,測(cè)試檢查返回值是 8。如果測(cè)試成功,就會(huì)在一個(gè)現(xiàn)有瀏覽器的控制臺(tái)中打印出 Passed!;否則就會(huì)出現(xiàn) Failed!。如果要運(yùn)行測(cè)試,需要按照以下步驟進(jìn)行操作:

1. 將兩個(gè)腳本文件導(dǎo)入作為測(cè)試運(yùn)行程序的 HTML 頁(yè)面中,如清單 3 所示。

2. 在瀏覽器中打開頁(yè)面。

清單 3. HTML 頁(yè)面 (example1/runner.html)

 
 
 
 
  1.  
  2.  
  3.       
  4.           
  5.          Example 1 
  6.           
  7.            
  8.       
  9.       
  10.  

您可以不使用瀏覽器控制臺(tái),而是將結(jié)果打印在頁(yè)面或由 alert() 方法生成的彈出窗口中。

斷言是測(cè)試用例中的核心元素,用來(lái)驗(yàn)證某一條件是否滿足。例如,在 清單 2 中,addThreeToNumber (a) === valueExpected 就是一個(gè)斷言。

如果您擁有很多用例并帶有很多斷言,那么使用框架就會(huì)方便很多。下面的內(nèi)容將會(huì)重點(diǎn)介紹一些最流行的 JavaScript 單元測(cè)試框架:QUnit、YUI Test 和 JSTestDriver。

#p#

QUnit 入門

QUnit 是與 JUnit(Java 編程)類似的單元測(cè)試框架,jQuery 團(tuán)隊(duì)用它來(lái)對(duì) jQuery 庫(kù)進(jìn)行單元測(cè)試。要使用 QUnit,需要按照以下方法:

1. 下載 qunit.css 文件和 qunit.js 文件(參閱 參考資料)。

2. 創(chuàng)建一個(gè) HTML 頁(yè)面,其中包含導(dǎo)入剛下載的 CSS 和 JavaScript 文件的特定標(biāo)簽。

清單 4 顯示了適用于 QUnit 的標(biāo)準(zhǔn)的 HTML 運(yùn)行程序。

清單 4. HTML 運(yùn)行程序 (qunit/runner.html) 

 
 
 
 
  1.  
  2.  
  3.      
  4.          
  5.         QUnit Test Suite 
  6.          
  7.          
  8.      
  9.      
  10.         QUnit Test Suite 
  11.          
  12.         
 
  •          
  •          
  •         test markup
  •  
  •      
  •  
  • 假設(shè)您擁有兩個(gè)函數(shù)分別負(fù)責(zé)將溫度從攝氏轉(zhuǎn)換為華氏,并轉(zhuǎn)換回來(lái)。清單 5 顯示了執(zhí)行此轉(zhuǎn)換的腳本。

    清單 5. 轉(zhuǎn)換 (qunit/js/script.js)

     
     
     
     
    1. function convertFromCelsiusToFahrenheit(c){  
    2.     var f = c * (9/5) + 32;  
    3.     return f;  
    4. }  
    5.    
    6. function convertFromFahrenheitToCelsius(f){  
    7.     var c = (f - 32) * (5/9);  
    8.     return c;  

    清單 6 顯示了各自的測(cè)試用例。

    清單 6. 測(cè)試用例 (qunit/js/test.js)

     
     
     
     
    1. module ("Temperature conversion")  
    2.    
    3. test("conversion to F", function(){  
    4.     var actual1 = convertFromCelsiusToFahrenheit(20);  
    5.     equal(actual1, 68, ?Value not correct?);  
    6.    
    7.     var actual2 = convertFromCelsiusToFahrenheit(30);  
    8.     equal(actual2, 86, ?Value not correct?);  
    9. })  
    10.    
    11. test("conversion to C", function(){  
    12.     var actual1 = convertFromFahrenheitToCelsius(68);  
    13.     equal(actual1, 20, ?Value not correct?);  
    14.    
    15.     var actual2 = convertFromFahrenheitToCelsius(86);  
    16.     equal(actual2, 30, ?Value not correct?);  
    17. }) 

    QUnit 中的測(cè)試用例由 test() 方法定義。邏輯是包含在傳入函數(shù)的第二個(gè)參數(shù)中。在清單 6 中,兩個(gè)測(cè)試分別名為 conversion to F和 conversion to C。每個(gè)測(cè)試包含兩個(gè)斷言。該測(cè)試中的斷言使用了 equal() 方法。equal() 函數(shù)可以將預(yù)期值與測(cè)試函數(shù)的實(shí)際值相比較。 equal() 方法中的第三個(gè)參數(shù)是錯(cuò)誤情況下顯示的消息。

    還可以通過(guò) module() 函數(shù)將測(cè)試組織到模塊中。在清單 6 中,Temperature conversion 模塊含有這兩個(gè)測(cè)試。

    如果要運(yùn)行測(cè)試:

    1. 在 HTML 運(yùn)行程序中包含源代碼和測(cè)試文件,如清單 7 所示。

    2. 在瀏覽器中打開頁(yè)面。

    清單 7. 在運(yùn)行程序中包含 script.js 和 test.js

     
     
     
     
    1. ...  
    2.  
    3. ... 

    圖 1 顯示了 QUnit 如何在瀏覽器 (Firefox) 中顯示結(jié)果。

    圖 1. QUnit 結(jié)果

    清單 6 中的斷言使用了 equal() 方法,但它不是 QUnit 提供的惟一斷言。QUnit 提供的其他斷言包括 ok() 或 strictEqual()。清單 8 顯示了正在執(zhí)行的方法。

    #p#

    清單 8. 更多的斷言

     
     
     
     
    1. module ("Other assertion");  
    2. test("assertions", function(){  
    3.     ok(true);  
    4.     ok(3);  
    5.     strictEqual("c", "c");  
    6.     equal (3, "3");  
    7. }); 

    ok() 函數(shù)檢查第一個(gè)參數(shù)為 true;strictEqual() 驗(yàn)證第一個(gè)參數(shù)嚴(yán)格等于第二個(gè)參數(shù)。在這些代碼背后,strictEqual() 使用了=== 運(yùn)算符,equal() 使用了 == 運(yùn)算符。

    如果測(cè)試失敗,QUnit 還提供了有用的信息。將清單 8 中的代碼改成清單 9 中的代碼,讓上一次斷言執(zhí)行失敗。

    清單 9. 上一次斷言出現(xiàn)的錯(cuò)誤

     
     
     
     
    1. module ("Other assertion");  
    2. test("assertions", function(){  
    3.     ok(true);  
    4.     ok(3);  
    5.     strictEqual("c", "c");  
    6.     strictEqual (3, "3");  
    7. }); 

    圖 2 顯示了 QUnit 執(zhí)行清單 9 代碼所返回的結(jié)果。

    圖 2. QUnit 結(jié)果:上次測(cè)試失敗

    結(jié)果非常詳細(xì),而且很容易查到上次斷言的預(yù)期值與實(shí)際值有什么不同。

    QUnit 另一項(xiàng)特性能讓您在模塊中的所有測(cè)試執(zhí)行之前或之后執(zhí)行命令。module() 函數(shù)接受 setup() 和 teardown() 回調(diào)作為第二個(gè)參數(shù)。使用 setup() 函數(shù)更新 清單 6 ,如清單 10 所示。

    清單 10. setup() (qunit/js/test-setup.js)

     
     
     
     
    1. module ("Temperature conversion", {  
    2.     setup : function() {  
    3.         this.celsius1 = 20;  
    4.         this.celsius2 = 30;  
    5.    
    6.         this.fahrenheit1 = 68;  
    7.         this.fahrenheit2 = 86;  
    8.     }  
    9. });  
    10. test("conversion to F", function(){  
    11.     var actual1 = convertFromCelsiusToFahrenheit(this.celsius1);  
    12.     equal(actual1, this.fahrenheit1);  
    13.    
    14.     var actual2 = convertFromCelsiusToFahrenheit(this.celsius2);  
    15.     equal(actual2, this.fahrenheit2);  
    16. });  
    17. test("conversion to C", function(){  
    18.     var actual1 = convertFromFahrenheitToCelsius(this.fahrenheit1);  
    19.     equal(actual1, this.celsius1);  
    20.    
    21.     var actual2 = convertFromFahrenheitToCelsius(this.fahrenheit2);  
    22.     equal(actual2, this.celsius2);  
    23. }); 

    該示例移動(dòng)了設(shè)置部分的斷言所使用的值,以避免在測(cè)試的邏輯中使用這些值。

    QUnit 還通過(guò) asyncTest() 函數(shù)提供對(duì)異步測(cè)試的支持,如果您使用 Asynchronous JavaScript and XML (Ajax),這是非常有用的特性。在這樣的環(huán)境中,expect() 函數(shù)可以讓你輕松地驗(yàn)證測(cè)試中運(yùn)行的斷言數(shù)量。

    YUI Test:獨(dú)立的單元測(cè)試模塊

    YUI Test 是 YUI 庫(kù)(Yahoo!)的一個(gè)組件,是一個(gè)可擴(kuò)展而完整的單元測(cè)試框架。如果要使用 YUI Test,需要:

    1. 將 YUI 導(dǎo)入 HTML 運(yùn)行程序,如下所示。

     
     
     
     
    1.  

    如以上代碼所示,此樣例使用了 YUI Test 第 3 版本。

    2. 在測(cè)試腳本文件中,實(shí)例化 YUI 函數(shù)。加載所需的模塊,test 和 console,如清單 11 所示。

    #p#

    清單 11.下載 test 和 console YUI 模塊

     
     
     
     
    1. YUI().use("test", "console", function (Y) {  
    2.      // Test cases go here  
    3. }); 

    test 模塊顯然是用于測(cè)試的。console 模塊并不是強(qiáng)制性的,但本示例將用它來(lái)打印結(jié)果。測(cè)試用例將會(huì)進(jìn)入回調(diào)中,并以全局的 Y實(shí)例作為參數(shù)。

    YUI Test 使用 Y.Test.Case() 構(gòu)造函數(shù)實(shí)例化新測(cè)試用例,使用 Y.Test.Suite() 構(gòu)造函數(shù)來(lái)實(shí)例化測(cè)試套件。測(cè)試套件與 JUnit 類似,包含若干個(gè)測(cè)試用例??梢允褂?nbsp;add() 方法將測(cè)試用例添加到測(cè)試套件中。

    我們使用 YUI test 重新測(cè)試 清單 5 中的源代碼。清單 12 顯示了如何創(chuàng)建測(cè)試用的套件和測(cè)試用例。

    清單 12. 測(cè)試套件和用例

     
     
     
     
    1. YUI().use("test", "console", function (Y) {  
    2.    
    3.      var suite = new Y.Test.Suite("Temperature conversion suite");  
    4.    
    5.      //add a test case  
    6.      suite.add(new Y.Test.Case({  
    7.          name:"Temperature conversion?  
    8.      ));  
    9. }); 

    清單 12 生成了一個(gè)名為 Temperature conversion suite 的套件和一個(gè)名為 Temperature conversion 的測(cè)試用例?,F(xiàn)在,可以將測(cè)試方法寫入對(duì)象文本中,作為參數(shù)傳遞給 Y.Test.Case 構(gòu)造函數(shù),如清單 13 所示。

    清單 13. 測(cè)試用例與測(cè)試方法

     
     
     
     
    1. suite.add(new Y.Test.Case({  
    2.     name:"Temperature conversion",  
    3.    
    4.     setUp : function () {  
    5.         this.celsius1 = 20;  
    6.         this.celsius2 = 30;  
    7.    
    8.         this.fahrenheit1 = 68;  
    9.         this.fahrenheit2 = 86;  
    10.     },  
    11.    
    12.     testConversionCtoF: function () {  
    13.         Y.Assert.areEqual(this.fahrenheit1,          
    14. convertFromCelsiusToFahrenheit(this.celsius1));  
    15.    
    16.         Y.Assert.areEqual(this.fahrenheit2,  
    17. convertFromCelsiusToFahrenheit(this.celsius2));  
    18.     },  
    19.    
    20.     testConversionFtoC: function () {  
    21.         Y.Assert.areEqual(this.celsius1,  
    22. convertFromFahrenheitToCelsius(this.fahrenheit1));  
    23.    
    24.         Y.Assert.areEqual(this.celsius2,  
    25. convertFromFahrenheitToCelsius(this.fahrenheit2));  
    26.     }  
    27. })); 

    您可能注意到,在清單 13 中:

    1. 可使用 setUp() 方法。YUI Test 在測(cè)試用例和測(cè)試套件層提供了 setUp() 和 tearDown() 方法。

    2. 測(cè)試方法名以 test 單詞開頭,它們包含斷言。

    3. 本示例使用 Y.Assert.areEqual() 斷言類型,它與 QUnit 中的 equal() 函數(shù)類似。YUI Test 為斷言提供了多種方法,如:

    1). Y.Assert.areSame(),它類似于 QUnit 中的 strictEqual()。

    2). 數(shù)據(jù)類型斷言(Y.Assert.isArray()、Y.Assert.isBoolean()、Y.Assert.isNumber() 等等)。

    3). 特殊值斷言(Y.Assert.isFalse()、Y.Assert.isNaN()、Y.Assert.isNull() 等等)。

    要啟動(dòng) YUI 中的測(cè)試,需要使用 Y.Test.Runner 對(duì)象。還需要將套件或測(cè)試用例添加到對(duì)象中,然后調(diào)用 run() 方法來(lái)運(yùn)行測(cè)試。清單 14 顯示了如何運(yùn)行 清單 13 中創(chuàng)建的測(cè)試。

    清單 14. 運(yùn)行 YUI test

     
     
     
     
    1. Y.Test.Runner.add(suite);  
    2. Y.Test.Runner.run(); 

    在默認(rèn)情況下,結(jié)果會(huì)打印在瀏覽器的控制臺(tái)中(如果瀏覽器支持控制臺(tái)的話)。更好的方法是使用 Yahoo! Console 組件來(lái)打印結(jié)果。如果要使用 Yahoo! Console 組件,需要采用 Y.Console 構(gòu)造函數(shù)將控制臺(tái)綁定到 HTML 運(yùn)行程序的 DOM 元素中,如清單 15 所示。

    #p#

    清單 15. Yahoo! Console

     
     
     
     
    1. var console = new Y.Console({  
    2.     verbose: true,  
    3.     newestOnTop: false,  
    4.     width:"600px" 
    5. });  
    6.    
    7. console.render('#testLogger'); 

    清單 15 顯示了如何使用幾個(gè)參數(shù)配置控制臺(tái)。該控制臺(tái)會(huì)在 DOM 元素內(nèi)部呈現(xiàn),其 id 為 testLogger。

    需要更新 HTML 運(yùn)行程序。添加該控制臺(tái)所引用的 DOM 元素,如清單 16 所示。

     
     
     
     
    1.  
    2.      
     
  •  
  • 本例為  設(shè)置了一個(gè)類,名為 yui3-skin-sam。該類負(fù)責(zé)定義控制臺(tái)的皮膚。

    圖 3 顯示了運(yùn)行測(cè)試之后的控制臺(tái)。

    圖 3. YUI Test 結(jié)果

    使用 JSTestDriver 輕松測(cè)試

    通過(guò)使用功能強(qiáng)大的 JSTestDriver (JSTD) 工具,您能夠在多個(gè)瀏覽器中從命令行運(yùn)行 JavaScript。JSTD 帶有一個(gè) JAR 文件,它可以讓您啟動(dòng)服務(wù)器、捕獲一或多個(gè)瀏覽器并在這些瀏覽器中運(yùn)行測(cè)試。因?yàn)閾碛猩鲜龅膬蓚€(gè)框架,您不需要 HTML 運(yùn)行程序,但您需要一個(gè)配置文件。圖 17 顯示了配置文件。

    清單 17. 配置文件 (jsTestDriver.conf)

     
     
     
     
    1. server: http://localhost:4224  
    2. load:  
    3.   - js/src/*.js  
    4. test:  
    5.   - js/test/*.js 

    該配置文件是用 YAML 編寫的,這是一種很好的配置文件格式。它包含了要啟動(dòng)的服務(wù)器以及源代碼和測(cè)試文件的位置信息。

    要使用 JSTD 來(lái)執(zhí)行測(cè)試:

    1. 啟動(dòng)測(cè)試服務(wù)器。從命令行中,進(jìn)入到保存 jsTestDriver.jar 的文件夾,并執(zhí)行以下命令:

     
     
     
     
    1. java -jar JsTestDriver-1.3.3d.jar -port 4224 

    清單 17 中指定的端口應(yīng)該與配置文件中指定的一樣。在默認(rèn)情況下,JSTD 會(huì)在 JAR 文件所在的同一個(gè)目錄下查找 jsTestDriver.conf 文件。

    2. 在測(cè)試中,通過(guò)將 URL http://localhost:4224/capture 復(fù)制粘貼到測(cè)試中的瀏覽器,在服務(wù)器上注冊(cè)一個(gè)或多個(gè)瀏覽器。

    測(cè)試之前示例中所使用的相同代碼(清單 5),但這次使用 JSTD 語(yǔ)法。清單 18 顯示了如何轉(zhuǎn)換 清單 10 的 QUnit 和 清單14 的 YUI Test 中的代碼。

    清單 18. JSTD 測(cè)試

     
     
     
     
    1. TestCase("Temperature conversion", {  
    2.     setUp : function () {  
    3.         this.celsius1 = 20;  
    4.         this.celsius2 = 30;  
    5.    
    6.         this.fahrenheit1 = 68;  
    7.         this.fahrenheit2 = 86;  
    8.     },  
    9.    
    10.     testConversionCtoF: function () {  
    11.         assertSame(this.fahrenheit1, convertFromCelsiusToFahrenheit(this.celsius1));  
    12.         assertSame(this.fahrenheit2, convertFromCelsiusToFahrenheit(this.celsius2));  
    13.     },  
    14.    
    15.     testConversionFtoC: function () {  
    16.         assertSame(this.celsius1, convertFromFahrenheitToCelsius(this.fahrenheit1));  
    17.         assertSame(this.celsius2, convertFromFahrenheitToCelsius(this.fahrenheit2));  
    18.     }  
    19. }); 

    清單 18 中的代碼與 YUI 版本差別不大。JSTD 使用 TestCase() 函數(shù)來(lái)定義測(cè)試用例。您可以使用內(nèi)聯(lián)聲明來(lái)定義測(cè)試方法,如清單 18 所示,或者可以擴(kuò)展 TestCase 實(shí)例的原型。每個(gè)測(cè)試用例還可以使用 SetUp() 和 tearDown() 方法。

    如果要運(yùn)行測(cè)試,運(yùn)行以下命令:

     
     
     
     
    1. java -jar JsTestDriver-1.3.3d.jar --tests all 

    圖 4 顯示了終端上的輸出結(jié)果。

    圖 4. JSTD 測(cè)試的結(jié)果

    測(cè)試會(huì)傳入之前捕獲到的所有瀏覽器(Chrome 15、Safari 5 和 Firefox 7)。

    JSTD 還能與您偏好的連續(xù)集成系統(tǒng)很好地集成,成為連續(xù)版本的一部分。它還能與 IDE 集成,如 Eclipse(插件)或 TextMate(包)。

    結(jié)束語(yǔ)

    隨著現(xiàn)在對(duì) Web 應(yīng)用程序客戶端的關(guān)注,對(duì) JavaScript 進(jìn)行單元測(cè)試就顯得尤為必要。有很多框架可以幫助您完成此任務(wù),本文介紹了三個(gè)最流行的框架:QUnit、YUI Test 和 JSTestDriver。

    QUnit 非常簡(jiǎn)單,很適合初學(xué)者的框架。

    YUI Test 是個(gè)全面的工具,適合熟悉 YUI 庫(kù)的用戶。

    JSTestDriver 可在多個(gè)瀏覽器中運(yùn)行測(cè)試。

    來(lái)源:IBM DeveloperWorks


    當(dāng)前文章:對(duì)JavaScript進(jìn)行單元測(cè)試的工具
    網(wǎng)站URL:http://www.dlmjj.cn/article/ccopejc.html