目的
Hello WorldをJasmineでテストしてみる
使ったもの
-
Jasmine 2.3.4
- jasmine-standalone-2.3.4.zipをダウンロード
-
JSで作ったHello World
- 環境もそのまま引き継ぎ
ではスタート
テスト準備
Jasmineのlibをプロジェクトに入れる
ダウンロードしたJasmineのzipを展開して、その中のlibフォルダをJsSampleプロジェクトの下に突っ込む。
フォルダ構成を少し変える
フラットに作るとわかりにくいため、テストで必要なものをすべてtestフォルダに詰める。
hello.jsのテストメソッドを作る
間違えたらどういった表記になるのかを見るため、わざと結果を間違えたテストメソッドも作る。
testHello.js
describe('showHello関数のテスト', function() {
it('name=tori、msg=おめでとうにすると、「Hello World,tori!おめでとう」になる', function(){
expect(showHello("tori", "おめでとう")).toBe("Hello World,tori!おめでとう");
});
it('name=huyu、msg=おめでとうにすると、「Hello World,huyu!おめでとう」になる（わざと失敗）', function(){
expect(showHello("huyu", "おめでとう")).toBe("Hello World,tori!おめでとう");
});
});
テスト用のhtmlを作る
-
展開したzipファイルの下に
SpecRunner.htmlがあるため、それがテンプレートとして使える。また、下記の記事を参考にさせていただいた。 -
SpecRunner.htmlを変えた部分は2点-
<!-- include spec files here... -->の記述を削除 -
<!-- include source files here... -->部分を自分で作成したファイル名に変更
-
testHello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.3.4/jasmine.css">
<script src="lib/jasmine-2.3.4/jasmine.js"></script>
<script src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script src="../hello.js"></script>
<script src="testHello.js"></script>
</head>
<body>
</body>
</html>
テスト実行
作成したtestHello.htmlをWebブラウザで表示する。
Spec Listをクリックすると、全テストが表示できる。
テストメソッドを修正してテストケースがすべて成功すると、赤表示がなくなりエメラルドグリーンになる。
こういったテストフレームワークはJUnitくらいしか見たことがないが、Jasmineは見た目が優しい。JavaScriptに関連するツールってどうしてこんなに可愛いんだろうか。
見て楽しいのはかなりモチベーションに影響するなあ、と思う今日この頃。