ダメ男のブログ: 【Rails4.2.5】Teaspoonを使ってjavascriptのテストを行う

2016年4月21日木曜日

【Rails4.2.5】Teaspoonを使ってjavascriptのテストを行う

公開日：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にライブラリ名を記載します。

{project_folder}/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に対応しています。

記述したら、コマンドラインからインストールします。

terminal


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します。

terminal


cd {project_folder}

rails generate teaspoon:install

インストールが正常に完了したら、テストが実行できます。

テストコードの実装

テストコードは、{project_folder}/spec/javascript配下に置きます。ファイル名は、


***_spec.js

とします。

サンプルとして、top.jsのテストコードtop_spec.jsを記載します。

{project_folder}/spec/javascript/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も同様です。(以前は利用していたのですが、もう今は利用していません)

自分のコーディングスキルやアプリの仕様に合わせたテスト環境を構築してください。

以上。

PICK UP オススメ書籍