JavaScript測(cè)試工具之Karma-Jasmine的安裝和使用詳解

更新時(shí)間：2015年12月03日 10:17:04 作者：賴祥燃

Jasmine是一個(gè)Javascript的測(cè)試工具，在Karma上運(yùn)行Jasmine可完成Javascript的自動(dòng)化測(cè)試、生成覆蓋率報(bào)告等。本文不包含Jasmine的使用細(xì)節(jié)，這幾天我會(huì)寫(xiě)一篇Jasmine的入門(mén)文章，有興趣的朋友到時(shí)候可以看一下

1.Karma介紹

Karma是Testacular的新名字，在2012年google開(kāi)源了Testacular，2013年Testacular改名為Karma。Karma是一個(gè)讓人感到非常神秘的名字，表示佛教中的緣分，因果報(bào)應(yīng)，比Cassandra這種名字更讓人猜不透！

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

2.Jasmine介紹

Jasmine （茉莉）是一款 JavaScript BDD（行為驅(qū)動(dòng)開(kāi)發(fā)）測(cè)試框架，它不依賴于其他任何 JavaScript 組件。它有干凈清晰的語(yǔ)法，讓您可以很簡(jiǎn)單的寫(xiě)出測(cè)試代碼。對(duì)基于 JavaScript 的開(kāi)發(fā)來(lái)說(shuō)，它是一款不錯(cuò)的測(cè)試框架選擇。

比較流行的有Qunit和Jasmine,如果你想更詳細(xì)了解二者的區(qū)別，請(qǐng)狠狠的點(diǎn)擊Javascript單元測(cè)試框架Qunit和Jasmine的比較。

腳本之家友情提醒大家需要注意點(diǎn)：本文中出現(xiàn)的資料鏈接、karma的插件安裝等，均可能需要翻$墻后才能正確執(zhí)行。

步驟一：安裝Node.JS（版本：v0.12.4, windows-64）

Karma是運(yùn)行在Node.js之上的，因此我們首先要安裝Node.js。到 https://nodejs.org/download/ 下載你系統(tǒng)所需的NodeJS版本，我下載的是windows-64位的msi版。

下載之后，雙擊 node-v0.12.4-x64.msi 運(yùn)行并安裝，這個(gè)就不贅述了，不斷下一步即可，當(dāng)然最好將目錄改一下。

圖1（選擇安裝內(nèi)容，默認(rèn)即可）：

步驟二：安裝Karma

運(yùn)行Node.js的命令行程序：Node.js command prompt：

圖2（處于“開(kāi)始->所有程序->Node.js”中）：

圖3（我們將安裝到E:\Karma路徑下）：

輸入命令安裝Karma：

復(fù)制代碼代碼如下:

npm install karma --save-dev

圖4（Karma安裝完畢后）：

步驟三：安裝karma-jasmine/karma-chrome-launcher插件

繼續(xù)輸入npm命令安裝karma-jasmine、karma-chrome-launcher插件：

復(fù)制代碼代碼如下:

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

圖5（karma-jasmine、karma-chrome-launcher安裝完畢之后）：

步驟四：安裝karma-cli

karma-cli用來(lái)簡(jiǎn)化karma的調(diào)用，安裝命令如下，其中-g表示全局參數(shù)，這樣今后可以非常方便的使用karma了：

復(fù)制代碼代碼如下:

npm install -g karma-cli

圖6（karma-cli安裝完畢之后）：

Karma-Jasmine安裝完畢：

圖7（安裝完畢后，在E:\Karma文件夾下會(huì)有一個(gè)node_modules目錄，里面包含剛才安裝的karma、karma-jasmine、karma-chrome-launcher目錄，當(dāng)然還包含了jasmine-core目錄）：

開(kāi)啟Karma：

輸入命令：

復(fù)制代碼代碼如下:

karma start

圖8（運(yùn)行后如圖所示出現(xiàn)了一行INFO信息，并沒(méi)有其他提示和動(dòng)作，因?yàn)榇藭r(shí)我們沒(méi)有配置karma的啟動(dòng)參數(shù)。后面會(huì)加入karma.conf.js，這樣karma就會(huì)自動(dòng)啟動(dòng)瀏覽器并執(zhí)行測(cè)試用例了）：

圖9（手動(dòng)打開(kāi)Chrome，輸入localhost:9876，如果看到這個(gè)頁(yè)面，證明已經(jīng)安裝成功）：

Karma+Jasmine配置：

執(zhí)行命令init命令進(jìn)行配置：

karma init

圖10（所有默認(rèn)配置問(wèn)題）：

說(shuō)明：

1. 測(cè)試框架：我們當(dāng)然選jasmine

2. 是否添加Require.js插件

3. 選擇瀏覽器：我們選Chrome

4. 測(cè)試文件路徑設(shè)置，文件可以使用通配符匹配，比如*.js匹配指定目錄下所有的js文件（實(shí)際操作中發(fā)現(xiàn)該路徑是karma.conf.js文件的相對(duì)路徑，詳見(jiàn)下面我給出的實(shí)際測(cè)試配置及說(shuō)明）

5. 在測(cè)試文件路徑下，需要排除的文件

6. 是否允許Karma監(jiān)測(cè)文件，yes表示當(dāng)測(cè)試路徑下的文件變化時(shí)，Karma會(huì)自動(dòng)測(cè)試

我在虛擬機(jī)上測(cè)試的例子：

圖11（TestFiles和NodeJS處于E盤(pán)根目錄下，karma.conf.js處于文件夾NodeJS的根目錄下）：

以下是karma.conf.js的完整內(nèi)容：

