Ajax application testing

操作方法

l キー: 次のページへ
h キー: 前のページへ
j キー: 目次ページへ
k キー: 目次ページから戻る
目次ページでは j k キーで一覧を移動し、クリックで選択します

Ajax Application Testing

今回のテーマ

本日は、僕が会社で作ってるFiciaというAjaxなサービスで使っている、AjaxテストツールのJSTAPdについてお話します。

Test::QUnit ?

昨日のLTで紹介されてた
Qunit 使ったテストをPerlの作法で行える
MozRepl 使ってるので、実行可能なブラウザが限定的
昨日知ったので良く知らない。。。

関係ないけど@t_wadaが
QUnit-TAPってのを作った

狙い

各種ブラウザのJavaScriptエンジンを使いたい
Ajaxのコードを簡単にテスト出来ること
CLIでテストしたい
Perlの人なのでPerlの作法でテストしたい

what is JSTAPd

Ajaxアプリに特化したテストツール
TAPに対応
jsDeferred-ishにテストが書ける
server sideのモックアップを *.t に書ける

さらなる特色

make test を実行するだけで、自動的にテストサーバが立ち上がり、ブラウザが立ちあがり、テスト実行、そしてブラウザ閉じる
ブラウザ閉じるのはFxでは出来ない
IEでも動くってサイキロンが言ってた

ユーザが使う可能性の
あるブラウザで
自動テストする事が必須

how to install

$ curl -L http://cpanmin.us | perl - JSTAPd

github

http://github.com/yappo/JSTAPd
$ git clone http://github.com/yappo/JSTAPd.git

実際に動かしながら
紹介

テストプロジェクト作成

$ jstapd -n project_name

テストサーバ起動

$ jstapd -d project_name

ブラウザでアクセスして
「make test」ボタン
を押す

スケルトンで作った
ファイル説明

index

テストをブラウザで表示する為に必要なテンプレートファイル
普通は弄らない

conf.pl

テストの設定を行う
JSTAPdのAPI URLの変更
JSライブラリのディレクトリの設定
CLIの設定

01_base.t

テストケースの数
利用するJSライブラリの指定
Ajaxのサーバサイドの実装を書く場所

01_base.js

実際のテストコードをJavaScriptで書く
テストコードはTest::More-ishに書ける

conf.plに以下を追加

$config->{auto_open_command} =
 'open -g -a Safari %s';

or 環境変数設定

$ export JSTAP_AUTO_OPEN_COMMAND=
 'open -g -a Safari %s'

コード書きながら以下を説明

ok(), is(), like(), ...
JSTAPd jQuery plugin
DOM処理
テストケース追加

JSDeferred-ish

cho45作のJSDeferredっぽい記述でテスト書ける
非同期アプリはcallbackが入れ子になってカオスコードになる
JSDeferredはスマートに書けるようになる
JSTAPdではjstapDeferredて名前

before

setTimeout(function(){
 foo();
 setTimeout(function(){
  bar();
  setTimeout(function(){
   baz();
  }, 100);
 }, 100);
}, 100);

after

jstapDeferred.wait(100).next(function(val){
  foo();
 }).
 wait(100).next(function(val){
  bar();
 }).
 wait(100).next(function(val){
  baz();
 });

Ajax Testing

*.t ファイルにサーバサイドの実装を書く
*.js 側では普通にAjaxのコードを書く
ただし jstapDeferred を駆使する必要がある
非同期処理になるので jstapDeferred 使わないと、全処理完了前にテストが終わってしまう

実際にコード
書きながら説明

make test
をMakefile.PL
書きながらやってみる

inside JSTAPd

PSGI/Plack/Twiggy
最初はTwiggy使ってなくて、テスト完了したかどうかを10msecおきに聞いてた
Twiggy後はlong pollingでテスト完了を聞いてる

JSTAPdの使い方入門記事を、今月後半に発売される Web+DB PRESS vol.59 にて書きました。

まとめ

Perl MongerがAjaxテスト書くならJSTAPd
Ajaxのサーバ実装は他言語でも書けるように死体
開発者募集してます

おまけ

せっかくPerlの祭典で空気読まずJavaScriptの話をしたので、ついでにフロントエンドの話でもしましょう。

まとめ

どんなサービスを提供するかのポリシーを定める
データが多くなりがちになるときは、必要なデータだけを処理するようにする
ユーザの操作の邪魔にならないように作る

有り難うございました！