通過測試框架為JavaScript應用添加測試，從而保證代碼的高質量。這里的筆記例子應用在jaywcjlove/validator.js中。
安裝
用到三個工具chai(斷言工具)，mocha(測試框架)，mocha-phantomjs(客戶端運行mocha試驗在命令行測試通過)，先在你的項目中安裝這三個工具
# 創建一個目錄進入目錄 $ mkdir test-demo && cd test-demo # 初始化創建一個 package.json 文件，運行這個命令自動創建 $ npm init # 用管理員權限，安裝三個工具 # --save-dev 參數會將這三個工具作為依賴存入packge.json中 $ sudo npm install chai mocha mocha-phantomjs --save-dev注意:
-
mocha這個工具可以全局安裝npm install -g mocha -
本例子使用的方法沒有全局安裝
mocha -
你的電腦必須有
Node -
此例子是我在
Mac OS x環境弄出來的，其它平台不做解釋
測試應用
首先你要寫一個你需要測試的 js 例如： 我在 jaywcjlove/validator.js 中測試我我的 dist/validator.js js。在test-demo/test 目錄中建立一個validators.html 的HTML
<!DOCTYPE html> <html> <head> <title>單元測試</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../node_modules/mocha/mocha.css" /> </head> <body> <div id="mocha"></div> <script type="text/javascript" src="../dist/validator.js"></script> <script type="text/javascript" src="../node_modules/chai/chai.js"></script> <script type="text/javascript" src="../node_modules/mocha/mocha.js" ></script> <script>mocha.setup('bdd')</script> <script src="unit/validators.js"></script> <script> if (window.mochaPhantomJS) { mochaPhantomJS.run(); } else { mocha.run(); } </script> </body> </html>應用說明
在這個例子中引用了了幾個個必要的文件
-
mocha.css這個是你的測試用例在瀏覽器中查看需要引用這個樣式 -
chai.js這個是 mocha 的強大的斷言工具 -
mocha.js這個是個測試框架，讓你用很好的方式寫測試用例 -
../dist/validator.js這個是你要測試的js -
unit/validators.js這個是你的測試腳本代碼
下面這段 js 判斷使用 mocha-phantomjs 這個框架。
if (window.mochaPhantomJS) { mochaPhantomJS.run(); } else { mocha.run(); }斷言庫的用法
mocha.setup('bdd') 使用不同的風格展示，有三個參數可選（bdd|tdd|exports）。基礎的代碼都復制完成之后，開始寫測試用例，在test-demo/test/unit/ 目錄中建立一個測試腳本。例如我叫它validators.js。你為了區分它可以在后面添加一個 test的后綴，如validators.test.js 用來表示測試；
var expect = chai.expect; var assert = chai.assert; var v = new Validator(); describe("validators", function() { it("isEmail() 郵箱驗證", function() { // 斷言 expect( v.isEmail('d.s.s.d@qq.com.cn') ).to.be.true; expect( v.isEmail('d.s-s.d@qq.com.cn') ).to.be.true; expect( v.isEmail('wowo.o@qq.com') ).to.be.true; expect( v.isEmail('wowo@123.sd') ).to.be.true; expect( v.isEmail('wowo@123.23') ).to.be.true; expect( v.isEmail('wowo.oqqcom') ).to.be.false; expect( v.isEmail('wowo@123') ).to.be.false; expect( v.isEmail('wowo@asdf.中國') ).to.be.false; expect( v.isEmail('wowo@中國.com') ).to.be.false; expect( v.isEmail('中@qq.com') ).to.be.false; }); it("isIp() IP驗證", function() { expect( v.isIp('01.01.01.0') ).to.be.true; expect( v.isIp('192.168.1.1') ).to.be.true; expect( v.isIp('192.168.23.3') ).to.be.true; expect( v.isIp('192.168.23.3.32.1') ).to.be.true; expect( v.isIp('192') ).to.be.false; expect( v.isIp('192.168.1.1233') ).to.be.false; expect( v.isIp('192.168.1324.123') ).to.be.false; }); it("isPhone() 手機號碼驗證", function() { expect( v.isPhone('13611779473') ).to.be.true; expect( v.isPhone('+8613611779473') ).to.be.true; expect( v.isPhone('+23613611779473') ).to.be.true; }); });chai.expect 和 chai.assert其實是兩種不同的風格如下面，具體斷言提供的接口可看官網 http://chaijs.com 或者去看看我做的中文筆記chai 中文手冊
assert.equal( v.isPhone('13611779473') ,true) expect( v.isPhone('13611779473') ).to.be.true; 准備工作都做完了，現在就是，怎么跑測試的步驟來了。
Mocha的基本用法
我們在 package.json 文件中插入一段命令行。
{
"scripts": { "test": "mocha-phantomjs test/validators.html", }, }這個時候你可以使用命令npm test跑一下看一下測試結果:
validators
✓ isEmail() 郵箱驗證
✓ isIp() IP驗證
✓ isPhone() 手機號碼驗證
3 passing (5ms)這里使用了mocha-phantomjs 所以在命令行中稍微有點慢，中間加載了 webkit 內核，所以為了方便，我們可以直接將test/validators.html 頁面在瀏覽器中打開就可以看到測試結果了。
在Github中顯示的測試狀態
https://travis-ci.org，https://circleci.com這兩個網站都是持續集成測試的自動測試系統。如果你使用travis-ci.org作為你的自動測試系統，配置起來非常方便，其實這倆貨使用起來都很方便。
travis-ci.org
1）在根目錄建立一個 .travis.yml，配置CircleCI
language: node_js
node_js:
- "4"2）提交到你的倉庫中。
3）使用 Github 登錄此網站(有可能你要翻牆才能打開這網站)
4）添加你的項目
README.md 中顯示你的狀態
只要在 README.md 中引用 travis-ci.org 提供的狀態圖片即可。
添加項目
選擇你的項目
獲取狀態圖片
不細說，圖文....