現代JS代碼測試流程

有質量的代碼是要有代碼測試來保證的，本文就大體談談如今咱們是如何實現使用es6甚至es7（async/await）標準的JS代碼的高效測試的。

咱們會用到如下工具

• webpack 前端打包工具

• mocha 測試框架

• babel 編譯es6/7代碼

• karma 命令行下執行瀏覽器測試

• istanbul 代碼覆蓋率工具

• coveralls 代碼覆蓋統計服務商

• travis-ci 自動集成

---

安裝mocha

npm i -D mocha

代碼沒有後端依賴可直接測試：

mocha test.js

使用瀏覽器/node不支持的es6須要babel來編譯代碼

npm i babel -D

啓用es6，這種方式新版本的babel會自動啓動async/await

mocha --compilers js:babel/register test.js

若是用到了前端的代碼，就須要webpack這樣的工具

npm i webpack mocha-loader -D
webpack 'mocha!./test.js' testBundle.js
//index.html 包含 testBUndle.js
open index.html

須要babel和webpack一塊兒使用的話，先裝loader

npm i babel-loader -D

命令行的 babel-loader 只會編譯當前的文件，如需編譯其它文件須要在 require 處添加才能編譯成功，若是須要啓用 async/await 還須要加入 runtime 選項，例如：
require('babel?optional[]=runtime!./index.js')

若是每次require都去加就顯得太繁瑣了，因此建議使用 webpack.config.js 添加

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?optional[]=runtime'
      }
    ]
  }
}

到 webpack.config.js, 如今能夠在命令行和require上省去babel了。

這種方式每次修改都要手動去編譯再刷新瀏覽器，比較繁瑣，因此推薦使用webpack-dev-server實時調試。

npm i webpack-dev-server -D
webpack-dev-server 'mocha!./test.js' --hot --inline --output-filename test.js
open http://localhost:8080/test

每次代碼修改頁面都會自動刷新，更強大的是它只會執行你修改了代碼的測試用例 (簡直神器)。

---

如今能夠用瀏覽器測試咱們的es6代碼了，下一步是在命令行也能測試瀏覽器跑的代碼，這裏咱們用 karma 以啓用 firefox 爲例，安裝依賴：

npm i -D karma karma-cli karma-firefox-launcher karma-mocha karma-webpack

而後在 karma.conf.js 文件中加入:

// Karma configuration
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [ 'test/test.js' ],
    exclude: [ ],
    preprocessors: {
      'test/test.js': ['webpack']
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Firefox'],

    webpack: {
      module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader?optional[]=runtime'
          }
        ]
      }
    },
    webpackMiddleware: {
      noInfo: true
    },
    singleRun: true
  })
}

執行

./node_modules/.bin/karma start

開始測試

---

光有測試還不足以讓你信服你的代碼，咱們還須要測試覆蓋，這裏以使用 istanbul 爲例：

npm i -D istanbul babel-istanbul-instrumenter-loader karma-coverage

修改 karma.conf.js

...
reporters: ['progress', 'coverage']
...
webpack: {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?optional[]=runtime'
      }
    ],
    preLoaders: [
      // instrument only testing sources with Istanbul
      {
        test: /\.js$/,
        include: path.resolve('lib/'),
        loader: 'babel-istanbul-instrumenter'
      }
    ]
  }
}
....
coverageReporter: {
  dir: 'coverage/',
  reporters: [
      {type: text}
    { type: 'html', subdir: 'html' },
    { type: 'lcovonly', subdir: 'lcov' },
    { type: 'cobertura', subdir: 'cobertura' }
  ]
}

這裏生成了3中報告，html是給人看的（瀏覽器打開 coverage/html/index.html 能夠直接查看），另外兩種便於其它的工具分析。

以上工具的用法搭配多樣，這裏只是粗淺介紹，真正使用請認真閱讀相關文檔。

---

最後是如何持續集成，ravis-ci 和 coveralls.io 能夠很好的合做解決這個問題。

你須要先到 travis-ci 註冊，而後經過 github 受權，啓用相關的項目。在項目中添加 .travis.yml 配置文件

language: node_js
node_js:
  - '0.12'
before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

推送到 github 以後，每次提交 travis-ci 都會先執行 npm install 而後執行 npm test 中的命令進行測試 （還有其它自定義的設置，本文略過）

使用 coveralls.io 須要先安裝一個包來發送數據

npm i -D coveralls

而後也是註冊、受權、啓用相關項目，最後是作一個測試命令把測試報告發給它，以 Makefile 爲例：

test-coveralls:
    @echo TRAVIS_JOB_ID $(TRAVIS_JOB_ID)
    @node_modules/.bin/karma start --single-run && \
        cat ./coverage/lcov/lcov.info | ./node_modules/coveralls/bin/coveralls.js

修改package.json的測試命令

scripts: {
   test: make test-coveralls
}

這樣 travis-ci 每次執行完測試都會把 lcov.info 裏的測試結果經過 coveralls.js 發送給 coveralls.io 網站。

作爲示範，這是一個現實的組件項目 chemzqm/exgrid，還有一個樣板項目 chemzqm/es6-test-sample。

作爲一個有追求的開發者，向着100%的覆蓋率努力吧！