是什麼？

• [Node assert] (http://nodejs.cn/api/assert.html)

  官方說明：assert 模組提供了斷言測試的函式，用於測試不變式。
  有嚴格模式（strict mode）與遺留模式（legacy mode）兩種模式，建議只使用嚴格模式。
  檢視 MDN的等式比較指南，瞭解更多關於等式比較的資訊。

• should.js

  官方說明：should is an expressive, readable, framework-agnostic assertion library. The main goals of this library are to be expressive and to be helpful. It keeps your test code clean, and your error messages helpful.

  有道翻譯如下：
  should是一個富有表現力，可讀，框架無關的斷言庫。這個庫的主要目標是表達和幫助。它可以保持你的測試程式碼整潔，並且錯誤訊息也很有用。

• mocha

  mocha中文學習文件

  Mocha是一個在Node上執行的特性豐富的JavaScript測試框架。讓非同步測試變得簡單和有趣。Mocha測試是連續執行的，允許靈活和準確的報告，同時將未捕獲的異常對映到正確的測試用例

  mocha是JavaScript的一種單元測試框架,單元測試是用來對一個模組、一個函式或者一個類來進行正確性檢驗的測試工作。以測試為驅動的開發模式最大的好處就是確保一個程式模組的行為符合我們設計的測試用例。在將來修改的時候，可以極大程度地保證該模組行為仍然是正確的。

  小本本：測試框架選型

• TDD 和 BDD

  TDD：Test-Driven Development（測試驅動開發）
  是敏捷開發中的一項核心實踐和技術，在開發功能程式碼之前，先編寫單元測試用例程式碼，測試程式碼確定需要編寫什麼產品程式碼（。側重點偏向開發 -> 開發人員）

  BDD：Behavior Driven Development（行為驅動開發）
  是一種敏捷軟體開發的技術，它鼓勵軟體專案中的開發者、QA和非技術人員或商業參與者之間的協作。（側重點偏向設計 -> 產品、開發者、測試人員）

• Karma

  The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.

  有道翻譯如下：
  Karma的主要目標是為開發人員提供高效的測試環境。環境是他們不必設定大量配置的環境，而是開發人員只需編寫程式碼並從測試中獲得即時反饋的地方。因為獲得快速反饋是讓您富有成效和創造力的原因。

  小本本： karma Coverage

• Travis CI

  Travis CI 是目前新興的開源持續整合構建專案，它與jenkins，GO的很明顯的特別在於採用yaml格式，簡潔清新獨樹一幟。

  什麼是持續整合？
  注：此處引用文章https://baijiahao.baidu.com/s?id=1587248159486720910&wfr=spider&for=pc

  Travis CI 提供的是持續整合服務（Continuous Integration，簡稱 CI）。它繫結 Github 上面的專案，只要有新的程式碼，就會自動抓取。然後，提供一個執行環境，執行測試，完成構建，還能部署到伺服器。
  持續整合指的是隻要程式碼有變更，就自動執行構建和測試，反饋執行結果。確保符合預期以後，再將新程式碼"整合"到主幹。

  持續整合的好處在於，每次程式碼的小幅變更，就能看到執行結果，從而不斷累積小的變更，而不是在開發週期結束時，一下子合併一大塊程式碼。

使用Karma

這裡介紹使用karma和mocha進行單元測試。斷言庫使用should。

安裝步驟

• 全域性安裝 mocha和karma-cli

npm install mocha -g
npm install -g karma-cli

• 初始化npm包

npm init -y  // -y是預設配置

• 在專案內安裝 karma, mocha, should

npm i karma mocha should --save-dev

• 初始化測試
  

karma init

1. Which testing framework do you want to use ? (mocha)  // 預設是jasmine， 按鍵盤的->鍵切換成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

也可以在package.json中配置scripts:
執行npm run test

"scripts": {
"test": "karma start"
},

測試

在 karma 的配置檔案中,加入我們的測試檔案

// list of files / patterns to load in the browser
files: [
  'https://cdn.bootcss.com/jquery/2.2.4/jquery.js',
  'node_modules/should/should.js',
  'test/**.js'
],

在test/test.js中寫入我們的測試用例：

describe('jQuery', function () {
  it('should have jQuery', function () {
    if (!window.jQuery) {
      throw new Error('檢視下 karma.conf.js 配置項 files 是否正確')
    }
  })

  it('should able to get a body', function () {
    var $body = $('body')
    $body.length.should.equal(1)
    $body[0].should.equal(document.getElementsByTagName('body')[0])
  })

  describe('should able to trigger an event', function () {
    var ele
    before(function () {
      ele = document.createElement('button')
      document.body.appendChild(ele)
    })

    it('should able trigger an event', function (done) {
      $(ele).on('click', function () {
        done()
      }).trigger('click')
    })

    after(function () {
      document.body.removeChild(ele)
      ele = null
    })
  })

  it('should able to request https://raw.githubusercontent.com/FE-star/exercise1/master/test/test.js', function (done) {
    // 使用 jQuery.ajax 請求 https://raw.githubusercontent.com/FE-star/exercise1/master/test/test.js，並驗證是否拿到檔案
    
    var url = "https://raw.githubusercontent.com/FE-star/exercise1/master/test/test.js"
    $.ajax({
      type: "GET",
      url: url,
      success: function(msg){
        done()
      }
    });
  })
})

測試成功：

這裡貼一下 karma.conf.js 的基本配置：

// Karma configuration
// Generated on Sat Nov 10 2018 18:53:08 GMT+0800 (中國標準時間)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],


    // list of files / patterns to load in the browser
    files: [
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.js',
      'node_modules/should/should.js',
      'test/**.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

接入Travis CI

說明: 這裡演示把託管在Github上的專案使用Travis Ci來做整合測試。

準備工作：

• 開啟https://travis-ci.org/ travis-cli官網。

• 把Github的專案同步到Travis Ci的管理後臺：
  

• 針對某個專案開啟開關，如exercise3打開了開關：

接下來在檔案的根目錄下建立一個資料夾.travis.yml
簡單配置：

# 使用的語言
language: node_js
# 使用的nodejs版本
node_js:
  - "8"
addons:
  chrome: stable
before_script:
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
# 上面句話是為了在Linux系統下預設沒有Chrome, 無法啟動而測試不通過。

install:
  - npm install -g karma-cli

把修改好的程式碼推送到github倉庫上，開開travis官網，你就發現你的專案開始構建了。