JSでテストファーストしたかったので、QUnitを試してみました。QUnitを使えば、とても簡単にJavaScriptのテストスイートを作ることができ、オススメです。
てっとり早く試す
インタネットにつながる環境であれば、てっとり早くQUnitを試せます。
QUnitのページに行って、View Sourceタブに表示されているHTMLをコピペしてローカルに保存します*1。このHTMLをブラウザで開けば、サンプルのテストが走ります。4つのテストがあって、4つ目だけfailed(赤文字表示)となればうまく動いてます。
QUnitでは、このようにブラウザでテストの結果を確認します。緑帯が表示されればOKで、赤帯が表示されればNGです。
もうちょっとまともに使う
インストール
最初の例ではネットワーク上のリソースを使ってましたが、まともに使うときはローカルにファイルを揃えましょう。
- HTMLを用意 (「てっとり早く試す」を参照)
- jQuery をDL し、jsファイルを設置
- testrunner.js をDL し、jsファイルを設置
- testsuite.cssをDL し、cssファイルを設置
- 1. のHTMLの scriptタグとlinkタグを編集し、 2、3、4 で設置したjsとcssを読むようにする
例
こんな感じです。SCRIPTタグの中身は、適時外部のjsにした方がベターです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>QUnitのテストのサンプル</title> <link rel="stylesheet" href="testsuite.css" type="text/css" media="screen" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="testrunner.js"></script> <script> /* テストしたいコード(1)。普通は外部のJSのはず。 */ function sum(n1, n2){ return n1 + n2; } function even(n){ return n % 2 == 0; } </script> <script> /* テストしたいコード(2)。普通は外部のJSのはず。 */ function getTestValue(){ return document.getElementById("test-value").innerHTML; } </script> <script> /* テストコード(1)。外部JSにするとよい */ module("Module1"); test("test sum() function", function () { expect(3); equals(sum(2,3), 5, "2+3"); equals(sum(4,0), 4, "4+0"); equals(sum(1,-5), -4, "1-5"); }); test("test even() function", function () { expect(3); ok(! even(1), "1 is odd"); ok(even(2), "2 is even"); ok(even(0), "0 is even"); }); </script> <script> /* テストコード(2)。外部JSにするとよい */ module("Module2"); test("test getting value", function () { expect(1); equals(getTestValue(), "TEST"); }); </script> </head> <body> <h1>QUnitのテストのサンプル</h1> <h2 id="banner"></h2> <h2 id="userAgent"></h2> <ol id="tests"></ol> <div id="main" style="display: none;"> ここはテストに使うHTML。毎回リセットされる。 <span id="test-value">TEST</span> </div> </body> </html>
