單元測試分為 TDD（測試驅(qū)動開發(fā)）和 BDD（行為驅(qū)動開發(fā)）兩種類型
兩者的區(qū)別是驅(qū)動者、主導(dǎo)者不同

斷言庫

node是內(nèi)置斷言模塊assert的，也有一些其他的斷言庫瞬沦，如should.js expect.js

下面是assert圆到， should.js, expect.js的一些寫法

let a = 10, obj = {a: '1'}
// assert
assert.equal(a, 10, 'a != 10啊老鐵')

// should.js
a.should.equal(10, 'a != 10啊老鐵')
should(a).equal(10, 'a != 10啊老鐵')
obj.should.have.key('a').be.a.Number()

// expect.js
expect(a).to.equal(10, 'a != 10啊老鐵')
expect(obj).to.have.property('a').to.be.a('number')

斷言庫各有優(yōu)缺點，可根據(jù)實際情況揍拆，選擇使用哪種斷言

測試框架

Mocha

Mocha是一個能夠運(yùn)行在Node和瀏覽器中的多功能的js測試框架

首先在我們測試的項目中安裝Mocha
npm i mocha -D

然后在我們的項目中新建一個test文件夾，Mocha會自動檢索這個目錄下的測試文件并運(yùn)行茶凳。

test/hello-test.js

const should = require('should')
let a = 10
describe('it is test', function() {
  it('a should equal 10', () => {
    should(a).equal(10, 'a != 10啊老鐵')
  });
  it('a should equal 11', () => {
    should(a).equal(11, 'a != 11啊老鐵')
  });
})

在控制臺中輸入mocha嫂拴，即可看到運(yùn)行結(jié)果

it is test
  ? a should equal 10
  1) a should equal 11


1 passing (11ms)
1 failing

1) it is test a should equal 11:

    AssertionError: a != 11啊老鐵
    + expected - actual

    -10
    +11

describe用來描述你要測的主體是什么,可以多層嵌套
it 描述具體的一條測試用例的內(nèi)容

Karma

Karma是個將我們的測試用例跑在瀏覽器上的框架

karma的使用

首先安裝karma

npm i -g karma-cli
npm i --save-dev karma

然后在測試項目里輸入karma init來初始化karma項目

$ karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
// 是選擇你所用的測試框架 這里我們選擇mocha(按tab健切換至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
// 是否在測試項目里使用require.js播揪， 這里我們選擇no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
// 默認(rèn)打開的瀏覽器，選擇chrome
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
// 哪些是需要引入的文件筒狠，這里除了本地文件猪狈，也可以引入cdn文件，和聽過npm安裝在依賴包里的文件辩恼，比如https://cdn.bootcss.com/jquery/2.2.4/jquery.js   node_modules/should/should.js
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
// 加載的目標(biāo)文件不需要測試的文件
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
// 是否watch所有的文件
Config file generated at "/mocha_lean/karma.conf.js".
// 會生成karma.conf.js在測試的項目里雇庙，剛才所有的選項都可以在這里就行修改

在命令行中輸入 karma start就會起一個端口默認(rèn)為9876的服務(wù)，并且自動打開chrome运挫，命令行中也出現(xiàn)了測試結(jié)果

09 11 2018 20:03:53.283:WARN [karma]: No captured browser, open http://localhost:9876/
09 11 2018 20:03:53.312:INFO [karma-server]: Karma v3.1.1 server started at http://0.0.0.0:9876/
09 11 2018 20:03:53.312:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
09 11 2018 20:03:53.320:INFO [launcher]: Starting browser Chrome
09 11 2018 20:03:56.367:INFO [Chrome 70.0.3538 (Mac OS X 10.14.0)]: Connected on socket gUMQo5IzqR60ZdIVAAAA with id 35123873

如何在瀏覽器中查看當(dāng)前運(yùn)行的測試結(jié)果呢状共？

http://localhost:9876頁面的右上角有一個debug按鈕，點開后谁帕，在打開的頁面中打開控制臺峡继，測試結(jié)果會輸出在控制臺中

