読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

RailsでJasmineを使ってJavascriptの単体テストをする

Rails Test Javascript Rails中級

f:id:nipe880324:20150105223634p:plain

RailsでJasmineを使ってJavascriptの単体テストを実行する方法を説明します。

JasmineはJavascriptの単体テストを行うためのテスティングフレームワークです。そして、RailsでJasmineを使うために、jasmine-railsというgemが提供されています。

Railsではcapybara-webkitpoltergistなどでエンドツーエンドレベルでのJavascriptのテストができます。しかし、エンドツーエンドなので仮想ブラウザを起動させてテストを行うので時間がかかるというデメリットがあります。そのため、Javascriptの単体テストはJasmineを使ってテストするという住み分けが必要です。

動作確認

  • Ruby 2.1.1
  • Rails 4.1.7
  • jasmine-core 2.1.3
  • jasmine-rails 0.10.4

目次

  1. jasmine-railsのインストール
  2. RailsでのJasmineの初歩的な使い方
  3. Jasmineで使えるMatcher
  4. (WIP) DOMを検査する


jasmine-railsのインストール

まず、Gemfileにjasmine-railsを追加します。

# Gemfile
group :development, :test do
  gem 'jasmine-rails'
end


次に、Bundlerを実行します。

bundle install


そして、RailsジェネレーターでJasmineの初期ファイルを作成します。

rails g jasmine_rails:install
   identical  spec/javascripts/support/jasmine.yml
       route  mount JasmineRails::Engine => '/specs' if defined?(JasmineRails)


Jasmineの設定ファイルは、spec/javascripts/support/jasmine.ymlに作成されます。
設定ファイル内では、Railsの規約に合わせた、Javascriptのソースファイルパス、Jasmineでのテストファイルパスなどがデフォルトで記載されています。




RailsでのJasmineの初歩的な使い方

簡単な例を使って、RailsでのJasmineの初歩的な使い方を説明します。

まず、Javascriptのテストファイルを作成します。
RSpec3と文法はほとんど同じです。

# spec/javascripts/foo_spec.js.coffee

describe "Foo", ->
  beforeEach ->
    @foo = new Foo("Taro")

  it "is first test", ->
    expect(@foo.greet()).toBe "Hello, Taro"


次にソースファイルを作成します。

# app/assets/javascripts/foo.js.coffee
class @Foo
  constructor: (name) ->
    @name = name

  greet: ->
    "Hello, #{@name}"


では、Javascriptのテストを実行します。

RAILS_ENV=test bundle exec rake spec:javascript

...

Finished
-----------------
1 spec, 0 failures in 0.003s.


Jasmineで使えるMatcher

introduction.jsを参照



(WIP) DOMを検査する

テキストフィールドに入力し、動的にバリデーションメッセージを出すなどのDOMを操作するJavascriptのテストを実施したい場合は、jasmine-jqueryを使うと楽らしい