操作方法

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

この章のテーマ

目次

• what is JSTAPd
• JSTAPd setup
• using JSTAPd
• inside JSTAPd

background

• JSUnit
• Selenium
• QUnit
• QUnit-TAP
• Test::QUnit

QUnit-TAP ?

• @t_wadaさん作
• 画面非依存のコードをユニットテスト
• テスト結果はTAPで出力
• CommonJS 対応
• node.js, narwhal, Rhinoなどで動く

Test::QUnit ?

• ヤバゲーのテストで使ってるらしい
• Qunit 使ったテストをPerlの作法で行える
• MozRepl 使ってるので、実行可能なブラウザが限定的

これら、のツールでは満足できなかった

狙い

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

jsTestDriver との違いを言うとすれば Perl の作法で書けるかどうか?

すいません、ちょっと詳しく調べてないのでこれ以上は。。

what is JSTAPd

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

さらなる特色

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

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

目次

• what is JSTAPd
• JSTAPd setup
• using JSTAPd
• inside JSTAPd

how to install

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

github

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

目次

• what is JSTAPd
• JSTAPd setup
• using JSTAPd
• inside JSTAPd

実際に動かしながら
紹介

テストプロジェクト作成

$ 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に書ける

01_base.html

• テストで必要なDOM要素を書いて行く

肝心のCLIは？

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 使わないと、全処理完了前にテストが終わってしまう

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

目次

• what is JSTAPd
• JSTAPd setup
• using JSTAPd
• inside JSTAPd

inside JSTAPd

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

inside JSTAPd 以上

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

まとめ

• 実際のブラウザを使ったAjaxテスト書くならJSTAPd
• Ajaxのサーバ実装は他言語でも書けるようにしたいです
• 開発者募集してます

最後に宣伝

JPerl Advent Calendar
2010　やります

参加者募集中

• Casual Track
• Hacker Track
• English Track
• Acme Track
• Win32 Track
• Sym Track
• 他にやりたければ随時

Perlなんか
やってられるかの人は
他の言語などのを
やると面白いです

kanasanが
JS Advent Calendar
やるっぽいです

node.js Advent Calendar
とかやると良いのでは?

関連情報は
#jpac2010@twitter
に流しときました

有り難うございました！