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

前言：本文用于2018/1/30晚内部分享。

主题：前端单元测试

 

正文：

1、思考

个人目标是，如何浅入本次的主题，让愿意接收陌生信号的“对象”快速简单的get到信号，而且对本次分享产生一个小兴趣。

2、What

    本章节主要讲述前端单元测试作什么，vue单元测试作什么。

  （1） 基础概念

• 测试的概念：测试是检测你的应用代码（也叫“生产代码”）是否按预期执行的过程。测试能够手动测试，也可用自动测试（用编写好的代码代替人工作检测的工做），本文主要围绕后者展开。
• 测试的分类：测试按照不一样标准分类不少，不属于同一次元不能做比较。前端测试根据测试范围分类主要分为单元测试和端到端测试（E2E测试）。

  （2） 前端单元测试（Unit Test）

•  前端单元测试：是以单元为单位进行的测试。
•  单元：能够是一个函数、一个模块、一个包或者一个类，甚至是一个对象，在不一样编程语言中定义不同。
•  为何须要单元测试：使代码健壮，质量高（减小 QA 测试报告的反馈），兼容各类临界点，保证代码的整洁清晰。通俗的说，就是下降返工率，减小QA在开发者已投入其余开发工做时反馈bug从而打断当前的工做进度的现象。

 （3） vue单元测试

      vue单元测试也是单元测试，它的“单元”泛指vue组件，简单来讲就是以vue组件为单位进行的单元测试。

 

3、HOW

     本章节主要从理论层面讲述如何实现vue的单元测试。

 （1）测试框架：

     vue-cli 自带了测试框架：jest（Javascript单元测试工具）、karma and Mocha、e2e（nightwatch）等。单元测试框架选用karma+mocha+chai。

• Karma：一个测试运行器，用于启动浏览器，运行测试案例并将结果报告给咱们。该工具的主要做用是将项目运行在各类主流Web浏览器进行测试。
• Mocha：一个测试框架。可结合chai断言库使用。
• Chai：一个测试断言库，提供了更好的断言语法。所谓断言，就是对组件作一些操做，并预言产生的结果。若是测试结果与断言相同则测试经过。

 （2） 运行过程 

  karma的配置文件中，能够配置files参数，即引入测试脚本，测试运行时会扫描到这些测试脚本，运行其中的测试case，获得测试报告。

 

4、Use

     本章节主要讲述vue单元测试的具体实施，包括测试环境搭建、配置简述、测试脚本编写、测试运行。

    （1）  测试环境搭建

       建立一个vue项目，init 时 “Set up unit tests”选择yes 、"Pick a test runner"选择Karma便可。vue-cli 会自动生成karma配置文件（karma.conf.js）。

      

 

   （2） 配置简述

    /test/unit/karma.conf.js:

// 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' }
      ]
    }
  })
}

　

test/unit/index.js

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)

　

package.json:

   应当包含这样的script：

"unit": "jest --config test/unit/jest.conf.js --coverage",

 

   （3） 测试脚本编写与运行

   一、 基础知识：

• 测试脚本都要放在 test/unit/specs/ 目录下。
• 脚本命名方式为 [组件名].spec.js。 
• 所谓断言，就是对组件作一些操做，并预言产生的结果。若是测试结果与断言相同则测试经过。 
• 单元测试默认测试 src 目录下除了 main.js 以外的全部文件，可在 test/unit/index.js 文件中修改。 
• Chai断言库中，to be been is that which and has have with at of same 这些语言链是没有意义的，只是便于理解而已。 
• 测试脚本由多个 descibe 组成，每一个 describe 由多个 it 组成。 

    二、describe 的钩子（生命周期）

describe('hooks', function() {

  before(function() {
    // 在本区块的全部测试用例以前执行
  });

  after(function() {
    // 在本区块的全部测试用例以后执行
  });

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

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

  // test cases
});

　三、简单的测试脚本：

测试对象：/Src/components/HelloWorld.vue

     就是vue建立项目时生成的文件，没有作任何改动，如下是抽取出来的主要代码：

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

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

 

测试脚本：/test/unit/specs/HelloWorld.spec.js

    仍然没有作任何改动，只增长了注释：

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')
  })
})

　　

运行单元测试：#npm run unit

 

查看测试报告（覆盖率）：报告自动写入该目录 /test/unit/coverage/lcov-report/ ....

 

　在浏览器查看测试报告：

 

下次将深刻组件测试，编写运行更为复杂的测试脚本。

 

5、Resource

     本章节分享本人在学习过程收集的资料，以供感兴趣者继续深刻学习。

   （1） 官网：

• Karma
• Chai-Doc
• vue-unit-test

   （2） 社区：

• segmentfault
• TesterHome

   （3） openSource：

•  vue-test-utils

• ElemeFE/element

   （4） 其余：

• Mocha实例教程

• Vue单元测试---Karma+Mocha+Chai实践

• Vue单元测试case写法