RailsでのJavaScriptのテストにteaspoonを使ってみた

ruby

Rails + BackboneのプロジェクトでのJavaScriptのテストに、今まではjasminericeなどを試したことはあるけど、もっと便利なツールがないか探してみた。

候補として出てきたのが

という感じになった。
そこで、今回はteaspoonを使ってみた。

teaspoonを選択した理由は、

上記を考慮して、統合環境を最小限の設定で構築できるという優秀なツールじゃないかな。

導入と設定は次の通り

phantomJSを使用する場合は別途phantomJSのインストールが必要。

Gemfileに追加して
[ruby]

Gemfile

group :development, :test do

#gem "mocha", "~> 0.14.0" # mochaを使用する場合のみ必要

#gem "selenium-webdriver" # seleniumを利用する場合のみ必要
gem "teaspoon"
end

[/ruby]
で budle install する。

teaspoonのインストール
[shell]

$ rails generate teaspoon:install

create  config/initializers/teaspoon.rb
create  spec/teaspoon_env.rb
create  spec/javascripts/support
create  spec/javascripts/fixtures
create  spec/javascripts/spec_helper.js

+============================================================================+
Congratulations! Teaspoon was successfully installed. Documentation and more can
be found at: https://github.com/modeset/teaspoon

[/shell]

これで基本的なファイルなどまとめて設定、作成される。

teaspoonの設定は initializers/teaspoon.rb で変更できます。
基本は以下になっている。
[ruby]
Teaspoon.setup do |config|
config.mount_at = "/teaspoon"
config.root = nil
config.asset_paths = ["spec/javascripts", "spec/javascripts/stylesheets"]
config.fixture_path = "spec/javascripts/fixtures"
config.suite do |suite|
suite.matcher = "{spec/javascripts,app/assets}/*/_spec.{js,js.coffee,coffee}"
suite.helper = "spec_helper"
suite.javascripts = ["teaspoon-jasmine"]
suite.stylesheets = ["teaspoon"]
suite.no_coverage = [%r{/lib/ruby/gems/}, %r{/vendor/assets/}, %r{/support/}, %r{/(.+)_helper.}]
end
end if defined?(Teaspoon) && Teaspoon.respond_to?(:setup)
[/ruby]

またTest Runnerの設定は spec/teaspoon_env.rb で行います。
基本設定は
[ruby]
ENV["RAILS_ROOT"] = File.expand_path("../../", FILE) require File.expand_path("../../config/environment", FILE) Teaspoon.setup do |config|

Driver / Server

config.driver = "phantomjs" # available: phantomjs, selenium

#config.driver = "selenium"

#config.server = nil # defaults to Rack::Server

Behaviors

#config.server_timeout = 20 # timeout for starting the server

#config.server_port = nil # defaults to any open port unless specified

#config.fail_fast = true # abort after the first failing suite

Output

#config.formatters = "dot" # available: dot, tap, tap_y, swayze_or_oprah

#config.suppress_log = false # suppress logs coming from console[log/error/debug]

#config.color = true

Driver Options

config.driver_cli_options = ‘–ssl-protocol=any’

Coverage (requires istanbul – https://github.com/gotwarlost/istanbul)

#config.coverage = true

#config.coverage_reports = "text,html,cobertura"

#config.coverage_output_dir = "coverage"
end
[/ruby]

テストはconsole
[shell]
$ bundle exec teaspoon
[/shell]
または http://localhost:3000/teaspoon でブラウザから実行が可能。

Coverageレポートは Istanbulを使用するので別途インストールする必要があります。
[shell]
$ npm install -g istanbul
[/shell]

teaspoon_env.rbの設定を変更して
[ruby]

Coverage (requires istanbul – https://github.com/gotwarlost/istanbul)

config.coverage = true
config.coverage_reports = "text,html,cobertura"
config.coverage_output_dir = "coverage"

[/ruby]

これでCoverageレポートが出力されます。

[shell]

Finished in 0.00900 seconds
1 example, 0 failures

—————————————————————————+———–+———–+———–+———–+
File | % Stmts |% Branches | % Funcs | % Lines |
—————————————————————————+———–+———–+———–+———–+
app/assets/javascripts/ | 100 | 100 | 100 | 100 |
application.js.coffee | 100 | 100 | 100 | 100 |
items.js.coffee | 100 | 100 | 100 | 100 |
vendor/bundler/ruby/2.0.0/gems/turbolinks-1.3.0/lib/assets/javascripts/ | 18.11 | 7.3 | 2 | 18.39 |
turbolinks.js.coffee | 18.11 | 7.3 | 2 | 18.39 |
—————————————————————————+———–+———–+———–+———–+
All files | 18.73 | 7.3 | 5.77 | 19.01 |
—————————————————————————+———–+———–+———–+———–+
[/shell]

またはhtmlで出力している場合はcoverageの出力ディレクトリにアクセス。

実際にテストでサポートしているライブラリを使用する場合は、Sprocketsのrequireディレクティブでロードする。
[javascript]
//=require support/sinon
//=require support/chai
//=require support/expect
//=require support/jasmine-jquery
//=require support/angular-scenario
[/javascript]

fixtureの機能も備えているので、ファイル読込みやviewのレンダリングなどフレームワークに依存することないので
テストフレームワークを切り替えるときにも影響が少なくてすみます。

また、guard-teaspoonも提供されてるのでこちらもあわせて利用する。

Gemfileに追加して
[ruby]
group :assets do
gem "guard-teaspoon"
gem "rb-fsevent" # used by guard
end
[/ruby]

bundle install

あとはGuardfileを作成して、Guardをスタート
[shell]
$ bundle exec guard init teaspoon
$ bundle exec guard start
[/shell]

ということで、面倒なことなくRailsプロジェクトのJavaScriptのユニットテスト環境を構築できました。

Comments