學會JavaScript測試你就是同行中最亮的仔（妹）

1、幾種概念（稍微瞭解一下）

ATDD： Acceptance Test Driven Development（驗收測試驅動開發）

這是一種在編碼開始以前將客戶帶入測試設計過程的技術。它也是一個協做實踐，用戶，測試人員和開發人員定義了自動驗收標準。 ATDD有助於確保全部項目成員準確理解須要完成和實施的內容。若是系統未經過測試可提供快速反饋，說明未知足要求。驗收測試以業務領域術語進行指定。每一個功能都必須提供真實且可衡量的業務價值，事實上，若是您的功能沒有追溯至至少一個業務目標，那麼您應該想知道爲何您要首先實施它。

TDD：Test-driven development （測試驅動開發）

是一種使用自動化單元測試來推進軟件設計並強制依賴關係解耦的技術。使用這種作法的結果是一套全面的單元測試，可隨時運行，以提供軟件能夠正常工做的反饋。TDD重點是培養整個研發過程的節奏感，就像跳踢踏舞同樣，「ti-ta-ti」。在編寫真正實現功能的代碼以前先編寫測試，每次測試以後，重構完成，而後再次執行相同或相似的測試。該過程根據須要重複屢次，直到每一個單元根據所需的規格運行。

BDD：Behavior-Driven Development (行爲驅動開發)

BDD將TDD的通常技術和原理與領域驅動設計(DDD)的想法相結合。 BDD是一個設計活動，您能夠根據預期行爲逐步構建功能塊。BDD的重點是軟件開發過程當中使用的語言和交互。行爲驅動的開發人員使用他們的母語與領域驅動設計的語言相結合來描述他們的代碼的目的和好處。使用BDD的團隊應該可以以用戶故事的形式提供大量的「功能文檔」，並增長可執行場景或示例。 BDD一般有助於領域專家理解實現而不是暴露代碼級別測試。它一般以GWT格式定義：GIVEN WHEN＆THEN。

2、NodeJs中的Assert模塊 - 斷言

模塊介紹：assert 模塊提供了一組簡單的斷言測試，可用於測試不變量。存在嚴格模式（strict）和遺留模式（legacy），但建議僅使用 嚴格模式。

簡單嘗試

（固然要先安裝好node啦，安裝node教程網上好像已經有不少了，我這裏就不寫了！）

var assert = require('assert');

function add (a, b){
  return a + b;
}

assert.equal(6, add(3, 3), '預期 3 + 3 等於 6')

當調用add函數而且執行結果爲6，執行不會報錯，咱們將代碼改一下。以下：

// assert.equal(6, add(3, 3), '預期 3 + 3 等於 6')
assert.equal(5, add(3, 3), '預期 3 + 3 等於 6')

咱們能夠看到拋出了一個錯誤，錯誤信息是預期 3 + 3 等於 6。
這是nodejs的assert模塊簡單嘗試，更多詳細內容可猛戳Assert模塊
PS: 還有不少斷言庫好比 should.js、chai等等

3、Mocha - 單元測試框架

Mocha是一個在Node.js和瀏覽器上運行的功能豐富的JavaScript測試框架，使異步測試變得簡單而有趣。 Mocha測試以串行方式運行，容許靈活準確的報告，同時將未捕獲的異常映射到正確的測試用例。

Mocha初體驗

使用npm全局安裝：

$ npm install --global mocha

也能夠做爲項目的依賴進行安裝：

$ npm install --save-dev mocha

使用mocha -v能夠查看版本號

新建一個test.js文件，輸入以下內容：

var assert = require('assert')
describe('Array', function() {
    describe('#indexOf()', function() {
        it('should return -1 when the value is not present', function() {
            assert.equal(-1, [1, 2, 3].indexOf(4))
        })
    })
})

能夠在終端使用mocha test.js進行測試，輸出結果以下：

咱們將代碼修改一下：

// assert.equal(-1, [1, 2, 3].indexOf(4))
assert.equal(-1, [1, 2, 3].indexOf(3))

給出了failing結果，測試不經過，而且給出了1) should return -1 when the value is not present的錯誤信息，準確的告訴咱們是哪裏沒有經過測試！
PS: 單元測試框架還有 jest、jasmine等等

4、Karma-測試工具

一個測試工具，能讓你的代碼在瀏覽器環境下測試。須要它的緣由在於，你的代碼多是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來；另外，瀏覽器有兼容問題，karma提供了手段讓你的代碼自動在多個瀏覽器（chrome，firefox，ie等）環境下運行。

Karma初體驗

全局安裝 karma

$ npm install -g karma-cli

由於我已經全局安裝過了，這裏就直接先安裝依賴npm i,而後執行karma init

1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
5. Should any of the files included by the previous patterns be excluded ? ()
6. Do you want Karma to watch all the files and run the tests on change ? (yes)

而後執行karma start效果以下：

5、Travis CI - 持續集成服務

目前新興的開源持續集成構建項目，它與jenkins，GO的很明顯的特別在於採用yaml格式，簡潔清新獨樹一幟。

嘗試給項目集成Travis CI

猛戳Travis CI打開網站，而後能夠選擇使用github帳號登陸以下圖：

這時候咱們須要在項目根目錄添加.travis.yml文件，大體內容以下（具體須要什麼請參考官方文檔）：

language: node_js
# nodejs版本
node_js: 
    - '8'

# Travis-CI Caching
cache:
  directories:
    - node_modules


# S: Build Lifecycle
install:
  - npm install
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

before_script:

# 無其餘依賴項因此執行npm run build 構建就好了
script:
  - npm test

而後咱們將代碼提交，咱們會看見Travis CI自動開始構建

咱們甚至能夠看到詳細信息

以及執行結果

而後發現執行之後，並無自動結束

咱們只須要修改一下配置，找到karma.conf.js：
將singleRun: false改成singleRun: true，而後將代碼再提交一次，咱們再看執行結果：

喜大普奔，經過測試啦，嘿嘿嘿！！！
其實在github也是能夠看到測試的結果啦：

還有不少高級玩法，你們能夠去看一下文檔！一樣能夠根據自身愛好集成其餘的斷言庫和測試框架進行測試！

小廣告

我本身運營的公衆號，記錄我本身的成長！

公衆號：前端曰

公衆號ID：js-say

ps：是(yue)不是(ri)