前端測試

前端測試

提及前端測試，常常會聽到assert，shouldjs，mocha，karma，travis等等，
這些是都是分別用來幹什麼的呢？

爲何須要前端測試

本人目前工做中，其實沒有涉及到前端測試，周圍的人也不多用到過前端測試，
那爲何須要前端測試呢？

經過測試的代碼，安全性能高，使用放心

大的前端框架好比jquery等等，都是必需要有測試，
好比因爲添加功能，要將如今的jquery版本由1.7升級到1.8，
若是沒有測試，添加的新功能對之前的code有沒有影響，
咱們須要一步一步去手動調試，會是一個很大的工做量，
可是經過執行測試代碼，能夠很方便的幫助咱們檢測之前的功能仍是不是能很好的運行。
同時經過執行測試代碼，對咱們的各個功能模塊的代碼也是一個很好的性能檢測。

怎樣寫測試

首先須要瞭解如何寫測試代碼，能夠將測試代碼當作一種語言（雖然它便不是）。
它有它的語法，及框架。

寫測試代碼

test.js

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

上面是一段很是簡單的測試代碼，這就是測試代碼的語法。
一個測試文件中應該包含一個或者多個describe塊，
一個describe塊應該包含一個或者多個it塊。
describe塊被稱爲測試套件，第2個參數是實際執行的函數。
it塊被稱爲測試用例，第2個參數是實際執行的函數。

assert模塊是nodejs的斷言庫，主要使用了過來判斷結果是否符合預期值，
好比 assert.equal(-1, [1, 2, 3].indexof('4')),
就是判斷[1, 2, 3].indexof('4')的值和-1是否相等，
相等就測試經過，不然不經過。
關於assert語法能夠參考這裏。
shouldjs就是對assert模塊的一個擴展。

運行測試代碼

上面的測試代碼如何運行呢，能夠經過測試框架，如mocha等來運行。
先安裝 npm install mocha -g,
而後在package.js中添加一條scripttest: mocha;
mocha默認會去執行相同目錄下中的test下的js文件，
也就是說將上面的js文件test.js放入package同目錄下的test文件夾下，mocha會默認執行。
執行npm run test，就能夠看到以下的結果。
![測試結果](http://zoucz.com/blogimgs/201...）

瀏覽器上運行測試代碼

經過mocha測試框架確實能運行測試代碼了，可是在終端去查看測試結果多少有些不方便，
能夠經過karma測試工具來實如今瀏覽器上運行測試代碼，
甚至能夠在瀏覽器上打斷點來運行測試代碼。
安裝karma npm install -g karma-cli，
而後在package.js中添加一條scriptkarma: karma start;
karma能夠經過karma init來初始化配置文件，
配置文件中能夠設置瀏覽器，測試代碼的使用框架，熱更新功能等等。
執行npm run karma後，能自動打開在karma配置文件中設置的瀏覽器，
以及在此瀏覽器上運行測試代碼。

持續集成

持續集成就是，每次源碼（如github上的）有更新，好比有人push了一段代碼，
持續集成工具就下載源碼，根據配置文件，執行相應的代碼（常常是測試代碼），
而後反饋執行結果。
travis對於開源項目是免費的,推薦使用。

1. Travis CI 只支持 Github，不支持其餘代碼託管服務。
2. 在Travis上添加想要持續集成的github源。
3. Travis CI須要有一個配置文件travis.yml,用來指定travis的行爲。

language: node_js
node_js:
  - '8'
before_install:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
install:
  - npm install -g karma
  - npm install
script:
  - npm run test

每當有代碼更新的時候，travis先獲取github對應的源碼，
而後一步步根據配置執行，before_install =>install => npm run test

剛涉及到前端測試，以上內容若有錯誤的地方，請不吝指正。