JavaScript テストフレームワーク『Mocha』をブラウザ上で使う方法

phi phi on Node.js, test

Node.js6連投. 第6弾!

前回に引き続き Mocha の使い方についてのエントリーです.

今回はブラウザ上, つまりクライアント側で Mocha を使う方法について解説します. 何もインストールする必要がなく, dom 系のテストも出来るのでオススメです!!

mocha in browser

Code

test.html

テストプログラムの html 部分です.

流れ

  • mocha.js と macha.css, jquery.js を読み込む
  • body に <div id="mocha"></div> を記述
  • mocha.setup('bdd'); を実行
  • テストコードを記述. 今回は test.js に書いています.
  • mocha.run(); を実行
<html>  
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="https://raw.github.com/visionmedia/mocha/master/mocha.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="https://raw.github.com/visionmedia/mocha/master/mocha.js"></script>
        <script>
            mocha.setup('bdd');
        </script>
        <script src="test.js"></script>
        <script>

            var assert = function(expr, msg) {
                if (!expr) throw new Error(msg || 'failed');
            };

            assert.equal = function(a, b, msg) {
                if (a !== b) throw new Error(msg || ('failed : '+a+','+b));
            };

            $(function() {
                mocha.run();
            });

        </script>
    </head>
    <body>
        <div id="mocha"></div>
    </body>
</html>  

test.js

テストコードは前回と同じです.

describe('Number', function() {  
    describe('calc', function() {
        it('add', function() {
            assert(4+8 == 12);
        });
        it('sub', function() {
            assert(4-8 == -4);
        });
        it('mul', function() {
            assert(16*2 == 32);
        });
        it('div', function() {
            assert(8/2 == 4);
        });
    });
});

describe('Array', function() {  
    describe('#indexOf()', function() {
        it('should return -1 when the value is not present', function() {
            var arr = [1, 2, 3];
            assert(arr.indexOf(3) == 2);
            assert(arr.indexOf(5) ==-1);
            assert(arr.indexOf(0) ==-1);
        });
    });
});

Book

唯一? の JavaScript のテスト駆動について扱っている本です.

JavaScript についてある程度理解していないと読むのは難しいですが, TDD についてしっかり学ぶことができるので読む価値ありです!!

テスト駆動JavaScript

Reference

参考にしたサイト

ライブラリを作る以上, テストコードを書くクセをつけないとなぁ~...