トップ «前の日記(2012-04-20) 最新 次の日記(2012-04-26)» 編集

2012-04-22 [長年日記]

_ JasmineをCLIで走らせるならjasmine-headless-webkitが楽すぎる

先日から CI づいているので今度は JavaScript のユニットテストの分を調べました。

現在のwtnabeの普段の開発手法

  • Jasmine gem と guard-livereload を使って
  • ブラウザで自動reloadさせながら Jasmine でユニットテストを書く

ということをしています。これはやっぱりブラウザで動かせる Firebug などの開発者ツールがとても強力なので、何かあったときに探っていくのに便利であることが理由として大きいです。あとブラウザで見ることができる方がなんか安心というのもあります。

しかしこのままでは CI と相性がよくありません。だから今まで CI は無視してたのです。

rake jasmine:ciはGUIブラウザ前提

一応 Jasmine gem には

rake jasmine:ci

というタスクが定義されているのですが、これは基本的に Selenium でブラウザを起動してテストを動かして結果を受け取るというもので、

基本的には GUI のブラウザが動くことが前提

になっています。ということは CI サーバで使うには X を起こすか Xvfb とか使って Firefox などのブラウザをサーバ上で動かす必要があります。これは面倒くさいうえにとても重たい。できれば避けたいです。

PhantomJSはなんでもできるけどテスト準備が面倒

ということで headless ブラウザとして有名な PhantomJS を使うのかなぁ、なんかでも PhantomJS で CI みたいな記事はやたら面倒くさい構成っぽいよなぁと思っていたら神降臨。

Twitter / @os0x: @wtnabe jasmineをheadlessで動 ...

おぉ、そう言えば jasmine-headless-webkit はすでにチェック済みでした。

ただ正直 headless ブラウザはよく分からないんですよね。結局みんな WebKit 使ってるんでしょ? なんでいくつもあるの? という感じ。で、有名な PhantomJS にしてみようか、本家のページにも Jasmine や QUnit とか使ってテスト動かせるよって書いてあるし、と思っていたのですが、結局のところ HTML を読み込んだうえで何か操作するというのが基本なので、JavaScript の読み込みやテストの実行はこっちでお膳立てする必要があります。要するに

PhantomJSはいろいろできるけどテストの実行には特化していないので準備が面倒

なんですね。

jasmine-headless-webkitですべて解決

jasmine-headless-webkit -- The fastest way to run your Jasmine specs!

そこで jasmine-headless-webkit. 何をしてくれるかと言うと

  • Jasmine gem と同じように設定ファイルを読んでくれて
  • test runner に当たる HTML を自動的に生成してくれて
  • headless WebKit ブラウザをさっと立ち上げてテストを実行して
  • 結果を CLI にそのまま表示してくれる(reporterは選べる)

というもので、使い方は単に

$ jasmine-headless-webkit

と叩くだけ。するとカレントディレクトリから Jasmine gem 標準の

spec/javascripts/support/jasmine.yml

を探しにいって*1、これを読み込んで Jasmine gem と同じように設定を解釈して動作します(たぶん)。

つまり普段 Jasmine gem でテスト書いてる人の CI 向けのツールとしてはカンペキです。何も変える必要がなく、単に叩くコマンドが違うだけ。

しかも

CoffeeScriptからの変換も全部自動で面倒みてくれます

あなたが神か。

開発者ツールで中を覗いてみたくならなければ、

普段使いもこれでいいじゃん

て感じです。いやーいいもの教えてもらいました。周回遅れは楽でいいです。はい。

あ、ちなみにこれも Ruby で書かれているので Ruby のインストールが必要ですし、qt4 やらなんやらも必要です*2。WebKit 系のこうしたツールはソースからビルドするタイプのパッケージシステムを使っている方が楽かもしれません。

PhantomJSの今後の可能性

PhantomJS のサイトからもリンクされていますが、

GhostDriver by detro

というものがあるそうです。今のところ technical-demo と書かれていますけど、Selenium から PhantomJS が使えるようになるかもしれません。これが安定して使えるようになれば Jasmine に限らずいろいろ可能性が広がりますね。

*1 オプションで変更も可能

*2 GUIのない環境では Xvfbも必要。