TechTalkManiacs

　このエントリーはHTML5 Advent Calendarに参加しています。本当は18日目だったのですが、こんな時間になってしまいました。

　Web標準系UI、というのは私が勝手に呼んでいる呼称なのですが、HTML+JavaScript+CSSを使ったUIのことです。なので、大まかにはWebサイトなども含まれます。

　Web標準系UIは表現力の高さが魅力ですが、その分、画面が正常に動作するかのテストが大変です。もちろんSeleniumというツールもあるのですがこれは有名なので適当に検索してもらうとして、今回はあまりこういった文脈では紹介されることないQunitを紹介したいと思います。

QUnitとは？

　元々はjQueryのテスティングフレームワークとして開発されたもので、その時はJQUnitという名前でした。現在はjQueryから独立して依存性をなくしています。

　各言語にある同様のツールとひとまとめにしてxUnitという呼称でグルーピングされている単体テスト向けフレームワークなのですが、基本となっている言語がjavascriptなので、一般的なサーバーサイドの出力として使われるJSON、HTML、XMLといった出力の分析に使えるという特徴があります。このため、画面出力から切り離してサーバーサイドの出力をテストしたい場合にも有効に使えます。

インストールと実際のテスト

　QUnitのインストールはとても簡単です。レポジトリからダウンロードしてきて適当な場所に配置するだけです。test以下にあるHTMLファイルを編集することで、テストの記述ができます。

　単体テストのやり方自体は、このエントリーが詳しいので参考にしてください。

　このテストの際に通信部分にjQueryを使うと、サーバーサイドの出力をパースしてその結果を元にテストできます(jQueryでxmlをパースする例)。

　HTMLファイルの場合、IDやセマンティックなタグを生かしたコード規約を決めておくと将来的な変更に対しての追加コストが少なくなるでしょう。

シナリオテストをする

　ざっくりとして記述でしたが、これでそれなりの説明になっていることからわかりますように単体の機能へのテストに対してはQUnitはシンプルで強力な機能を提供してくれます。しかし、前提となる操作を必要とする操作をテストするためのシナリオテストの場合、QUnitには落とし穴があります。

　QUnitは各テストをそれぞれ独立したテストとして実行します。なので、一時的にテストを停止するためのstopや非同期処理のためのテストであるasyncTestを使ったとしても、別のテストはそのまま実行されてしまいます。

    jQuery.get("/test/example/",function(data){
               start(); 
		
		same(data.test, "ok"); 

    });
    
});

asyncTest("asyncTestBad2",function(){//このテストが前のテストの終了を待たずに実行される
    jQuery.get("/test/example/next",function(data){
               start(); // 10ms後再会
		
		same(data.test2, "ok"); 

    });
    
});

　このため、非同期処理である通信を伴うテストの場合、一種のコールバック関数群としてテストを記述する必要があります。

asyncTest("asyncTestOK1",function(){
       jQuery.get("/test/example/",function(data){
               start(); 
		
	       same(data.test, "ok");
               test2();


       });
    
});

function test2(){
	asyncTest("asyncTestOK1",function(){
	    jQuery.get("/test/example/next",function(data){
	               start(); 
                       same(data.test, "ok"); 
                       //必要ならば次のテストを呼び出す関数をここに書く

	    });
    
	});
}

　こうすることで、単体テストツールであるQUnitを使ってシナリオテストをすることが可能になります。

まとめ

QUnitを使うと、従来は難しかったHTMLの崩れやテンプレートへの変数割付ミスなどもテストできます
QUnitをシナリオテストとして使う場合、コールバック関数として記述する必要があります
今年もクリスマスは中止です

Permalink | コメント(0) | トラックバック(1) | 06:13

2011-10-28

今日MLに投稿したもの

HTML5

　メーリングリストhtml5j.orgに投稿した情報をこちらでも流してみます。

開発

・Chrome17からindexedDBの仕様が少し変わるそうです

　これについては波多野さんの補足情報もすばらしいので当該スレッドも参照してください

一般

・Youtubeが一部のビデオを自動にＨＴＭＬ5で配信へ

　はてなではうまく貼れないので、ここの動画をスタートさせた後に右クリックしてみてください。なお、動画はMicrosoftオフィシャルです。時代ですよね。

・Google+にRipplesがスタート

　HTML5による視覚化のお手本みたいな機能なので紹介します。内容的にはCanvasで、独自のベクタグラフィックか、もしかしたらRaphaelあたりでも使っているかもしれません。

Permalink | コメント(1) | トラックバック(0) | 11:53

2011-09-16

Google+のAPIが公開されたのでまとめてみました

Google+

　本日、Google+にAPIが公開されました。現状としては試験段階で、APIそのものは2種類3パターンしかなく、レスポンス形式はJSON、及びJSONPにしか対応していません。また、制限がありますが申請すれば拡張可能です（後述）

APIキーの取得

　Google+のAPIの使用には、APIコンソールが必要です。Googleにログインした状態でAPIコンソールに行き、左側にあるセレクタから新しいプロジェクトを作り、Google+APIを有効にした上でAPI　AccesというタブをクリックするとAPI　Keyが取れます

APIの形式

　Google+のAPIはいわゆるRESTfullAPIで、特定のURLにリクエストを投げるとレスポンスを受け取る形式です。

　いくつか共通のリクエストがありますが、そのうち必須なのはkeyというキーです。ここに必ずAPIキーを設定する必要があります。

　Google+のAPIはOAuth2.0による権限委譲に対応しています。詳しくはドキュメントに書かれていますが、基本的にはリクエストの対象となるユーザーを指定するパラメーターにmeを使えるようになることを含めてFacebookと同じです。違うのはScopeに設定するのが権限の名前ではなく、サービスに対応したURLである点です。Google+であればhttps://www.googleapis.com/auth/plus.meになります。