他サーバにデプロイされたテストのカバレッジを取得する
ここまでは、JSCoverをWebサーバとして使用してカバレッジを取得する方法を説明してきました。ただ、この方法だと、カバレッジを計測したいテストが別のWebサーバに置かれていたり、他サーバで動作している動的なページの場合はカバレッジを取得することができません。そこで、JSCoverをプロキシサーバとして使用する方法が用意されています。処理の流れは以下のとおりです。プロキシサーバとして介在することで、JavaScriptを自動的にカバレッジが取得できるコードに変換する処理や、jscoverage.htmlを表示する処理を行います。
サーバの起動
ではサーバを起動します。--proxyオプションを付けるだけでプロキシサーバとして起動します。ここでは、プロキシサーバのポートを3128を指定しています。
cd d:sample java -jar JSCover-all.jar -ws --proxy --port=3128 --report-dir=target
ブラウザのプロキシ設定
次に、ブラウザでテストを実行する際、必ずJSCoverのプロキシサーバを介させるため、ブラウザに対してプロキシサーバの設定を行います。Internet Explorerでの設定は以下のとおりです。ここで示す例は、上記サーバの起動オプションでの設定です。読者の皆様の環境設定や起動時のポートの設定によって変わりますので、置き換えてください。
ブラウザ右上の設定ボタン -> インターネットオプション -> 接続タブ -> LANの設定ボタンを押下
- LANにプロキシサーバを使用するにチェック
- アドレス：localhost
- ポート：3128
テストの実行
ではテストの実行を行ってみましょう。今回テストを動かす別サーバはJSCoverに用意されているWebサーバ機能を使ってみます。以下のコマンドを実行してみてください。
cd d:sample java -cp JSCover-all.jar jscover.server.SimpleWebServer . 8080
まず、以下のURLにアクセスしてみてください。テストが実行されることが確認できます。
http://localhost:8080/SpecRunner.html
次に、以下のJavaScriptにアクセスしてみましょう。これはテスト対象のfizzbuzzのコードです。元々10数行の短いコードのはずですが、長いJavaScriptのコードが表示されます。これは、カバレッジが取得できるようなコードにプロキシサーバが変換していることを表しています。このコードをjscoverage.htmlの画面で実行することにより、カバレッジを取得することができるのです。
http://localhost:8080/js/fizzbuzz.js
var fizzbuzz = function(n) {
if (n % 3 === 0 && n % 5 === 0){
return "Fizz,Buzz";
}else if (n % 3 === 0){
return "Fizz";
}else if (n % 5 === 0){
return "Buzz";
}else{
return n;
}
}
if (! window.jscoverage_report) {
window.jscoverage_report = function jscoverage_report(dir) {
var createRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
～省略～
} else {
_$jscoverage['/js/fizzbuzz.js'].lineData[4]++;
if (visit374_4_1(n % 3 === 0)) {
_$jscoverage['/js/fizzbuzz.js'].lineData[5]++;
return "Fizz";
} else {
_$jscoverage['/js/fizzbuzz.js'].lineData[6]++;
if (visit375_6_1(n % 5 === 0)) {
_$jscoverage['/js/fizzbuzz.js'].lineData[7]++;
return "Buzz";
} else {
_$jscoverage['/js/fizzbuzz.js'].lineData[9]++;
return n;
}
}
}
};
次に、http://localhost:8080/jscoverage.htmlにアクセスしてみてください。指定しているドキュメントルートには、jscoverage.htmlが置いてないはずですが、jscoverage.htmlが表示されます。これは、jscoverage.htmlがアクセスされた場合、JSCoverのプロキシサーバが自動的にページを返しているためです。URL欄にhttp://localhost:8080/SpecRunner.htmlを指定するとテストが実行され、カバレッジが取得されます。
この場合、テスト結果が前半と同じなので、分かりやすいように少し違う視点でも実行してみましょう。プロキシを行うことにより、別サーバのカバレッジを取得することができるので、CodeZineのページのカバレッジを取得してみます。CodeZineのページはテストがありませんので、ページ表示時に処理が行われたロジック（命令）が何パーセントかを取得する結果になります。http://codezine.jp/jscoverage.htmlにアクセスし、カバレッジ取得対象のURLを入力してみましょう。ここではhttp://codezine.jp/article/detail/7257のカバレッジを取得してみました。
ここまでの説明で、jscoverage.htmlはテスト対象のページと同じドメインにしていることにお気づきでしょうか。これは、テストを新しいウィンドウかiframeで実行していますが、親ページとテスト実行結果のページのドメインが違うとクロスドメインのため、データのやり取りができず、親ページがカバレッジが収集できません。そこでわざわざプロキシサーバがどんなURLでもjscoverage.htmlを表示できるようにしています。
最後に
今回は、JSCoverを使ってカバレッジの取得を行いました。次回は、JavaScriptでの継続的インテグレーションの方法を説明します。
