vue组件测试用例实践一(搭建vue测试框架)

思考组件测试的意义

非组件不好测的原因

前端自动化测试一直是被忽略的，当然很大部分原因可能是因为人手不足，但是当我们从技术的角度来看，更主要的是因为前端测试用例的复杂性。首先从样式上来说，首先是变化可能很频繁，而且样式测试本身意义就不是很大。其次，在传统的jquery框架中，其大部分方法是需要依赖上下文的，而且这样的方法可能有很多，每个页面都要单独的测试实在是费时费力，付出和收获实在不成正比。

组件测试的必要

在当前最火的两个前端框架中（vue&react）其最突出的且最优秀的特性当属组件化了，通过组件化做到代码分离，不至于每个页面都包含了冗长的js，使重构和debug都变得很容易。通过组件的重用减少代码量，大幅度的提升了开发效率。
那么，问题来了，当我们写了一个公用组件的时候，可能会有很多个父组件都用到了这个组件，当我们因为某一个新需求或者重构的时候需要更改这组件的时候，如何保证所有用到这个组建的地方都不会出问题呢？作为一个懒懒的程序猿我是拒绝去one by one查看每一个页面的。而且这样很容易就忽略了某些细节的地方，实在是不靠谱。
通过对公用组件的所有特性进行测试用了覆盖，只要测试用例写的足够合理且健壮，完全不必担心上面的问题。

搭建vue组件测试框架

概述

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

需要安装的包

1. karma //test runner，提供测试所需的浏览器环境、监测代码改变自动重测、整合持续集成等功能
2. phantomjs-prebuilt //phantomjs，在终端运行的浏览器虚拟机
3. mocha //test framework，测试框架，运行测试
4. chai //assertion framework, 断言库，提供多种断言，与测试框架配合使用
5. sinon //测试辅助工具，提供 spy、stub、mock 三种测试手段，帮助捏造特定场景
6. karma-webpack //karma 中的 webpack 插件
7. karma-mocha //karma 中的 mocha 插件
8. karma-sinon-chai //karma 中的 sinon-chai 插件
9. sinon-chai //karma 中的 chai 插件
10. karma-sourcemap-loader //karma 中的 sourcemap 插件
11. karma-phantomjs-launcher //karma 中的 phantomjs 插件
12. karma-spec-reporter //在终端输出测试结果
13. babel-plugin-istanbul //babel插件，es6代码产生instanbul覆盖率
14. karma-coverage //Karma插件，生成代码覆盖率

开始

目录结构

• vue-unit-test
  
  • src
    
    • components
      
      • Button.vue
    • util.js
    • main.js
  • test
    
    • unit
      -util.spec.js
      
      • Button.spec.js
      • index.js
  • .babelrc
  • karma.conf.js
  • package.json

其中test目录用来存放所有的测试相关代码，src作为待测试的目录包括js文件和vue组件。

配置karma.conf.js文件

karma.conf.js作为测试的入口文件可以说是整个测试框架的核心部分，我们主要要讲的也是关于这个文件的配置。
首先在package.json文件中写入执行脚本

 "scripts": {

    "test": "BABEL_ENV=browse karma start karma.conf.js" // 指定karam运行的文件，其中"BABEL_ENV=browse"指定babel的env，在env===browse的情况下我们才会用bable加载istanbul插件，
  }

karma.conf.js文件详解

在当前目录下执行karma init命令，之后选择mocha，no require.js, 选择浏览器PhantomJS,默认目录”test/**/*Spec.js”。随后会在当前目录下生成一个原始的karma.conf.js文件，我们会在这个文件的基础上进行配置。
当然我们也可以不用karma init命令，直接在当前目录下新建karma.conf.js文件进行配置也是可以的。

karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'sinon-chai'],
    // 测试入口文件
    files: ['./test/unit/index.js'],
    // 用webpack解析，同时显示测试文件路径
    preprocessors: {
        './test/unit/index.js': ['webpack', 'sourcemap'],
    },
    // 设置测试覆盖率输出插件
    reporters: ['spec', 'coverage'],
    // karma-coverage配置，配置测试覆盖率的输出目录及格式
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.'},
        { type: 'text-summary'},
      ]
    },
    colors: true,
    autoWatch: false,
     // 设置默认打开的浏览器
    browsers: ['PhantomJS'],
    //  设置运行完成是否自动退出
    singleRun: false,
    // 是否打印webpack打包信息
    webpackMiddleware: {
      noInfo: true
    },  
    // webpack 配置用来解析js文件和vue文件，如果有css请自行配置css-loader
    webpack: {
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.vue$/,
            loaders: [{
              loader: 'vue-loader',
            }]
          },
        ]
      },
    }
  })
}

test/unit/index.js

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

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

.babelrc文件

关于babel这里不做详细介绍，只是列出配置，具体用法请自行查阅babel文档

{
  "presets": [
    ["env", {
      "useBuiltIns": true,
      "targets": {
        "browsers": ["last 3 versions"]
      }
    }]
  ],
  "env": {
    "browse": {
      "plugins": ["istanbul"] // 必须，否则不会产生覆盖率
    }
  }
}

编写并运行测试

我们可以在src/util.js中加一个测试方法跑一下

export function util1 (name) {
  if (name) {
    return name
  }
  return 'hello'
}

在test/unit/utils.spec.js中写出测试用例

import { util1 } from '../../src/util'

describe('utils.js', () => {
    it('should return name', () => {
      const name = util1('teapot')
      expect(name).to.equal('teapot')
    })
})

运行

npm test

在终端可打印出测试覆盖率

打开生成coverage目录的index.html查看测试覆盖率

编写组件测试用例

组件

<template>
  <button>{{text}}</button>
</template>
<script>
  export default {
    data() {
      return {
        text: 'Hello Spec'
      }
    },
    created () {
      this.text = 'Bye Spec'
    }
  }
</script>

测试用例

import Vue from 'vue'
import SelfButton from '../../src/components/SelfButton.vue'

describe('SelfButton', () => {
  it('has a created hook', () => {
    expect(typeof SelfButton.created).to.equal('function')
  })

  it('sets the correct default data', () => {
    const defaultData = SelfButton.data()
    expect(defaultData.text).to.equal('Hello Spec')
  })

  it('sets new text when created', () => {
    const vm = new Vue(SelfButton).$mount()
    expect(vm.text).to.equal('Bye Spec')
  })

  it('renders the correct text', () => {
    const Ctor = Vue.extend(SelfButton)
    const vm = new Ctor().$mount()
    expect(vm.$el.textContent).to.equal('Bye Spec')
  })
})

关于vue组件的测试用例请参考官方文档
vue unit testing
不过文档中关于测试用例的写法其实也很有限，这里我们下次再进行探讨。

项目源码地址：https://github.com/teapot-py/vue-unit-test