Karma-Jasmine之安裝與實例詳解（一）

本文先介紹karma-jasmine的安裝。

Karma介紹

　　首先說一下karma，官方是這樣給出的，karma不是一個測試框架，也不是一個斷言庫。karma只是啓動一個HTTP服務器，並生成HTML文件。因此你能夠選擇你本身喜歡的測試框架。如Jasmine,Mocha,QUnit等等。

Jasmine介紹

　　Jasmine便是上面所說的JavaScript測試框架。它不依賴於其餘任何JavaScript組件，它有乾淨的語法，Jasmine斷言庫可讓你簡單的寫出測試代碼，（斷言：表示爲一些布爾表達式，你能夠採用假設的方式，當程序輸出的結果是否與假設的結果一致時，斷言爲真，不然，斷言爲假）在karma上運行Jasmine能夠完成JavaScript的自動化測試、生成覆蓋率報告等。

Karma安裝

　　①安裝Node.js

　　karma是運行在node.js上的。因此首先安裝node.js.參考地址：http://pan.baidu.com/s/1jHrCh74#list/path=%2F下載一路next便可（舒適提示：最好改一下安裝路徑）  

                                                            

　　②安裝karma

　　點擊桌面左下角開始菜單，找到Node.js中的第一項，以下圖：

　　                                          

      將karma安裝到本身喜歡的位置。我安裝到了E:\tomjia-soft\karma下(關於windows下的文件目錄跳轉用cd)

　　　　　　

　　安裝karma，輸入命令：npm install karma --save-dev

　　　　　　

　　ok，karma已經安裝成功了。

　　③安裝插件　　

　　接下來安裝karma-jasmine、karma-chrome-launcher（chrome瀏覽器啓動器）插件。

　　npm install karma-jasmine karma-chrome-launcher --save-dev

　　　　　　

　　ok，插件已經安裝成功。

　　④安裝karma-cli

　　karma-cli用來簡化karma的調用，方便使用karma

      輸入命令：npm install -g karma-cli

　　　　　　

　　安裝已經所有完成了。安裝完成後的目錄以下：

　　　　　　

 

Karma使用

　　啓動karma，輸入命令：karma start

　　　　　　

 

　　　　　　自動彈出chrome瀏覽器窗口

　　　　　　

 

　　　　　　返回命令窗口時會報錯，由於尚未配置文件。這時先不用管，直接關掉命令窗口便可。同時瀏覽器也隨之關閉。

　　　　　　從新跳轉到karma目錄下，以下圖：並執行  karma init  命令。

　　　　　　

　　　　　　上圖說明：①你選擇哪個測試框架：咱們選擇jasmine

　　　　　　　　　　　②你想要使用Require.js嗎？：(RequireJS是一個很是小巧的JavaScript模塊載入框架)這裏咱們不須要。

　　　　　　　　　　　③你想讓那個瀏覽器自動捕獲：這裏能夠能夠選擇多個，咱們只用chrome。

　　　　　　　　　　　......

　　　　　　　　　　　⑥你但願karma一直監控全部的文件而且不停地測試嗎？：咱們須要自動化測試，因此咱們選擇yes。

　　　　　　配置文件已搞定。以下圖：

　　　　　　

　　　　　　打開配置文件：咱們須要注意兩個地方：

　　　　　　

　　1、2都是設置路徑的。1中的bathPath:能夠設置（設置爲相對於配置文件karma.conf的路徑），也能夠不設置。若是不設置的話。2中的files中的路徑就是相對於配置文件karma.conf的路徑。下文將有體現。若是bathPath設置了，2中的files中的路徑就是相對於1中的路徑而言。

　　咱們新建一個文件夾命名爲TestFiles。放在配置文件的上一級。TestFiles下有兩個js文件。分別是測試文件jasmineTest.js和被測試文件test.js.以下圖所示：

　　　　　　

                     

　　　　　　接下來咱們不設置配置文件中的1，直接設置2路徑(固然你也能夠設置1，再設置2)。如圖所示：

　　　　　　

    files: [
        '../TestFiles/jasmineTest.js',
        '../TestFiles/test.js'
    ],

　　test.js文件內容：　　　　　

function TT() {
    return "abc";
}

　　jasmineTest文件內容：

describe("A suite of basic functions", function () {
    it("test", function () {
        expect("abc").toEqual(TT());
    });
});

　　再次啓動karma：結果以下：

　　　　　　

　　　　　　

　　點擊debug：F12調試

　　　　　　

　　改變test.js內容，以下圖：

function TT() {
    return "abc123";
}

　　保存，打開命令窗口：觀察可得：

　　　　　　

　　　　打開瀏覽器，刷新！刷新！，點擊debug F12調試觀察可得：

　　　　　　

　　　　　　這就體現了karma經過瀏覽器自動測試的功能。