javascript--給你的JS代碼添加單元測試

時間 2019-12-06

原文原文鏈接

經過測試框架爲JavaScript應用添加測試，從而保證代碼的高質量。這裏的筆記例子應用在jaywcjlove/validator.js中。javascript

安裝

用到三個工具chai(斷言工具)，mocha(測試框架)，mocha-phantomjs(客戶端運行mocha試驗在命令行測試經過)，先在你的項目中安裝這三個工具css

# 建立一個目錄進入目錄 $ mkdir test-demo && cd test-demo # 初始化建立一個 package.json 文件，運行這個命令自動建立 $ npm init # 用管理員權限，安裝三個工具 # --save-dev 參數會將這三個工具做爲依賴存入packge.json中 $ sudo npm install chai mocha mocha-phantomjs --save-dev

注意:html

mocha 這個工具能夠全局安裝 npm install -g mochajava
本例子使用的方法沒有全局安裝mochanode
你的電腦必須有Nodegit
此例子是我在Mac OS x環境弄出來的，其它平臺不作解釋github

測試應用

首先你要寫一個你須要測試的 js 例如：我在 jaywcjlove/validator.js 中測試我個人 dist/validator.js js。在test-demo/test 目錄中創建一個validators.html 的HTMLweb

<!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>

應用說明

在這個例子中引用了了幾個個必要的文件npm

mocha.css 這個是你的測試用例在瀏覽器中查看須要引用這個樣式json
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 登陸此網站(有可能你要FQ才能打開這網站)
4）添加你的項目

README.md 中顯示你的狀態

只要在 README.md 中引用 travis-ci.org 提供的狀態圖片便可。

添加項目

選擇你的項目

獲取狀態圖片

不細說，圖文....

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。