Karma和Jasmine 自動化單元測試環境搭建

 

最近初學AngularJS ，看到的一些教程中經常有人推薦使用Karma+Jasmine來進行單元測試。自己之前也對Jasmine有些了解，jasmine也是一個不錯的測試框架。

1、 karma介紹

Karma是Testacular的新名字，在2012年google開源了Testacular，2013年Testacular改名為Karma。

Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具可用於測試所有主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是，它可以監控(Watch)文件的變化，然后自行執行，通 過console.log顯示測試結果。

Jasmine是單元測試框架，本單將介紹用Karma讓Jasmine測試自動化完成。Jasmine的介紹，請參考文章：jasmine行為驅動,測試先行

istanbul是一個單元測試代碼覆蓋率檢查工具，可以很直觀地告訴我們，單元測試對代碼的控制程度。

 

1 安裝NodeJS 以及Npm

2。全局安裝Karma  npm install -g  karma      karma安裝過程中會同時安裝 karma-jasmine 。karma-requirejs等模塊。測試是否安裝成功  只需要 在控制台 啟用

karma start  會出現

 在瀏覽器中輸入 http://localhost:9876

3 Karma + Jasmine配置

初始化karma配置文件karma.conf.js 進入要測試文件夾 在控制台中輸入karma init  一直按回車即可最終會生成一個karm-conf.js的配置文件

// Karma configuration
// Generated on Wed Oct 30 2013 16:15:24 GMT+0800 (中國標准時間)

module.exports = function(config) {
  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',
    // frameworks to use
    frameworks: ['jasmine'],
    // list of files / patterns to load in the browser
    files: [      
    ],
    // list of files to exclude
    exclude: [     
    ],
    // test results reporter to use
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['progress'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera (has to be installed with `npm install karma-opera-launcher`)
    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
    // - PhantomJS
    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
    browsers: ['Chrome'],
    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,
    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
  });
};

 4 自動化測試 ：三部准備工作  1、編寫要測試的js文件即 功能實現js 2編寫測試文件 由於我們這里使用的是jasmine 來測試，所以我們按照jasmine的語法來寫就行了關於jasmine 請參考上文的連接 3 修改karma.conf.js配置文件。

在D盤根目錄下新建一個文件夾 karmatest  新建一個js文件在並編寫功能 Caculate.js 

function add(a,b){
return a+b;
}

　　測試文件 test.js

describe("A suite of basic functions", function() {
    it("reverse word",function(){
        expect(add(1,2)).toEqual(3);
    });
});

　　修改 將karma配置文件 karm.conf.js放入karmatest文件夾下，並修改如下

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: ['*.js'],
        exclude: ['karma.conf.js'],
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        captureTimeout: 60000,
        singleRun: false,
       
    });
};

開始運行 karma進行測試 在控制台中進入 cd karma 。運行 karma start karma.conf.js  即可開啟測試。並且會自動啟動 瀏覽器，上面配置為chrome瀏覽器。

如果測試通過 控制台顯示如下

如果修改 測試的代碼 將3改為4 控制台立刻給出錯誤的提示，看得出來

describe("A suite of basic functions", function() {
    it("reverse word",function(){
        expect(add(1,2)).toEqual(4);
    });
});

　　由於karma.conf.js配置文件中autoWatch: true, 所以test.js文件保存后，會自動執行單元測試。提示我們單元測試出錯了。

 

 

karma在啟動時 chrome 瀏覽器可能無法自動啟動，這時候需要增加一個環境變量CHROME_BIN  值為chome.exe的目錄。如

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe 

官方解答如下 

Chrome won't start. (Issues: #202, #74) Set CHROME_BIN like this > export CHROME_BIN='C:\Program Files (x86)\Google\Chrome\Application\chrome.exe' Increase the timeout from 5000ms to 10000ms. At 5000ms, timeouts occurred and the retry logic kicks in and eventually resolves after two to three tries.