#学习分享#开发基础知识之前端测试（一）

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')           // 引入webpack配置

module.exports = function karmaConfig (config) {                       // 设置karma配置
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    // 设置默认打开的浏览器
    browsers: ['PhantomJS'],
    // 测试框架
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    // 设置测试覆盖率输出插件
    reporters: ['spec', 'coverage'],
    // 测试文件入口
    files: ['./index.js'],
    // 预处理器--用webpack解析，同时显示测试文件路径
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    // 引入webpack
    webpack: webpackConfig,
    // 是否打印[webpack]打包信息
    webpackMiddleware: {
      noInfo: true
    },
    //karma-coverage配置，配置测试覆盖率的输出目录及格式

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

import Vue from 'vue'

Vue.config.productionTip = false

// require all test files (files that ends with .spec.js)
// 加载所有的测试脚本
const testsContext = require.context('./spec', 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.
// 加载所有的资源文件，及src目录下的除了main.js文件的所有文件，即要覆盖所有的代码
const srcContext = require.context('../../src', true, /^./(?!main(.js)?$)/)
srcContext.keys().forEach(srcContext)

describe('hooks', function() {

  before(function() {
    // 在本区块的所有测试用例之前执行
  });

  after(function() {
    // 在本区块的所有测试用例之后执行
  });

  beforeEach(function() {
    // 在本区块的每个测试用例之前执行
  });

  afterEach(function() {
    // 在本区块的每个测试用例之后执行
  });

  // test cases
});

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>　　

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'

// 一个 describe 代表一个测试套件，可以有多个 it块
describe('HelloWorld.vue', () => {
  // 一个it块代表一个 测试case
  it('should render correct contents', () => {
    // 获取组件实例
    const Constructor = Vue.extend(HelloWorld)
    // 将实例挂载到 DOM 上
    const vm = new Constructor().$mount()
    // 断言实际结果与预期结果一致 ———— 断言“hello”class内的 “h1” 标签文本内容等于‘Welcome to Your Vue.js App’
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})