teaspoon + jasmine による javascript のテスト の履歴(No.3)
更新rails 開発で javascript もテストしたい†
konacha というのもあって、かなり便利に使えそうなのだけれど、内部で使われる chai.js が IE8 に対応していないのでちょっと問題。
そこで、さまざまなテストライブラリに対応した teaspoon を試してみました。
大半は、こちらのサイトの記述を参考にさせていただきました。
http://kazu69.net/blog/tec/1787
teaspoon は様々なテスト用ライブラリに対応していますが、デフォルトで指定される jasmin 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 を呼び出して、次のサンプルのような見やすいカバレッジレポートを容易に作成できます。
- http://gotwarlost.github.io/istanbul/public/coverage/lcov-report/index.html
- http://gotwarlost.github.io/istanbul/public/coverage/std-lcov/index.html
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 の２つの形式で結果をレポートするよう設定しました。 （これはたぶんデフォルトなので、何も書かなくても同じかもしれません）
選択可能な形式は他にもいくつもあるようですが、まだ試していません。
ここでは 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 で表示されます。