FuncUnitを使ってみた〜イベント発生のテスト

JavaScript 単体テスト テスト WEBアプリ

FuncUnitを使って、イベント発生のテストを行った。
少し困ったことは、FuncUnitではbind関数が用意されていなかったこと。

今回のテストでは、「画像にマウスをかざしてマウスオーバーイベントを発生させると画像が違う画像に変わり、マウスオーバーを外すと画像が元に戻る」という動作をテストした。

そのため、画像へのマウスオーバー発生時に、表示されるべき画像がsrc属性に設定されているかをテストする関数を、コールバック関数としてマウスオーバーイベントにバインドさせたかった。そのために、jQueryのbind関数を使えると思っていたのだが、FuncUnitでは用意されていなかった。
FuncUnitのページで使えそうな関数がないかを調べていたら、moveメソッドがあったのでそれを使用した。moveとは、ある要素を別の要素へ移動させる。それに従い、mouseoverやmouseoutsを引き起こすものである。

■テスト対象の動作
「画像にマウスをかざしてマウスオーバーイベントを発生させると画像が違う画像に変わり、マウスオーバーを外すと画像が元に戻る」という動作。

■テストケース（funcunit_test.js）

・・・前回のエントリーで紹介したテストコードの続き・・・

module("Myapp TestGropu 2",{
	setup : function(){
		S.open("myapp.html")
	}
})
test("Mouse Hover Test", function(){
	//mouseオーバー時に実行するテスト用メソッド
	var mouseOverCallBack = function(){
		//mouseオーバー後に表示される画像(giko_w.jpg)
		var expectedImg = "./img/giko_w.jpg";
		var actualImg = S("#giko_kabe").attr("src");
		same(actualImg, expectedImg);
	};	
	//FuncUnitにはbind関数やunbind関数は存在しないので動かない
	//S("#giko_kabe").bind("mouseover", mouseOverCallBack).trigger("mouseover").unbind("mouseover", mouseOverCallBack);
	
	//仕方なく、FuncUnitで用意されているmoveメソッドを使用してmouseoverを実現
	var options = '#giko_kabe';
	S("#typehere").move(options, mouseOverCallBack);	
})

test("Mouse HoverOut Test", function(){
	//mouseオーバーが外れた時に実行するテスト用メソッド
	var mouseOverOutCallBack = function(){
		//mouseオーバーを外した後に表示される画像(giko_kabe.jpg)
		var expectedImg = "./img/giko_kabe.jpg";
		var actualImg = S("#giko_kabe").attr("src");
		same(actualImg, expectedImg);
	};
	
	//FuncUnitにはbind関数やunbind関数は存在しないので動かない
	//S("#giko_kabe").bind("mouseover", mouseOverCallBack).trigger("mouseover").unbind("mouseover", mouseOverCallBack);
	
	//仕方なく、FuncUnitで用意されているmoveメソッドを使用してmouseoverを外す
	var options = '#typehere';
	S("#giko_kabe").move(options, mouseOverOutCallBack);	
})

■テスト対象の画面(myapp.html)

<html>
	<head>
		<title>My Demo App</title>
		<script src="./jquery-1.5.2.min.js" type='text/javascript'></script>
		<script type='text/javascript'>
		$(document).ready(function(){
		 	//画像差し替え
		 	$('#giko_kabe').hover(function(){
		 			//マウスhover時に画像を変える
		 			$(this).attr('src', './img/giko_w.jpg');
		 		}, function(){
		 			//マウスhoverが外れた時に画像を元に戻す
		 			$(this).attr('src', './img/giko_kabe.jpg');
		 		}
		 	);
		 }); 
		</script>
	</head>
	<body>
		<h2>FuncUnit Demo</h2>
		<h2>Type something in a textbox and Click "Add input" button:</h2>
		<input type="text" id="typehere"/>
		<input type='button' value="Add input" id='add'/>
		<div id='seewhatyoutyped'>Original string</div><br>
		
		<h2>Move mouse over the image below to change it into another:</h2>
		<img id='giko_kabe' src="./img/giko_kabe.jpg" alt='giko' width="150" height="150"/>
	</body>
</html>

実行した結果は、下記（1番最初のテスト結果は前回のエントリーのもの）。