javascript測試學習筆記

前端爲何須要編寫測試用例？

• 正確性。javascript缺乏類型檢查，編譯期間沒法定位到錯誤 (typescript無此問題)
• 自動化。編寫一次用例，屢次執行。哪怕代碼重構也能在必定程度上保證質量。
• 解釋性。其餘開發人員閱讀測試用例，能更容易明白該api的做用。

項目的實際狀況

• 業務代碼變更頻繁。只能簡單的能夠對一些工具函數等作單元測試
• 對後端返回的數據寫測試。可是相對來講Swagger更方便。
• 項目開發時間緊張。只能對一些公共組件寫測試。

怎麼作測試？

應該先了解最核心的斷言模塊/庫，而後結合現有的測試框架和管理工具進行開發測試用例。

斷言

所謂"斷言"，就是判斷源碼的實際執行結果與預期結果是否一致，若是不一致就拋出一個錯誤。 經常使用的斷言庫有assert、should.js、chai.js

Assert(Node 10.13.0)

assert.deepStrictEqual(actual,expected[,message])

對比actual和expected參數是否深度相等。便可枚舉屬性也會按照規則比較。

const assert = require('assert');

let a = {
  b: 1
}

let b = {
  b: 2
}

assert.deepStrictEqual(a,b,'budui')
複製代碼

最關鍵的是最後一行代碼，當比較的兩個對象不深度相等時，則Assert拋出錯誤

AssertionError [ERR_ASSERTION]: 對象不相等 at Object.

Should.js

用法上其實和assert差很少。api相對較多。具體參考官網。

測試框架

實際業務測試中，優秀的測試框架必不可少，有Mocha、Jasmine、Tape、jest等

Mocha

• 一個功能豐富的前端測試框架
• 自己沒有斷言庫，須要自行導入斷言庫
• 安裝: npm install mocha -g
• 執行: mocha (默認運行test子目錄裏面的測試腳本)

基本用法

describe('addTest', function () {
  it('0.1加上0.2等於0.3', function () {
    // 使用should.js斷言
    add(0.1, 0.2).should.equal(0.3)
  })
})
複製代碼

Mocha 測試用例如上，主要包含下面幾部分:

describe 定義的測試套件(test suite)，第一個參數是套件名稱，第二個參數是一個函數

it 定義的測試用例(test case)，第一個參數是用例名稱，第二個參數是一個函數。

一個describe裏能夠有多個it

異步測試

默認每一個測試用例最多執行2000毫秒，可使用-t參數指定超時時間

mocha -t 5000 test.js

it('should able to request https://api.github.com/', function (done) {
    // 使用 jQuery.ajax 請求
    $.ajax({
      url:"https://api.github.com/",
      success: function() {
        done()
      }
    })
  })
複製代碼

異步測試時，須要在異步完成後加入done()告訴mocha測試結束。不然會一直等待，超時報錯。

測試用例鉤子

在describe中調用

• before //在本區塊的全部測試用例以前執行
• after //在本區塊的全部測試用例以後執行
• beforeEach //在本區塊的每一個測試用例以前執行
• afterEach //在本區塊的每一個測試用例以後執行

mocha還有其餘不少功能，如

• 監視指定測試用例，自動執行（mocha -w）

• 用例管理（only,skip）

• ...

只需前往Mocha查看文檔

參考: 測試框架 Mocha 實例教程

測試執行過程管理工具

Karma

1. 安裝: npm install -g karma-cli
2. 初始化: karma init

Which testing framework do you want to use? Press tab to list possible options. Enter to move to the next question.

mocha

Do you want to use Require.js? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question.

no

Do you want to capture a browser automatically? Press tab to list possible options. Enter empty string to move to the next question.

Chrome Firefox

What is the location of your source and test files? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Press Enter to move to the next question.

node_modules/should/should.js test/**/*.js

Should any of the files included by the previous patterns be excluded? You can use glob patterns, eg. "**/*.swp". Press Enter to move to the next question.

Do you want Karma to watch all the files and run the tests on change? Press tab to list possible options.

yes

完成後會在項目根目錄生成配置文件 karma.conf.js

3. 啓動測試: karma start

持續集成

持續集成指的是隻要代碼有變動，就自動運行構建和測試，反饋運行結果。

這裏我採用了Travis CI

1. 前往Travis CI綁定github帳號。
2. 打開須要自動跑karma的項目。
3. 項目根目錄新建配置文件 .travis.yml

每次提交代碼之後會根據配置文件的跑測試用例。不管是否跑通，都會有相應的報告。

參考:

持續集成服務 Travis CI 教程

使用Travis進行持續集成