先日 "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 から。