Node.jsとJasmineでJavaScriptのBDD環境

Jasmineでスペックを書いていく環境を整えるのにJasmine Toolなるものを試してみた。
なお最近なんだかJasmine押しですが、Jasmineしか試してないだけであり他意はありません。

2011/01/12追記

Jasmine Toolはブラウザを介するもので、普通のJasmineとやってることは変わらない。
Node.jsを使って動かすのであって、Node.jsのソースをテストするのではない。ややこしいけど。

Node.jsのモジュールのテストにはjasmine-nodevowsが向いていそう。
両方試してみてjasmine-nodeについては書いた。

Jasmine Tool

そもそもこれはなんぞや

Jasmine ToolはNode.jsで動くコマンドラインのツール。
簡単に言うとrubygemsのjasmineのNode.js版。

rubygems版との違いはRubyじゃなくてNode.jsで動くってところと、コードの変更があるとブラウザをリロードしてくれる機能がついていること。
後者がけっこううれしい。

Jasmine自体はRubyもNode.jsもなくても使えるわけなので、こうしたツールは必須ではないのだけど、コマンドラインのツールでinitしたら一通りの環境を整えてくれるのは便利だし、とっつきやすい。

インストール

Node.jsとnpmさえ入っていればコマンド一発で簡単インストール。
念のため環境は雪豹Mac。Node.jsのバージョンは0.2.5。

$ npm install jasmine

パスが通っていればこれでjasmineというコマンドがシェルから使えるようになっている。
使えないようならシェルを起ち上げ直してみるといいかも。

現時点では0.3系では動かない。
最初0.3系で動かないぜこれーって悩んでいたが、作者が使い方を説明しているスクリーンキャストの画面を見たらnode.jsのバージョンが0.2.0だったので気がついた。

Node.jsも0.1の違いでだいぶAPIが変わっているようだ。

動作確認

とりあえず何も考えず以下のように打てばJasmineサーバーが起動してブラウザからアクセス可能になる。

$ mkdir foo
$ cd foo
$ jasmine init
$ jasmine mon
#=> Navigate to http://localhost:8124 と出力される

http://localhost:8124/にアクセスするとサンプルのテスト結果がグラフィカルに見られる。
わざと失敗するようにSpecを変更するときちんと赤くなる。

コマンド
  • init: 必要なディレクトリとサンプルコードの作成
  • run: Jasmineサーバーを起動する。アクセスするたびにテストが走る。
  • mon: Jasmineサーバーを起動する。ファイルの変更があるとブラウザが自動的にリロードされテストが走る。
  • ci: CI用途だけど実装が不完全?現時点では一度テストが走ると終了するJasmineサーバーを起動。

initで必要なディレクトリが出来るのはわかりやすくてよい。
そしてmonが素敵。

ciはよくわからないけど、試行錯誤すればできそう。
標準出力にテスト結果が出力されるので

$ jasmine ci > result.txt &

などで起動してhttp://localhost:8124にアクセスすれば結果をファイルに保存することも出来る。
ただしJavaScriptを解釈するクライアントでアクセスしないとテストがちゃんと走らない模様。wgetとかでは無理だった。

そのほかオプションとして-bでブラウザを指定できるようだけど、Macだとどう指定していいんだかわからなかった。

設定ファイル

{project_dir}/spec/support/jasmin.jsonが設定ファイル。
ソースやスペックファイルの場所を変更したり、サーバーのポートを変更したり、外部スクリプトを読み込んだりできる。

jasmine initした時点で以下のような内容のファイルが作成されている。

{
 "src_dir"  : "/public/javascript/",
 "spec_dir" : "/spec/",

 "server":{
   "port":8124
 },
 "externals":[
  "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js",
  "https://github.com/velesin/jasmine-jquery/raw/master/lib/jasmine-jquery.js",
  "https://github.com/pivotal/jasmine-ajax/raw/master/lib/mock-ajax.js"
 ],

 "_other external files you can add above":[
  "https://github.com/pivotal/jasmine-ajax/raw/master/lib/mock-ajax.js"
 ]
}

spec_dirはともかくsrc_dirの位置は変更したいことがままあると思うのでこれは便利。

Node.jsとJasmine

Jasmine Tool以外にもいくつかJasmine関連のプロジェクトがある。

これらはJasmin Toolと同じくNode.jsでJasmineを動かすというもの。

jasmine-nodeの方がJasmine Toolよりちょっと歴史は長い。
jasbinは内部的にjasmine-nodeを使っているようだ。

これらも試してみたけどちょっとうまく動かせなかった。
多分ディレクトリ構成などがうまく合致してないのだと思うが、コードを追う気力もなくあきらめた。

Jasmine Toolの作者はjasmine-nodeを意識して作っているようなので、一応後発の利を生かして使いやすくなっているようだ。
実際jasmine initとか素敵だし。
似て非なるツールだった。npmでjasmine-node入るようになってたので試した。

2011/01/02追記

Player.jsとPlayerSpec.jsを削除するとJasmineサーバがエラーで終了してしまい動かない。やや不安を感じさせる。
今後のJasmineやNode.jsのアップデートに追随するかもわからないので、そのあたりはリスクと言える。使うのやめて他のやり方でJasmineを動かせばいいだけだからたいしたリスクじゃないけど。

2011/01/10追記

Node.js周りの理解が深まるにつれJasmine-Toolがnpmのモジュール名に「jasmineを使うのはまずいだろjk…」って気になってきました。
Jasmine本体と紛らわしいじゃないか。

2011/01/12追記

jasmine-nodeに転んだ。

参考

次の記事

Jasmine用のVimスニペット