Jasmine でテストする

Jasmine は、RSpec ライクな JavaScript の BDD テストフレームワーク。
スタンドアローン版、gem 版、node.js 版（jasmine-node）とあり、
今回は gem 版を使ってみた。

インストール

gem install jasmine

初期化

jasmine init

必要なファイルが書き出される。

Spec ファイルの編集

デフォルトでは spec/javascripts 以下に格納する。

describe("Hoge", function() {

    var hoge;

    // it の前に実行される
    beforeEach(function() {
        hoge = new Hoge();
    });

    // it の後に実行される
    afterEach(function() {
        hoge = null;
    });

    it("和を返す", function() { 
        expect(hoge.add(1, 1)).toEqual(2);
    });

    it("合計を計算する", function() { 
        hoge.var1 = 4;
        hoge.var2 = 1;
        hoge.var3 = 3;
        expect(hoge.sum()).toEqual(8);
    });
});

Jasmine の Matchers は下記を参照。
https://github.com/pivotal/jasmine/wiki/Matchers

カスタム Matcher を作りたい場合は、
spec/javascripts/support/SpecHelper.js に定義を追加すればいい。

jasmine.yml の編集

public/javascirpt/jasmine.yml を編集する。
jasmine.yml は、テスト実行時に読み込むファイル類の設定ファイルで
Spec ファイルの格納ディレクトリや元のソースファイルなどの構成を
デフォルトから変えたい場合はここに定義する。

# src_files
#
# Return an array of filepaths relative to src_dir to include before jasmine specs.
# Default: []
#
# EXAMPLE:
#
# src_files:
#   - lib/source1.js
#   - lib/source2.js
#   - dist/**/*.js
#
src_files:
    - src/Hoge.js

# stylesheets
#
# Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs.
# Default: []
#
# EXAMPLE:
#
# stylesheets:
#   - css/style.css
#   - stylesheets/*.css
#
stylesheets:

# helpers
#
# Return an array of filepaths relative to spec_dir to include before jasmine specs.
# Default: ["helpers/**/*.js"]
#
# EXAMPLE:
#
# helpers:
#   - helpers/**/*.js
#
helpers:

# spec_files
#
#  Return an array of filepaths relative to spec_dir to include.
# Default: ["**/*[sS]pec.js"]
#
# EXAMPLE:
#
# spec_files:
#   - **/*[sS]pec.js
#
spec_files:

# src_dir
#
# Source directory path. Your src_files must be returned relative to this path. Will use root if left blank.
# Default: project root
#
# EXAMPLE:
#
# src_dir: public
#
src_dir:

# spec_dir
#
# Spec directory path. Your spec_files must be returned relative to this path.
# Default: spec/javascripts
#
# EXAMPLE:
#
# spec_dir: spec/javascripts
#
spec_dir:

テストの実行

rake jasmine

プロジェクトのルートで上記コマンドを実行させると、
WEBrick が起動するので、ブラウザに「http://localhost:8888/」でアクセスする。

コマンドラインでのテストの実行

rake jasmine:ci

とすると、ブラウザ（Firefox）が立ち上がり、結果を表示して自動的に閉じる。
（これ、Chrome にしたいけど、ブラウザ変更の仕方がわからない…。）

スタンドアローン版、jasmine-node も試してみたけど、
テストのトリガーのタイミング（スタンドアローンはブラウザ、jasmine-node はコマンド、
gem は両方）が違うだけで jasmine.yml の設定などは同じなので、
ケースバイケースで使い分ければいいんではないかと思う。

参考サイト
今回は、こちらのサイトを参考にさせて頂きました。

• あーありがち – Jasmineをもう少し詳しく紹介してみる
• QUnit はオワコン!?Jasmine を使ってみる – present