【JavaScript】【CI】Jasmine + PhantomJS + JenkinsでJavascriptのテスト

Jasmine

JavaScript用のテスティングフレームワーク
使い方は下記等を参考

JasmineによるJavaScriptのテスト その1 « サーバーワークス エンジニアブログ
http://blog.serverworks.co.jp/tech/2010/11/30/jasmine-tutorial-1/

・インストール（というほどのものでもないが）

以下からzipをダウンロード
https://github.com/pivotal/jasmine/downloads

・サンプル

適当なディレクトリに展開してSpecRunner.htmlをブラウザで表示
例）apacheのDocumentRootにjasmineディレクトリを作成
http://localhost/jasmine/SpecRunner.html

テスト結果が表示されればOK

PhantomJS

Headless WebKit with JavaScript API
画面のないwebkitブラウザ

phantomjsを使うことでjsのテストをコマンド実行できる

・インストール

Windowsへのインストールはバイナリがダウンロードできる
http://code.google.com/p/phantomjs/downloads/list

Unix系なら下記参考
http://phantomjs.org/build.html

・サンプル

例）SpecRunner.htmlのテストを実行
SpecRunner.htmlのreporterを変更

実行

/path-to-phantomjs/bin/phantomjs /path-to-phantomjs/examples/run-jasmine.js http://localhost/jasmine/SpecRunner.html
'waitFor()' finished in 200ms.
Player

Jenkins

ソフトウェアのビルドやcronで起動するジョブなどの繰り返しジョブの実行を監視する。

Jenkins - 日本語 - Jenkins Wiki
https://wiki.jenkins-ci.org/display/JA/Jenkins

・インストール

java -jar jenkins.warを実行するか、サーブレットコンテナにデプロイ

例）tomcatにデプロイする場合
/path-to-tomcat/webapps/jenkins.warを配置
http://localhost:8080/jenkinsにアクセス


Phatomjs + Jasmineでテスト結果をJUnit形式のxmlに出力

以下からライブラリをダウンロード
https://github.com/detro/phantomjs-jasminexml-example

phantomjs_jasminexml_runner.jsを/path-to-phantomjs/testに配置
core.jsを/path-to-phantomjs/test/lib/utilsに配置

jasmine.phantomjs-reporter.jsをjasmineのテストhtmlで読み込み、reporterを変更

例）SpecRunner.htmlのテスト結果をxmlに出力
SpecRunner.htmlのreporterを変更

実行

/path-to-phantomjs/bin/phantomjs /path-to-phantomjs/test/phantomjs_jasminexml_runner.js http://localhost/jasmine/SpecRunner.html [path-to-output]

[path-to-output]で指定したディレクトリにTEST-Player.xmlが出力される。


Jenkinsでテストをジョブ登録

Jenkinsの画面から
①新規ジョブの作成を押す
②ジョブ名を入力し、フリースタイル・プロジェクトのビルドを選択してOKを押す
③ビルド→ビルド手順の追加→シェルの実行でテスト実行コマンドを登録

例）SpecRunner.htmlの場合は下記を指定

/path-to-phantomjs/bin/phantomjs /path-to-phantomjs/test/phantomjs_jasminexml_runner.js http://localhost/jasmine/SpecRunner.html $WORKSPACE

$WORKSPACEはjenkinsの環境変数。通常は$JENKINS_HOME/workspace/[job-name]
tomcatにデプロイした場合、$JENKINS_HOMEは$TOMCAT_USER_HOME/.jenkinsがデフォルト

④ビルド後の処理→JUnitテスト結果の集計を選択してテスト結果XMLを指定
  $WORKSPACEに出力している場合は*.xml
⑤設定を保存し、ビルドを実行して動作確認。ビルド履歴からテスト結果等が閲覧できる。
⑥その他、ビルド・トリガで自動実行、ビルド後の処理でメール通知、等を設定