ポジローぽけっと

昨日より今日、今日より明日を信じて、トライトライ

mocha, chaiを使ってJavaScriptのテストがしたかったら

javascript

参考

以下をとっても参考にしました。感謝！

プロジェクト構成

以下のようにプロジェクトを構成する。（手元で作成するプログラムは後述する。

.
└── 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>

モカチャイモカチャイ