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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Web開發(fā)者必備的JavaScript單元測試工具

當(dāng)前,在軟件開發(fā)中單元測試越來越受到開發(fā)者的重視,它能提高軟件的開發(fā)效率,而且能保障開發(fā)的質(zhì)量。以往，單元測試往往多見于服務(wù)端的開發(fā)中，但隨著Web編程領(lǐng)域的分工逐漸明細(xì)，在前端Javascript開發(fā)領(lǐng)域中，也可以進(jìn)行相關(guān)的單元測試，以保障前端開發(fā)的質(zhì)量。在本文中，將初步探討如何在Javascript中進(jìn)行單元測試及其注意要點(diǎn)。

Javascript中的單元測試工具

在Javascript的單元測試中工具中，有很多開源的工具，本文選取其中兩個(gè)比較典型實(shí)用的工具進(jìn)行介紹：jsTestDriver和Qunit。先來看下jsTestDriver(下載地址：http://code.google.com/p/js-test-driver/wiki/GettingStarted)。

jsTestDriver以客戶服務(wù)端的方式運(yùn)行，在客戶端發(fā)送測試請求到服務(wù)端，整個(gè)運(yùn)行是在可以捕捉的瀏覽器中進(jìn)行的，其優(yōu)點(diǎn)為它能很容易地與代碼編輯器整合，以及能成為自動(dòng)構(gòu)建的一部分。jsTestDriver包括一系列能與Eclipse,Maven和IntelliJ整合的插件，甚至與Visual Studio整合也是可行的(參考這篇文章)，比如下圖是與EditPlus整合的一個(gè)示意圖：

jsTestDriver的安裝

安裝jsTestDriver的步驟如下：

1. 從jsTestDriver的下載頁中下載相關(guān)的JAR文件，下載地址為：http://code.google.com/p/js-test-driver/downloads/list，下載其中的JsTestDriver-1.3.3a.jar 這個(gè)文件

2. 創(chuàng)建兩個(gè)文件夾，其中一個(gè)為名稱為src的存放Javascript源代碼的文件，另外一個(gè)是用來存放測試用例的文件，文件夾命名為src-test。

3. 創(chuàng)建一個(gè)配置文件，配置文件名為jsTestDriver.conf，配置文件如下：

server: http://localhost:9876

load:

- src/*.js

- src-test/*.js

這里指出了啟動(dòng)位于9876的端口進(jìn)行監(jiān)聽，并且先加載src文件夾下的所有js文件夾，然后在加載src-test文件夾下的js文件進(jìn)行測試。

4. 接下來，我們配置jsTestDriver的服務(wù)端，以讓其監(jiān)控chrome瀏覽器，讓其運(yùn)行Javascript測試用例。在命令行輸入如下代碼，具體路徑請根據(jù)實(shí)際情況修改。

"C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"

這樣的話，會(huì)在4224端口啟動(dòng)jsTestDriver，并且會(huì)啟動(dòng)一個(gè)chrmoe瀏覽器的實(shí)例，這個(gè)實(shí)例會(huì)捕捉所有的在Chrmoe中運(yùn)行的Javascript單元測試。接下來，編寫一個(gè).cmd文件，在命令方式下執(zhí)行，以執(zhí)行測試，測試所有放在src-test中的測試用例，代碼如下：

 
 
 
 
      
  
  
  
  1. "C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --tests all  
    2.   
  
  
  
  2. 　　Pause 
    3.

開始編寫Javascript

我們開始編寫一個(gè)簡單的Javascript來進(jìn)行測試，先在src和src-test目錄下，分別編

寫如下代碼：

Src目錄下的mystuff.js

 
 
 
 
      
  
  
  
  1. myAwesomeApp = {};  
    2.   
  
  
  
  2. 　　myAwesomeApp.MyAwesomeClass = function(){};  
    3.   
  
  
  
  3. 　　myAwesomeApp.MyAwesomeClass.prototype.add = function(num0, num1){  
    4.   
  
  
  
  4. 　　return num0 + num1;  
    5.   
  
  
  
  5. 　　};  
    6.   
  
  
  
  6. 　　Src-test 目錄下的mystuff.js  
    7.   
  
  
  
  7. 　　TestCase("Sample Test Case",{  
    8.   
  
  
  
  8. 　　"test Number plus Zero Equals Number": function(){  
    9.   
  
  
  
  9. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
    10.   
  
  
  
  10. 　　assertEquals(5, adder.add(5,0));  
    11.   
  
  
  
  11. 　　},  
    12.   
  
  
  
  12. 　　"test Number plus Number Equals Sum": function(){  
    13.   
  
  
  
  13. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
    14.   
  
  
  
  14. 　　assertEquals(8, adder.add(5,3));  
    15.   
  
  
  
  15. 　　},  
    16.   
  
  
  
  16. 　　"test Zero plus Number Equals Number": function(){  
    17.   
  
  
  
  17. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
    18.   
  
  
  
  18. 　　assertEquals(5, adder.add(0,5));  
    19.   
  
  
  
  19. 　　},  
    20.   
  
  
  
  20. 　　"test Number plus Negative of Number Equals Zero": function(){  
    21.   
  
  
  
  21. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
    22.   
  
  
  
  22. 　　assertEquals(0, adder.add(5,-5));  
    23.   
  
  
  
  23. 　　},  
    24.   
  
  
  
  24. 　　"test Fails miserably": function(){  
    25.   
  
  
  
  25. 　　fail("miserably");   
    26.   
  
  
  
  26. 　　}  
    27.   
  
  
  
  27. 　　}); 
    28.

熟悉單元測試的開發(fā)者對它們應(yīng)該不感到陌生。在上面的測試代碼組中，分別測試

了多種用例，用到的都是assertEquals斷言。更多的用法請參考其官方主頁的介紹。

接下來，我們開始運(yùn)行測試用例，方法為在命令行模式下，

"C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"

這樣就可以啟動(dòng)chrome瀏覽器監(jiān)聽相關(guān)的Javascript單元測試用例。運(yùn)行后可以看到打開了瀏覽器，如下圖：

接下來開始進(jìn)行單元測試，命令行輸入如下代碼：

 
 
 
 
      
  
  
  
  1. "C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --tests all 
    2.

運(yùn)行后，會(huì)在瀏覽器中看到相關(guān)的輸出結(jié)果，如下：

 
 
 
 
      
  
  
  
  1. ....F  
    2.   
  
  
  
  2. 　　Total 5 tests (Passed: 4; Fails: 1; Errors: 0) (0.00 ms)  
    3.   
  
  
  
  3. 　　Chrome 13.0.782.220 Windows: Run 5 tests (Passed: 4; Fails: 1; Errors 0) (0.00 ms)  
    4.   
  
  
  
  4. 　　Object Literal Test Case.test Fails miserably failed (0.00 ms): AssertError: miserably  
    5.   
  
  
  
  5. 　　AssertError: miserably  
    6.   
  
  
  
  6. 　　at Object.test Fails miserably (http://localhost:4224/test/src-test/mystuff.js:22:3)  
    7.   
  
  
  
  7. 　　Tests failed: Tests failed. See log for details. 
    8.

從結(jié)果中可以看到，.S表示成功通過的單元測試，.F為失敗的單元測試用例，而.E為錯(cuò)誤的測試用例，信息中還指出了有多少個(gè)單元測試，通過了多少，多少個(gè)沒有通過。

jsTestDriver還支持傳統(tǒng)的setup和teardown等單元測試方法。更多的相關(guān)介紹可以參考其在線幫助手冊。

#p#

開源的單元測試工具Qunit

接下來，介紹另外一款開源的單元測試工具Qunit(下載地址：http://code.jquery.com/qunit)，它是完全基于瀏覽器運(yùn)行的，因此不需要象jsTestDriver那么安裝麻煩，而且值得一提的是，這個(gè)框架是jQuery的單元測試Javascript框架，功能十分強(qiáng)大。下面是安裝方法：

1) 只需要下載qunit.js(http://code.jquery.com/qunit/qunit-git.js)和qunit.css(http://code.jquery.com/qunit/qunit-git.css)

2) 我們需要編寫一個(gè)Qunit的界面，命名為testrunner.html,代碼如下：

 
 
 
 
      
  
  
  
  1.    
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.        
    5.   
  
  
  
  5.        
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.        
    9.   
  
  
  
  9.        
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.    
    12.   
  
  
  
  12.    
    13.   
  
  
  
  13.     MyStuff   
    14.   
  
  
  
  14.        
    15.   
  
  
  
  15.        
    16.   
  
  
  
  16.     
     
  
  
  
  •    
    •   
  
  
  
  •  
    •

    這個(gè)頁面中分別引入了jquery類庫，qunit的類庫，還有就是我們之前編寫的，位于Src目錄下的原先的javascript腳本mystuff.js，以及位于src-test目錄下的測試用例Mystuff_qunit.js。

    接下來，來看下測試用例文件Mystuff_qunit.js，代碼如下：

     
 
 
 
        
  
  
  
    1. module("Sample Test Case");  
      2.   
  
  
  
    2. 　　test("Number plus Zero Equals Number", function(){  
      3.   
  
  
  
    3. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
      4.   
  
  
  
    4. 　　equals( adder.add(5,0),5);  
      5.   
  
  
  
    5. 　　});  
      6.   
  
  
  
    6. 　　test("Number plus Number Equals Sum", function(){  
      7.   
  
  
  
    7. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
      8.   
  
  
  
    8. 　　equals(adder.add(5,3),8);  
      9.   
  
  
  
    9. 　　});  
      10.   
  
  
  
    10. 　　test("Zero plus Number Equals Number", function(){  
      11.   
  
  
  
    11. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
      12.   
  
  
  
    12. 　　equals(adder.add(0,5),5);  
      13.   
  
  
  
    13. 　　});  
      14.   
  
  
  
    14. 　　test("Number plus Negative of Number Equals Zero", function(){  
      15.   
  
  
  
    15. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
      16.   
  
  
  
    16. 　　equals(adder.add(5,-5),0);  
      17.   
  
  
  
    17. 　　});  
      18.   
  
  
  
    18. 　　test("Fails miserably", function(){  
      19.   
  
  
  
    19. 　　ok(false,"miserably");  
      20.   
  
  
  
    20. 　　}); 
      21.

    這個(gè)看上去跟jsTestDriver有點(diǎn)象，但注意的是在斷言方法中，參數(shù)的順序不同，即在qunit中，斷言的參數(shù)順序?yàn)椋篞unit.equals(actual, expected)，即實(shí)際的數(shù)值。在前面，而期望的數(shù)值在后面，這點(diǎn)請注意。最后，直接在瀏覽器中運(yùn)行test.html,可以看到效果如下：

    其中，紅色部分即時(shí)表示沒能通過的單元測試。

    整合jsTestDriver和Qunit

    由于jsTestDriver和Qunit各有優(yōu)勢，因此我們可以考慮對其進(jìn)行整合。比如，我們可以將jsTestDriver編寫的腳本移植到Qunit中去，由于它們的斷言參數(shù)順序有不同，因此可以修改一下，編寫名為jsTestDriverInQunit.js的腳本如下：

     
 
 
 
        
  
  
  
    1. function TestCase(name, tests){  
      2.   
  
  
  
    2. 　　if(tests != null)  
      3.   
  
  
  
    3. 　　module(name);  
      4.   
  
  
  
    4. 　　for(var key in tests){  
      5.   
  
  
  
    5. 　　if(tests[key] instanceof Function && key.indexOf("test") == 0){  
      6.   
  
  
  
    6. 　　test(key,tests[key]);  
      7.   
  
  
  
    7. 　　}  
      8.   
  
  
  
    8. 　　}  
      9.   
  
  
  
    9. 　　return function(){};  
      10.   
  
  
  
    10. 　　}  
      11.   
  
  
  
    11. 　　function assertEquals(arg0,arg1){  
      12.   
  
  
  
    12. 　　equals(arg1,arg0);  
      13.   
  
  
  
    13. 　　}  
      14.   
  
  
  
    14. 　　function fail(msg){  
      15.   
  
  
  
    15. 　　ok(false,msg);  
      16.   
  
  
  
    16. 　　} 
      17.

    并且將testrunner.html修改如下：

     
 
 
 
        
  
  
  
    1.    
      2.   
  
  
  
    2.        
      3.   
  
  
  
    3.        
      4.   
  
  
  
    4.            
      5.   
  
  
  
    5.            
      6.   
  
  
  
    6.            
      7.   
  
  
  
    7.            
      8.   
  
  
  
    8.       
      9.   
  
  
  
    9.            
      10.   
  
  
  
    10.            
      11.   
  
  
  
    11.        
      12.   
  
  
  
    12.        
      13.   
  
  
  
    13.         MyStuff   
      14.   
  
  
  
    14.            
      15.   
  
  
  
    15.            
      16.   
  
  
  
    16.         
         
  
  
  
  •        
    •   
  
  
  
  •       
    •

    此外，還有一個(gè)開源項(xiàng)目提供了將Qunit轉(zhuǎn)化為jsTestDriver的功能，項(xiàng)目地址為：

    http://code.google.com/p/js-test-driver/wiki/QUnitAdapter。

    原文：http://tech.it168.com/a2011/1019/1260/000001260942_all.shtml

    【編輯推薦】

    1. 學(xué)習(xí)JavaScript的最佳方法
    2. stream.js：一個(gè)新的JavaScript數(shù)據(jù)結(jié)構(gòu)
    3. Dart之于JavaScript正如C#之于C++
    4. 移動(dòng)網(wǎng)站開發(fā)中常用的10段JavaScript代碼
    5. JavaScript性能優(yōu)化技巧之函數(shù)節(jié)流

    本文題目：Web開發(fā)者必備的JavaScript單元測試工具
    轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dhdodsh.html