vue组件测试用例实践

[jackieli123723]

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

思考组件[测试](javascript:; "")的意义

非组件不好测的原因

　　前端自动化测试一直是被忽略的，当然很大部分原因可能是因为人手不足，但是当我们从技术的角度来看，更主要的是因为前端测试用例的复杂性。首先从样式上来说，首先是变化可能很频繁，而且样式测试本身意义就不是很大。其次，在传统的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