前端單元測試以及自動化構建入門

寫在開頭

本文涉及的知識點會比較廣，因此每一個知識點不會很深刻，都有有對象的資料和demo,須要讀者本身查漏補缺。學習最好的方法就是本身動手查閱資料的過程。但願這篇文章可以幫助到你。

所涉及的知識

• Node assert
• mocha
• should.js
• karma
• Travis CI

先了解兩個知識點

TDD

測試驅動開發是敏捷開發中的一箱核心實踐和技術，也是一種設計方法論。在開發項目以前，先編寫單元測試用例，基本思路是經過測試用例來推進整個項目開發，但也不只僅只是單純的測試工做，咱們依然能夠在整個項目的需求分析、設計以及質量控制中靈活運用。

BDD

行爲驅動其實在測試驅動開發上面的拓展，是着眼於想要實現的業務行爲，核心是設計，並引導整個團隊更好的前進。

Node assert的api你們本身看一下，仍是掌握其中幾個常常用到的，好比assert.strictEqual、assert.fail以及assert.throws

簡單講一下mocha

mocha是個測試框架工具，瀏覽器和Node環境均可以運行。 mocha的官網文檔寫的真的是，閱讀起來實在太痛苦了，可能做者喜歡這種流水式的寫法。

先來看一個簡單的例子，一下代碼的運行環境需求node,還須要全局安裝mocha。具體代碼能夠查看個人github裏的exercise1

var assert = require('assert')

  describe('#indexOf()', function () {
    it('should return -1 when the value is not present', function () {
      assert.equal(-1, [1, 2, 3].indexOf(4)) 
    })
  })

上面是其中一個測試用例，它能夠單獨執行，先引入一個斷言庫asset，斷言庫還有不少，好比chai;

基本寫法就一個describe塊包含至少一個it塊。

describe塊被稱爲"測試套件"(test suite),表示一組單元測試。第一個參數用來編寫描述用例的功能和結果，第二個參數實際執行的函數。

it塊被稱爲"測試用例"(test case),表示一個單獨的測試，第一個參數是測試用例的名稱，第二個參數是一個實際執行的函數。

mocha 基本用法
在控制檯經過一下語法運行腳本

mocha test/test.js

就會獲得以下結果：

mocha 命令後面能夠緊跟多個測試腳本的路徑

mocha url1 url2 url3

mocha也有屬於本身生命週期,看取名基本就明白意思了。

describe('hooks', function() {
  before(function() {
    //全部測試用例的統一前置動做
  });

  after(function() {
    //全部測試用例的統一後置動做
  });

  beforeEach(function() {
    // 每一個測試用例的前置動做
  });

  afterEach(function() {
    // 每一個測試用例的後置動做
  });
});

還有不少方法，具體能夠看下阮大神的mocha教程,更加通俗易懂，固然看官網文檔仍是最全面的。

should.js 簡讀

should.js的api就多了，我是沒有所有用過，平時用的最好的也就那麼幾個，這種鏈式寫法是否是有中JQ的感受。寫起來如行雲流水，真舒服。在環境運行是最多見到的就是明明裝了should模塊，卻報錯說cannot find module 'should',以下圖。心中有一萬隻草泥馬奔過，路罵，你是否是瞎呀。。。哈哈。小夥子不要急躁，所謂代碼虐我千百遍，我待代碼如初戀。找不到should模塊是有緣由的，通常嘗試下降些版本。畢竟外國鵀用的linux多，對於windows仍是支持沒那麼快。或者換個淘寶鏡像再從新npm下。也許就跑通了。

項目例子在這裏，下面展現部分代碼

var should = require('should');
var add = require('../lib/add');

describe('大數相加add方法', function () {

  it('字符串"42329"加上字符串"21532"等於"63861"', function () {
    add('9987', '987')
      .should.equal('10974')
  })

  it('"843529812342341234"加上"236124361425345435"等於"1079654173767686669"', function () {
    add('843529812342341234', '236124361425345435')
      .should.equal('1079654173767686669')
  })
})

