最近とあるプロジェクトで、JavaScriptを使い、お客さん先のホームページを読込、その内容に応じて広告をJavaScript内で生成する『レコメンドエンジン』の配信サービスを提供している。 その中で、JavaScriptが複雑化してきたので、JSのxUnitの書き方と、CIサーバJenkinsに載せるようにしました。
JavaScriptの単体テスト
QUnitとJasmineを調べたが、ピュアなxUnitが好きなので、今回QUnitを選択した。QUnitのテスト表記は下記のようにシンプルなequal関数でサクサクかけました。
書きながらソースコードのリファクタリングも進みました。やはりテストコード書くとコードの悪い所が顕著に見えるのが心地いいです。
１，QUnit
元々は、jQueryのテストフレームワークとしてスタートした。現在はjQueryに依存していない
公式サイト：http://docs.jquery.com/QUnit
◯テスト表記
1 2 3 4 5 | test("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equal( value, "hello", "We expect value to be hello" ); }); |
２，Jasmine
BDD for JavaScriptのテストフレームワーク
公式サイト：http://pivotal.github.com/jasmine/
◯テスト表記
1 2 3 4 5 | describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); }); |
QUnitをCUIで実行する
通常QUnitのテスト実行は、ブラウザを使って試験実行と試験確認を行います。JenkinsにてCIを回す事を考えると、CUIベースで試験が実行される仕組みが必要です。
そこで、headless Webkitの『PhantomJS』を使います。headlessとは、頭の無いということですが、Webkitでの表示機能を内部に持っているけど、実際の表示は一切しないというブラウザです。
<
blockquote>
実際どんな事出来るのですが、PhantomJSのソース内のexamplesを見てみて下さい。
公式サイト：http://www.phantomjs.org
公式サンプル：<a href=”https://github.com/ariya/phantomjs/tree/master/examples>https://github.com/ariya/phantomjs/tree/master/examples
PhantomJSのインストール
下記ページを参考に、バイナリでCentOS5.5へインストールしたらエラーが出てうまく入りませんでした。
http://code.google.com/p/phantomjs/wiki/Installation
ソースからコンパイルしてインストールしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | # atrpmsリポジトリの追加 vi /etc/yum.repos.d/atrpms.repo [atrpms] name=ATrpms manual baseurl=http://dl.atrpms.net/el5-$basearch/atrpms/testing/ gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms gpgcheck=1 rpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms yum -y install qt47-webkit qt47-webkit-devel qt47-devel sqlite # ソースからコンパイル sudo su - cd /usr/local/src wget http://phantomjs.googlecode.com/files/phantomjs-1.5.0-source.tar.gz tar zxfv phantomjs-1.5.0-source.tar.gz rm -f phantomjs-1.5.0-source.tar.gz cd phantomjs-1.5.0/ # 下記ビルドコマンドはデフォルトで4つのコンパイラが同時起動する # さくらVPS512だとSwapが発生したので下記オプション付きで実行 # ./build.sh --jobs 1 ./build.sh # インストール用のパッケージ作成 # make distclean # yum -y install chrpath ./deploy/package-linux-dynamic.sh # インストール cd .. tar zxfv ./phantomjs-1.5.0/phantomjs.tar.gz cp -f ./phantomjs/bin/phantomjs /usr/bin cp -f ./phantomjs/lib/libQt* /usr/lib # 掃除 rm -fr ./phantomjs rm -fr ./phantomjs-1.5.0 |
下記コマンドでVerが確認出来れば無事にインストール終了
1 2 | phantomjs -v
1.5.0 |
PhantomJS 内で QUnit を実行
PhantomJSのexamplesの中にある「run-qunit.js」を使うとCUIでQUnitを実行できます。
下記コマンドqunitのテストコードが実行できる。引数に相対パスでQUnitのテストコードを指定すると、テスト結果を標準出力と終了コードに返します。
1 2 3 4 | phantomjs ./phantomjs-1.5.0/examples/run-qunit.js ./qunit/test/index.html 'waitFor()' finished in 1952ms. Tests completed in 1780 milliseconds. 586 tests of 586 passed, 0 failed. |
これで、Jenkinsに組み込むための準備ができました！
参照：http://code.google.com/p/phantomjs/wiki/TestFrameworkIntegration
Jenkinsに組み込む
Jenkinsへはプロジェクトの「設定」の「ビルド」にシェルの実行を加え下記コマンドを追加します。
1 2 | # 下記パスは適当に書き換えて下さい phantomjs ./public/javascripts/run-qunit.js ./public/test/test_common_service.html |
メニューから「ビルド実行」を実行して無事にQUnitが動作しているか確認して下さい。
これで無事にJSをCI出来ます！
