- 2008-09-17 (水)
- 技術
「JavaScriptのテストってわざわざXUnit系を使ってまでする必要はない！」
みたいな意見は多々あるのですが、ライブラリなどを作っているときには非常に便利だったりします。
ちょこっとした修正がどの程度影響があるか分からないときに、テスト用のコードをしっかり書いてあればそれを実行するだけですんでしまいますからね。
そんで最近になって
JavaScript--単体テスト環境の選択肢 - builder by ZDNet Japan
という記事を見てて、「あれ？Qunitがないぞ！」と思ったので簡単に使い方を書いてみたいと思います。
上記リンクの記事ではJsUnitやRhinoUnitのことが書かれていますが、これらはJavaありきというかANTありきなので、ちょろっとテストコードを書くというスタンスにはなかなか難しいと感じています。
ただJsUnitは全ブラウザを登録しておけば、いっきにクロスブラウザのテストを実行してくれるので便利といえば便利なんですけどね。
その点QUnitはjQuery用のテスティングフレームワークなので、コード量も少なく簡単にテストコードを書いていけます。
（少しだけjQueryに関する知識が必要になってきちゃうのはご愛嬌）
jQueryを使ったテスティングフレームワークですが、別に自作のライブラリのテストももちろんできますので、開発で使っているライブラリをテストすることができます。
使えるメソッドいろいろ
QUnit - jQuery JavaScript LibraryのAPI documentationのところに使い方が書かれていますので、ここではよく使いそうなメソッドだけを説明したいと思います。
test( name, test )
nameにはテスト名、testには実行したいテストコードを匿名関数で記述します。
module( name )
nameにはテストしたい単位を渡します。これはテストをしているときの目印になります。
たとえばレイヤーを操作するテストをしたい場合に
としておくと、テスト結果画面で
「レイヤー表示テスト module: レイヤーの枠を表示する (0, 1, 1)」
みたいにmoduleの手前にプレフィックスが表示されます。
ok( state, message )
stateにはfalseとtrueを指定できます。
falseの場合にはNG、trueの場合にはOKとなります。
これは帰ってきた値がtrueかfalseか、または通過したかしないかなどの判定に使えそうです。
messageは表示したい文字列を渡します。
equals( actual, expected, message )
これはよく使うやつですね。
actualとexpectedの値が同じ場合にOKとなります。
messageは表示したい文字列を渡します。
すぐに使いそうなのをご紹介しましたが、もっと詳しく知りたい場合にはjQueryのテスティングフレームワークQUnit (でぃべろっぱーず・さいど)をごらんください。
「提供されているメソッド」に詳しく書かれています。
QUnitのダウンロード
QUnit - jQuery JavaScript LibraryのUsing QUnitのところにjsとcssのリンクがあるのでここからダウンロードできます。
ダウンロードするのが面倒というかたは次の「QUnitを使ってみる」に進んでください。
QUnitを使ってみる
以下がQUnit用のHTMLになります。
ここにテスト結果がどんどん表示される感じです。
もしQUnitをダウンロードされた方はtestsuite.cssとtestrunner.jsのパスを変更してください。
今回はテスト用のコードを「qunit.js」に、テスト対象のコードは「hogehoge.js」として話を進めていきます。
テストしたいコードは以下になります。
文字列を返してきているので、これはequalsでチェックできそうです。
なので、qunit.jsには
と記述してテストを実行してみました。
実行結果は以下の画面になります。
failedが0になっているので、バグはなさそうですね。
おそらく大体がこういったテストで十分だと思うのですが、もしHTMLエレメントを使ったテストの場合には少し工夫が必要です。
どっかのdivタグのinnerHTMLを書き換えたテスト、id指定で取得したエレメントのwidthのテストなどはどうしてもHTMLを必要とします。
次はHTMLエレメントに対してテストをする場合を解説してみたいと思います。
HTMLエレメントに対するQUnitテストコードを書いてみる
今回はHTMLエレメントを透過させるメソッドをテストコードを書いてみました。
初めに必要になるファイルを解説します。
- qunit.js - テストコードが記載されているファイル
- hogehoge.js - テスト対象のコードが記載されているファイル
- opacity.html - 透過のテストをするときに使うHTML
透過に関するテストって自動でできるの？と考える方がいらっしゃるかもしれませんが、これが以外とできるんですｗ
先ほど使ったQUnitテスト結果HTMLは、あくまでもテスト結果を表示するものなのでこれとは別にHTML（opacity.html）を用意します。
まずは透過させるコードです。
これのテストコードは以下になります。
ここからがちょっと新しいテストコードになります。
テストコードの中でtestwinというメソッドを呼んでいます。これは新しくウィンドウをPopupさせ、そのHTMLの描画が完成した瞬間にテストコードを実行してくれるすぐれものです。
つまりopacity.htmlを新しいウィンドウで開いてDOMの構築が完了したら透過のテストコードを実行してくれる感じです。
これはjQueryのoffset.jsの中を参考にしています。
続いてopacity.htmlの中身。
ここではjQueryのファイルとテスト対象のhogehoge.jsを読み込んでいます。
そしてscriptタグで「$(function(){});」を実行しています。
先ほどのテストコードでPopupした画面のDOM構築を待つと解説しましたが、これはつまりjQueryのjQuery.isReadyがtrueになるのを監視しているのです。
jQuery.isReadyはreadyというメソッドが呼ばれて初めて監視がスタートされるので、ここで$(function(){});を実行しているのです。
ちょいややこしいですねｗ
これでテストするためのコードがそろいましたので、実行してみたいと思います。
おお～Opacityのテストが実行されました。
$w("#opacity").setOpacity(0.2).getOpacity()で返ってきた結果が0.2なのでちゃんと透過機能がはたらいたようです。
まとめ
HTMLエレメントのテストで別のHTMLファイルを作らないといけないのはちょっと不便かもしれませんが、1回作ってしまえば後は何度でもテストが可能ですので、いつかきっとプログラマーを助けてくれると思います。
QUnitはJavaやANTなどが不要なため、完全に独立したテスティングフレームワークとして使えるので
「JSでテストコード書きたいけど敷居が高いな～」
という人にはもってこいなのではないでしょうか？
良く分からないこと
IE7.0でウィンドウを開いてテストするときに、まれにうまくいかないことがあります。
F5とかで再度テストをすれば大丈夫ですが、そうゆうときもあるようです。
Safari3.1やFirefox3では特に問題なかったです。
でもなぜIEだけ・・・
■関連リンク
・Getting Started With jQuery QUnit for Client-Side Javascript Testing - Chad Myers' Blog
・jQueryのテスティングフレームワークQUnit (でぃべろっぱーず・さいど)
【関連する記事】
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1123
- Listed below are links to weblogs that reference
- JavaScriptで単体テストをするならQUnitはいかが？ from HouseTect, JavaScripter Blog
