はじめまして!cosmiRelationshipSuiteの開発者であるマルィシェフ・ドミトリーと申します。
世の中で、Webベースシステムが増えており、管理画面の開発を担当している、エンジニアの視野から抜けがちであるJavaScriptのテストについてお話します。
最近の数年、TDD概念が非常に流行っており、Model(ビジネスロジック)をテストするJUnitやPHPUnitの利用は当たり前のようなことになりました。
それと同じく、JS(要するに、Front側のロジック)のテストがをしっかりできる環境として、QUnit+PhantomJS+Jenkinsの組み合わせを紹介したいと思います。
初めに
この度、localhostで開発・テスト・本番環境を設定し、開発→テスト→本番マシンへの展開を再現し、
JavaScriptのTDDを実践で試してみましょう。
利用するツールに関して
初めに
この度、localhostで開発・テスト・本番環境を設定し、開発→テスト→本番マシンへの展開を再現し、
JavaScriptのTDDを実践で試してみましょう。
利用するツールに関して
Jenkins
CI(Continuous Integration→継続的インテグレーション)のツールです。
Jenkinsの詳しい資料は、http://jenkins-ci.org/にあります。
PhantomJS
PhantomJSはJavaScript APIで動くヘッドレスWebKitです。要するに、ブラウザーがなくてもJavaScriptが実行できる仕組みを提供していただいております。
PhantomJSについて、http://phantomjs.org/ をお読みください。
QUnit
QUnitはJavaScriptのUnit Testing Frameworkです。その大きなメリットは、
- 非常にlightweightである
- 学習コストが安い
- 豊富なpluginが用意されている
- synchronous/asynchronous callbackのテストが可能
- モジュール定義により、htmlファイル毎にJSテストを分けることもできる
QUnitの利用に関して、詳しくはhttp://qunitjs.com/cookbook/#introductionをご覧ください。
早速、環境を用意しましょう。。。
前提条件
gitがマシンに既にインストールされていて、GitHubのアカウントを保有していること。
1. PhantomJSをインストール
ローカルフォルダーの下にgit cloneでPhantomJSを取得し、下記の手順に従い、ビルドしてください。
私の場合、/myprojects/phantomjsにgithubからcloneしました。
私の場合、/myprojects/phantomjsにgithubからcloneしました。
mkdir /myprojectscd /myprojectsgit clone git://github.com/ariya/phantomjs.git
そこからQUnitを実行するスクリプトを呼び出します。でも、それについて、後程。。。
そして、PhantomJSをインストールします。
そして、PhantomJSをインストールします。
sudo apt-get updatesudo apt-get install phantomjs
ビルドに関して、http://phantomjs.org/build.html に書いてあります。
※ ビルドは数時間かかる場合もございます。 2. Jenkinsをインストール
wget -q -O - https://jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get updatesudo apt-get install jenkins
今回は、Ubuntuでインストールしましたので、その他のシステムのJenkinsインストール手順に関して、
https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkinsをご覧ください。
デフォルトでJenkinsはhttp://127.0.0.1:8080で見れます。
3. JenkinsとGitHubを連携
必要となるpluginをインストールします。
「Jenkinsの管理」→「プラグイン管理」で、「利用可能」タブで、「Git Plugin」、「Parameterized trigger Plugin」、「GitHub pull request builder plugin」、「GitHub Plugin」を検索し、インストールしてください。
pluginインストールが完了したらJenkinsを再起動してください。
https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkinsをご覧ください。
デフォルトでJenkinsはhttp://127.0.0.1:8080で見れます。
3. JenkinsとGitHubを連携
必要となるpluginをインストールします。
「Jenkinsの管理」→「プラグイン管理」で、「利用可能」タブで、「Git Plugin」、「Parameterized trigger Plugin」、「GitHub pull request builder plugin」、「GitHub Plugin」を検索し、インストールしてください。
pluginインストールが完了したらJenkinsを再起動してください。
sudo service jenkins restart
JenkinsとGitHubを連携する際、必要となる鍵を生成しましょう。jenkinsユーザ(Jenkinsインストール時に自動的に作成されるユーザ)の権限で、鍵を生成しなければなりません。
sudo su -l jenkinsssh-keygen -t rsa -C "jenkins@hogehoge.com"
鍵を生成する際、デフォルトのまま進めてください。
Generating public/private rsa key pair.Enter file in which to save the key (/var/lib/jenkins/.ssh/id_rsa):Created directory '/var/lib/jenkins/.ssh'.Enter passphrase (empty for no passphrase):Enter same passphrase again:Your identification has been saved in /var/lib/jenkins/.ssh/id_rsa.Your public key has been saved in /var/lib/jenkins/.ssh/id_rsa.pub.The key fingerprint is:09:b6:79:a6:b4:9d:5b:d0:ab:36:fb:93:ea:a4:62:7e jenkins@hogehoge.com
生成された鍵、Ubuntuの場合、デフォルトで/var/lib/jenkins/.sshに生成されます。
できた鍵をknown_hostsに追加します。
できた鍵をknown_hostsに追加します。
eval $(ssh-agent)ssh-add /var/lib/jenkins/.ssh/id_rsa
その後、GitHubの「Settings」→「SSH keys」→「Add SSH Key」を開きます。
Titleに適当な名前を入力して、/var/lib/jenkins/.ssh/id_rsa.pub(生成されたJenkins公開鍵Jenkinsのデフォルト保存場所)の内容をコピーして、Keyに貼り付けます。
GitHubの鍵生成の詳しくは、https://help.github.com/articles/generating-ssh-keysを参照できます。
4. GitHubのリポジトリーを作成
GitHubでtestrepoリポジトリーを作成します。
5. 開発環境の用意
testrepoをローカルの作業フォルダーにcloneします。
mkdir /workdir
cd workdir/git clone --recursive https://github.com/d-malyshev/testrepo.git
apacheのconfファイルに作業フォルダーパスを追加<VirtualHost *:80>
DocumentRoot /workdir/testrepo/public_htmlServerName work.myserver.comErrorLog "/var/log/apache2/work_server-error_log"CustomLog "/var/log/apache2/work_server-access" common</VirtualHost>
/etc/hostsに開発用のサーバを追加
127.0.0.1 work.myserver.com
6. プロジェクトのソースコードを実装
開発フォルダーのtestrepoの下で、加算・引き算をする簡単なファイルを実装しましょう。
それより、先にGitHubのtest_branchのブランチを作成します。
cd /workdir/testrepogit checkout -b test_branch
プロジェクトは以下のファイル構造になります。
/public_html/index.html -> indexファイル/add.html -> 足し算の処理/subtract.html -> 引き算の処理/js -> JavaScriptフォルダー/test -> ここでJavaScript用のUnit Testの.jsファイルを保存します/unit_test.js -> 実際のUnit Test
まずは、htmlページを実装します。
index.html
index.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Calculation Page</title></head><body><p>Welcome to calculation site!</p><p><a href="add.html">Addition</a></p><p><a href="subtract.html">Subtraction</a></p></body></html>
add.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Calculation Page: addition</title></head><body><script>function calculateAdd(a, b){var result = a + b;return result;}</script><script>var res = calculateAdd(1, 2);document.write("1 + 2 = " + res);</script></body></html>
subtract.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Calculation Page: subtraction</title></head><body><script>function calculateSubtract(a, b){var result = a - b;return result;}</script><script>var res = calculateSubtract(2, 1);document.write("2 - 1 = " + res);</script></body></html>
QUnitでテストできるには、ソースコードに数行を追加しなければいけません。
QUnitのライブラリjsとその表示用のcssをhtmlのheadに追加します。
<link rel="stylesheet" type="text/css" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
QUnitのテスト結果が表示されるqunitとqunit-fixtureのidを持っているdivもhtmlのbody追加します。
<div id="qunit"></div><div id="qunit-fixture"></div>
そして、QUnitのUnit Testも実装します。
QUnit.test("calculateAdd test", function(assert) {var value = calculateAdd(1, 2);var expected = 3;assert.equal(value, expected, "We expect addition result to be " + expected);});
すべてを組み合わせると、以下のようになります。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Calculation Page: addition</title><link rel="stylesheet" type="text/css" href="//code.jquery.com/qunit/qunit-1.15.0.css"><script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script></head><body><script>function calculateAdd(a, b){var result = a + b;return result;}</script><script>var res = calculateAdd(2, 1);document.write("1 + 2 = " + res);</script><script>QUnit.test("calculateAdd test", function(assert) {var value = calculateAdd(1, 2);var expected = 3;assert.equal(value, expected, "We expect addition result to be " + expected);});</script><div id="qunit"></div><div id="qunit-fixture"></div></body></html>
phantomjs /myprojects/phantomjs/examples/run-qunit.js http://work.myserver.com/add.html'waitFor()' finished in 220ms.Tests completed in 20 milliseconds.1 assertions of 1 passed, 0 failed.
※ run-qunit.jsのパスはPhantomJSのソースコードの保存先によって変わります。
QUnitテストのソースコードをテスト専用のjs/test/unit_test.jsに移行しましょう。または、各htmlファイルにQUnit用のcssやdiv.qunitとdiv.qunit-fixtureを追記しないように、それを動的に生成するようにしましょう。
さて、unit_test.jsは以下のようになります。
QUnitテストのソースコードをテスト専用のjs/test/unit_test.jsに移行しましょう。または、各htmlファイルにQUnit用のcssやdiv.qunitとdiv.qunit-fixtureを追記しないように、それを動的に生成するようにしましょう。
さて、unit_test.jsは以下のようになります。
// Test環境のみで必要な結果表示用のdivやcssを追加var d = document;var qd = d.createElement('div');qd.id = "qunit";d.body.appendChild(qd);var qfd = d.createElement('div');qfd.id = "qunit-fixture";d.body.appendChild(qfd);//QUnitのstylesheetを追加var head = d.getElementsByTagName('head')[0];var css = d.createElement("link")css.setAttribute("rel", "stylesheet")css.setAttribute("type", "text/css")css.setAttribute("href", "//code.jquery.com/qunit/qunit-1.15.0.css");head.appendChild(css);// 足し算Testを実行QUnit.test("calculateAdd test", function(assert) {var value = calculateAdd(1, 2);var expected = 3;assert.equal(value, expected, "We expect addition result to be " + expected);});
add.htmlも修正します。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Calculation Page: addition</title><script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script></head><body><script>function calculateAdd(a, b){var result = a + b;return result;}</script><script>var res = calculateAdd(1, 2);document.write("1 + 2 = " + res);</script><script src="js/test/unit_test.js"></script></body></html>
ただし、subtract.htmlのQUnitのテストjs/test/unit_test.jsを追加すると...
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Calculation Page: subtraction</title><script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script></head><body><script>function calculateSubtract(a, b){var result = a - b;return result;}</script><script>var res = calculateSubtract(2, 1);document.write("2 - 1 = " + res);</script><script src="js/test/unit_test.js"></script></body></html>
...subtract.htmlのUnit Testは失敗します。
phantomjs /myprojects/phantomjs/examples/run-qunit.js http://work.myserver.com/subtract.html'waitFor()' finished in 208ms.Tests completed in 34 milliseconds.0 assertions of 1 passed, 1 failed.
失敗の理由は、subtract.htmlでテストしようとしているcalculateAddの関数がないからです。
もちろん、subtract.htmlの関数のみのUnit Testのjsを実装すれば、subtract.htmlのUnit Testは成功します。
しかし、各htmlファイル用のUnit Testのjsを用意するのが非常に面倒です。
そのために、QUnitでModuleという仕組みが設けられ、複数htmlページの関数テストを一つのjsファイルでまとめて、モジュール毎の呼び出しは可能です。
足し算処理のテストと引き算処理のテストをそれぞれ、add_testとsubtract_testに分けます。
もちろん、subtract.htmlの関数のみのUnit Testのjsを実装すれば、subtract.htmlのUnit Testは成功します。
しかし、各htmlファイル用のUnit Testのjsを用意するのが非常に面倒です。
そのために、QUnitでModuleという仕組みが設けられ、複数htmlページの関数テストを一つのjsファイルでまとめて、モジュール毎の呼び出しは可能です。
足し算処理のテストと引き算処理のテストをそれぞれ、add_testとsubtract_testに分けます。
// モジュールadd_testを作成(public_html/add.htmlページのJSテスト用)QUnit.module("add_test");// 足し算Testを実行QUnit.test("calculateAdd test", function(assert) {var value = calculateAdd(1, 2);var expected = 3;assert.equal(value, expected, "We expect addition result to be " + expected);});// モジュールsubtract_testを作成(public_html/subtract.htmlページのJSテスト用)QUnit.module("subtract_test");// 引き算Testを実行QUnit.test("subtract_test calculateSubtract test", function(assert) {var value = calculateSubtract(2, 1);var expected = 1;assert.equal(value, expected, "We expect subtraction result to be " + expected);});
できたモジュールをもう一度、呼び出してみます。モジュール毎のUnit Testは、http://yourdomain/filename?module=moduleName形式で呼び出されます。
足し算のテスト
足し算のテスト
phantomjs /myprojects/phantomjs/examples/run-qunit.js http://work.myserver.com/add.html?module=add_test'waitFor()' finished in 216ms.Tests completed in 17 milliseconds.1 assertions of 1 passed, 0 failed.
引き算のテスト
phantomjs /myprojects/phantomjs/examples/run-qunit.js http://work.myserver.com/subtract.html?module=subtract_test'waitFor()' finished in 207ms.Tests completed in 19 milliseconds.1 assertions of 1 passed, 0 failed.
最後には、unit_test.jsにもう少し手を加えましょう。
実は、その開発環境でも本番環境でもQUnitのJavaScriptは毎回呼ばれるのが困ります。
結局、テスト用のマシンのみQUnitを実行したいわけです。そのため、QUnit.config.autostartの設定項目が存在しています。そもそも、QUnit.config.autostartはtrueになっているから、ページがロードされる度にUnit Testは走ります。
そこで、テスト用のtest.myserver.comでのみ実行できるようにQUnit.config.autostartを工夫します。
実は、その開発環境でも本番環境でもQUnitのJavaScriptは毎回呼ばれるのが困ります。
結局、テスト用のマシンのみQUnitを実行したいわけです。そのため、QUnit.config.autostartの設定項目が存在しています。そもそも、QUnit.config.autostartはtrueになっているから、ページがロードされる度にUnit Testは走ります。
そこで、テスト用のtest.myserver.comでのみ実行できるようにQUnit.config.autostartを工夫します。
QUnit.config.autostart = (window.location.href.indexOf("test.myserver.com") > -1) ? true : false;
// テスト環境のみで実行QUnit.config.autostart = (window.location.href.indexOf("test.myserver.com") > -1) ? true : false;// Test環境のみで必要なdivやcssを追加if (QUnit.config.autostart != false) {// 結果表示divを追加var d = document;var qd = d.createElement('div');qd.id = "qunit";d.body.appendChild(qd);var qfd = d.createElement('div');qfd.id = "qunit-fixture";d.body.appendChild(qfd);//QUnitのstylesheetを追加var head = d.getElementsByTagName('head')[0];var css = d.createElement("link")css.setAttribute("rel", "stylesheet")css.setAttribute("type", "text/css")css.setAttribute("href", "//code.jquery.com/qunit/qunit-1.15.0.css");head.appendChild(css);}// モジュールadd_testを作成(public_html/add.htmlページのJSテスト用)QUnit.module("add_test");// 足し算Testを実行QUnit.test("calculateAdd test", function(assert) {var value = calculateAdd(1, 2);var expected = 3;assert.equal(value, expected, "We expect addition result to be " + expected);});// モジュールsubtract_testを作成(public_html/subtract.htmlページのJSテスト用)QUnit.module("subtract_test");// 引き算Testを実行QUnit.test("subtract_test calculateSubtract test", function(assert) {var value = calculateSubtract(2, 1);var expected = 1;assert.equal(value, expected, "We expect subtraction result to be " + expected);});
できたソースコードをGitHubのtest_branchにpushしましょう。
git add .git commit -m "Initial commit"git push origin test_branch
7. Jenkinsのjobを作成
こちらで、ソースコードをbuild/test/deployするjobを作成します。status_update_job: build状態をGitHubに知らせるjobを作成
プロジェクトをビルドするjobはそれを参照するので、先に作ります。
「新規ジョブ作成」で
「フリースタイル・プロジェクトのビルド」にチェック
「プロジェクト名」→ status_update_job
「OK」で作成画面に入ります。
ジョブ作成画面で
「ビルドのパラメータ化」にチェック
「ビルドのパラメータ化」→「パラメータの追加」→「文字列」で3つのパラメータを作成し、それぞれの「名前」にCOMMIT_STATUS、UPDATE_COMMIT、REPOSITORY_NAMEを入力
「ソースコード管理」→「なし」にチェック
「ビルド」→「シェル実行」を選択します。
「ビルド」→「シェルスクリプト」にビルドされたcommitの状態(successまたは、failure)をGitHubに通知する処理
curl -i -H 'Authorization: token abcdef0123456789abcdef012345fc2b6142d8a7' \-d '{"state": "'${COMMIT_STATUS}'"}' \https://api.github.com/repos/${REPOSITORY_NAME}/statuses/${UPDATE_COMMIT}
tokenはOAuth用に生成してください。
GitHubの「Settings」→「Applications」→「Generate new token」でOAuthトークンを生成し、その文字列をどこかで保存してください。トークンを作成する際、repoにチェックが入っていることを、確認してください。
build_job: プロジェクトをビルドするjobを作成
GitHubの「Settings」→「Applications」→「Generate new token」でOAuthトークンを生成し、その文字列をどこかで保存してください。トークンを作成する際、repoにチェックが入っていることを、確認してください。
build_job: プロジェクトをビルドするjobを作成
「新規ジョブ作成」で
「フリースタイル・プロジェクトのビルド」にチェック
「プロジェクト名」→ build_job
「OK」で作成画面に入ります。
ジョブ作成画面で
「ソースコード管理」→「Git」にチェック
「Repositories」→「Repository URL」にgit@github.com:{githubのアカウント}/{あなたのリポジトリ―}(私の場合、git@github.com:d-malyshev/testrepo.gitです)
「Repositories」→「Credentials」で「なし」を選択
「Branches to build」に2つのbranchを「Add Branch」で追加してください。それぞれの「Branch Specifier」に「*/master」と「*/release」を入力してください。
「Additional Behaviors」で「Strategy for choosing what to build」を選択し、その中から「Inverse」にしてください。
「ビルド・トリガー」→「SCMをポーリング」にチェック
「ビルド・トリガー」→「スケジュール」に常に起動するように設定
* * * * *
「ビルド」→「シェル実行」を選択します。
「ビルド」→「シェルスクリプト」にPhantomJS+QUnitのモジュールテストを指定します
phantomjs /myprojects/phantomjs/examples/run-qunit.js http://test.myserver.com/add.html?module=add_testphantomjs /myprojects/phantomjs/examples/run-qunit.js http://test.myserver.com/subtract.html?module=subtract_test
「ビルド後の処理」→「Trigger parametrized build on other projects」を選択
「Add trigger」で2つのBuild Triggersを追加
その二つは、以下のようになります
1番目
「Projects to build」→ status_update_job
「Trigger when build is」→「Stable or unstable but not failed」を選択
「Predefined parameters」に
COMMIT_STATUS=successUPDATE_COMMIT=${GIT_COMMIT}REPOSITORY_NAME=あなたのアカウント/あなたのリポジトリ―(私の場合、d-malyshev/testrepo)
2番目
「Projects to build」→ status_update_job
「Trigger when build is」→「Failed」を選択
「Predefined parameters」に
COMMIT_STATUS=failureUPDATE_COMMIT=${GIT_COMMIT}REPOSITORY_NAME=あなたのアカウント/あなたのリポジトリ―(私の場合、d-malyshev/testrepo)
mergeされたリポジトリ―を本番サーバにdeployするjobを作成
「新規ジョブ作成」で
「フリースタイル・プロジェクトのビルド」にチェック
ジョブ作成画面で
「フリースタイル・プロジェクトのビルド」にチェック
「プロジェクト名」→ deploy_job
「OK」で作成画面に入ります。
ジョブ作成画面で
「ソースコード管理」→「なし」にチェック
「ビルド・トリガー」→「定期的に実行」にチェック
「ビルド・トリガー」→「スケジュール」に常に起動するように設定。5分毎にmergeされたプロジェクトを確認したい場合、以下のように記述
*/5 * * * *
「ビルド」→「シェル実行」を選択します。本番サーバに最新のソースコードをpullします
if [ -d /myserver/testrepo ]; thencd /myserver/testrepogit pull origin masterelsecd /myservergit clone --recursive https://github.com/d-malyshev/testrepo.gitfi
8. 本番環境の用意
GitHubでbranchがmasterにmergeされた後、本番環境にソースコードをdeployします。
今回、開発環境や本番環境は同じマシンになっていますので、本番環境は別のマシンになる場合、rsyncなどをご利用ください。
/myserverフォルダーを作成してください。
apacheのconfファイルに作業フォルダーパスを追加
<VirtualHost *:80>DocumentRoot /myserver/testrepo/public_htmlServerName prod.myserver.comErrorLog "/var/log/apache2/prod_server-error_log"CustomLog "/var/log/apache2/prod_server-access" common</VirtualHost>
/etc/hostsに開発用のサーバを追加
127.0.0.1 prod.myserver.com
9. Jenkinsでのテスト環境の用意
PhantomJSはQUnitをテスト用のサーバで実行するので、先ほど作成されたJenkinsのbuild_jobはtest.myserver.comテストサーバのDocumentRootになるように、apacheのconfファイルに下記を追記します。
<VirtualHost *:80>DocumentRoot "/var/lib/jenkins/jobs/build_job/workspace/public_html"ServerName test.myserver.comErrorLog "/var/log/apache2/test_server-error_log"CustomLog "/var/log/apache2/test_server-access" common</VirtualHost>
/etc/hostsにも開発用のサーバを追加
127.0.0.1 test.myserver.com
10. PhantomJS+QUnit+Jenkinsの実践
これで、やっと開発・テスト・本番環境が揃いました。
本番環境にはまだ何もdeployされていないので、本番サーバはこの感じです。
とりあえず、add.htmlを修正し、bugを仕込みましょう。
bugを入れる前
function calculateAdd(a, b){var result = a + b;return result;}
bugを入れた後
function calculateAdd(a, b){var result = a + b;// Unit Testを通らないようにbugreturn result+1;}
そして、そのソースコードを、先作成してきたtest_branchに pushします。
git add .git commit -m "Created bug"git push origin test_branch
GitHubでtest_branchのPull Requestを作成してみます。
それをやってみると、最近の当ブランチにpushされたcommitのbuild_jobが失敗したことが分かります。
ブランチをクリックすると、ビルドが失敗したcommitを見れます。
では、仕込んできたbugを修正し、またtest_branchにpushしましょう。
それをやってみると、最近の当ブランチにpushされたcommitのbuild_jobが失敗したことが分かります。
ブランチをクリックすると、ビルドが失敗したcommitを見れます。
Jenkinsのjob一覧画面を見ると、build_jobの#8が失敗したことが分かります。
そのbuild_jobをクリックし、job結果一覧画面に移動します。
失敗した#8の詳細ページに行って、Console Outputでbuildの失敗した原因を調べることもできます。
build_jobの次に、status_update_jobが起動し、GitHubでcommitの状態をfailureに設定しました。そのbuild_jobをクリックし、job結果一覧画面に移動します。
失敗した#8の詳細ページに行って、Console Outputでbuildの失敗した原因を調べることもできます。
では、仕込んできたbugを修正し、またtest_branchにpushしましょう。
bugを修正した後
function calculateAdd(a, b){var result = a + b;return result;}
そして、test_branchにpushします。
git add .git commit -m "Fixed bug"git push origin test_branch
今度、build_jobは成功し、GitHub上の結果はこのとおりとなります。
test_branchを「Merge pull request」→「Confirm merge」でmasterにmergeし、最後に「Delete branch」でtest_branchを削除します。その後、deploy_jobは起動し、masterから最新版のソースコードを本番サーバにpullします。
そして、先ほど設定した本番サーバのhttp://prod.myserver.comにアクセスし、ソースコードは問題なく表示されていることをご確認ください。test_branchを「Merge pull request」→「Confirm merge」でmasterにmergeし、最後に「Delete branch」でtest_branchを削除します。その後、deploy_jobは起動し、masterから最新版のソースコードを本番サーバにpullします。
まとめ
「使いやすさと良き見映えは成功の8割」と言われるWeb画面ですが、
そのJavaScriptのバグは、ユーザーエクスペリエンスを低下させ、お客様からの多くのクレームの原因にもなります。
そこで、QUnit+PhantomJS+Jenkinsを利用したら、Front側JSの品質向上に充分貢献できるかと思います。