テストしにくいことに定評のあるjavascriptさん
特にDOM操作が入ったりするとテストするのが非常に厄介
今回はmochaを使ってそんなjavascriptさんの単体テストをどうにか実現したお話です
ディレクトリ構成
とりあえずサンプルなのでこんな感じで
sample.test.htmlがテストを実行するファイルです。
project_root/
├-node_modules
├-public
| └-js
| └sample.js
├-tests
| └sample.test.html
└-package.json
テスト対象
今回は簡単な例として下記のようなソースをテストするとします
入力された値が奇数ならtrue、偶数ならfalseを返す簡単な関数です
sample.js
function isOdd(inputNum){
return inputNum % 2 === 1;
}
パッケージインストール
最低限必要なのはテストフレームワークのmocha
あとpower-assertもテスト失敗時に得られる情報が多くなるので入れておく
テスト用なのでdevDependenciesに保存
npm install mocha power-assert --save-dev
テストコード作成
sample.test.html
<!DOCTYPE html>
<html>
<head>
<title>sample test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../node_modules/mocha/mocha.css" />
<!--テストフレームワーク-->
<script src="../../node_modules/mocha/mocha.js"></script>
<script src="../../node_modules/power-assert/build/power-assert.js"></script>
<!--テスト対象のスクリプト-->
<script src='../public/js/sample.js'></script>
</head>
<body>
<!-- ここにテスト結果が表示される -->
<div id="mocha">
</div>
<script>
// setup mocha
mocha.setup('bdd');
mocha.reporter('html');
describe("sample test", function(){
it("should return true", function(){
assert(isOdd(7) === true);
});
it("should return false", function(){
assert(isOdd(6) === false);
});
});
// run test
mocha.run();
</script>
</body>
</html>
scriptタグのsrc属性を全て相対パスで書いているのは、直接htmlファイルを開くだけでもテスト結果がわかるようにです。
テスト結果はこんな感じ
今回は使ってませんが、jQueryを使ったDOM操作とかもhtmlに必要な要素を足せばできます。
この次は今回作ったテストを自動で実行するようにします