搭建Karma+webpack测试环境，Travis CI持续集成

[jvsheng]

问题引出

1. 当项目的规模到达一个量级的时候，前端这边如果没有单元测试，保证主干业务逻辑的可用性，非常的危险。
   从最近的开发体验来讲，经常会出现改动某行代码的时候，改动到了以前的代码，导致相同的issue重复出现，就算是自己写的代码，时间长了，也容易出现这种问题。
   所以，开始探讨基于 karma + webpack 模式下的单元测试，尝试从0搭建一个可用的测试环境。

2. 经常逛 github 会发现，开源项目都会有一系列的图标，仔细研究下，发现还是很有意思的。
   

搭建测试环境

• Karma官方文档
• karma-webpack官方文档
• karma-coverage官方文档

• 新建 karma.config.js 配置文件
  不能直接全局安装 Karma ，会出现各种奇怪的问题，应该全局安装的是 karma-cli ！！！
  比如这种错误，karma preprocessor can not load webpack

const webpackConfig = require('../../build/webpack.test.conf');

module.exports = function(config) {
    config.set({
        // 浏览器
        browsers: ['PhantomJS'],
        // 测试框架、断岩库
        frameworks: ['mocha', 'sinon-chai'],
        // 打印测试结果、输出测试覆盖率
        reporters: ['spec', 'coverage'],
        // 正确的理解，应该是测试页面需要的资源，而不是网上说的测试文件的入口
        files: ['./index.js'],
        // 预处理
        preprocessors: {
            './index.js': ['webpack', 'sourcemap']
        },

        webpack: webpackConfig,
        // 不打印webpack打包信息
        webpackMiddleware: {
            noInfo: true
        },

        coverageReporter: {
            dir: './coverage',
            reporters: [
                { type: 'lcov', subdir: '.' },
                { type: 'text-summary' }
            ]
        }
    })
};

主要需要关注的在于代码覆盖率，karma-coverage插件可以实现，但是根据官方文档，我们需要在reporters 和 preprocessors 两处都需要加上 coverage. 如果不在预处理中加上，测试覆盖率一直是空的。生成的 lcov.info 文件为空时，上传到 callovers.io 也不会进行处理。

• 集成 webpack
  index.js

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/);
testsContext.keys().forEach(testsContext);

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /\.js/);
srcContext.keys().forEach(srcContext);

这一段，应该是出自于 vue-template，第二段的作用在于，如果你编写了某个组件，但是没有编写组件的测试用例时。不加入源文件，测试的覆盖率是不准确的。

webpack.test.conf.js

const path = require('path');

module.exports={
    module:{
        loaders:[{
            test:/\.js$/,
            loader:'babel-loader',
            query:{
                presets:['es2015']
            },
            exclude:[
                path.resolve( __dirname, '../node_modules' )
            ]
        }, {
            test: /\.js$/,
            use: {
                loader: 'istanbul-instrumenter-loader',
                options: { esModules: true }
            },
            enforce: 'post',
            exclude: /node_modules|\.spec\.js$/,
        }]
    }
};

第一点，使用babel编译，module.export 对于测试文件来说是不可读的。

第二点，使用 istanbul-instrumenter-loader 预处理，对源文件资源添加覆盖率打点，因为如果根据 babel编译后的内容来打点，测试覆盖率会非常的低。

所以，我们可以看出为什么现在不用在 karma.conf.js 中增加 coverage 预处理了。因为和 istanbul-instrumenter-loader 作用相同，都是为源文件代码添加覆盖率打点，用于测试覆盖率的统计。

集成 Travis CI

第一个 badge, buid passing 就是通过 trvais生成的，具体的用法可以看网上的教程。https://iyaozhen.com/github-travis-ci-and-codecov.html

在公司，自己搭的服务器上喜欢用 jenkins ，都大同小异，这里通过学习 element-ui 的源码，主要关注最后一句。

sudo: false
language: node_js
node_js: stable
before_install:

after_success:
- cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls

当 push 了内容后，会触发 travis ，travis 在集成完成后，会自动执行 npm test 命令。通过coveralls插件，将生成的测试覆盖率信息，推送到 coveralls.io 网站，以生成 badge。

参考

• 聊一聊前端自动化测试
• webpack+ES6的单元测试覆盖率统计