日頃からJavascriptで開発をしているのにも関わらずあまりテストを書かないので、ここは本格的にテストを書こうと調べてみました。JavascriptのテストフレームワークといったらJsUnitなのかなーと思っていたが、調べてみると結構いろんな種類のテストフレームワークがあったりして、その中で得に人気なのかどうやらJasmineらしい。
Jasmine ～ JavaScript Test フレームワーク より引用:
今回は, JavaScript のテストを行うためのフレームワークJasmine の紹介です。
JavaScript のテストといえば, JSUnit が有名です。
JSUnit は, JUnit とに似たような, Matcher が利用できたりしてわかりやすいのですが,
開発やメンテナンスがストップしており, またWebプロジェクトに組み込まないと利用できないことが
ちょっと残念です。
JUnit のページでも紹介があるように, 今後は Jasmine というフレームワークを開発していくようです。
なるほど、JsUnitはかつて人気だったテストフレームワークだったけども開発ストップしてて古くなっており、今はJasmineということなのか。
とりあえずやってみた
しかし、初めて触るライブラリというのはどうにもこうにも敷居が高い。少しずつ調べてみる。なんにせよまずはインストールだ。
公式ページ: http://pivotal.github.com/jasmine/
公式ページ(の翻訳): http://mitsuruog.github.com/jasmine/
ダウンロード: https://github.com/pivotal/jasmine/downloads
ダウンロードしたファイルは、jasmine-standalone-1.3.1.zip です。
二種類の使い方
Jasmineは使い方が二種類あるそうです。
- standalone
- rubygems + rake
standaloneはRubyを使わずにJavascriptだけで使える環境、 rubygems + rake はテストを自動化させたい場合はこちらを選ぶ。ただ、standaloneでもPhantomJSを使えば自動化できるようです。
ここではstandaloneについて実験
rubygemsを使った方法だと、テストを実行させるためのHTMLを自動生成してくれて大変便利らしいのですが、ここでは導入としてstandaloneを使ったやりかたについて試してみたいとおもいます。
ディレクトリの構造はこのようになっています。
.
├── SpecRunner.html
├── lib
│ └── jasmine-1.3.1
│ ├── MIT.LICENSE
│ ├── jasmine-html.js
│ ├── jasmine.css
│ └── jasmine.js
├── spec
│ ├── PlayerSpec.js
│ └── SpecHelper.js
└── src
├── Player.js
└── Song.jsCode language: CSS (css)
これをWebサーバーにあげて、SpecRunner.html を開いてみます。
なるほど、わからん。
見た感じ、上の5つの丸がテストの成功か失敗かを表し、下段の黒字がテストスイート(カテゴリ分け)、緑の文字がテストケースという具合のようです。
Specの意味
「仕様」 = テストケース
Suiteの意味
「一式(分類)」 = テストスイート
SpecRunner.htmlの中身を見る
SpecRunner.htmlの中身を見てみます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="src/Player.js"></script>
<script type="text/javascript" src="src/Song.js"></script>
<script type="text/javascript" src="spec/SpecHelper.js"></script>
<script type="text/javascript" src="spec/PlayerSpec.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)
よくわからなかったのでコメントを振ってみる
よくわからなかったのでコメントを振ってみます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="src/Player.js"></script>
<script type="text/javascript" src="src/Song.js"></script>
<script type="text/javascript" src="spec/SpecHelper.js"></script>
<script type="text/javascript" src="spec/PlayerSpec.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)
このファイルは、テストを行いたいJavascriptを読み込み、それに対してテストを定義し実行するというもののようです。しかし、「jasmineEnv.updateInterval = 1000;」という行が気になった。これはもしかして1秒ごとにテストを実行するということなのだろうか。もしそうなら、このHTMLファイルを開きっぱなしで常にテスト結果を確認できるということなのでとても嬉しいのだけれど・・。
バグらせてみる
まだなんだか感覚がつかめないので、テスト対象のファイルをバグらせてみることにします。
Player.jsをバグらせる。
function Player() {
}
Player.prototype.play = function(song) {
this.currentlyPlayingSong = song;
this.isPlaying = true;
};
Player.prototype.pause = function() {
this.isPlaying = false;
};
Player.prototype.resume = function() {
if (this.isPlaying) {
throw new Error("song is already playing");
}
this.isPlaying = true;
};
Player.prototype.makeFavorite = function() {
this.currentlyPlayingSong.persistFavoriteStatus(true);
};Code language: JavaScript (javascript)
中身はとてもシンプルで、本当にプレイヤー機能が入っているのかと思えばそんなことはなくて、模倣したオブジェクトのようです。
コメントを振ってみます。
function Player() {
}
Player.prototype.play = function(song) {
this.currentlyPlayingSong = song;
this.isPlaying = true;
};
Player.prototype.pause = function() {
this.isPlaying = false;
};
Player.prototype.resume = function() {
if (this.isPlaying) {
throw new Error("song is already playing");
}
this.isPlaying = true;
};
Player.prototype.makeFavorite = function() {
this.currentlyPlayingSong.persistFavoriteStatus(true);
};Code language: JavaScript (javascript)
お気に入りに登録のコメントが合っているのか不安ですが、これの途中から再生するをバグらせてみます。
...
Player.prototype.resume = function() {
if (this.isPlaying) {
throw new Error("song is already ");
}
this.isPlaying = true;
};
...Code language: JavaScript (javascript)
「song is already playing」からplaying を消してみました。これでいったいなにが起きるか・・・。
先ほどの SpecRunner.html を開いて確認してみます。
バグがある場合のテスト結果
おお！ なんか出ました！エラーがでました！これはエラー詳細ページで、全体のテストケース一覧を見るには「5 specs」をクリックします。
エラーがあるテストケースは赤字になっています。
また、自動的にリロードしてくれるのか期待していたのですが、自動リロード機能はないようなので、ブラウザの自動リロード機能を使って常に監視しておくといいです。
テストのほうを弄る
テストケースが定義されているファイルをいじってみます。弄るファイルはspecフォルダにある「PlayerSpec.js」です。
中身はこんなかんじ
describe("Player", function() {
var player;
var song;
beforeEach(function() {
player = new Player();
song = new Song();
});
it("should be able to play a Song", function() {
player.play(song);
expect(player.currentlyPlayingSong).toEqual(song);
expect(player).toBePlaying(song);
});
describe("when song has been paused", function() {
beforeEach(function() {
player.play(song);
player.pause();
});
it("should indicate that the song is currently paused", function() {
expect(player.isPlaying).toBeFalsy();
expect(player).not.toBePlaying(song);
});
it("should be possible to resume", function() {
player.resume();
expect(player.isPlaying).toBeTruthy();
expect(player.currentlyPlayingSong).toEqual(song);
});
});
it("tells the current song if the user has made it a favorite", function() {
spyOn(song, 'persistFavoriteStatus');
player.play(song);
player.makeFavorite();
expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
});
describe("#resume", function() {
it("should throw an exception if song is already playing", function() {
player.play(song);
expect(function() {
player.resume();
}).toThrow("song is already playing");
});
});
});Code language: JavaScript (javascript)
うおお..よくわからない…
RSpecというruby界隈の方にはお馴染みの書き方のようです。そしてこの書き方がテストをやる上ですごいやりやすいんだとか。
また同じようにコメントを振ってみます。
describe("プレイヤー", function() {
var player;
var song;
beforeEach(function() {
player = new Player();
song = new Song();
});
it("曲を再生することができる", function() {
player.play(song);
expect(player.currentlyPlayingSong).toEqual(song);
expect(player).toBePlaying(song);
});
describe("曲が一時停止されたときの挙動", function() {
beforeEach(function() {
player.play(song);
player.pause();
});
it("曲が一時停止しているか確認する", function() {
expect(player.isPlaying).toBeFalsy();
expect(player).not.toBePlaying(song);
});
it("途中から再生可能かどうか", function() {
player.resume();
expect(player.isPlaying).toBeTruthy();
expect(player.currentlyPlayingSong).toEqual(song);
});
});
it("ユーザーがお気に入りにしていた場合、その曲を教える", function() {
spyOn(song, 'persistFavoriteStatus');
player.play(song);
player.makeFavorite();
expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
});
describe("#レジューム", function() {
it("曲が既に再生されている場合に例外をスルーする", function() {
player.play(song);
expect(function() {
player.resume();
}).toThrow("song is already playing");
});
});
});Code language: JavaScript (javascript)
頭を使いすぎた・・・。だいたいこんなかんじで合っているとおもいます。
流れはコメントの通りで、expect の期待が外れると、そのテストケースは「失敗」となるようです。describeによるテストスイートのカテゴリ分けや階層化もなかなかおもしろいと思いました。
そして、とくに気になった点を2つあげると、独自定義マッチャと、スパイ機能です。これについては次に書きます。そしてその前に、マッチャってなんだ・・・・・。
マッチャ
マッチャとは、「AはBであることを期待する」というように正しいかどうかを評価するためのものです。
マッチャはいくつかの種類があります。
| expect(x).toEqual(y); |
xとyが等しいことを期待する |
| expect(x).toBe(y); |
xとyが同じオブジェクトであることを期待する |
| expect(x).toMatch(pattern); |
文字列または正規表現パターンでxと比較し、一致することを期待する |
| expect(x).toBeDefined(); |
xがundefinedではない場合ことを期待する |
| expect(x).toBeUndefined(); |
xがundefinedであることを期待する |
| expect(x).toBeNull(); |
xがnullであることを期待する |
| expect(x).toBeTruthy(); |
xがtrueであることを期待する |
| expect(x).toBeFalsy(); |
xがfalseであることを期待する |
| expect(x).toContain(y); |
配列化か文字列であるxに対して、yが含まれていることを期待する |
| expect(x).toBeLessThan(y); |
xがy未満であることを期待する |
| expect(x).toBeGreaterThan(y); |
xがyよりも大きいことを期待する |
| expect(function(){fn();}).toThrow(e); |
無名関数が実行された時に関数fnが例外eを投げることを期待する |
| .not.(matcher) |
(matcher)に他のマッチャを指定することでそのマッチャを逆に評価します(trueをfalseに falseをtrueに) |
独自マッチャの定義
マッチャは予め定められたものだけではなく、「SpecHelper.js」によって独自に定義することもできます。
beforeEach(function() {
this.addMatchers({
toBePlaying: function(expectedSong) {
var player = this.actual;
return player.currentlyPlayingSong === expectedSong &&
player.isPlaying;
}
});
});
Code language: JavaScript (javascript)
スパイ
次はスパイを見ていきます。
it("ユーザーがお気に入りにしていた場合、その曲を教える", function() {
spyOn(song, 'persistFavoriteStatus');
player.play(song);
player.makeFavorite();
expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
});Code language: JavaScript (javascript)
スパイのテストケースはこうなっています。「spyOn(song, ‘persistFavoriteStatus’);」で song オブジェクトの persistFavoriteStatusメソッドを監視します。
songのpersistFavoriteStatusメソッドはこのようになっています。
function Song() {
}
Song.prototype.persistFavoriteStatus = function(value) {
throw new Error("not yet implemented");
};Code language: JavaScript (javascript)
「player.play(song);」でプレイヤーを再生するときには特に内部でスパイは活動を行いませんが、「player.makeFavorite();」で活動を行います。
makeFavoriteメソッドは内部ではこのようになっており、「this.currentlyPlayingSong」には 「player.play(song);」内部で定義された songオブジェクトが入っているため、「persistFavoriteStatus」が実行できます。
Player.prototype.makeFavorite = function() {
this.currentlyPlayingSong.persistFavoriteStatus(true);
};Code language: JavaScript (javascript)
このときに、スパイが活動を始め、このメソッドが実行されたことをしっかりと記憶します。
そして、
expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);Code language: JavaScript (javascript)
スパイの活動を見るために、toHaveBeenCalledWithメソッドがスパイから songオブジェクトがpersistFavoriteStatusメソッドを実行したときに引数にtrueを使用したかを聞き出します。
true が引数に使われたことがわかったので、これで期待通りの結果になっているということがわかります。
スパイのためのマッチャ
このように toHaveBeenCalledWith のようなスパイのためのマッチャがいくつか用意されています。
| expect(x).toHaveBeenCalled() |
xメソッドがスパイ中に呼び出されていたメソッドであることを期待 |
| expect(x).toHaveBeenCalledWith(arguments) |
xメソッドがスパイ中に呼び出された時にそのメソッドに使用していた引数がargumentsであることを期待 |
| expect(x).not.toHaveBeenCalled() |
xメソッドがスパイ中に呼び出されなかった |
| expect(x).not.toHaveBeenCalledWith(arguments) |
xメソッドがスパイ中に呼び出された時にそのメソッドに使用していた引数がargumentsでないことを期待 |
さまざまなスパイの呼び出し方法
スパイが監視しているメソッドの実行を検知したときに細かい挙動を指定することができます。
| spyOn(x, ‘method’).andCallThrough(); |
デフォルト機能。スパイ活動を開始します。 |
| spyOn(x, ‘method’).andReturn(arguments); |
スパイが呼び出されたときに決められた引数であるargumentsを返します。 |
| spyOn(x, ‘method’).andThrow(exception); |
スパイが呼び出された時に渡された例外をスルーします。 |
| spyOn(x, ‘method’).andCallFake(function); |
スパイが呼び出された時に指定された関数へ実行を移譲します。 |
最後に
とても使いやすくて、ひとつのHTMLページに詰め込むこともできるし、デバッグモードをONにした場合にのみ表示なんてことも不可能ではないので、いろんな応用が効くテストフレームワークだと思いました。こんなに柔軟性のあるテストフレームワークだということに今更ながら驚いています。
