Web開發人員必備的JavaScript單元測試工具(1)

當前,在軟體開發中單元測試越來越受到開發人員的重視,它能提高軟體的開發效率,而且能保障開發的品質。以往，單元測試往往多見於服務端的開發中，但隨著Web編程領域的分工逐漸明細，在前端Javascript開發領域中，也可以進行相關的單元測試，以保障前端開發的品質。在本文中，將初步探討如何在Javascript中進行單元測試及其注意要點。

Javascript中的單元測試工具

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

jsTestDriver以客戶服務端的方式運行，在用戶端發送測試請求到服務端，整個運行是在可以捕捉的瀏覽器中進行的，其優點為它能很容易地與代碼編輯器整合，以及能成為自動構建的一部分。jsTestDriver包括一系列能與Eclipse,Maven和IntelliJ整合的外掛程式，甚至與Visual Studio整合也是可行的(參考這篇文章)，比如是與EditPlus整合的一個：

jsTestDriver的安裝

安裝jsTestDriver的步驟如下：

1. 從jsTestDriver的下載頁中下載相關的JAR檔案，為：http://code.google.com/p/js-test-driver/downloads/list，下載其中的JsTestDriver-1.3.3a.jar 這個檔案

2. 建立兩個檔案夾，其中一個為名稱為src的存放Javascript原始碼的檔案，另外一個是用來存放測試案例的檔案，檔案夾命名為src-test。

3. 建立一個設定檔，設定檔名為jsTestDriver.conf，設定檔如下：

server: http://localhost:9876

load:

- src/*.js

- src-test/*.js

這裡指出了啟動位於9876的連接埠進行監聽，並且先載入src檔案夾下的所有js檔案夾，然後在載入src-test檔案夾下的js檔案進行測試。

4. 接下來，我們配置jsTestDriver的服務端，以讓其監控chrome瀏覽器，讓其運行Javascript測試案例。在命令列輸入如下代碼，具體路徑請根據實際情況修改。

"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"

這樣的話，會在4224連接埠啟動jsTestDriver，並且會啟動一個chrmoe瀏覽器的執行個體，這個執行個體會捕捉所有的在Chrmoe中啟動並執行Javascript單元測試。接下來，編寫一個.cmd檔案，在命令方式下執行，以執行測試，測試所有放在src-test中的測試案例，代碼如下：

 

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

開始編寫Javascript

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

寫如下代碼：

Src目錄下的mystuff.js

 

  
myAwesomeApp = {};  
  
myAwesomeApp.MyAwesomeClass = function(){};  
  
myAwesomeApp.MyAwesomeClass.prototype.add = function(num0, num1){  
  
return num0 + num1;  
  
};  
  
Src-test 目錄下的mystuff.js  
  
TestCase("Sample Test Case",{  
  
"test Number plus Zero Equals Number": function(){  
  
var adder = new myAwesomeApp.MyAwesomeClass();  
  
assertEquals(5, adder.add(5,0));  
  
},  
  
"test Number plus Number Equals Sum": function(){  
  
var adder = new myAwesomeApp.MyAwesomeClass();  
  
assertEquals(8, adder.add(5,3));  
  
},  
  
"test Zero plus Number Equals Number": function(){  
  
var adder = new myAwesomeApp.MyAwesomeClass();  
  
assertEquals(5, adder.add(0,5));  
  
},  
  
"test Number plus Negative of Number Equals Zero": function(){  
  
var adder = new myAwesomeApp.MyAwesomeClass();  
  
assertEquals(0, adder.add(5,-5));  
  
},  
  
"test Fails miserably": function(){  
  
fail("miserably");   
  
}  
  
}); 
 

熟悉單元測試的開發人員對它們應該不感到陌生。在上面的測試程式碼群組中，分別測試

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

接下來，我們開始運行測試案例，方法為在命令列模式下，

"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"

這樣就可以啟動chrome瀏覽器監聽相關的Javascript單元測試用例。運行後可以看到開啟了瀏覽器，如：

接下來開始進行單元測試，命令列輸入如下代碼：

 

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

運行後，會在瀏覽器中看到相關的輸出結果，如下：

 

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

從結果中可以看到，.S表示成功通過的單元測試，.F為失敗的單元測試用例，而.E為錯誤的測試案例，資訊中還指出了有多少個單元測試，通過了多少，多少個沒有通過。

jsTestDriver還支援傳統的setup和teardown等單元測試方法。更多的相關介紹可以參考其線上協助手冊。