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

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

當然并不是只有我有這種想法，大神們早就想到了，于是測試框架應運而生。
就筆者了解，目前前端領(lǐng)域比較流行的單元測試框架有 mocha、 Jasmine 等等。。

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

npm install mocha --save-dev

在項目的根目錄創(chuàng)建 test 文件夾 并創(chuàng)建文件 index.js。現(xiàn)在要測試 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)通過了測試（滑稽）

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


  1 passing (13ms)

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

何謂斷言？

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

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

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

如何測試異步代碼

你可以在回調(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ù)的寫法，因為這樣你會拿不到當前執(zhí)行的context, 當前context下內(nèi)置了比如 timeOut 等等的一些api，詳情請翻閱文檔，這里就不做過多展開了。

測試環(huán)境

是時候在瀏覽器跑一下了！

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

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

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

為了降低同學們配置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

進到項目中初始化karma

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 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àn)一個 karma.conf.js 文件，我很想展開，但是如果繼續(xù)講下去估計講到天亮，所以想深入了解每個配置項的作用可以翻閱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

你的黑窗口會有這樣的日志

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)

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

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

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

學海無涯，共勉之。