Testで始まる物語（ストーリー）
QUnit CUIの紹介
最近はSVG Girlとか
会社サイトのリニューアルをやってました
ところでみなさん
JSの単体テストってやってますか？
「やったほうがいいのは分かってるけどそんなにやれてない」って人も多いんじゃないかと思います
（かく言うわたしも公開するライブラリとかしか書いてなかったりしますが。。。）
TDD（テストドリブンデベロップメント）の
問題点
「やってみないと良さがわからない」
ので
「やったことないとやる気にならない」
そこで
それを解決するライブラリを開発しました！
QUnit-CUI
QUnit-CUI
CUI(Character User Interface)と言ってもコマンドラインは関係ないです
それでは実行画面を御覧ください
これは何か？
QUnitの実行結果を乗っ取って、OKなら「好き」、NGなら「嫌い」に変換して出力しています
つまり
「テストを書く」＝「好きと言ってもらえる」ことにより、通常TDDで言われる「あとで楽になる」のではなく、「今すぐ楽しくなる」効果を演出
また、通常単体テストに興味のない通常ユーザも結果を見るために実行してくれることも期待できます
（ただし、まだ開発中なのでほんとにこれだけしか機能がないです。。。）
今後検討中の機能
今後検討中の機能
- 「好き」、「嫌い」の結果の変更
- 「好き」、「嫌い」の結果から出力の変更
今後検討中の機能
- 「好き」、「嫌い」の結果の変更
- 「好き」、「嫌い」の結果から出力の変更
- 実行頻度による出力の変更
今後検討中の機能
- 「好き」、「嫌い」の結果の変更
- 「好き」、「嫌い」の結果から出力の変更
- 実行頻度による出力の変更
- 特定の日付でのイベント発動
今後検討中の機能
- 「好き」、「嫌い」の結果の変更
- 「好き」、「嫌い」の結果から出力の変更
- 実行頻度による出力の変更
- 特定の日付でのイベント発動
- 複数キャラクターの同時実行
今後検討中の機能
- 「好き」、「嫌い」の結果の変更
- 「好き」、「嫌い」の結果から出力の変更
- 実行頻度による出力の変更
- 特定の日付でのイベント発動
- 複数キャラクターの同時実行
今後検討中の機能
- 「好き」、「嫌い」の結果の変更
- 「好き」、「嫌い」の結果から出力の変更
- 実行頻度による出力の変更
- 特定の日付でのイベント発動
- 複数キャラクターの同時実行
- 普通に単体テストの結果が見える
ちなみに、キャラの画像はURLを参照しているだけなので、好みに応じて好きな画像を選択することができます
ご静聴ありがとうございました！
。。。
ここまででたぶん5分
もうちょっと続きます
jQuery plugin test framework winspector.js(仮)の紹介
JSのテストを書くときの問題点
JSのテストを書くときの問題点
JSのテストを書くときの問題点
- 非同期実行されるコードのテストが面倒
- UI部分（html部分）のテストが面倒
JSのテストを書くときの問題点
- 非同期実行されるコードのテストが面倒
- UI部分（html部分）のテストが面倒
- コードジェネレータがあまりないので0から書かないといけなくて面倒
こういった問題を解決するためのフレームワークを開発！
こういった問題を解決するためのフレームワークを開発！中
テストの記述
<div>
<script type="dom/base">
<ul>
<li><img src="blank.gif#1"></li>
<li><img src="blank.gif#2"></li>
</ul>
</script>
<script type="test/code">
$(function () {
$('ul').append($('li:first').remove());
turn_result();
});
</script>
<script type="dom/comp">
<ul>
<li><img src="blank.gif#2"></li>
<li><img src="blank.gif#1"></li>
</ul>
</script>
</div>
特徴
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
- 実行環境は隔離されたiframe内なので、セレクタ等の注意が不要
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
- 実行環境は隔離されたiframe内なので、セレクタ等の注意が不要
- html要素の比較は自動的にdiffされるので手動比較不要
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
- 実行環境は隔離されたiframe内なので、セレクタ等の注意が不要
- html要素の比較は自動的にdiffされるので手動比較不要
- 動的生成されたiframe内でもbreakpoint,debugger可能
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
- 実行環境は隔離されたiframe内なので、セレクタ等の注意が不要
- html要素の比較は自動的にdiffされるので手動比較不要
- 動的生成されたiframe内でもbreakpoint,debugger可能
- 複数端末上での分散実行（予定）
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
- 実行環境は隔離されたiframe内なので、セレクタ等の注意が不要
- html要素の比較は自動的にdiffされるので手動比較不要
- 動的生成されたiframe内でもbreakpoint,debugger可能
- 複数端末上での分散実行（予定）
- 複数ブラウザでのテスト結果の突き合わせ（予定）
特徴
- テストは基本非同期なので、わざわざ非同期であることを宣言する必要がない
- 実行環境は隔離されたiframe内なので、セレクタ等の注意が不要
- html要素の比較は自動的にdiffされるので手動比較不要
- 動的生成されたiframe内でもbreakpoint,debugger可能
- 複数端末上での分散実行（予定）
- 複数ブラウザでのテスト結果の突き合わせ（予定）
- $.fnを比較して追加されているpluginのテストケースを自動作成（予定）
って感じになるといいなぁ。。。と思いながら開発してます
CM
ご静聴ありがとうございました！