// Karma configuration
 // Generated on Fri May :: GMT+ (中國(guó)標(biāo)準(zhǔn)時(shí)間)
 module.exports = function(config) {
 config.set({
  // base path that will be used to resolve all patterns (eg. files, exclude)
  basePath: '../TestFiles',
  // frameworks to use
  // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  frameworks: ['jasmine'],
  // list of files / patterns to load in the browser
  files: [
  '*.js'
  ],
  // list of files to exclude
  exclude: [
  ],
  // preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
  },
  // test results reporter to use
  // possible values: 'dots', 'progress'
  // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  reporters: ['progress'],
  // web server port
  port: ,
  // 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
  // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  browsers: ['Chrome'],
  // Continuous Integration mode
  // if true, Karma captures browsers, runs the tests and exits
  singleRun: false
 });
 };

說(shuō)明：

若所有測(cè)試文件均處于同一個(gè)目錄下，我們可以設(shè)置basePath（也是相對(duì)于karma.conf.js文件的相對(duì)路徑），然后指定files，此時(shí)files則為basePath目錄下的文件相對(duì)路徑；

當(dāng)然你也可以不設(shè)置basePath，直接使用相對(duì)于karma.conf.js文件的文件相對(duì)路徑，如本例中，我們?nèi)舯３謆asePath默認(rèn)為空，則files配置應(yīng)為：

files: [
  '../TestFiles/jasmineTest.js',
  '../TestFiles/test.js'
 ] 
 
test.js內(nèi)容：
 
function TT() {
 return "abc";
} 
 
jasmineTest.js內(nèi)容：
 
describe("A suite of basic functions", function () {
 it("test", function () {
  expect("abc").toEqual(TT());
 });
});

啟動(dòng)Karma：

karma start karma.conf.js

由于這次加上了配置文件karma.conf.js，因此Karma會(huì)按照配置文件中指定的參數(shù)執(zhí)行操作了，由于我們配置的是在Chrome中測(cè)試，因此Karma會(huì)自動(dòng)啟動(dòng)Chrome實(shí)例，并運(yùn)行測(cè)試用例：

圖12（左側(cè)的Chrome是Karma自動(dòng)啟動(dòng)的，右側(cè)的Node.js command prompt窗口中，最后一行顯示了執(zhí)行結(jié)果）：

圖13（如果我們點(diǎn)擊圖12中的debug按鈕，進(jìn)入debug.html并按F12打開(kāi)開(kāi)發(fā)者工具，選擇Console窗口，我們將能看到j(luò)asmine的執(zhí)行日志）：

若此時(shí)，我們將jasmineTest.js中對(duì)于調(diào)用TT方法的期望值改為"abcd"（實(shí)際為"abc"）：

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

由于我們?cè)趉arma.conf.js中設(shè)置了autoWatch為true：

autoWatch: true

Karma將自動(dòng)執(zhí)行測(cè)試用例，由于本例測(cè)試用例未通過(guò)，因此在屏幕上打印出了錯(cuò)誤信息，Chrome的Console窗口中的日志信息需要刷新debug.html后顯示。

圖14（Karma自動(dòng)檢測(cè)到文件變化并自動(dòng)重新執(zhí)行了測(cè)試用例）：

代碼覆蓋率：

如果你還想查看測(cè)試的代碼覆蓋率，我們可以安裝karma-coverage插件，安裝命令為：

復(fù)制代碼代碼如下:

npm install karma-coverage

圖15（安裝karma-coverage的過(guò)程）：

修改karma.conf.js，增加覆蓋率的配置：

圖16（主要是變動(dòng)了以下三個(gè)配置節(jié)點(diǎn)，其他的配置內(nèi)容不變）：

 // preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
   '../TestFiles/test.js':'coverage'
  },
  // test results reporter to use
  // possible values: 'dots', 'progress'
  // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  reporters: ['progress','coverage'],
  coverageReporter:{
   type:'html',
   dir:'../TestFiles/coverage/'
  },

變動(dòng)如下：

在reporters中增加coverage
preprocessors中指定js文件

添加coverageReporter節(jié)點(diǎn)，將覆蓋率報(bào)告類型type設(shè)置為html，輸入目錄dir指定到你希望的目錄中

此時(shí)完整的karma.conf.js如下：

// Karma configuration
// Generated on Fri May 29 2015 19:30:26 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
module.exports = function(config) {
 config.set({
 // base path that will be used to resolve all patterns (eg. files, exclude)
 basePath: '',
 // frameworks to use
 // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 frameworks: ['jasmine'],
 // list of files / patterns to load in the browser
 files: [
  '../TestFiles/jasmineTest.js',
  '../TestFiles/test.js'
 ],
 // list of files to exclude
 exclude: [
 ],
 // preprocess matching files before serving them to the browser
 // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 preprocessors: {
  '../TestFiles/test.js':'coverage'
 },
 // test results reporter to use
 // possible values: 'dots', 'progress'
 // available reporters: https://npmjs.org/browse/keyword/karma-reporter
 reporters: ['progress','coverage'],
 coverageReporter:{
  type:'html',
  dir:'../TestFiles/coverage/'
 },
 // 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
 // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
 browsers: ['Chrome'],
 // Continuous Integration mode
 // if true, Karma captures browsers, runs the tests and exits
 singleRun: false
 });
};

執(zhí)行命令：

復(fù)制代碼代碼如下:

karma start karma.conf.js

圖17（執(zhí)行命令后，在配置文件coverageReporter節(jié)點(diǎn)中指定的dir中，我們將找到生成的覆蓋率報(bào)告，karma-coverage還生成了一層子文件夾，對(duì)應(yīng)于執(zhí)行測(cè)試的瀏覽器+版本號(hào)+操作系統(tǒng)版本）：