mocha, chaiを使ってJavaScriptのテストがしたかったら
参考
以下をとっても参考にしました。感謝!
- http://d.hatena.ne.jp/aike/20140801
- http://qiita.com/w650/items/adb108649a0e2a86f334
- http://qiita.com/y_hokkey/items/f73ea6b3d5f6902396b6
プロジェクト構成
- 以下のようにプロジェクトを構成する。(手元で作成するプログラムは後述する。
. └── test ├── mocha.css// webからダウンロード ├── mocha.js// webからダウンロード ├── chai.js// webからダウンロード ├── includemochachai.js// 手元で作成、テストを実行する関数 ├── test.js// 手元で作成、テストの内容を記述 └── test.html// 手元で作成、テスト対象
サンプルプログラム
Pointはテスト環境とテスト対象を分離したこと。
- テスト対象のtest.htmlではincludemochachai.jsの読み込みとtestMocha(“test.js”)を実行するだけにした。
- mocha.css, mocha.js, chai.jsはtestMocha()を呼び出さない限り、ブラウザ側に読み込ませない。
includemochachai.js
function testMocha(testScript){ console.log("test start"); var body = document.getElementsByTagName('body')[0]; var divMocha = document.createElement('div'); divMocha.id = "mocha"; body.appendChild(divMocha); var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.rel = "stylesheet"; link.href= "mocha.css"; head.appendChild(link); var scripts = ['mocha.js', 'chai.js', testScript]; var i = 0; (function appendScript(){ if(scripts[i] !== undefined){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scripts[i]; head.appendChild(script); script.onload = appendScript; i += 1; }else{ testMochaResultFloating(); } })(); console.log("test end"); } function testMochaResultFloating(){ //// テストの出力をウィンドウっぽく表示 $('#mocha') .css({ position: 'absolute', top: 10, right: 10, width: 400, bottom: 20, margin: 0, paddingTop: 50, backgroundColor: '#ddd', boxShadow: '8px 8px 8px rgba(0,0,0,0.3)', zIndex: 1000 }); $('#mocha-stats') .css({ position: 'absolute', top: 5, left: 0, width: 400, height: 40, backgroundColor: '#ddd', zIndex: 1000 }); }
- test.js
$(function() { //// テストの設定 chai.should(); mocha.setup('bdd'); ///// テスト本体 describe('メッセージ出力のテスト1', function() { it ('引数で指定したメッセージが出力されること', function() { say('Hello, world!'); $('#message').text().should.equal('Hello, world!'); }); it ('非同期でもメッセージが出力されること', function(done) { setTimeout(function() { say('こんにちはこんにちは!!'); $('#message').text().should.equal('こんにちはこんにちは!!'); done(); }, 100); }); }); //// テスト実行 mocha.checkLeaks(); mocha.run(); });
- test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>minimum javascript test example</title> <!-- 汎用ライブラリ --> <script src="jquery.js"></script> <script src="includemochachai.js"></script> <script type="text/javascript"> function say(s){ $('#message').text(s); } function init(){ testMocha("test.js"); } $(init); </script> </head> <body> <div id="message"></div> <!--以下はtestMocha呼び出し時に生成--> <!--<div id="mocha"></div>--> </body> </html>
モカチャイモカチャイ