(JS)JSのテスト mocha + chai - ブラウザ編
mocha ，モカ！コーヒーか！お前もか！ chai， チャイ！茶か！お前もか！
はい，JavaScriptにおけるテストについて書きます． テストフレームワークには「mocha」，アサーションライブラリに「chai」を使用しました． 採用理由に特別な理由はなく，ググった結果です． ただし，ググっても日本語ではあまり十分な情報はなかったりなのでエントリとして書くことにしました．
今回はブラウザでのmocha + chai導入について．
mocha
mocha http://mochajs.org/
chai
ブラウザテストへの導入
Node.jsをインストールしましょう． HomeBrewなどでインストールするのがよいでしょう．
npmを使用します． (node package manager)
ソースコードやテストコードを格納するテストディレクトリをこさえます． mkdir MochaTest cd MochaTest
package.jsonファイルを作成します． (まだNodeに詳しくないので詳細わからずですが．．．)
npm install すると，mochaとchaiがダウンロードされます． node_modulesディレクトリが作成されその中にモノがあります．
テスト用htmlファイルを作成します． testディレクトリを掘って配置すると整理ができてよいでしょう． ファイルのロード順は以下の通りが良いと思います．
- ファイルをブラウザで開くとテストしてくれます．
{
"name": "MochaTest",
"version": "1.0.0",
"description": "Mocha+Chai Test",
"dependencies" : {
"mocha" : "*",
"chai" : "*"
}
}
HTMLは以下の様に実装します．
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Mocha+Chai</title>
<meta charset="utf-8">
<!-- TODO mocha.cssをロードする -->
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
</head>
<body>
<!-- TODO mochaがテスト結果を書いてくれる場所を用意する -->
<div id="mocha"></div>
<!-- TODO mochaをロードする -->
<script src="../node_modules/mocha/mocha.js"></script>
<!-- TODO chaiをロードする -->
<script src="../node_modules/chai/chai.js"></script>
<!-- TODO mochaのセットアップ -->
<!-- tddスタイルかbddスタイルかをセットする -->
<script>
mocha.setup('bdd');
</script>
<!-- TODO ソースコード（テスト対象のコード） -->
<script src="../src/Source.js"></script>
<!-- TODO テストコード -->
<script src="../test/Test.js"></script>
<!-- TODO mochaにテストしてもらう -->
<script>
mocha.run();
</script>
</body>
</html>
mocha,setup()とmocha.run()は，テストコードファイル内に書く方もいるかもですが，外に出しておくと，テストコードをコマンドラインでテストできるので良いです． 開発当初はコマンドラインベースでテストする方がラクですし． 資源は「あいそもーふぃっく（isomorphic）」である方が良いですし．
isomorphic サバクラ両方で動く JavaScript の大規模開発を行うために
