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

はじめに

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

そこで Evergreen

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

jnicklas/evergreen · GitHub

こいつを簡単に説明すると、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