本文先介紹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通過瀏覽器自動測試的功能。