- 公開日：2016年04月21日
記事概要
RailsでTeaspoonを使ってjavascriptのテストをおこなう方法をまとめた記事です。
環境
- rbenv
- bundler
- rails 4.2.5
- ruby 2.3.0
- teaspoon 1.1.5
teaspoon
teaspoonはRailsでjavascriptのテストをおこなうライブラリです。
ブラウザテストの他にも、PhantomJS、Selenium WebDriver, Capybara Webkitでヘッドレス(ブラウザなし)のテストもできます。
インストール
teaspoonをインストールするには、Gemfileにライブラリ名を記載します。
group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' gem 'rspec-rails' gem 'teaspoon' gem 'teaspoon-jasmine' end
上記ではjavascriptのテストライブラリにjasmineを指定しています。
他にもMochaやQUnitに対応しています。
記述したら、コマンドラインからインストールします。
cd {project_folder}
bundle install
Using rspec-rails 3.4.2
Installing teaspoon 1.1.5
Using rails 4.2.5
Using sass-rails 5.0.4
Using web-console 2.3.0
Using turbolinks 2.5.3
Installing teaspoon-jasmine 2.3.4
Bundle complete! 27 Gemfile dependencies, 82 gems now installed.
続けて、必要なファイルをプロジェクトにinstallします。
cd {project_folder}
rails generate teaspoon:install
インストールが正常に完了したら、テストが実行できます。
テストコードの実装
テストコードは、{project_folder}/spec/javascript配下に置きます。ファイル名は、
***_spec.js
とします。
サンプルとして、top.jsのテストコードtop_spec.jsを記載します。
describe("Top", function() {
describe("top#getBaseUrl lang change", function() {
it("should change top url.", function() {
var baseUrl = getBaseUrl("http://localhost:3000/", "en");
expect(baseUrl).toBe("http://localhost:3000/en");
});
});
});
jasmine形式でテストコードを記述します。テストコードでは、{project_folder}/app/assets/javascripts内のファイルに記載した関数を実行できます。
テストの実行と確認
テストを記載したら、railsを立ち上げます。ブラウザで
http://localhost:3000/teaspoon
に接続します。
以下のような画面がブラウザ上に表示されます。
正常にテストをおこなえました。
まとめ
railsでjavascriptのテストをするなら、teaspoonを利用すると便利です。
個人的には、Selenium WebDriver, Capybara Webkitを使うのはオススメしません。
テストにかかるトータルのコストと労力が見合っていないと思います。Cucumberも同様です。(以前は利用していたのですが、もう今は利用していません)
自分のコーディングスキルやアプリの仕様に合わせたテスト環境を構築してください。
以上。
運営サイト(railsで作成しています)
参考記事
この記事がお役にたちましたらシェアをお願いします
