#學習分享#開發基礎知識以前端測試（一）

前言：本文用於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寫法