mochaでフロントエンドのテスト

Node.js

JavaScript Advent Calendar 2011 (フレームワークコース)6日目です。この前のエントリーで予告したとおりmochaを使ったフロントエンドでのテストについて書きます。ちなみにこの前エントリー書いたときは0.2.0だったんですけどすでに0.3.2です。

必要なファイルを読み込んでこんな感じで書きます。jQueryに依存してるみたいなのでjQueryも読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mocha sample</title>
<link rel="stylesheet" href="mocha.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="mocha.js"></script>
<script>
mocha.setup('bdd');
window.onload = mocha.run;

// ここからテスト
describe("mochaのテスト", function() {
  it("1 + 1 は2になること", function() {
    // ここにテスト
  });
});
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>

問題点はmocha自体にアサーションの機能がないのでアサーションの機能を別で用意する必要があることです。ちなみにここにサンプル的なのがあって
https://github.com/visionmedia/mocha/tree/master/test/browser

ここではこんな感じでassertを簡易的に定義してるけどこれだと実際使うのはちょっと微妙。

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

何かいい感じのがないかと思ったんだけど、見つからなかったんでとりあえずnode.jsのassertを適当に使えるようにしてみた。
https://gist.github.com/1433658

とりあえずmochaで定義されてるrequireを使って定義したのでNode.jsのほうと同じように使える。window.assertとかにしたほうがいいんだろうか。

var assert = require("assert");
describe("mochaのテスト", function() {
  it("1 + 1 は2になること", function() {
    assert(1 + 1, 2);
  });
});

テスト結果はこんな感じ。テストのとこクリックするとテストのコード出てきていい感じ。
http://dl.dropbox.com/u/336104/demo/mocha/index.html

あとfailとかpendingはこんな感じになる。
http://dl.dropbox.com/u/336104/demo/mocha/index2.html

grepはクエリストリングで渡せる。
http://dl.dropbox.com/u/336104/demo/mocha/index2.html?grep=fail

アサーションの問題だけどうにかすればサーバーサイドと同じコードで書けるのでよさげですね。