Testで始まる物語(ストーリー)
QUnit CUIの紹介

ども、面白法人カヤックで
tech.kayac.com書いたり、
jsdo.itやってる
@kyo_agoです

最近はSVG Girlとか

会社サイトのリニューアルをやってました

ところでみなさん

JSの単体テストってやってますか?

「やったほうがいいのは分かってるけどそんなにやれてない」って人も多いんじゃないかと思います

(かく言うわたしも公開するライブラリとかしか書いてなかったりしますが。。。)

TDD(テストドリブンデベロップメント)の
問題点

「やってみないと良さがわからない」

ので

「やったことないとやる気にならない」

そこで

それを解決するライブラリを開発しました!

QUnit-CUI

QUnit-CUI

CUI(Character User Interface)と言ってもコマンドラインは関係ないです

Character=こっち

それでは実行画面を御覧ください

forked: QUnit-CUI-ADV - jsdo.it - share JavaScript, HTML5 and CSS

注意、キャラクターの選択に他意はないです。

これは何か?

QUnitの実行結果を乗っ取って、OKなら「好き」、NGなら「嫌い」に変換して出力しています

つまり

「テストを書く」=「好きと言ってもらえる」ことにより、通常TDDで言われる「あとで楽になる」のではなく、「今すぐ楽しくなる」効果を演出

また、通常単体テストに興味のない通常ユーザも結果を見るために実行してくれることも期待できます

(ただし、まだ開発中なのでほんとにこれだけしか機能がないです。。。)

今後検討中の機能

今後検討中の機能

今後検討中の機能

今後検討中の機能

今後検討中の機能

今後検討中の機能

今後検討中の機能

今後検討中の機能

ちなみに、キャラの画像はURLを参照しているだけなので、好みに応じて好きな画像を選択することができます

forked: QUnit-CUI-ADV - jsdo.it - share JavaScript, HTML5 and CSS

ご静聴ありがとうございました!

。。。

ここまででたぶん5分

もうちょっと続きます

jQuery plugin test framework winspector.js(仮)の紹介

JSのテストを書くときの問題点

JSのテストを書くときの問題点

JSのテストを書くときの問題点

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

来週JS, Flash関係の飲み会やります。
jsdo.it/wonderfl meetup vol.2

ご静聴ありがとうございました!