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

拾貳發表於2019-05-08

頂部圖

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

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。

二、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等等

三、Mocha - 單元測試框架

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

Mocha初體驗

使用npm全域性安裝：

$ npm install --global mocha

也可以作為專案的依賴進行安裝：

$ npm install --save-dev mocha

使用mocha -v可以檢視版本號
mocha版本
新建一個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進行測試，輸出結果如下：
mocha正確結果
我們將程式碼修改一下：

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

mocha錯誤結果
給出了failing結果，測試不通過，並且給出了1) should return -1 when the value is not present的錯誤資訊，準確的告訴我們是哪裡沒有通過測試！
PS: 單元測試框架還有 jest、jasmine等等

四、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效果如下：
執行成功

五、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也是可以看到測試的結果啦：