Rails+AngularJSのアプリをJasmineでテストする

概要

• Rails + AngularJS + Jasmine + CoffeeScript
  • Rails + AngularJSはこちら: Rails単体でAngularJSとTwitterBootStrapを組み合わせた環境構築 - Qiita
• Jasmineさいつよ

参考資料

• 以下の2つを組み合わせる
  • RailsでJasmineを使ってJavascriptの単体テストをする - Rails Webook
  • Jasmineのみを使用したAngularJSのテスト - Qiita

手順

jasmine-railsのインストール

• ここは参考資料通り

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

• でbundle install

• rails g jasmine_rails:install したら一式インストール完了

  • 楽ちんすぎてばかになりそうだ

angular-mocksのインストール

• Jasmineでテストしようとすると、angular-mocksが必要になる。
• 入ってないとこれ以降の手順で以下のエラーが出る。
  • ReferenceError: module is not defined
• application.jsでrequireする
  • なんらかの手段でangular-mocksのパッケージは入れておくこと

//= require angular-mocks

実際のテスト

• 先のjasmine-railsのインストールで、テスト用のページは作られているのでSpecRunner.htmlなどは不要で、そのままテストを書けばよい。

describe "HogesController", ->
  beforeEach ->
    module('myApp')

  beforeEach ->
    inject ($controller, $rootScope, Hoge) ->
      @scope = $rootScope.$new()
      @ctrl = $controller("HogeController", { $scope: @scope })
      spyOn(Hoge, "query").and.callFake ->
        return []

  it "search()", ->
    @scope.search()
    expect(@scope.hoges).toEqual([])

• myAppにHogeサービスと、HogesControllerが定義されており、HogesControllerのsearch()をテストすることとする。

• 最初のbeforeEachでmoduleを準備する。

• 次のbeforeEachで@scopeとテスト対象のコントローラを定義する。
  • ついでにHogeサービスのquery()で返ってくる値をspyOnで代役を立てておく。これで実際に通信しにいくことはない。
  • spyOnはJasmineのSpy機能の1つ
• itでテストを行う。
  • HogesControllerでsearch()が実行された後、scopeのhogesにHogeサービスのquery()の戻り値が入っていることを期待する。