主夫ときどきプログラマ

プログラミング、Webエンジニアリング、etc

YUITest を使ってJavascriptの単体テストを自動化するまで (後編)

前編 YUITest を使ってJavascriptの単体テストを自動化するまで (前編) - masayuki14’s diary


Git Repository への登録

これまでに使ったファイルをリポジトリに登録しよう。今回はGitをバージョン管理に利用する。実際のプロジェクトでテストを自動化して継続させるのにバージョン管理は必須要素だ。

$ git init
$ git add .
$ git commit -m ‘First commit’

これでGit Repository への登録は完了。

JenkinsのInstall

テストを自動実行するには何らかのツールを使う必要がある。そこで登場するのがJenkinsだ。とにかくインストールして動かしてみよう。大事なのは「射撃しつつ前進」なのだから。

$ brew install jenkins

インストールが終わったらJenkinsを起動してブラウザでアクセスしよう。Jenkinsはデフォルトでポート8080で起動する。

$ java -jar  -Dfile.encoding=utf-8 /usr/local/opt/jenkins/libexec/jenkins.war
# 文字コードをUTF8にするオプションを指定している

ブラウザを開いて http://localhost:8080/ にアクセスするとJenkinsが表示されるはずだ。
task.shを実行するようなジョブを登録すれば、自動的にJenkinsが継続して実行してくれる。
ジョブを登録していこう。

ジョブの登録

メニューから「新規ジョブ作成」を選んで必要な情報を入力しよう。
ジョブ名は好きに登録してOK。今回は「Run YUI Test」とし「フリースタイル・プロジェクトのビルド」を選んで「OK」だ。
次に各種設定を行っていく。

ソースコード管理

「Git」選び Repository URL を入力する。
今回はローカルのファイルシステムリポジトリを用意したので、Repository URL にリポジトリへのパスを入力する。これでGitの設定は完了。

ビルド・トリガ

「SCMをポーリング」にチェックをいれてスケジュールを設定する。定期的にリポジトリを確認し、変更があればビルドをする、という意味だ。スケジュールの書式はcronとほとんど同じ。
15分毎にポーリングさせるため「H/15 * * * * 」と入力する。

ビルド

ビルドの方法を設定する。task.sh の実行がビルドだ。
ビルド手順の追加から「シェルの実行」を選んでシェルスクリプトを記述する。
$ sh task.sh
これで設定は完了。「保存」ボタンで終了しよう。
リポジトリのルートディレクトリでシェルが実行される

これでJenkinsが自動でビルドを実行してくれるようになった。
リポジトリを15分毎に監視して、差分が発生していればビルドを実行してくれる。


テスト結果の収集

これまでの設定だけではJenkinsはビルドの成功・失敗しか結果を教えてくれない。しかしgroverからはテストの結果が出力されている。それをJenkinsに教えてあげれば、Jenkinsで集計をとり表示してくれるようになる。
その方法を見ていこう

テスト結果の出力

テスト結果をJenkinsに取り込ませるにはjUnit形式のXMLファイルに出力しなければならない。
幸いにも grover はこの出力に対応している

$ grover testRunner.html —junit -o result.junit.xml

これで result.junit.xml にテスト結果が出力される。
これをJenkinsに読み込むように設定する。

ビルドの設定

プロジェクトの設定を開き「ビルド後の処理」に設定を追加する。
ビルド後の処理の追加から「JUnitテスト結果の集計」を選び、テスト結果XMLに「result.junit.xml」を入力して保存。これで設定完了だ。


task.sh の grover コマンドを上記のように編集してgit repositoryにコミットしよう

# task.sh を編集
$ vim task.sh
     #!/bin/sh
     java -jar yuitest-coverage.jar -o target-coveraged.js target.js
     grover --coverage testRunner.html --junit -o result.junit.xml

# 変更内容をコミット
$ git add task.sh
$ git commit -m ‘テスト結果を result.juni.xml に出力’

これでJenkinsのビルド実行を待つ。ビルドに成功すればJenkinsがテスト結果を取り込み表示される。


カバレッジ結果の収集

Pluginのインストール

テスト結果と同様にカバレッジをJenkinsに取り込むにはCobertura Pluginプラグインをインストールする。
「Jenkinsの管理」> 「プラグインの管理」と進み「利用可能」タブを選択。フィルターに「Cobertura Plugin」を入力しすれば簡単に見つけることが出来る。
「インストール」にチェックを入れてインストールしよう。

カバレッジの出力

grover はテスト結果と同様にカバレッジ結果をLcov形式のファイルに出力することが出来る。

$ grover --coverage testRunner.html -co coverage.lcov

これでcoverage.lcov にカバレッジが出力される。

カバレッジ結果の変換

coverage.lcov をそのままJenkinsに取り込めると良いが、残念ながらJenkinsはLCOV形式には対応していない。
Coberturaで対応しているXML形式にcoverage.lcovを変換する必要がある。
変換には https://github.com/eriwen/lcov-to-cobertura-xml で公開されているPythonスクリプトを使う。ここから lcov_cobertura.py をダウンロードしよう。

$ python lcov_cobertura.py coverage.lcov -o coverage.xml

これで変換が完了

ビルドの設定

プロジェクトの設定を開き「ビルド後の処理」に設定を追加する。
ビルド後の処理の追加から「Coberturaカバレッジ・レポートの集計」を選び、Cobertura XMLレポート パターンに「result.junit.xml」を入力して保存する。
これで準備は整った。


task.sh を編集してコミットすれば全ての設定が完了。

$ vim task.sh

     #!/bin/sh
     java -jar yuitest-coverage.jar -o target-coveraged.js target.js
     grover --coverage testRunner.html --junit -o result.junit.xml -co coverage.lcov
     python lcov_cobertura.py coverage.lcov -o coverage.xml

$ git add task.sh lcov_cobertura.py
$ git commit -m ‘Coverageをcoverage.xmlに出力'

CIを回す

あとはJenkinsが自動でテストを実行し結果を集計してくれる。CIを回していこう!
おしまい。