Mocha+should+Karma自動化測試教程

Mocha+should+Karma自動化測試教程

1、瞭解TDD與BDD

首先，爲何咱們瞭解TDD與BDD的是什麼意思？

在實際項目中，大部分都是採用BDD的形式進行開發，也就是行爲驅動開發。

TDD，測試驅動開發，先編寫單元測試代碼，再去實現功能。

更爲詳細的內容請自行查閱資料。

2、 node assert斷言庫

既然要作TDD作開發模式，首先咱們得了解node assert，大部分單元測試框架都是基於node assert的，因此先熟悉了node assert才能更好上手should.js。

• assert（斷言）
  • assert.AssertionError類
    • new assert.AssertionError(option)
• 嚴格模式
• 遺留模式
• assert(value[, message]) -- 檢測value是否爲真值
• assert.deepEqual(actual,expected[, message]) -- 檢測實際值與指望值是否深度相等
• assert.deepStrictEqual(actual,expected[, message]) -- 檢測實際值與指望值是否嚴格深度相等
  • 比較運算的詳細說明
• assert.doesNotReject(asyncFn[, error],[, message]) --
• assert.doesNotThrow(fn[, error],[, message])
• assert.equal(actual, expected[, message]) -- 檢測實際值與指望值是否相等
• assert.fail([message]) --使用提供的錯誤消息或默認錯誤消息拋出 AssertionError
• assert.ifError(value) -- 檢測實際值是否爲undefined或null
• assert.notDeepEqual(actual,expected[, message]) -- 檢測實際值與指望值非深度相等
• assert.notEqual(actual,expected[, message]) --檢測實際值與指望值不相等
• assert.notStrictEqual(actual,expected[, message]) -- 檢測實際值與指望值非嚴格相等
• assert.ok(value[, message]) -- 檢測實際值是否爲真值
• assert.rejects(asyncFn[, error], [, message]) --檢測promise是否被拒絕
• assert.strictEqual(actual, expected[, message]) -- 檢測實際值與指望值嚴格相等
• assert.throws(fn[, error], [, message]) -- 指望 fn 函數拋出錯誤。

3、mocha + should.js+ Karma

Mocha項目地址：http://visionmedia.github.com/mocha/

should項目地址：https://github.com/visionmedia/should.js

Karma項目地址：http://karma-runner.github.io/

一、安裝

• 首先建立一個空白的工程文件夾做爲咱們的工程目錄

cd E:   // 進入E盤
mkdir my-karma  // 建立my-karma工程文件夾
cd my-karma     // 進入my-karma工程文件夾

• 輸入命令安裝Karma, mocha

npm install karma mocha --save-dev

• 安裝完成後

• 安裝karma-mocha/karma-chrome-launcher依賴
• 安裝should.js依賴

npm install karma-mocha karma-chrome-launcher --save-dev
npm install should --save-dev

• 安裝karma-cli來簡化karma的調用，安裝命令以下，其中-g表示全局參數，這樣從此能夠很是方便的使用karma了：

npm install -g karma-cli

二、開啓Karma

karma start

運行後如圖所示出現了一行INFO信息，並無其餘提示和動做，由於此時咱們沒有配置karma的啓動參數。後面會加入karma.conf.js，這樣karma就會自動啓動瀏覽器並執行測試用例了

三、Karma+mocha配置：

• 命令init進行配置

karma init

• 是windows電腦使用git bash執行該命令會報錯，請更換爲windows自帶的命令框

• 默認配置：除第一項更改成mocha測試工具

• 配置說明：

1. 框架：選mocha
2. 是否添加Require.js插件
3. 測試文件路徑設置，文件可以使用通配符
4. 在測試文件路徑下，須要排除的文件
5. 是否容許Karma檢測文件，yes表示當測試路徑下的文件變化時，Karma會自動測試

• karma.conf.js參數介紹

/***
 * Karma configuration
 * karma單元測試配置文件
 */

module.exports = function(config) {

    config.set({

        /***
         * 基礎路徑，用在files，exclude屬性上
         */
        basePath: "",

        /**
         * 測試框架
         * 可用的框架：https://npmjs.org/browse/keyword/karma-adapter
         */
        frameworks: ["mocha"],

        /**
         * 須要加載到瀏覽器的文件列表
         */
        files: [
            "test/*.js"
        ],

        /**
         * 排除的文件列表
         */
        exclude: [
        ],

        /**
         * 在瀏覽器使用以前處理匹配的文件
         * 可用的預處理: https://npmjs.org/browse/keyword/karma-preprocessor
         */
        preprocessors: {
            "karmaTest/test.js" : "coverage"
        },

        /**
         * 使用測試結果報告者
         * 可能的值: "dots", "progress"
         * 可用的報告者：https://npmjs.org/browse/keyword/karma-reporter
         */
        reporters: ["progress", "coverage"],

        /**
         * 使用reporters爲"coverage"時報告輸出的類型和那目錄
         */
        coverageReporter: {
            type: "html",
            dir: "karmaTest/coverage"
        },

        /**
         * 服務端口號
         */
        port: 9876,

        /**
         * 啓用或禁用輸出報告或者日誌中的顏色
         */
        colors: true,

        /**
         * 日誌等級
         * 可能的值：
         * config.LOG_DISABLE //不輸出信息
         * config.LOG_ERROR    //只輸出錯誤信息
         * config.LOG_WARN //只輸出警告信息
         * config.LOG_INFO //輸出所有信息
         * config.LOG_DEBUG //輸出調試信息
         */
        logLevel: config.LOG_INFO,

        /**
         * 啓用或禁用自動檢測文件變化進行測試
         */
        autoWatch: true,


        /**
         * 測試啓動的瀏覽器
         * 可用的瀏覽器：https://npmjs.org/browse/keyword/karma-launcher
         */
        browsers: ["Chrome"],


        /**
         * 開啓或禁用持續集成模式
         * 設置爲true, Karma將打開瀏覽器，執行測試並最後退出
         */
        singleRun: true,

        /**
         * 併發級別（啓動的瀏覽器數）
         */
        concurrency: Infinity
    });
};

四、測試腳本

• 在工程目錄下建立test文件夾，存放測試腳本

test.js

describe('驗證add函數是否正確', function () {
    it('1 + 2', function () {
        should(add(1,2)).be.eql(3)
    })
})

• 在工程目錄下建立src文件夾，存放js函數文件

add.js

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

• 修改karma.conf.js配置，添加須要加入到瀏覽器的文件路徑

• 最後在命令行中輸入啓動測試

karma start

• 出現測試成功，並打開chrome啓動，表明測試程序成功了。