目的

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があるため、それがテンプレートとして使える。また、下記の記事を参考にさせていただいた。
- Jasmine使い方メモ
SpecRunner.htmlを変えた部分は2点
- の記述を削除
- 部分を自分で作成したファイル名に変更

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に関連するツールってどうしてこんなに可愛いんだろうか。
見て楽しいのはかなりモチベーションに影響するなあ、と思う今日この頃。

Jasmineを触ってみる

目的