Node.js 7:《瀏覽器端測(cè)試：mocha，chai，phantomjs》

目標(biāo)

建立一個(gè) lesson7 項(xiàng)目，在其中編寫代碼。

main.js: 類似上文提到的 fibonacci 函數(shù)。

此函數(shù)的定義為 int fibonacci(int n)

• 當(dāng) n === 0 時(shí)，返回 0；n === 1時(shí)，返回 1;
• n > 1 時(shí)，返回 fibonacci(n) === fibonacci(n-1) + fibonacci(n-2)，如 fibonacci(10) === 55;

vendor文件夾: 前端單元測(cè)試的環(huán)境。

vendor/tests.js 編寫針對(duì)前端腳本的測(cè)試用例

知識(shí)點(diǎn)

1. 學(xué)習(xí)使用測(cè)試框架 mocha 進(jìn)行前端測(cè)試 : http://mochajs.org/
2. 了解全棧的斷言庫 chai: http://chaijs.com/
3. 了解 headless 瀏覽器 phantomjs: http://phantomjs.org/

前端腳本單元測(cè)試

lesson6 的內(nèi)容都是針對(duì)后端環(huán)境中 node 的一些單元測(cè)試方案，出于應(yīng)用健壯性的考量，針對(duì)前端 js 腳本的單元測(cè)試也非常重要。而前后端通吃，也是 mocha 的一大特點(diǎn)。

首先，前端腳本的單元測(cè)試主要有兩個(gè)困難需要解決。

1. 運(yùn)行環(huán)境應(yīng)當(dāng)在瀏覽器中，可以操縱瀏覽器的DOM對(duì)象，且可以隨意定義執(zhí)行時(shí)的 html 上下文。

2. 測(cè)試結(jié)果應(yīng)當(dāng)可以直接反饋給 mocha，判斷測(cè)試是否通過。

瀏覽器環(huán)境執(zhí)行

我們首先搭建一個(gè)測(cè)試原型，只需要執(zhí)行

//f2e 是原型生成的目錄
mocha init f2e

mocha就會(huì)自動(dòng)幫我們生成一個(gè)簡(jiǎn)單的測(cè)試原型

.
├── index.html
├── mocha.css
├── mocha.js
└── tests.js

其中 index.html 是單元測(cè)試的入口，tests.js 是我們的測(cè)試用例文件。

我們直接在 index.html 插入上述示例的 fibonacci 函數(shù)以及斷言庫 chaijs。

<div id="mocha"></div>
<script src='chai.js'></script>
<script>
  var fibonacci = function (n) {
    if (n === 0) {
      return 0;
    }
    if (n === 1) {
      return 1;
    }
    return fibonacci(n-1) + fibonacci(n-2);
  };
</script>

然后在tests.js中寫入對(duì)應(yīng)測(cè)試用例

var should = chai.should();
describe('simple test', function () {
  it('should equal 0 when n === 0', function () {
    window.fibonacci(0).should.equal(0);
  });
});

這時(shí)打開index.html，可以發(fā)現(xiàn)測(cè)試結(jié)果，我們完成了瀏覽器端的腳本測(cè)試(注意我們調(diào)用了 window 對(duì)象)

測(cè)試反饋

mocha沒有提供一個(gè)命令行的前端腳本測(cè)試環(huán)境(因?yàn)槲覀兊哪_本文件需要運(yùn)行在瀏覽器環(huán)境中)，因此我們使用phanatomjs幫助我們搭建一個(gè)模擬環(huán)境。不重復(fù)制造輪子，這里直接使用mocha-phantomjs幫助我們?cè)诿钚羞\(yùn)行測(cè)試。

首先安裝mocha-phanatomjs

npm i -g mocha-phantomjs

然后將index.html對(duì)應(yīng)部分修改為

<script>
  if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
  else { mocha.run(); }
</script>

然后我們?cè)诿钚兄羞\(yùn)行

mocha-phantomjs index.html

結(jié)果展現(xiàn)是不是和后端代碼測(cè)試很類似