單元測試實現的一個大數相加的功能，涉及的知識點仍是蠻多的。你們仔細解題仍是會有不少收穫的。至於哪些知識點，就靠你本身去挖掘了。

最後經過後以下圖所示：

karma是個什麼東東

karma是google angular團隊開源的產品，主要目的就是給開發人員提供一個高效的測試環境。就如同一個腳手架，你只須要設置簡單的配置便可，而後編寫測試代碼就能得到你想要的結果，是一個提升團隊生產力和創造力的強有力的工具。

安裝步驟

//選全局安裝karma-cli
npm install -g karma-cli

//而後在你的項目裏安裝karma
npm i karma -D

//安裝一些插件
npm i npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

接下里初始化karma

在上面項目的根目錄下使用下面命令

karma init

按照以下配置選擇配置項

1. Which testing framework do you want to use ? (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.conf.js的配置文件。咱們來看下幾個比較重要的配置項。

• frameworks

所依賴的測試工具，我這裏是用了mocha,你也可使用默認的 jasmine.

• files

項目中文件的本地地址，數組的形式展開，也能夠是服務器地址，這裏面的配置將會所有以js的形式經過script從瀏覽器里加載出來。放到頁面底部。

• browsers

所依賴的瀏覽器環境，通常是填寫Chrome,個人Chrome瀏覽器是須要填寫Chrome_travis_ci才行。並安裝karma-chrome-launcher插件。

• singleRun

默認是false,若是是true，運行karma start只會測試一次測試用例，而後返回結果並退出。

• autoWatch

默認爲true,實時監聽文件的修改，當有修改時就會重加加載測試用例，有點熱加載的意味。

經過下面命令跑起整個項目

karma start

你會發現瀏覽器自動打開了一個以下圖所示的頁面

而後點擊DEBUG按鈕，跳轉到另一個頁面，這時候打開控制檯，你就會看到一個配置加載好的頁面，這時候你就驚訝原來karma的設計思想是這樣的。

項目地址,最後要是運行成功，就會出現下面的結果。

Travis CI 的做用又是什麼。

咱們先了解下什麼持續集成

通俗點講，就是天天都要向老闆報告一天的工做狀況，而且還要反思總結。專業性點講就是天天將代碼集成到主幹。

• 優勢

一、快速發現錯誤，能夠說當日問題當日解決，不留隱患。
二、由於集成的頻繁，因此分支並不會大幅度偏離主幹。

若是想詳細解讀，請參考阮大神的文章

Travis CI就是一個持續集成的工具，而且集成了GitHub,可以自動化的構建和測試操做，而且對公有的倉庫free,這是極大的有利於開源項目的健康發展呀，咱們就能夠很方便，高效的維護開源項目

要使用這麼強大的功能，第一步是配置文件，在咱們項目的根目錄中建立一個.travis.yml文件。這個文件就包含了Travis CI須要用到的配置和指令。好比項目中經常使用的幾個配置。具體請自行查看

//編程語言所需的環境
language: node_js 
node_js:
- "10"
- "8"
//執行的腳本
script: node_modules/karma/bin/karma start karma.conf.js --single-run
//腳本運行前不要安裝的內容
before_install:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

項目中配置好.travis.yml文件後，提交代碼到遠程github倉庫，而後打開travis-cli上和你的github已經關聯好的倉庫,以下圖所示：

頁面上那個taggle按鈕就是是否開啓自動化構建，這時候把exercise3項目打開，並點擊進去詳情，就會看到一個已經構建成功的項目。若是想從新構建也能夠點擊more options選擇tiragger build,見下圖：

到這裏，一個簡單的項目算是構建成功了。更多深刻的學習，請持續關注。

若是大神您想繼續探討或者學習更多知識，歡迎加入QQ或者微信一塊兒探討：854280588