JavaScript のテストといえば, JSUnit が有名です。
JSUnit は, JUnit とに似たような, Matcher が利用できたりしてわかりやすいのですが,
開発やメンテナンスがストップしており, またWebプロジェクトに組み込まないと利用できないことが
ちょっと残念です。
JUnit のページでも紹介があるように, 今後は Jasmine というフレームワークを開発していくようです。
※Matcher : ここでは, assertEqual などの, verify のための関数
このJasmine ですが Ruby のプロジェクトでも利用できるようです。
ですが, 今回はWebプロジェクトを使用することなく, pure JavaScript のテストができる Standalone バージョンを使用しましょう。(ソースは, Mavenで)
http://pivotal.github.com/jasmine/
から, jasmine-standalone-x.x.x ( 執筆時点で 1.0.2 ) をダウンロード解凍しましょう。
準備は完了です。
解凍したフォルダ構成は, 以下のようになっています
jasmine
|- lib : テストのcore ライブラリ
|- spec : テストコード(サンプルが入っている)
|- src : ソース(サンプルが入っている)
|- SpecRunner.html : ここにテストのコード(JavaScript コード) を実行できるように記述します
SpecRunner.html をWebブラウザで立ち上げると, テストが実行されます。
初期状態で実行すると, サンプルテスト
src/Player.js src/Song.js のテスト (実際のテストコードは, spec/PlayerSpec.js)
が実行されます。
実行結果は, Webブラウザ上で表示されます。
新たにテストを入れるときは, テストしたいものを src フォルダの中に入れ,
spec コードに実際のテストを書く。
最後に, 実行/結果表示用の SpecRunner.html を編集し, テストが実行されるように書きます。
では, 実際にサンプルを取っ払って, 自作のJavaScript のテストをしてみましょう。
spec/Firsttest.js と, specの中に, Firsttest.js というjavascript を入れます
Fisttest.js
describe('Test', function()
{
it('First Test', function()
{
var a = 3;
var b = 3;
expect(a+b).toEqual(6);
});
});
テストのJavaScript には, このような形で書きます。
describe ( 'クラスの説明', function()
{
it ( 'First Test', function()
{
var a = 3;
var b = 3;
expect(a + b).toEqual(6);
});
});
describe はクラスの役割です。説明と, function()を入れます
it の中に, 実際のテストメソッドの説明と, メソッドを入れます。
it の中には, matcher である expect().toEqual(); JUnit でいう assertXXXがあります。
expect ( 実際の値).toEqual(期待値); という書き方です。
次に, このテストが実行されるように, SpecRunner.html を編集します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Test Runner</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.2/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.0.2/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.0.2/jasmine-html.js"></script>
<!-- include source files here... -->
<!-- include spec files here... -->
<script type="text/javascript" src="spec/FirstTest.js"></script>
</head>
<body>
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>
上の方は, テストを実行させるのに必要なコアJavaScritp ライブラリを入れています。
<!-- include source files here... --> 以下に, テストしたいソースを(クラスや, テストしたいメソッドなど)
<!-- include spec files here... --> 以下に, テストメソッド(先ほどのmatcherを含んだもの)
を入れます。
終了したら, SpecRunner.html をダブルクリックして, Webブラウザを開きます。
結果が表示されます。describe で記述したメッセージや, it で記述したメッセージも階層をなして
表示されます。 右上のpassやskip チェックボックスをクリックすると詳細が表示されます。
(画像は詳細表示です)
このように, Jasmine は, ダウンロードしたフォルダ構成そのままで実行可能なテストを作成します。
今回, このテストはTomcat プロジェクトや, Web動的プロジェクトなどと一切結びつけていません。
つまり, 実際のWebサーバー上での動作確認はしていません。というように, Webサーバに置くことなく, 純なJavaScriptのコードのテストができます。
次回は, Matcherの使い方や, テストの書き方を細かく見ていきましょう。
0 件のコメント:
コメントを投稿