karma.conf.js的內(nèi)容
// Karma configuration
// Generated on Fri Nov 09 2018 19:57:45 GMT+0800 (CST)

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '', //基礎(chǔ)路徑


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


    // list of files / patterns to load in the browser
    files: [ //引入的文件，這里的文件會被karma以標(biāo)簽移入到html中,所以需要注意文件的順序
      'test/hello-test.js',
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.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, // 持續(xù)集成模式 如果該值為true匈挖，karma將會啟動和捕獲配置的瀏覽器碾牌，運(yùn)行測試然后退出 這里需要注意的是如果配置了travis-ci的話，需要設(shè)置為true儡循，不然travis-ci會一直跑下去舶吗，沒法自動結(jié)束

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

框架適配器（framework adapters）比如：Karma-mocha, Karma-chai ，reporters 比如 Karma-spec-reporter （后面我們還會介紹 Karma-coverage）择膝，以及預(yù)處理器誓琼，比如 Karma-webpack, Karma-sourcemap-loader，還有加載器（launchers）肴捉，比如 Karma-chrome-launcher腹侣，都是作為 Karma 插件工作的。

針對這些 Karma 插件 我們都要安裝對應(yīng)的 npm 包齿穗，這些插件一般是以 karma- 開頭傲隶，而 Karma 默認(rèn)會自動加載 karma- 開頭的 npm 包。因此我們沒有在配置文件中明確指定 plugins 配置項（實際上它的默認(rèn)配置項為 karma-*）窃页，但是一定要記得安裝相應(yīng)的 npm 包跺株，特別是框架適配器和加載器，框架指定 Mocha 就要安裝 Karma-mocha脖卖，瀏覽器指定 Chrome 乒省，就要安裝 Karma-chrome-launcher。

更多karma.conf.js的配置

Travis CI

Travis CI 提供的是持續(xù)集成服務(wù) 它綁定 Github 上面的項目畦木，只要有新的代碼袖扛，就會自動抓取。然后馋劈，提供一個運(yùn)行環(huán)境攻锰，執(zhí)行測試，完成構(gòu)建妓雾，還能部署到服務(wù)器娶吞。

首先我們需要進(jìn)入Travis CI官網(wǎng)
用我們的github賬號登錄，并將我們github上的一個項目關(guān)聯(lián)到travis-ci上械姻，并加以配置

之后在我們的項目的根目錄下新建一個.travis.yml文件妒蛇，這是配置文件，指定了 Travis 的行為楷拳。之后我們每次向github提交代碼時都會在travis-ci中跑一遍我們的測試腳本

Travis 提供了7個鉤子绣夺。

before_install：install 階段之前執(zhí)行
before_script：script 階段之前執(zhí)行
after_failure：script 階段失敗時執(zhí)行
after_success：script 階段成功時執(zhí)行
before_deploy：deploy 步驟之前執(zhí)行
after_deploy：deploy 步驟之后執(zhí)行
after_script：script 階段之后執(zhí)行

.travis.yml文件

language: node_js // 指定運(yùn)行的語言
script: npm run test // 所需要跑的script命令， 如果不需要運(yùn)行欢揖，可設(shè)置為true
# 緩存 node_modules 文件夾陶耍，不需要每次都下載安裝全部 npm 包。
cache:
  directories:
    - node_modules
# 指定 node 版本
node_js:
  - "11"
os: osx // 指定跑的測試腳本的環(huán)境
before_install: //在運(yùn)行之前所需要運(yùn)行的腳本她混，這里是安裝karma-cli
- npm install karma-cli -g
// 可能會報沒有chrome的錯烈钞，需要加這兩條命令
sudo: required 
addons:
  chrome: stable
// 如果travis-ci測試腳本一直跑，無法終結(jié)坤按，可以通過配置karma的singleRun為true即可解決

配置好后把項目代碼提交至github上毯欣，就可以去Travis CI官網(wǎng)查看是否運(yùn)行通過了。
Travis-CI 還可以做很多事情臭脓，想要了解更多有關(guān) Travis-CI 的使用方式酗钞，可以自行去 Travis-CI 官網(wǎng) 查看文檔。我們只是使用了它的自動化測試的功能