Evergreen で Rails アプリの JavaScript を単体テストする

はじめに

Rails アプリの JavaScript のテストは capybara(+capybara-webkit) を使えば一応できるけど、統合テストなのがね…。統合テストもちゃんと書くけど、やりたいのは JavaScript単体テストなのに。

そこで Evergreen

そんな中で最近知ったのが Evergreen っていう gem。

こいつを簡単に説明すると、Rails に組み込める Jasmine テストランナー。Jasmine も同梱されてるので、インストールすればすぐに JavaScript のテストが書ける。

Evergreen のインストール

Gemfile に

group :test, :development do
  gem "evergreen", :require => "evergreen/rails"
end

を追加して

$ bundle

でインストールできる。

JavaScript のテストを書いてみる

JavaScript のテストは、RAILS_ROOT/spec/javascripts に配置すれば Evergreen が読み込んでくれる。テストは Jasmine で書くから、テストというよりスペックだね。

require("/assets/application.js");

describe("List", function() {
  describe("toJSON", function() {
    it("idとnameが格納されている", function() {
      var list = new App.Models.List({id:100, name:"foo"});
      var json = list.toJSON();
      expect(json.id).toEqual(100);
      expect(json.name).toEqual("foo");
    });
  });
});

require で、テスト対象の JavaScript コードや、テストで使うライブラリを読み込んでる。上記では assets の中にある JavaScript がテスト対象。たくさんある場合は、spec_helper.js を作るのが良さそうだ。

ブラウザでテストを実行

$ bundle exec rails server

で開発サーバーを起動し、ブラウザで

http://localhost:3000/evergreen

を表示。
f:id:griefworker:20121211200825p:plain
スペック一覧が表示された。
Run をクリックするとテストを実行できる。
f:id:griefworker:20121211200834p:plain
スペックの名前をクリックすると詳細を見れる。
f:id:griefworker:20121211200845p:plain
ついに念願の JavaScript単体テストができた!

さらに何と…!

README によると、ブラウザ無し(headless)のテストもできるみたいだ。
capybara-webkit を使えばね。

capybara-webkit をインストール

Gemfile に capybara-webkit を追加してみる。

group :test, :development do
  gem "evergreen", :require => "evergreen/rails"
  gem "capybara-webkit" # 追加
end

んで、再び bundle 実行。

bundle

Evergreen の設定ファイルを作成

capybara-webkit のインストールが無事成功したら、RAILS_ROOT/config/evergreen.rb を作成する。

require 'capybara-webkit'

Evergreen.configure do |config|
  config.driver = :webkit
  config.public_dir = 'public_html'
  config.template_dir = 'templates'
  config.spec_dir = 'spec'
end

README に書かれてる設定をコピペしただけ。JavaScript を実行するドライバに WebKit を指定している。

Headless でテストを実行

bundle exec evergreen run

f:id:griefworker:20121211203910p:plain
ブラウザを表示せずに、端末で JavaScript のテストが完了した!

まとめ

Rails アプリの開発に Evergreen を導入して、JavaScript コードの単体テストが手軽になった。さらに、capybara-webkit と組み合わせたら headless でテストを実行できた。

ずっと「Rails 開発で JavaScript単体テストも書きたい」と思ってたから、これでようやく念願叶ったな。

2012/12/12 追記

README に

Evergreen is currently unmaintained. If you would like to take over maintenance of the project, please contact me directly.

って書いてあった。見落としてたよ…。

Evergreen 開発者は Google グループで Konacha っていう Rails エンジンを勧めてるので、そちらを使ったほうがいいね。