Vue单元测试

背景

从大的方面说前端应用本质上是一种特殊的GUI应用，GUI软件测试传送门。它的测试用例、覆盖率统计、测试方法等等都与API测试有着很大的不同。因此，在这个大前提下，我们来看前端测试的特殊性。

对于前端来说，业务基础代码比较稳定，比如通用组件、通用的工具类和通用的业务组件等，可以针对这些建立复杂一些的API和GUI测试用例来保证质量。剩下的部分不是很稳定，每天都在迭代，针对他们维护case的成本非常高。业界通用的方法其实就是我们看到的一般测试人员的点点。

我们如何保证基础代码的稳定及可靠呢？这就是我们要讨论的单元测试以及测试的覆盖率

单元测试

单元测试框架选择mocha,断言库选择chai，关于mocha和chai的介绍以及如何安装我就不科普啦！我们介绍下他俩的用法。

基本测试用例的编写

mocha的用法

describe('一组测试的描述', function() {
  before(function() {
    // 所有的测试用例执行前的钩子函数
  });

  after(function() {
    // 所有的测试用例执行后的钩子函数
  });

  beforeEach(function() {
    // 所有的测试用例执行前每次都会执行的钩子函数
  });

  afterEach(function() {
    // 所有的测试用例执行后每次都会执行的钩子函数
  });
  it('具体的测试用例',function () {

  })
}

chai的用法

var expect = require('chai').expect;
// 相等或不相等
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: 'baz' });

// 布尔值为true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;

// match
expect('foobar').to.match(/^foo/);

下面我们通过简单的一个加法函数来举例说明

// 假设文件名为add.js
function add (a,b) {
   return a + b 
}

// 测试文件
const add = require('../src/add.js')
const expect = require('chai').expect
describe('add', function() {
  it('返回结果是数字', () => {
    expect(add(2,3)).to.be.a('number');
  })
  it('4+4返回结果是8', () => {
    expect(add(4,4)).to.equal(8)
  })
});

异步测试编写

其实异步是我们日常比较常见的场景，如果要测试异步函数，我们要传入的函数需要带一个参数，通常命名为done，测试异步函数需要在函数内部手动调用done()表示测试成功，done(err)表示测试出错。

it('异步测试', function (done) {
  fs.readFile('path', function (err, data) {
    if (err) {
      done(err);
    } else {
      done();
    }
  });
});
// promise
it('promise的测试', function(done) {
  return new Promise(function(resolve) {
    assert.ok(true);
    resolve();
  }).then(done);
});
// async await
it('async await', async function() {
  const users = await db.find({type: 'User'});
  users.should.have.length(3);
});

接口测试

SuperTest 是 SuperAgent 的一个扩展，一个轻量级的 HTTP AJAX 请求库。SuperTest 提供了用于测试 node.js API 终端响应的高阶抽象，使得断言便于理解。

describe('用户信息接口测试', function() {   
  it('/device api test',function(done) {
    request(app)
      .post('api/v2/user/create')
      .set('Content-Type','application/json')
      .set('Authorization', 'Bearer ' + accessToken)
      .send({
        user: username,
        password: password
      })
      .expect(200) //断言希望得到返回http状态码
      .end(function(err, res) {
        console.info(res.body); //得到返回我们可以用2.2中的断言对返回结果进行判断。
        done();
      });
  });
});

vue中测试用例的编写

我们就以一个button组件为例来说明吧。

const expect = require('chai').expect
import Vue from 'vue'
import Button from '../src/button'
describe('Button', () => {
  it('确定按钮存在', () => {
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        type: 'primary'
      }
    }).$mount()
    let buttonElm = vm.$el
    expect(buttonElm.classList.contains('el-button-primary')).to.be.true;
    vm.$destory()
  })

  it('可以设置icon', () => {
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        icon: 'settings'
      }
    }).$mount()
    let buttonElm = vm.$el
    expect(buttonElm.querySelector('.el-icon-settings')).to.be.ok;
      vm.$destory()
    })

  it('可以设置loading.', () => {
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        icon: 'settings',
        loading: true
      }
    }).$mount()
    let buttonElm = vm.$el
    expect(buttonElm.querySelector('.el-icon.loading')).to.be.ok
    vm.$destroy()
  })

  it('点击 button 触发 click 事件', () => {
    let result;
    vm = new Vue({
      template: `<el-button @click="handleClick"></el-button`,
      methods: {
        handleClick (evt) {
          result = evt;
        }
      }
    }).$mount()
    vm.$el.click()
    setTimeout(() => {
      expect(result).to.exist
      done()
    }, 20)
  })
})

测试环境的搭建

前面聊了如何做单元测试，以及介绍了如何写测试用例，如何根据我们的前端项目搭建一套测试框架呢？我们列出所要用到的技术。

karma 该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。
mocha 前端测试框架，支持node和浏览器端，断言库自由化，注意mocha只提供了测试套件，具体的断言工具还需要在挑选，这里我们选用chai
chai 断言库，提供了should，expect，assert多种断言。
istanbul javascript代码覆盖率工具，用来导出代码覆盖率数据。

需要安装的包名如下：

karma：提供测试所需的浏览器环境、监测代码改变自动重测、整合持续集成等功能
mocha：测试框架，运行测试
chai：断言库，提供多种断言，与测试框架配合使用
sinon：测试辅助工具，提供 spy、stub、mock 三种测试手段，帮助捏造特定场景
karma-webpack：karma 中的 webpack 插件
karma-mocha：karma 中的 mocha 插件
karma-sinon-chai：karma 中的 sinon-chai 插件
sinon-chai：karma 中的 chai 插件
karma-sourcemap-loader：karma 中的 sourcemap 插件
karma-chrome-launcher：karma 中的模拟chrom插件
karma-spec-reporter：在终端输出测试结果
babel-plugin-istanbul：babel插件，es6代码产生instanbul覆盖率
karma-coverage：Karma插件，生成代码覆盖率

目录结构

vue-template-test
  src
    components
      Button.vue
    utils
      utils.js
    test
      unit
        specs
          button.spec.js
        index.js
        karma.conf.js
  .babelrc
  package.json 在package.json配置测试运行的环境

"scripts": {
  "BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
}

karma.conf.js配置详解

module.exports = function(config) {
  const configuration = {
    // 设置默认打开的浏览器
    browsers: ['ChromeHeadless'],
    // 选择测试套件库和断言
    frameworks: ['mocha', 'sinon-chai'],
    // 设置测试覆盖率输出插件
    reporters: ['spec', 'coverage'],
    // 测试入口文件
    files: ['./index.js'],
    // 用webpack解析，同时显示测试文件路径
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: {
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.vue$/,
            loaders: [{
              loader: 'vue-loader',
            }]
          },
        ]
      },
      // 是否打印webpack打包信息
      webpackMiddleware: {
        noInfo: true
      },
      // karma-coverage配置，配置测试覆盖率的输出目录及格式
      coverageReporter: {
        dir: './coverage',
        reporters: [
          { type: 'lcov', subdir: '.' },
          { type: 'text-summary' }
        ]
      },
      client: {
        mocha: {
          timeout: 4000
        }
      }
    }
  };
  config.set(configuration);
};

入口文件index.js的配置

// load 所有的测试用例文件
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// load 所有的资源文件，及src目录下的除了main.js文件的所有文件, 即要覆盖的所有代码
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)