摘要：主要完成一下工作啟動(dòng)一個(gè)服務(wù)器，生成包含源代碼和測(cè)試腳本的頁(yè)面運(yùn)行瀏覽器加載頁(yè)面，并顯示測(cè)試的結(jié)果如果開啟檢測(cè)，則當(dāng)文件有修改時(shí)，執(zhí)行繼續(xù)執(zhí)行以上過(guò)程。如果我們引入了一些其它的庫(kù)，比如之類的，將源代碼和庫(kù)代碼打包在一起后，覆蓋率會(huì)更難看。。

在前端開發(fā)中，測(cè)試常常是被忽略的一環(huán)。因此最近在研究前端自動(dòng)化測(cè)試框架Karma，把個(gè)人的學(xué)習(xí)過(guò)程分享出來(lái)，希望對(duì)大家有幫助。

Karma是由Google團(tuán)隊(duì)開發(fā)的一套前端測(cè)試運(yùn)行框架。它不同于測(cè)試框架（例如jasmine，mocha等），運(yùn)行在這些測(cè)試框架之上。主要完成一下工作：

Karma啟動(dòng)一個(gè)web服務(wù)器，生成包含js源代碼和js測(cè)試腳本的頁(yè)面；

運(yùn)行瀏覽器加載頁(yè)面，并顯示測(cè)試的結(jié)果；

如果開啟檢測(cè)，則當(dāng)文件有修改時(shí)，執(zhí)行繼續(xù)執(zhí)行以上過(guò)程。

karma-example
    ├── src
         ├── index.js
    ├── test
    ├── package.json

index.js的內(nèi)容如下

function isNum(num) {
  if (typeof num === "number") {
    return true
  } else {
    return false
  }
}

為了方便搭建Karma環(huán)境，我們可以全局安裝karma-cli來(lái)幫我們初始化測(cè)試環(huán)境：

npm i -g karma-cli

然后在項(xiàng)目中安裝karma包

npm i --save-dev karma

接下來(lái)在工程目錄中運(yùn)行karma init來(lái)進(jìn)行測(cè)試環(huán)境初始化，并按照指示一步步完成。

上圖是選項(xiàng)的示例，這里使用jasmine測(cè)試框架，PhantomJS作為代碼運(yùn)行的環(huán)境（也可以選擇其他瀏覽器作為運(yùn)行環(huán)境，比如Chrome，IE等）。最后在項(xiàng)目中生成karma.conf.js文件。

至此就搭建好了基本的Karma運(yùn)行環(huán)境。

在test目錄里編寫一個(gè)簡(jiǎn)單的測(cè)試腳本，我們使用的是jasmine測(cè)試框架，具體的api可以參考jasmine api，內(nèi)容如下

describe("index.js: ", function() {
  it("isNum() should work fine.", function() {
    expect(isNum(1)).toBe(true)
    expect(isNum("1")).toBe(false)
  })
})

然后在項(xiàng)目根目錄下運(yùn)行karma start命令,我們可以看到運(yùn)行的結(jié)果如下

可以看到，運(yùn)行的結(jié)果顯示測(cè)試成功。

同時(shí)，因?yàn)槲覀冎霸O(shè)置了監(jiān)控文件的修改，所以當(dāng)我們修改源文件或者測(cè)試腳本的時(shí)候，Karma會(huì)自動(dòng)幫我們?cè)俅芜\(yùn)行，無(wú)需我們手動(dòng)操作。

如何衡量測(cè)試腳本的質(zhì)量呢？其中一個(gè)參考指標(biāo)就是代碼覆蓋率（coverage）。

什么是代碼覆蓋率？簡(jiǎn)而言之就是測(cè)試中運(yùn)行到的代碼占所有代碼的比率。其中又可以分為行數(shù)覆蓋率，分支覆蓋率等。具體的含義不再細(xì)說(shuō)，有興趣的可以自行查閱資料。

