qileilove

          blog已經轉移至github,大家請訪問 http://qaseven.github.io/

          使用JsTestDriver實現JavaScript單元測試

           一點點必要的廢話
            JavaScript的發展大體上經歷了下面幾個比較大的階段:
            第一階段:石器時代。
            基本上沒有任何框架和工具,而且各種瀏覽器混戰,API相當混亂,開發和測試都非常痛苦。
            第二階段:刀耕火種。
            出現了一些簡單的、小型的工具,比如prototype/mootools之類的。
            第三階段:農耕文明。
            2005年左右,Ajax、JSON等技術開始興起,并且以非??斓乃俣绕占?。這個階段出現了jQuery之類的神器,但是還是有大量的問題沒有解決,開發和測試依然非常痛苦,各種工具很亂,學習過程漫長。
            第四階段:規模化、結構化。
            前端代碼的規模越來越大,結構化、模塊化的呼聲越來越高,開始出現專業的“前端工程師”這樣的職業。各個互聯網大佬都開始組建自己的UED部門,比如騰訊的CDC、淘寶的UED、網易的UEDC。
            對于前端開發來說,這一階段已經發生了思想上飛躍。此時前端考慮的問題已經不僅僅是“如何把界面做得好看”這么簡單了,對前端的要求已經提升到了“用戶體驗”的層次,界面“好看”只是其中一部分,還要做交互設計,怎么讓用戶操作更方便、怎么讓界面更人性化,如此等等。 在這個階段出現了很多重量級的框架,大體上分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,如下圖:
            配置成以下形式:
            第六步:啟動JsTestDriver服務器
            在前面我們已經打開了JsTestDriver的控制面板,如下圖:
            在右上角有一個運行按鈕,點擊它啟動Server。
            第七步:點亮需要測試的瀏覽器圖標,瀏覽器會自動打開并跳轉到http://127.0.0.1:8259/capture這個路徑。
            第八步:開始運行測試用例。
            第九步:查看結果。
            如果用例運行沒有問題,效果如下:
            如果運行失敗,效果如下:
            好了,到這里為止,JsTestDriver就算運行成功了。
            每次保存自動運行測試代碼
            很多時候,我們希望每次代碼發生變更之后,工具能夠自動把所有用例全部跑一遍,這樣該多爽??!
            其實很簡單啦,請看下圖:
            但是,設置了這個選項之后有一個缺點,如果JsTestDriver的Server沒有運行,每次保存代碼的時候會彈出錯誤,因為它還在嘗試運行測試用例。
            如何與Ant配合
            JsTestDriver是可以在命令行下面運行的:
            java -jar JsTestDriver.jar --tests all
            因此,我們可以自己寫一個Ant任務來調用這個jar,并設置運行參數。

          posted on 2014-12-03 13:48 順其自然EVO 閱讀(305) 評論(0)  編輯  收藏 所屬分類: 測試學習專欄

          <2014年12月>
          30123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910

          導航

          統計

          常用鏈接

          留言簿(55)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 海淀区| 蓝田县| 襄樊市| 德令哈市| 新竹市| 鸡西市| 湛江市| 出国| 合山市| 油尖旺区| 浦城县| 当涂县| 黑山县| 醴陵市| 乌苏市| 北辰区| 根河市| 潜山县| 江西省| 上栗县| 迁安市| 闵行区| 西青区| 城市| 石柱| 仪陇县| 河南省| 海安县| 富宁县| 金华市| 门源| 宁陕县| 株洲市| 安塞县| 彭泽县| 康定县| 镇宁| 桦南县| 洛阳市| 博白县| 哈巴河县|