使用JsTestDriver實現JavaScript單元測試

使用JsTestDriver實現JavaScript單元測試

 

大漠窮秋

 

一點點必要的廢話

 

JavaScript的發展大致上經歷了下面幾個比較大的階段：

 

第一階段：石器時代。

 

基本上沒有任何框架和工具，並且各類瀏覽器混戰，API至關混亂，開發和測試都很是痛苦。

 

第二階段：刀耕火種。

 

出現了一些簡單的、小型的工具，好比prototype/mootools之類的。

 

第三階段：農耕文明。

 

2005年左右，Ajax、JSON等技術開始興起，而且以很是快的速度普及。這個階段出現了jQuery之類的神器，可是仍是有大量的問題沒有解決，開發和測試依然很是痛苦，各類工具很亂，學習過程漫長。

 

第四階段：規模化、結構化。

 

前端代碼的規模愈來愈大，結構化、模塊化的呼聲愈來愈高，開始出現專業的「前端工程師」這樣的職業。各個互聯網大佬都開始組建本身的UED部門，好比騰訊的CDC、淘寶的UED、網易的UEDC。

 

對於前端開發來講，這一階段已經發生了思想上飛躍。此時前端考慮的問題已經不只僅是「如何把界面作得好看」這麼簡單了，對前端的要求已經提高到了「用戶體驗」的層次，界面「好看」只是其中一部分，還要作交互設計，怎麼讓用戶操做更方便、怎麼讓界面更人性化，如此等等。 在這個階段出現了不少重量級的框架，大致上分2個體系：一個是以jQuery爲內核的前端框架，例如jQueryUI之類的各種UI；另外一個就是自成體系的ExtJS。

 

（有人可能會說還有Flex、SilverLight、JavaFX之類的東西呢！這裏專門說JS，那些先無論，謝謝。）

 

第五階段：工業化、多平臺。

 

JavaScript代碼不只僅規模更加龐大，並且要支持各類平臺。2008年以後，安卓異軍突起，加上iPhone的強勢插入，移動平臺上的UI 設計日益收到重視。移動平臺的迅速崛起進一步刺激了桌面UI體系的演進，jQeury推出了jQuery Mobile，ExtJS推出了本身的Touch版本，其它各類衍生框架也都出現了Touch版本。

 

咱們知道，科技領域的工業化是以機器代替人力爲核心特徵的，對比前端代碼的工業化，咱們馬上就會發現，自動化程度依然不夠。雖然出現了像WebStorm這樣的前端開發神器，可是對於自動化測試、性能測試之類的需求，依然沒有成熟的、統一的工具。

 

近來TDD(Test Driving Develop)的概念愈來愈熱，加上來自Google的AnguarJS框架開始流行，TDD正在被普遍接受。所以，在這個階段，必須解決工具的問題，而自動化測試工具就是其中需求最強烈的一個工具。

 

好，廢話結束，開始玩兒JsTestDriver。

 

JsTestDriver簡介

 

完整介紹參見官方的頁面：

 

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

 

安裝Eclipse插件

 

請使用Eclipse的插件安裝工具，指向如下連接：http://js-test-driver.googlecode.com/svn/update/

 

 

 

注意：

 

一、Eclipse版本不能過低。

二、若是在線安裝不成功，能夠把插件下載到本地，而後再用Eclipse的插件安裝工具從本地安裝。

三、只安裝JS Test Driver Plugin for Eclipse，其它的不要安裝，不然會報衝突。

 

安裝完成以後，開始配置JsTestDriver，步驟以下：

 

第一步：配置JsTestDriver服務器

 

在Eclipse的菜單中選擇Window->Preferences，在左側找到JS Test Driver。

 

 

 

第二步：打開JsTestDriver的控制面板

 

在Eclipse頂部的菜單中選擇Window->Show View，找到JsTestDriver並雙擊，這樣JsTestDriver的控制面板就顯示出來了。

 

 

 

好，到這裏安裝配置就算完成了，接下來咱們來作一個最簡單的例子試試手感。

 

最簡單的例子

 

