teaspoon + jasmine による javascript のテスト の変更点

更新 
[[公開メモ]]

#contents

* rails 開発で javascript もテストしたい [#j6ff1120]

[[konacha>https://github.com/jfirebaugh/konacha]] というのもあって、かなり便利に使えそうなのだけれど、内部で使われる [[chai.js>http://chaijs.com/]] が IE8 に対応していないのでちょっと問題。

そこで、さまざまなテストライブラリに対応した [[teaspoon>https://github.com/modeset/teaspoon]] を試してみました。

大半は、こちらのサイトの記述を参考にさせていただきました。~
http://kazu69.net/blog/tec/1787

teaspoon は様々なテスト用ライブラリに対応していますが、デフォルトで指定される [[jasmine 1.3>http://jasmine.github.io/1.3/introduction.html]] を用いたところ、少なくとも基本的な機能については IE8 でもテストができることを確認できました。（Try/Catch, Full Report, Progress のボタンは機能しませんでした）

以下、気付いたところを書きます。

* とりあえず動かす [#n65ff359]

** インストール [#h7f16c65]

gem でインストールして rails generate で環境を構築します。

 LANG:console
 $ jed Gemfile
  group :development, :test do
    gem "teaspoon"
  end
 $ bundle install
 $ 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
 $ rails s

** spec_helper.js の設定 [#u01274f1]

アプリケーション依存部分として、
spec/javascript/spec_helper.js で //= require の設定をします。

** テストを書く [#t9e0a1d7]

テストを、spec/javascript/*_spec.coffee に書きます。

書き方は、http://jasmine.github.io/1.3/introduction.html を見ながら。

基本はこんな感じになりそうです。

 LANG:coffee
 describe "MyObject", ->
   beforeEach ->
     obj = new MyObject()
     @obj = new MyObject()
 
   afterEach ->
     obj = undefined
     @obj = undefined
 
   it "does something", ->
     expect( obj.doSomething() ).toBe expectation
     expect( @obj.doSomething() ).toBe expectation
 
   it "does not return unexpected strings", ->
     expect( obj.getSomeString() ).not.toMatch /not expected/
     expect( @obj.getSomeString() ).not.toMatch /not expected/
 
   it "refuses a bad argument", ->
     expect( -> obj.doSomething(badArgument) ).toThrow()
     expect( -> @obj.doSomething(badArgument) ).toThrow()
     # -> が必要なことに注意

** 結果を確認する [#y8cfabf1]

development 環境で rails server を走らせておき、 http://127.0.0.1:3000/teaspoon へアクセスすると実行結果やエラーメッセージを表示できます。

** 動かすのはとても簡単 [#h73a9acf]

ここまで、非常に簡単にできましたが・・・
konacha とは違って web インターフェースからテストのソースを見ることはできないんですかね？

* istanbul を使ってカバレッジ測定をする [#i067c021]

[[istanbul>https://github.com/gotwarlost/istanbul]] は javascript のコードカバレッジを計測するためのツールです。

teaspoon から istanbul を呼び出して、次のサンプルのような見やすいカバレッジレポートを容易に作成できます。

- http://gotwarlost.github.io/istanbul/public/coverage/lcov-report/index.html
- http://gotwarlost.github.io/istanbul/public/coverage/std-lcov/index.html

** istanbul を入れる [#h0441664]

 LANG:console
 $ npm install -g istanbul
  /usr/local/bin/istanbul -> /usr/local/lib/node_modules/istanbul/lib/cli.js
  istanbul@0.2.10 /usr/local/lib/node_modules/istanbul
  ├── which@1.0.5
  ├── abbrev@1.0.5
  ├── nopt@2.2.1
  ├── wordwrap@0.0.2
  ├── async@0.8.0
  ├── resolve@0.6.3
  ├── esprima@1.2.2
  ├── mkdirp@0.5.0 (minimist@0.0.8)
  ├── fileset@0.1.5 (minimatch@0.3.0, glob@3.2.11)
  ├── js-yaml@3.0.2 (esprima@1.0.4, argparse@0.1.15)
  ├── handlebars@1.3.0 (optimist@0.3.7, uglify-js@2.3.6)
  └── escodegen@1.3.2 (estraverse@1.5.0, esutils@1.0.0, esprima@1.1.1, source-map@0.1.33)
 $ jed spec/teaspoon_env.rb
    config.coverage do |coverage|
      # Available: text-summary, text, html, lcov, lcovonly, cobertura, teamcity
      coverage.reports = ["text-summary", "html"]
    end
 $ bundle exec teaspoon --coverage=default
  Starting the Teaspoon server...
  Teaspoon running default suite at http://127.0.0.1:3500/teaspoon/default
  Could not find PhantomJS. Install phantomjs or try the phantomjs gem.

text-summary と html の２つの形式で結果をレポートするよう設定しました。
（これはたぶんデフォルトなので、何も書かなくても同じかもしれません）

選択可能な形式は他にもいくつもあるようですが、まだ試していません。

ここでは phantomjs が入っていないと言って怒られました。

** phantomjs を入れる [#b16ab879]

[[phantomjs>http://phantomjs.org/]] は、ブラウザの代わりに javascript を実行してくれるライブラリです。これを使うことで、ブラウザを起動しなくても javascript のテストができます。

teaspoon をコマンドラインから呼び出すことにより、phantomjs を使ってテストを行えます。

 LANG:console
 $ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-i686.tar.bz2
 $ tar fxj phantomjs-1.9.7-linux-i686.tar.bz2
 $ cd phantomjs-1.9.7-linux-i686/
 $ ls
  ChangeLog  LICENSE.BSD  README.md  bin  examples  third-party.txt
 $ ls bin
  phantomjs
 $ sudo cp bin/phantomjs /usr/local/bin/
 $ which phantomjs
  /usr/local/bin/phantomjs
 $ phantomjs --version
  1.9.7

** 実行する [#z2c21af8]

 LANG:console
 $ bundle exec teaspoon --coverage=default
  Starting the Teaspoon server...
  Teaspoon running default suite at http://127.0.0.1:3500/teaspoon/default
  ..........
  
  Finished in 0.01300 seconds
  10 examples, 0 failures
  
  =============================== Coverage summary ===============================
  Statements   : 31.82% ( 7/22 )
  Branches     : 12.5% ( 2/16 )
  Functions    : 33.33% ( 2/6 )
  Lines        : 31.82% ( 7/22 )
  ================================================================================

それらしい表示が出ました。たぶんこれが text-summary に相当する結果でしょうか。

** 結果を確認する [#e80f793e]

html の方は、coverage というフォルダに結果が入っています。

 LANG:console
 $ ls coverage
  default
 $ ls coverage/default/
  index.html  javascripts  prettify.css  prettify.js
 $ ln -s `pwd`/coverage/default public/teaspoon_coverage_SOMEWEIRDSTRINGTOHIDETHISFOLDER

http://localhost:3000/teaspoon_coverage_SOMEWEIRDSTRINGTOHIDETHISFOLDER

へアクセスすると、ソースファイルがカラフルに色分けされ、
カバーされた行とされていない行を判別できました。

当然(?)、ソースを coffee script で書いていても、
カバレッジ測定結果は変換済みの javascript で表示されます。

* コメント [#s7914555]

#article_kcaptcha
Counter: 7003 (from 2010/06/03), today: 1, yesterday: 1