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。

      配置文件已搞定。如下圖:

      

      打開配置文件:我們需要注意兩個地方:

      

  12都是設置路徑的。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通過瀏覽器自動測試的功能。

 

  

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM