23
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2012-08-04

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

23
23
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?