前端測試簡述及使用Karma/Mocha實現的集成測試栗子（Travis CI/Coverage）

前端測試

1. 開發類型

   • TDD (Test Driven Development)，測試驅動開發
   • BDD (Behavior Driven Development)，行爲驅動開發

   // add.js
   function add(x, y) {
    return x + y;
   }
   
   module.exports = add;
   
   // test.js
   let add = require('./add.js');
   // TDD
   assert.equal(add(1, 2), '3');
   
   // BDD
   expect(add(1, 2)).to.equal('3');複製代碼

2. 測試類型

   • unit test：應用仔細拆分爲一個一個組件（JavaScript中的一個函數／模塊／類等），方法，而後針對這些方法進行單個單個的測試
   • e2e test：ClickButton測試，牽扯到用戶行爲，須要用瀏覽器環境

3. 測試管理工具／框架／庫

   • 測試管理工具：用來組織和運行整個測試的工具，它可以將測試框架、斷言庫、測試瀏覽器、測試代碼和被測試代碼組織起來，並運行被測試代碼進行測試。（Selenium、Karma）
   • 測試框架：Mocha、Jasmine等等，測試主要提供了清晰簡明的語法來描述測試用例，以及對測試用例分組，測試框架會抓取到代碼拋出的AssertionError，並增長一大堆附加信息，好比那個用例掛了，爲何掛等等。測試框架一般提供TDD（測試驅動開發）或BDD（行爲驅動開發）的測試語法來編寫測試用例，關於TDD和BDD的對比能夠看一篇比較知名的文章The Difference Between TDD and BDD。不一樣的測試框架支持不一樣的測試語法，好比Mocha既支持TDD也支持BDD，而Jasmine只支持BDD。這裏後續以Mocha的BDD語法爲例
   • 斷言庫：Should.js、chai、expect.js等等，斷言庫提供了不少語義化的方法來對值作各類各樣的判斷。固然也能夠不用斷言庫，Node.js中也能夠直接使用原生assert庫。
   • 代碼覆蓋率：istanbul等等爲代碼在語法級分支上打點，運行了打點後的代碼，根據運行結束後收集到的信息和打點時的信息來統計出當前測試用例的對源碼的覆蓋狀況。
   • 測試瀏覽器：前端代碼是運行在瀏覽器中的，要對其進行單元測試，只能將其運行在瀏覽器上。目前大部分測試工具都支持調用和運行本地瀏覽器來進行測試，但若是你的測試僅僅是針對函數和模塊的單元測試，則徹底可使用一款無界面的瀏覽器：PhantomJs

4. 測試框架共性

   • 提供TDD/BDD的測試語法來編寫測試用例
   • 提供斷言語法
   • 提供測試用例對源碼的覆蓋狀況

karma項目實例

按照如下配置完成的項目實例

karma使用

1. 安裝

   • npm install better-npm-run --save-dev：npm script配置加強
   • npm install karma --save-dev
   • npm install chai karma-chai mocha karma-mocha --save-dev：安裝mocha以及斷言chai，配置測試框架
   • npm install babel-core babel-loader babel-preset-env webpack karma-webpack --save-dev：安裝webpack和babel，配置es6／7環境
   • npm install phantomjs@2.1.1 babel-plugin-istanbul karma-phantomjs-launcher --save-dev：使用虛擬瀏覽器跑測試
   • npm install karma-coverage --save-dev：添加代碼覆蓋率插件

2. 運行

   node ./node_modules/karma/bin/karma start

   全局安裝cli後，能夠直接karma start，省去前面長段字符串

   npm install -g karma-cli

3. 配置karma.config.js以及webpack.config.js文件

搭建Travis-CI／Coveralls自動化部署環境

1. Travis-ci

   • Travis-ci官網登陸，綁定github帳號。
   • 點擊頭像進入我的資料界面，勾選你所須要自動構建的項目前的按鈕
   • 點擊build圖標，選擇md格式的Status Image複製到md文件中便可
   • 在項目根目錄新建.travis.yml文件，參考倉庫中的代碼片斷

2. Coveralls

   • Coveralls官網登陸
   • 點擊左側ADD REPOS，勾選你須要的項目
   • 若是沒有你要的項目可點擊右下角REFRESH PRIVATE REPOS
   • 若是你的項目不是Travis Pro就能夠直接點擊項目，找到EMBED下拉選擇框，選擇md格式的README BADGES複製到md文件中便可
   • 若是是Travis Pro，你就按照官網說明添加.coveralls.yml文件，填寫相關token

避坑指南

1. 理解測試管理工具／框架／庫之間的聯繫與區別

2. 在karma中選擇不一樣的測試環境（Chrome/PhantomJS...），須要配置相應的plugin，選擇PhantomJS時，需下載指定的2.1.1版本，下載最新版phantomjs-prebuilt@2.1.14時，不只下載易報錯（網絡問題），並且出現沒有PATH的問題，這樣同karma-phantomjs-launcher插件便沒法關聯起來，致使虛擬瀏覽器測試環境沒法搭建

3. 配置代碼覆蓋率時，採用karma-coverage，而咱們使用webpack及babel對源碼進行了編譯，致使代碼覆蓋率出現不完整的問題，所以須要引入webpack的babel-plugin-istanbul插件，在配置文件中加入便可

4. 配置持續集成.travis.yml文件，給 Coveralls 上傳的測試報告須要有統一的 lcov 格式，所以在karma.conf.js文件中配置生成報告類型

   karma-coverage詳細配置

   coverageReporter: {
     dir: 'coverage',
       reporters: [{
         type: 'json',
         subdir: '.',
         file: 'coverage.json', // ./coverage目錄下生成此文件
       }, {
         type: 'lcov', // lcov 格式
         subdir: '.' // ./coverage目錄下生成 lcov.info文件
       }, {
         type: 'text-summary' // 終端輸出文字總結
       }]
   }複製代碼

   ​

參考

• 聊一聊前端自動化測試
• 前端開源項目持續集成三劍客
• Web應用E2E測試框架
• 理解前端開發中的unit test 和 e2e test
• 前端自動化單元測試初探