Web開(kāi)發(fā)者必備的JavaScript單元測(cè)試工具
當(dāng)前,在軟件開(kāi)發(fā)中單元測(cè)試越來(lái)越受到開(kāi)發(fā)者的重視,它能提高軟件的開(kāi)發(fā)效率,而且能保障開(kāi)發(fā)的質(zhì)量。以往，單元測(cè)試往往多見(jiàn)于服務(wù)端的開(kāi)發(fā)中，但隨著Web編程領(lǐng)域的分工逐漸明細(xì)，在前端Javascript開(kāi)發(fā)領(lǐng)域中，也可以進(jìn)行相關(guān)的單元測(cè)試，以保障前端開(kāi)發(fā)的質(zhì)量。在本文中，將初步探討如何在Javascript中進(jìn)行單元測(cè)試及其注意要點(diǎn)。
Javascript中的單元測(cè)試工具
在Javascript的單元測(cè)試中工具中，有很多開(kāi)源的工具，本文選取其中兩個(gè)比較典型實(shí)用的工具進(jìn)行介紹：jsTestDriver和Qunit。先來(lái)看下jsTestDriver(下載地址：http://code.google.com/p/js-test-driver/wiki/GettingStarted)。
jsTestDriver以客戶(hù)服務(wù)端的方式運(yùn)行，在客戶(hù)端發(fā)送測(cè)試請(qǐng)求到服務(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的下載頁(yè)中下載相關(guān)的JAR文件，下載地址為：http://code.google.com/p/js-test-driver/downloads/list，下載其中的JsTestDriver-1.3.3a.jar 這個(gè)文件
2. 創(chuàng)建兩個(gè)文件夾，其中一個(gè)為名稱(chēng)為src的存放Javascript源代碼的文件，另外一個(gè)是用來(lái)存放測(cè)試用例的文件，文件夾命名為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)聽(tīng)，并且先加載src文件夾下的所有js文件夾，然后在加載src-test文件夾下的js文件進(jìn)行測(cè)試。
4. 接下來(lái)，我們配置jsTestDriver的服務(wù)端，以讓其監(jiān)控chrome瀏覽器，讓其運(yùn)行Javascript測(cè)試用例。在命令行輸入如下代碼，具體路徑請(qǐng)根據(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à)，會(huì)在4224端口啟動(dòng)jsTestDriver，并且會(huì)啟動(dòng)一個(gè)chrmoe瀏覽器的實(shí)例，這個(gè)實(shí)例會(huì)捕捉所有的在Chrmoe中運(yùn)行的Javascript單元測(cè)試。接下來(lái)，編寫(xiě)一個(gè).cmd文件，在命令方式下執(zhí)行，以執(zhí)行測(cè)試，測(cè)試所有放在src-test中的測(cè)試用例，代碼如下：
- "C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --tests all
- Pause
開(kāi)始編寫(xiě)Javascript
我們開(kāi)始編寫(xiě)一個(gè)簡(jiǎn)單的Javascript來(lái)進(jìn)行測(cè)試，先在src和src-test目錄下，分別編
寫(xiě)如下代碼：
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");
- }
- });
熟悉單元測(cè)試的開(kāi)發(fā)者對(duì)它們應(yīng)該不感到陌生。在上面的測(cè)試代碼組中，分別測(cè)試
了多種用例，用到的都是assertEquals斷言。更多的用法請(qǐng)參考其官方主頁(yè)的介紹。
接下來(lái)，我們開(kāi)始運(yùn)行測(cè)試用例，方法為在命令行模式下，
"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)聽(tīng)相關(guān)的Javascript單元測(cè)試用例。運(yùn)行后可以看到打開(kāi)了瀏覽器，如下圖：
接下來(lái)開(kāi)始進(jìn)行單元測(cè)試，命令行輸入如下代碼：
- "C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --tests all
運(yùn)行后，會(huì)在瀏覽器中看到相關(guān)的輸出結(jié)果，如下：
- ....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.
從結(jié)果中可以看到，.S表示成功通過(guò)的單元測(cè)試，.F為失敗的單元測(cè)試用例，而.E為錯(cuò)誤的測(cè)試用例，信息中還指出了有多少個(gè)單元測(cè)試，通過(guò)了多少，多少個(gè)沒(méi)有通過(guò)。
jsTestDriver還支持傳統(tǒng)的setup和teardown等單元測(cè)試方法。更多的相關(guān)介紹可以參考其在線幫助手冊(cè)。
#p#
開(kāi)源的單元測(cè)試工具Qunit
接下來(lái)，介紹另外一款開(kāi)源的單元測(cè)試工具Qunit(下載地址：http://code.jquery.com/qunit)，它是完全基于瀏覽器運(yùn)行的，因此不需要象jsTestDriver那么安裝麻煩，而且值得一提的是，這個(gè)框架是jQuery的單元測(cè)試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) 我們需要編寫(xiě)一個(gè)Qunit的界面，命名為testrunner.html,代碼如下：
- <DOCTYPE html>
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
- <script src="qunit.js" type="text/javascript"></script>
- <link rel="stylesheet" media="all" href="qunit.css" />
- <script src="src/mystuff.js" type="text/javascript"></script>
- <script src="src-test/mystuff_qunit.js" type="text/javascript"></script>
- </head>
- <body>
- <h1 id="qunit-header">MyStuff</h1>
- <h2 id="qunit-banner"></h2>
- <h2 id="qunit-userAgent"></h2>
- <ol id="qunit-tests"></ol>
- </body>
- </html>
這個(gè)頁(yè)面中分別引入了jquery類(lèi)庫(kù)，qunit的類(lèi)庫(kù)，還有就是我們之前編寫(xiě)的，位于Src目錄下的原先的javascript腳本mystuff.js，以及位于src-test目錄下的測(cè)試用例Mystuff_qunit.js。
接下來(lái)，來(lái)看下測(cè)試用例文件Mystuff_qunit.js，代碼如下：
- module("Sample Test Case");
- test("Number plus Zero Equals Number", function(){
- var adder = new myAwesomeApp.MyAwesomeClass();
- equals( adder.add(5,0),5);
- });
- test("Number plus Number Equals Sum", function(){
- var adder = new myAwesomeApp.MyAwesomeClass();
- equals(adder.add(5,3),8);
- });
- test("Zero plus Number Equals Number", function(){
- var adder = new myAwesomeApp.MyAwesomeClass();
- equals(adder.add(0,5),5);
- });
- test("Number plus Negative of Number Equals Zero", function(){
- var adder = new myAwesomeApp.MyAwesomeClass();
- equals(adder.add(5,-5),0);
- });
- test("Fails miserably", function(){
- ok(false,"miserably");
- });
這個(gè)看上去跟jsTestDriver有點(diǎn)象，但注意的是在斷言方法中，參數(shù)的順序不同，即在qunit中，斷言的參數(shù)順序?yàn)椋篞unit.equals(actual, expected)，即實(shí)際的數(shù)值。在前面，而期望的數(shù)值在后面，這點(diǎn)請(qǐng)注意。最后，直接在瀏覽器中運(yùn)行test.html,可以看到效果如下：
其中，紅色部分即時(shí)表示沒(méi)能通過(guò)的單元測(cè)試。
整合jsTestDriver和Qunit
由于jsTestDriver和Qunit各有優(yōu)勢(shì)，因此我們可以考慮對(duì)其進(jìn)行整合。比如，我們可以將jsTestDriver編寫(xiě)的腳本移植到Qunit中去，由于它們的斷言參數(shù)順序有不同，因此可以修改一下，編寫(xiě)名為jsTestDriverInQunit.js的腳本如下：
- function TestCase(name, tests){
- if(tests != null)
- module(name);
- for(var key in tests){
- if(tests[key] instanceof Function && key.indexOf("test") == 0){
- test(key,tests[key]);
- }
- }
- return function(){};
- }
- function assertEquals(arg0,arg1){
- equals(arg1,arg0);
- }
- function fail(msg){
- ok(false,msg);
- }
并且將testrunner.html修改如下：
- <DOCTYPE html>
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
- <script src="qunit.js" type="text/javascript"></script>
- <script src="jsTestDriverInQunit.js" type="text/javascript"></script>
- <link rel="stylesheet" media="all" href="qunit.css" />
- <script src="src/mystuff.js" type="text/javascript"></script>
- <script src="src-test/mystuff.js" type="text/javascript"></script>
- </head>
- <body>
- <h1 id="qunit-header">MyStuff</h1>
- <h2 id="qunit-banner"></h2>
- <h2 id="qunit-userAgent"></h2>
- <ol id="qunit-tests"></ol>
- </body>
- </html>
此外，還有一個(gè)開(kāi)源項(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
【編輯推薦】
