玩轉Javascript 給JS寫測試

  給js寫測試已經不是什么稀奇的事情了，最近項目里用了jasmine和JsTestDriver兩種js測試框架。JsTestDriver易於與持續構建系統相集成並能夠在多個瀏覽器上運行測試輕松實現TDD風格的開發。當在項目中配置好JsTestDriver以后，如同junit測試java文件一般，JsTestDriver可以直接通過運行js文件來進行單元測試。JsTestDriver框架本身就是JAVA的jar包，需要在本地運行並監聽一個端口。JsTestDriver是xUnit測試框架領域的一個比較新的成員，它最初起源於Google。本文將介紹如何搭建一個JsTestDriver測試框架。

  首先簡單介紹一下JsTestDriver的特點：

優點：

1.可以一次測試多個瀏覽器，使用方法是在啟動服務時可以將多個瀏覽器的路徑作為參數傳進去。

2.測試運行得很快，因為不需要將結果添加到DOM中呈現出來，它們能夠同時在任意多的瀏覽器中運行，未修改的文件瀏覽器會從緩存提取。

3.不需要HTML配件文件，僅僅只需提供一個或多個腳本和測試腳本，測試運行器運行時會創建一個空文件。

4.支持其它測試框架，可以測試其它測試框架寫的測試代碼，比如有對應的插件可以將QUnit和Jasmine測試代碼轉換成JsTestDriver的測試代碼。

缺點：

不能在瀏覽器中測試，只能通過自動化工具或控制台運行。生成的結果不夠直觀。安裝使用稍微有點麻煩，依賴於JAVA環境

 

搭建步奏：

一.編寫測試test.js

1.給一個測試js文件寫一個TestCase用來聲明一個測試對象

2.寫setUp，初始化被測對象

3.編寫測試函數，js測試驅動程序提供了一個聲明,讓測試更容易閱讀和維護方式向測試添加HTML。把有效的HTML在doc注釋和js測試驅動程序將相應的DOM到一個變量,或者將其添加到文檔的身體。

 

HtmlDeclaredInTest = TestCase("HtmlDeclaredInTest");
 
HtmlDeclaredInTest.prototype.setUp = function() {
  //test utils object contains convenience functions
  this.testUtils = new myapp.Greeter();
};
 
HtmlDeclaredInTest.prototype.testVariableHtml = function() {
 /*:DOC mainDiv = <div id='main'>
                    <div class='text'>Hello word.</div>
                  </div> */
  var child = this.testUtils.findFirstDiv(this.mainDiv);
 
  assertEquals("text", child.className);
  assertEquals("Hello word.", child.innerHTML);
};

 

二.編寫源文件source.js

1.寫一個讓測試通過的源代碼

2.運行測試

myapp = {};

myapp.Greeter = function() { };

myapp.Greeter.prototype.findFirstDiv = function(element) {
  var result, child ;
   
  for ( i = 0; i < element.childNodes.length; i++) {
    child = element.childNodes[i];
    if (child.nodeType == 1 && child.tagName=='DIV')
      result = child;
  }
   
  return result;
};

三.搭建運行環境

1.在google下載JsTestDriver唯一需要的一個集成jar包——JsTestDriver.jar

 

2.添加配置文件jsTestDriver.jstd，YAML格式文件，或者默認文件為jsTestDriver.conf與jar包同一目錄下。

server: http://localhost:9876

load:
  - src/*.js
  - src-test/*.js

3.啟動服務器

Java -jar JsTestDriver-1.3.5.jar --port 9876 --browser **/**/firefox.exe

訪問 http://localhost:9876/capture

4.運行測試

java -jar JsTestDriver-1.3.5.jar  --tests all --config **/**/jsTestDriver.jstd

5.結果

Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (0.00 ms)
  Safari 528.16: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (0.00 ms)
  Firefox 1.9.0.10: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (0.00 ms)