主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: リファクタリングのたびに手動テストするのめんどい(Travis CIでPhantomJSを使ってテスト)

                
PhantomJS - JavaScriptを走らせるためのアプリケーション
Travis CI - 動作保障のためのテスト環境を用意してくれるサービス


 JavaScriptでJPEGを縮小するライブラリを書いた。たまにリファクタリングなど手を加えているが、編集が終わった後に自作のライブラリ使用例を使って手動テストしていてやたら面倒だった。
 PythonでGithub - Travis CIを使い始めたので、JavaScriptでもPythonと同様にテスト書いて、コミットしたらTravis CIで実行してもらってという便利なことをしたくなった。どうすればできるか。
 今回のライブラリはJPEGを縮小するだけなのでGUIを表示する必要がない。ただ関数を通して処理されたJPEGデータがちゃんと縮小されているかを確認するだけだ。ブラウザなしにJavaScriptを実行制御するツールとしてPhantomJSがある。これで動くテストスクリプトを書き、PhantomJSでテストを実行する。PhantomJSはWebkitベースで、オープンソースからはたまたTwitterのテストにも使われていたりする。ただドキュメントがまだ完成しきってないところがあったりも。

 まずローカルでテストを行うためにPhantomJSの公式からバイナリを落として実行可能なようにしておく。
>"c:\users\\desktop\phantomjs-1.9.8\phantomjs"
Windowsでは上記のコマンドでパスが正しければPhantomJSが立ち上がる。引数としてJSファイルを与えると、そのスクリプトが実行される。どんなものか基本的なことはQuickStartで。
 PhantomJSで実行するテストスクリプトを書く。あとでGithubを使ったTravis CI連携を考えて失敗はエラーコードを吐いて終わるようにする。"phantom.exit(1);"がテスト失敗時のスクリプトの終わらせ方。成功は"phantomjs.exit();"。下記が実際に使ったテストスクリプト。テストフレームワークを使うのも便利だが、まずはPhantomJSの使い方からTravis CIとの連携までを最小パーツだけで行いたかったのでテストフレームワークは未使用。
var fs = require("fs");  // ファイル読み込みに使うオブジェクト
eval(fs.read('MinifyJpegAsync.js')); // テストされるライブラリをJSファイルから読み込み
var img1 = fs.read("images/img1.txt"); // テストで使用する画像データをbase64エンコードしたもの
var img2 = fs.read("images/img2.txt"); // 真上の行と同様
var maxLength = 100; // 画像変形後の長辺の長さ
var test1 = null; // 一つ目のテスト結果を入れる変数
var test2 = null; // 二つ目のテスト結果を入れる変数

// テストは非同期処理が入っているので無名関数が入っている
// テストとして変形後の画像をImageオブジェクトに読み込んで辺の長さを読み取り、
// 縮小が行われているかを確認
MinifyJpegAsync.minify(img1, maxLength, function(data){
var img = new Image();
img.onload = function() {
var longSide = img.width > img.height ? img.width : img.height;
if (longSide != maxLength) {
console.log("Failed test1");
test1 = false;
} else {
test1 = true;
}
};
img.src = "data:image/jpeg;base64," + MinifyJpegAsync.encode64(data);
});

// 真上に書いたテストを別の画像データでもう一度
MinifyJpegAsync.minify(img2, maxLength, function(data){
var img = new Image();
img.onload = function() {
var longSide = img.width > img.height ? img.width : img.height;
if (longSide != maxLength) {
console.log("Failed test2");
test2 = false;
} else {
test2 = true;
}
};
img.src = "data:image/jpeg;base64," + MinifyJpegAsync.encode64(data);
});

// テストは非同期処理を含んでいたので、
// setIntervalを使って3秒ごとにテスト終了を確認するようにした
// テスト未終了ならなにもせず3秒後にまた確認、
// 終了していてエラーがあるならスクリプトをエラーコードとともに終了
// エラーなしでテストが終わっていたらエラーコードなしでスクリプト終了
setInterval(function() {
if (test1 == null || test2 == null){
// pass
} else if (test1 == false || test2 == false){
console.log("Failed.");
phantom.exit(1);
} else {
console.log("Passed all tests.");
phantom.exit();
}
}, 3000);

上記をtest.jsとして保存してPhantomJSで走らせる。
>"c:\users\\desktop\phantomjs-1.9.8\phantomjs" test.js
エラーがなしで"Passed all tests."のメッセージとともに終了を確認。結合テストだけだがこれでテストとして使えるものはできた。あとはTravis CIとの連携。これが今回は簡単。

 プロジェクトのルートに置く.travis.ymlの内容が今回はすごく簡潔になる。Travis CIではデフォルトでPhantomJSが使えるし、今回はサーバから投げるべきファイルがないのでサーバを立ち上げる必要がない。スクリプトがローカルからファイルを読んでいるだけ。そうすると.travis.ymlに書くべき実行命令は以下の一行だけ。
script: phantomjs test.js
このファイルを作ったらTravis CIでGithubとのプロジェクト連携をONにしてコミットすればOK。下記がビルド結果。
1411252155224.jpg
バッジもゲット。


 GUIレスでJavaScriptを実行できるPhantomJSを使うことで、JavaScriptのテストがだいぶ楽に行えた。またこれのTravis CI上での使用もとくに難しいことはなかった。PhantomJSはクロスプラットフォームでもあるのでいろんな人が使えるだろう。便利。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。