Rails 3.2 のプロジェクトに jasmine 導入して CoffeeScript でテスト書くまで - evergreen 編

先日 "Rails 3.2 のプロジェクトに jasmine 導入して CoffeeScript でテスト書くまで (http://qiita.com/items/ace811bf00d6d201635d)" という記事を書いたが、evergreen gem を使えばもっと簡単にできた。

evergreen gem の導入

# Gemfile
group :development, :test do
  gem "evergreen", require: "evergreen/rails"
end

bundle
rails s
# テストは /evergreen にブラウザでアクセスすることで実行
open http://localhost:3000/evergreen

テストを書く

spec/javascripts/**/*_spec.(js|coffee) にテストを書く。特に設定などなしに CoffeeScript で書ける。

テスト中ではテストに必要なスクリプトを require で指定する。

require "/assets/application.js"

毎回書くのも面倒なので、spec/javascripts/spec_helper.(js|coffee) を作って書いておく。

テンプレート

DOM を扱うスクリプトのテストのために HTML 断片を読み込む仕組みが用意されている。

spec/javascripts/templates/*.html に HTML を置き、describe 内で template("foo.html") のようにロードする。

describe "dom", ->
  template "foo.html"
  it "should find foo", ->
    expect(document.getElementById("foo")).not.toBeNull()

matcher は特に追加されないので、必要なら jasmine-jquery などを別途導入する。

livereload

guard-livereload による自動ブラウザリロードを導入。これは evergreen 使わない場合とほとんど変わらない。

# Gemfile
gem "guard-livereload"

bundle
guard init livereload

# Guardfile
guard 'livereload' do
  # 下記の 1 行を追加
  watch(%r{spec/javascripts/.+\.(js|coffee)})
end

ブラウザの extension は https://github.com/mockko/livereload/blob/master/README-old.md から。