玩轉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)