teaspoon + jasmine による javascript のテスト のバックアップ(No.5)

更新


公開メモ

rails 開発で javascript もテストしたい

konacha というのもあって、かなり便利に使えそうなのだけれど、内部で使われる chai.js が IE8 に対応していないのでちょっと問題。

そこで、さまざまなテストライブラリに対応した teaspoon を試してみました。

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

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

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

とりあえず動かす

インストール

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 の設定

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

テストを書く

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

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

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

LANG:coffee
describe "MyObject", ->
  it "does something", ->
    obj = new MyObject()
    expect( obj.do_something() ).toBe expectation

  it "writes something", ->
    obj = new MyObject()
    expect( obj.write_something() ).not.toMatch /expectation/

結果を確認する

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

動かすのはとても簡単

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

istanbul を使ってカバレッジ測定をする

istanbul は javascript のコードカバレッジを計測するためのツールです。

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

istanbul を入れる

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 の2つの形式で結果をレポートするよう設定しました。 (これはたぶんデフォルトなので、何も書かなくても同じかもしれません)

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

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

phantomjs を入れる

phantomjs は、ブラウザの代わりに 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

実行する

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 に相当する結果でしょうか。

結果を確認する

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 で表示されます。

コメント





Counter: 6407 (from 2010/06/03), today: 6, yesterday: 4