## 目標 建立一個 lesson7 項目，在其中編寫代碼。 main.js: 類似上文提到的 fibonacci 函數。 此函數的定義為?`int fibonacci(int n)` * 當 n === 0 時，返回 0；n === 1時，返回 1; * n > 1 時，返回?`fibonacci(n) === fibonacci(n-1) + fibonacci(n-2)`，如?`fibonacci(10) === 55`; vendor文件夾: 前端單元測試的環境。 vendor/tests.js 編寫針對前端腳本的測試用例 ## [](https://github.com/alsotang/node-lessons/tree/master/lesson7#知識點)知識點 1. 學習使用測試框架 mocha 進行前端測試 :?[http://mochajs.org/](http://mochajs.org/) 2. 了解全棧的斷言庫 chai:?[http://chaijs.com/](http://chaijs.com/) 3. 了解 headless 瀏覽器 phantomjs:?[http://phantomjs.org/](http://phantomjs.org/) ### [](https://github.com/alsotang/node-lessons/tree/master/lesson7#前端腳本單元測試)前端腳本單元測試 [lesson6](https://github.com/alsotang/node-lessons/tree/master/lesson6)?的內容都是針對后端環境中 node 的一些單元測試方案，出于應用健壯性的考量，針對前端 js 腳本的單元測試也非常重要。而前后端通吃，也是 mocha 的一大特點。 首先，前端腳本的單元測試主要有兩個困難需要解決。 1. 運行環境應當在瀏覽器中，可以操縱瀏覽器的DOM對象，且可以隨意定義執行時的 html 上下文。 2. 測試結果應當可以直接反饋給 mocha，判斷測試是否通過。 #### [](https://github.com/alsotang/node-lessons/tree/master/lesson7#瀏覽器環境執行)瀏覽器環境執行 我們首先搭建一個測試原型，只需要執行 ~~~ //f2e 是原型生成的目錄 mocha init f2e ~~~ mocha就會自動幫我們生成一個簡單的測試原型 ~~~ . ├── index.html ├── mocha.css ├── mocha.js └── tests.js ~~~ 其中 index.html 是單元測試的入口，tests.js 是我們的測試用例文件。 我們直接在 index.html 插入上述示例的 fibonacci 函數以及斷言庫 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中寫入對應測試用例 ~~~ var should = chai.should(); describe('simple test', function () { it('should equal 0 when n === 0', function () { window.fibonacci(0).should.equal(0); }); }); ~~~ 這時打開index.html，可以發現測試結果，我們完成了瀏覽器端的腳本測試(注意我們調用了?**window**?對象) [](https://box.kancloud.cn/2015-08-03_55bf0f18cf603.png) #### [](https://github.com/alsotang/node-lessons/tree/master/lesson7#測試反饋)測試反饋 mocha沒有提供一個命令行的前端腳本測試環境(因為我們的腳本文件需要運行在瀏覽器環境中)，因此我們使用phanatomjs幫助我們搭建一個模擬環境。不重復制造輪子，這里直接使用mocha-phantomjs幫助我們在命令行運行測試。 首先安裝mocha-phanatomjs ~~~ npm i -g mocha-phantomjs ~~~ 然后將index.html對應部分修改為 ~~~ <script> if (window.mochaPhantomJS) { mochaPhantomJS.run(); } else { mocha.run(); } </script> ~~~ 然后我們在命令行中運行 ~~~ mocha-phantomjs index.html ~~~ 結果展現是不是和后端代碼測試很類似? 你也可以直接在package.json中定義 ~~~ "scripts": { "test": "./node_modules/.bin/mocha-phantomjs vendor/index.html" }, ~~~ 將mocha-phantomjs作為依賴 ~~~ npm i mocha-phantomjs --save-dev ~~~ 直接運行 ~~~ npm test ~~~ 至此,我們實現了前端腳本的單元測試，基于 phanatomjs 你幾乎可以調用所有的瀏覽器方法，而 mocha-phanatomjs 也可以很便捷地將測試結果反饋到 mocha，便于后續的持續集成。