片手間のJavaScriptでもテストがしたい！

テストしたくないでござる。テストしたくないでござる。
いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム本体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。
　
これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの？いらないの？とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがすごく遠い。
　
そんなわけで、インストール不要でconsole.logのすごい版みたいな感じにプリントデバッグおじさんでも気軽に使える、シンプルなJavaScriptテストのサンプルを作ってみました。
　
https://github.com/aike/MinimumJsTest
　
仕様はこんな感じ。
・ウェブブラウザ上でテストを実施
・Mocha + Chai を使用
・Node.js、npm、Webサーバ、その他ツールのインストール不要
・Node.jsに依存する機能・ライブラリは使えません
　
調べてみると、とりあえず最低限 mocha.js、mocha.css、chai.js の3ファイルだけあればブラウザを使ってテストができそうです。なので、外部ライブラリで使うのはそれらとjQueryのみとします。
　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>minimum javascript test example</title>

    <!-- 汎用ライブラリ -->
    <script src="jquery-2.0.3.min.js"></script>

    <!-- テストフレームワーク -->
    <link rel="stylesheet" href="test/mocha.css" />
    <script src="test/mocha.js"></script>
    <script src="test/chai.js"></script>

    <!-- テスト対象プログラム -->
    <script src="main.js"></script>

    <!-- テスト本体 -->
    <script src="test/test.js"></script>
</head>

<body>
    <!-- テスト結果出力用エレメント -->
    <div id="mocha"></div>

    <!-- アプリ本体のエレメント -->
    <div id="message"></div>
</body>
</html>

　
テスト対象の関数はたとえばこんな感じ。

// main.js
//// 引数で受け取った文字列をid="message"のエレメントに挿入する関数
function say(s) {
    $('#message').text(s);
}

　
それに対するテストコードはこんな感じ。

// test.js
$(function() {

//// テストの設定
chai.should();
mocha.setup('bdd');

///// テスト本体
describe('メッセージ出力のテスト', 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.run();

});

　
実行結果

f:id:aike:20140801195755p:image

　
テスト実行用アプリは必要に応じて後からちゃんと作ったりするとして、とりあえずざっくり書いたターゲットアプリのindex.htmlでテストを読み込んで実行するような利用イメージです。
　
ターゲットアプリのレイアウトが崩れて問題があるなら、こんなコードを追加するとテスト結果のウィンドウがオーバーラップしてるみたいな表示になります。 
//// テストの出力をウィンドウっぽく表示 
$('#mocha')
.css({
    position: 'absolute',
    top: 10,
    right: 20,
    width: 400,
    bottom: 20,
    margin: 0,
    paddingTop: 50,
    overflow: 'scroll',
    backgroundColor: '#ddd',
    boxShadow: '8px 8px 8px rgba(0,0,0,0.3)',
    zIndex: 1000
})
setTimeout(function() {
    $('#mocha-stats')
    .css({
        position: 'absolute',
        top: 5,
        left: 2,
        width: 400,
        height: 40,
        backgroundColor: '#ddd',
        zIndex: 1000
    });
}, 100);

　
実行結果

f:id:aike:20140801195756p:image

　
おしまい