摘要：懶惰，是促使人類科技發(fā)展的重要因素。就筆者了解，目前前端領(lǐng)域比較流行的單元測(cè)試框架有等等。。什么你想打開控制臺(tái)粘帖代碼執(zhí)行為了拯救你于無盡的加班測(cè)試中，是時(shí)候推薦你接入使用了。

懶惰，是促使人類科技發(fā)展的重要因素。我們告別刀耕火種的時(shí)代，正是因?yàn)槿藗儾粩嗟赝ㄟ^發(fā)明工具和優(yōu)化精簡(jiǎn)手動(dòng)的流程來實(shí)現(xiàn)效率的提升，讓人們能專注于自己專業(yè)的領(lǐng)域，其他的事情交給機(jī)械去處理。
而同樣在前端的領(lǐng)域，我們也是從蠻荒的時(shí)代走向如今的繁榮發(fā)達(dá)，各類框架百花齊放，前端也不再是局限于靜態(tài)頁面，形態(tài)更加接近于傳統(tǒng)應(yīng)用的開發(fā)，功能的復(fù)雜度呈指數(shù)級(jí)的提升。有可能一個(gè)庫要同時(shí)滿足多個(gè)項(xiàng)目使用，版本的迭代也會(huì)導(dǎo)致功能的變化，如果每次到這個(gè)時(shí)候，就要讓我重新測(cè)試一遍代碼，那我還能不能準(zhǔn)時(shí)下班了……
所以我們需要在開發(fā)之前，就確定這個(gè)框架/庫的使用規(guī)則，通過這個(gè)規(guī)則去寫我們的測(cè)試用例，這樣我們開發(fā)完之后，跑一遍測(cè)試用例，讓機(jī)器取代我們?nèi)斯な謩?dòng)地去測(cè)試代碼，就可以知道我們的框架在各種環(huán)境和使用情況下會(huì)否報(bào)錯(cuò)，而不再需要逐一項(xiàng)目去驗(yàn)證。

當(dāng)然并不是只有我有這種想法，大神們?cè)缇拖氲搅?，于是測(cè)試框架應(yīng)運(yùn)而生。
就筆者了解，目前前端領(lǐng)域比較流行的單元測(cè)試框架有 mocha、 Jasmine 等等。。

事不宜遲，我們看看如何上手測(cè)試，這里我們以mocha舉例子。
首先要在項(xiàng)目中安裝mocha

npm install mocha --save-dev

在項(xiàng)目的根目錄創(chuàng)建 test 文件夾 并創(chuàng)建文件 index.js。現(xiàn)在要測(cè)試 Array.prototype.indexOf

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))
    })
  })
})

在命令行中執(zhí)行

mocha

如果看到這樣的結(jié)果，恭喜你，你的代碼已經(jīng)通過了測(cè)試（滑稽）

Array
    #indexOf()
      ? should return -1 when the value is not present


  1 passing (13ms)

以上是一個(gè)簡(jiǎn)單例子，可能有很多同學(xué)還是會(huì)一臉懵逼，說好的講測(cè)試框架，你給引入一個(gè)assert的是什么鬼？
這我就要解釋一下了，這個(gè)是nodejs中內(nèi)置的斷言模塊。

何謂斷言？

在程序設(shè)計(jì)中，斷言（assertion）是一種放在程序中的一階邏輯（如一個(gè)結(jié)果為真或是假的邏輯判斷式），目的是為了標(biāo)示與驗(yàn)證程序開發(fā)者預(yù)期的結(jié)果－當(dāng)程序運(yùn)行到斷言的位置時(shí)，對(duì)應(yīng)的斷言應(yīng)該為真。若斷言不為真時(shí)，程序會(huì)中止運(yùn)行，并給出錯(cuò)誤消息。 -- 摘自維基百科

測(cè)試框架的職責(zé)，只是幫你對(duì)項(xiàng)目中各種各樣的測(cè)試來進(jìn)行一個(gè)規(guī)劃，方便對(duì)測(cè)試來進(jìn)行拆分整理，并在測(cè)試中添加一些描述來方便人眼判別，實(shí)際上，輸入?yún)?shù)到函數(shù)中執(zhí)行，最終輸出什么結(jié)果才能通過測(cè)試，是需要我們?nèi)ァ案嬖V”測(cè)試框架的。而斷言，正好滿足我們這種行為的語義，也是最自然的。

一般來說使用默認(rèn)的斷言模塊已經(jīng)足以應(yīng)對(duì)多種情況，當(dāng)然如果你對(duì)這種語法使用表示很不爽的時(shí)候，也可以在測(cè)試框架中選擇使用其他斷言庫， 比如 should.js , chai 這里就不再過多地贅述。

如何測(cè)試異步代碼

你可以在回調(diào)中執(zhí)行done

var assert = require("assert")

describe("Array", function() {
  describe("#indexOf()", function() {
    it("should return -1 when the value is not present", function(done) {
      setTimeout(function() {
        var value = 1;
        if (value) done(assert.equal(-1, [1, 2, 3].indexOf(4)))
        else done()
      }, 30)
    })
  })
})

promise

it("should xxx", function(done) {
  return new Promise(function(resolve, reject){}).then(done)
})

