前端測試簡述及使用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
• 前端自動化單元測試初探