第一步：在Eclipse中新建一個WEB項目，名字隨意。

 

第二步：在WebContent目錄下新建js和js-test兩個目錄。js目錄用來放你的js源代碼，js-test用來放JsTestDriver的測試用例代碼。

 

第三步：在js目錄下新建一個myjs.js，內容以下：

 

myapp = {};

myapp.Greeter = function() { };

myapp.Greeter.prototype.greet = function(name) {
  return "Hello " + name + "!";
};

 

在js-test的目錄下新建一個testMyJS.js，內容以下：

 

GreeterTest = TestCase("GreeterTest");
GreeterTest.prototype.testGreet = function() {
   var greeter = new myapp.Greeter();
   assertEquals("Hello World!", greeter.greet("World"));
};

 

以上測試用例的代碼和Java中的JUnit比較相似，具體的語法規則參見這裏：http://code.google.com/p/js-test-driver/wiki/TestCase。這裏咱們先無論上面代碼的具體含義，先想辦法讓工具跑起來再說，咱們繼續。

 

第四步：建立JsTestDriver配置文件。

 

直接在WebContent目錄下建立一個jsTestDriver.conf，內容以下：

 

server: http://localhost:8259

load:
  - jasmine/*.*
  - jasmine-adapter/JasmineAdapter.js
  - js/*.js
  - js-test/*.js

 

注意上面的端口號，必須和前面設置的端口號一致。

 

這種配置文件的風格叫作YAML，JsTestDriver配置文件的完整說明參見這裏：http://code.google.com/p/js-test-driver/wiki/ConfigurationFile。

 

第五步：開始運行。

 

點擊Eclipse工具欄中的運行按鈕左側的小三角，選擇Run Configrations，以下圖：

 

 

 

配置成如下形式：

 

 

 

第六步：啓動JsTestDriver服務器

 

在前面咱們已經打開了JsTestDriver的控制面板，以下圖：

 

 
 

 

在右上角有一個運行按鈕，點擊它啓動Server。

 

第七步：點亮須要測試的瀏覽器圖標，瀏覽器會自動打開並跳轉到http://127.0.0.1:8259/capture這個路徑。

 

第八步：開始運行測試用例。

 

 
 

 

第九步：查看結果。

 

若是用例運行沒有問題，效果以下：

 

 

 

 

若是運行失敗，效果以下： 

 

 

 

好了，到這裏爲止，JsTestDriver就算運行成功了。更加詳細的內容請參考官方的站點http://code.google.com/p/js-test-driver/

 

每次保存自動運行測試代碼

 

不少時候，咱們但願每次代碼發生變動以後，工具可以自動把全部用例所有跑一遍，這樣該多爽啊！

 

其實很簡單啦，請看下圖：

 

 

 

可是，設置了這個選項以後有一個缺點，若是JsTestDriver的Server沒有運行，每次保存代碼的時候會彈出錯誤，由於它還在嘗試運行測試用例。

 

如何與Ant配合

 

JsTestDriver是能夠在命令行下面運行的：

 

java -jar JsTestDriver.jar --tests all

 

所以，咱們能夠本身寫一個Ant任務來調用這個jar，並設置運行參數。

 

下一篇：使用JsTestDriver+Jasmine進行單元測試

 

其它相關內容：

 

一、OReilly的《AngularJS》已經翻譯完成，即將由電子工業出版社出版

 

http://damoqiongqiu.iteye.com/blog/1909041

 

二、《AngularJS》5個實例詳解Directive（指令）機制

 

http://damoqiongqiu.iteye.com/blog/1917971

 

三、AngularJS表單基礎

 

http://damoqiongqiu.iteye.com/blog/1920191

 

四、AngularJS Form 進階：遠程校驗和自定義輸入項

 

http://damoqiongqiu.iteye.com/blog/1920993

 

五、AngularJS：在Windows上安裝Yeoman

 

http://damoqiongqiu.iteye.com/blog/1885371

 

六、對比Angular/jQueryUI/Extjs：沒有一個框架是萬能的

 

http://damoqiongqiu.iteye.com/blog/1922004