单元测试（二）

前言

上次谈了用 chai 和 chai-spies 来进行单元测试，可是这种测试方法存在着一些不方便之处，每次改动代码以后都须要刷新浏览器，打开开发者工具，来查看有没有报错。

那么，有没有一种方法，使这些流程自动化，自动将测试的结果输出到某个可见的地方（例如：终端）？此次就来尝试完成这个过程。

用到的工具

此次咱们须要用到：

• Karma：卡玛是一个测试运行器，它能够呼起浏览器，加载测试脚本，而后运行测试用例。
• Mocha：摩卡是一个单元测试框架/库，它能够用来写测试用例。
• Sinon：西农是一个 spy / stub / mock 库，用以辅助测试。

安装

执行下面的命令安装工具。别一个一个地看包名了，全都安装就完事了。

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

配置 Karma

新建一个 karma.conf.js，并将下面的内容复制进去。

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: ['mocha', 'sinon-chai'],
    client: {
      chai: {
        includeStack: true
      }
    },

    // list of files / patterns to load in the browser
    files: ['dist/**/*.test.js', 'dist/**/*.test.css'],

    // list of files / patterns 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: 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: ['ChromeHeadless'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  });
};
复制代码

重写测试用例

新建一个 test 文件夹，并在里面创建一个 button.test.js 的文件，接下来将在这个文件里面重写测试用例。

const expect = chai.expect;
import Vue from 'vue';
import Button from '../src/button';

Vue.config.productionTip = false;
Vue.config.devtools = false;

describe('Button', () => {
  it('存在.', () => {
    expect(Button).to.be.ok;
  });

  it('能够接受 color 做为类名', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'red'
      }
    }).$mount(div);
    const element = vm.$el;
    //我断言这个生成的 button 有一个类名叫 'red' 为真
    expect(element.classList.contains('red')).to.eq(true);
    vm.$el.remove();
    vm.$destroy();
  });

  it('点击 button 触发 click 事件', () => {
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'red'
      }
    }).$mount();
    //间谍函数
    const callback = sinon.fake();
    vm.$on('click', callback);
    vm.$el.click();
    expect(callback).to.have.been.called;
  });
});
复制代码

和以前的测试用例相似，就稍微改变告终构。

建立测试脚本

为了方便启动，咱们将启动命令写到 package.json 里面。

"scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
 }
复制代码

谈谈两个命令中的两个参数的意义。

• --no-cache ： 这是在用 parcel 打包过程当中遇到的坑，若是不加这个参数，就会用到以前打包的缓存，有可能会出错。
• --no-minify ： 另外一个坑，不加这个参数，组件中的 <slot></slot> 标签打包时会被忽略掉，会形成页面错误。

使用

运行一次查看结果

若是只想看看测试用例的结果就运行下面的命令。 npm run test

从图中的运行结果能够看出，在输入这个命令以后，会进行组件打包、读取测试用例文件、开启服务器、启动浏览器、运行测试用例等等一系列操做，最后将运行结果输出。图中显示一共有3个测试，经过了3个，也就是测试用例所有经过。

监测测试结果

若是想随时地监测测试用例文件的运行结果就用这个命令。 npm run dec-test

它启动以后，会先输入当前测试用例的运行结果，而后进行监测，当测试用例文件发送变化时，它就会再一次的运行并输入结果。

咱们尝试将测试颜色做为类名的测试改一下。

it('能够接受 color 做为类名', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'black'
      }
    }).$mount(div);
    const element = vm.$el;
    //我断言这个生成的 button 有一个类名叫 'red' 为真
    expect(element.classList.contains('red')).to.eq(true);
    vm.$el.remove();
    vm.$destroy();
  });
复制代码

来看看终端有什么变化。

这里咱们看到又运行了一次测试用例，显示有一个测试失败了，也就是咱们刚刚改的那一个。

咱们能够利用这个功能，来协助咱们来写测试用例。

如何更自动化？

虽然咱们如今可以在本地开启监听服务，随时检查测试用例的经过状况，可是仍是要手动地开启服务。

那么，有没有一种办法，在云端自动进行测试呢？下次来说讲将代码上传至 Github 后，利用云服务自动测试代码，并将结果通知给咱们。