使用JsTestDriver實現JavaScript單元測試
一點點必要的廢話
JavaScript的發展大體上經歷了下面幾個比較大的階段:
第一階段:石器時代。
基本上沒有任何框架和工具,而且各種瀏覽器混戰,API相當混亂,開發和測試都非常痛苦。
第二階段:刀耕火種。
出現了一些簡單的、小型的工具,比如prototype/mootools之類的。
第三階段:農耕文明。
2005年左右,Ajax、JSON等技術開始興起,并且以非??斓乃俣绕占?。這個階段出現了jQuery之類的神器,但是還是有大量的問題沒有解決,開發和測試依然非常痛苦,各種工具很亂,學習過程漫長。
第四階段:規模化、結構化。
對于前端開發來說,這一階段已經發生了思想上飛躍。此時前端考慮的問題已經不僅僅是“如何把界面做得好看”這么簡單了,對前端的要求已經提升到了“用戶體驗”的層次,界面“好看”只是其中一部分,還要做交互設計,怎么讓用戶操作更方便、怎么讓界面更人性化,如此等等。 在這個階段出現了很多重量級的框架,大體上分2個體系:一個是以jQuery為內核的前端框架,例如jQueryUI之類的各類UI;另一個就是自成體系的ExtJS。
?。ㄓ腥丝赡軙f還有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簡介
完整介紹參見官方的頁面
安裝Eclipse插件
請使用Eclipse的插件安裝工具
注意:
1、Eclipse版本不能太低。
2、如果在線安裝不成功,可以把插件下載到本地,然后再用Eclipse的插件安裝工具從本地安裝。
3、只安裝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比較類似。這里我們先不管上面代碼的具體含義,先想辦法讓工具跑起來再說,我們繼續。
第四步:創建JsTestDriver配置文件。
直接在WebContent目錄下創建一個jsTestDriver.conf,內容如下:
server: http://localhost:8259
load:
- jasmine/*.*
- jasmine-adapter/JasmineAdapter.js
- js/*.js
- js-test/*.js
注意上面的端口號,必須和前面設置的端口號一致。
這種配置文件的風格叫做YAML,JsTestDriver配置文件的完整說明
第五步:開始運行。
點擊Eclipse工具欄中的運行按鈕左側的小三角,選擇Run Configrations,如下圖:
配置成以下形式:
posted on 2014-12-03 13:48 順其自然EVO 閱讀(305) 評論(0) 編輯 收藏 所屬分類: 測試學習專欄