支持 async await

it("should return -1 when the value is not present", async function(done) {
  let a = await func();
  if (a) done()
  else done(new Error("xxx"))
})

需要注意的是，在使用mocha api的時(shí)候并不提倡 箭頭函數(shù)的寫法，因?yàn)檫@樣你會(huì)拿不到當(dāng)前執(zhí)行的context, 當(dāng)前context下內(nèi)置了比如 timeOut 等等的一些api，詳情請(qǐng)翻閱文檔，這里就不做過多展開了。

測(cè)試環(huán)境

是時(shí)候在瀏覽器跑一下了！

沒錯(cuò)，截止到現(xiàn)在，我們一直都是在nodejs的環(huán)境下執(zhí)行代碼，至于瀏覽器的執(zhí)行環(huán)境有多少差異，大家不言自明，簡(jiǎn)簡(jiǎn)單單在node上面跑一下測(cè)試時(shí)不具有普適性，不可靠的，我們需要在瀏覽器環(huán)境都跑一遍。

什么？你想打開控制臺(tái)粘帖代碼執(zhí)行？為了拯救你于無盡的加班測(cè)試中，是時(shí)候推薦你接入使用karma了。

karma 是一套測(cè)試執(zhí)行管理工具，可以配置需要測(cè)試的瀏覽器環(huán)境，以及測(cè)試前的一系列準(zhǔn)備工作等，需要時(shí)還可以接入測(cè)試覆蓋率的報(bào)告生成。

為了降低同學(xué)們配置karma的門檻，這里我換用了斷言庫should.js

npm install should --save-dev

斷言寫法替換如下

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

首先我們需要安裝karma

npm install karma-cli -g
npm install karma --save-dev

進(jìn)到項(xiàng)目中初始化karma

karma init

接下來你會(huì)收到一連串的詢問

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 any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> 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.
> 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".
Enter empty string 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

配置完成后，項(xiàng)目的根目錄會(huì)出現(xiàn)一個(gè) karma.conf.js 文件，我很想展開，但是如果繼續(xù)講下去估計(jì)講到天亮，所以想深入了解每個(gè)配置項(xiàng)的作用可以翻閱karma文檔

// Karma configuration
// Generated on Fri Aug 04 2017 20:53:38 GMT+0800 (CST)

module.exports = function(config) {
  let configuration = {

    // 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: [
      "node_modules/should/should.js",
      "js/*.js",
      "quz/*.js",
      "test/*.js"
    ],


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


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


    // test results reporter to use
    // possible values: "dots", "progress"
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ["progress", "coverage", "coveralls"],
    coverageReporter: {
      type : "lcov",
      dir : "coverage/"
    },

    // web server port
    port: 9876,
    plugins: [
      "karma-mocha",
      "karma-chrome-launcher",
      "karma-firefox-launcher",
      "karma-coverage",
      "karma-coveralls"
    ],

    // 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: ["ChromeHeadless", "FirefoxHeadless"],

    customLaunchers: {
      Chrome_travis_ci: {
        base: "ChromeHeadless",
        flags: ["--no-sandbox"]
      },
      FirefoxHeadless: { 
        base: "Firefox", 
        flags: ["-headless"]
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: process.env.TRAVIS,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  }
  if (process.env.TRAVIS) {
    configuration.browsers = ["Chrome_travis_ci", "FirefoxHeadless"];
  }
  config.set(configuration)
}

接下來我們跑一發(fā)

karma start

你的黑窗口會(huì)有這樣的日志

02 02 2018 18:10:26.181:WARN [karma]: No captured browser, open http://localhost:9876/
02 02 2018 18:10:26.193:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
02 02 2018 18:10:26.194:INFO [launcher]: Launching browser Chrome with unlimited concurrency
02 02 2018 18:10:26.199:INFO [launcher]: Starting browser Chrome
02 02 2018 18:10:27.346:INFO [Chrome 63.0.3239 (Mac OS X 10.13.2)]: Connected on socket lv0dmScnbh5jC2NgAAAA withid 45333497
Chrome 63.0.3239 (Mac OS X 10.13.2): Executed 1 of 1 SUCCESS (0.003 secs / 0.001 secs)

這時(shí)候你的電腦會(huì)自動(dòng)開啟瀏覽器，并且常駐在桌面，karma一旦觀測(cè)到你的代碼發(fā)生變動(dòng)，就會(huì)重新跑一次測(cè)試用例，從此告別繁復(fù)的測(cè)試環(huán)節(jié)，專心寫代碼。perfect！

完了么？并沒有！你還可以更懶，把當(dāng)前測(cè)試流程接入CI，成為部署環(huán)境前的一個(gè)環(huán)節(jié)，當(dāng)然這已經(jīng)超出了本文應(yīng)該討論的范圍。

長(zhǎng)路漫漫，本文僅限于大家作為了解測(cè)試的開篇，實(shí)際上隱藏了很多的細(xì)節(jié)，真正的環(huán)境，其實(shí)碰到的問題比這個(gè)要復(fù)雜得多，但是如果懂得了測(cè)試的原理，相信聰明的你碰到再難的問題也能想到解決的辦法。

學(xué)海無涯，共勉之。