雖然并不是說(shuō)代碼覆蓋率越高，測(cè)試的腳本寫得越好（可以看看參考文獻(xiàn)4），但是代碼覆蓋率對(duì)撰寫測(cè)試腳本還是有一定的指導(dǎo)意義的。因此接下來(lái)我們?cè)贙arma環(huán)境中添加Coverage。

首先安裝好Karma覆蓋率工具

npm i --save-dev karma-coverage

然后修改配置文件karma.conf.js，

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine"],
    files: [
      "src/**/*.js",
      "test/**/*.js"
    ],
    exclude: [],

    // modified
    preprocessors: {
        "src/**/*.js": ["coverage"]
    },

    //modified
    reporters: ["progress", "coverage"],

    // add
    coverageReporter: {
      type : "html",
      dir : "coverage/"
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["PhantomJS"],
    singleRun: false,
    concurrency: Infinity
  })
}

再運(yùn)行karma start后，會(huì)在目錄下生成coverage目錄，里面有本次測(cè)試的覆蓋報(bào)告。打開后的結(jié)果如下

在實(shí)際項(xiàng)目中，有事會(huì)需要用到Webpack和ES6，所以接下來(lái)將Webpack和Babel集成進(jìn)Karma環(huán)境中。

安裝karma-webpack

npm i --save-dev karma-webpack

安裝babel

npm i --save-dev babel-loader babel-core babel-preset-es2015

然后文件進(jìn)行改造，src/index.js文件修改為

function isNum(num) {
  if (typeof num === "number") {
    return true
  } else {
    return false
  }
}

exports.isNum = isNum

text/index.js文件修改為

const Util = require("../src/index")

describe("index.js: ", () => {
  it("isNum() should work fine.", () => {
    expect(Util.isNum(1)).toBe(true)
    expect(Util.isNum("1")).toBe(false)
  })
})

接下來(lái)修改配置文件karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine"],
    files: [
      "test/**/*.js"
    ],
    exclude: [],
    preprocessors: {
      "test/**/*.js": ["webpack", "coverage"]
    },
    reporters: ["progress", "coverage"],
    coverageReporter: {
      type: "html",
      dir: "coverage/"
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["PhantomJS"],
    singleRun: false,
    concurrency: Infinity,
    webpack: {
      module: {
        loaders: [{
          test: /.js$/,
          loader: "babel",
          exclude: /node_modules/,
          query: {
            presets: ["es2015"]
          }
        }]
      }
    }
  })
}

注意這里的修改：

files只留下test文件。因?yàn)閣ebpack會(huì)自動(dòng)把需要的其它文件都打包進(jìn)來(lái)，所以只需要留下入口文件。

preprocessors也修改為test文件，并加入webpack域處理器

加入webpack配置選項(xiàng)?？梢宰约憾ㄖ婆渲庙?xiàng)，但是不需要entry和output。這里加上babel-loader來(lái)編譯ES6代碼

運(yùn)行karma start，成功了~

再看看Coverage，臥槽。。居然不是百分之百了。。。

原因很簡(jiǎn)單，webpack會(huì)加入一些代碼，影響了代碼的Coverage。如果我們引入了一些其它的庫(kù)，比如jquery之類的，將源代碼和庫(kù)代碼打包在一起后，覆蓋率會(huì)更難看。。這樣的Coverage就沒(méi)有了參考的價(jià)值。

還好有大神給我們提供了解決方案，需要安裝插件

npm i --save-dev babel-plugin-istanbul

修改webpack中babel-loader的配置

{
  test: /.js$/,
  loader: "babel",
  exclude: /node_modules/,
  query: {
    presets: ["es2015"],
    plugins: ["istanbul"]
  }
}

因?yàn)檫@里引入了istanbul插件來(lái)檢測(cè)Coverage，所以要把preprocessors里的coverage去掉。

搞定以后，運(yùn)行karma start。當(dāng)當(dāng)當(dāng)當(dāng)~一切OK啦，盡情編寫測(cè)試腳本把~

最后附上示例項(xiàng)目地址:karma-example

Karma

Karma using ES6

Jasmine API

測(cè)試覆蓋（率）到底有什么用？

Just Say No to More End-to-End Tests