FuncUnitを使ってみた〜画面テストの自動化

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

FuncUnitを使った画面テストの自動化は、こんな感じ（動画が小さいので、フルスクリーンにして見て下さい）。

動画中に赤丸が動いているが、それはmoveメソッドの動き。つまり、赤丸が画像に被さることが、mouseOverを意味する。

#初めてYouTubeに動画をアップロードしてみた。見づらいなぁ。どうすれば・・・。
#キャプチャは、Firefoxのアドオン「Capture fox」を使用した。

■テストケース（funcunit_test.js）の一部

//テストモジュール3
module("Myapp TestGropu 3 ",{
	setup : function(){
		S.open("myapp.html")
	}
});

test("Daken Test", function(){
	//id属性値がidのinputタグに「Test ID」と入力する
	var testId = "Test ID";
	var selector1 = 'input[id="id"]';
	S(selector1).type(testId, function(){
		equals(S(selector1).val(),  testId, "id input test");
	});

	//id属性値がpassWordのinputタグに「Test PassWord」と入力する
	var testPass = "Test PassWord";
	var selector2 = 'input[id="passWord"]';
	S(selector2).type(testPass, function(){
		equals(S(selector2).val(), testPass, "password input test");
	});
	
	//id属性値がstrToBeLinkedのinputタグに「Yahoo Japan!」と入力する
	var testLink = "Yahoo Japan!";
	var selector3 = 'input[id="strToBeLinked"]';
	S(selector3).type(testLink, function(){
		//inputタグへの入力が正しく行われたかのテスト
		equals(S(selector3).val(), testLink, "str input test");
		
		//フォーカスアウトする
		//テスト対象画面の仕様では、リンクが貼られた文字列が表示される
		S(selector3).trigger('focusout');	
		
		//リンクが正しいかのテスト
		var ActualLinkedStr = S('#strLinked').html();
		var ExpectedLinkedStr = '<a href="http://www.yahoo.co.jp">Yahoo Japan!</a>';
	
		//リンクが正しいかのテスト
		equals(ActualLinkedStr, ExpectedLinkedStr, "Link test");
	});
	
	//画像表示テスト
	var selector4 = '#submitBtn';
	S(selector4).click(undefined, function(){
		var ActualLinkedImg = S('#downloadedImg').attr('style');
		var ExpectedLinkedImg = 'display: inline;';
		
		//画像が正しいかのテスト
		equals(ActualLinkedImg, ExpectedLinkedImg, "Img test");
	});
});

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

		<title>My Demo App</title>
		<script src="./jquery-1.5.2.min.js" type='text/javascript'></script>
		<script type='text/javascript'>
		$(document).ready(function(){
			var returnLinkedArg = function(arg, url){
				arg = "<a href=" + "\'" + url + "'" + ">" + arg + "</a>";
				return arg;
			};
		 	//フォーカスアウトのタイミングで文字列を表示する
		 	$('#strToBeLinked').bind("focusout", function(){
		 		var str = returnLinkedArg($('#strToBeLinked').val(), 'http://www.yahoo.co.jp');
		 		$('#strLinked')[0].innerHTML = str;
		 	});
		 	
		 	//クリックのタイミングで画像を表示する
		 	$('#submitBtn').bind("click", function(){
		 		$('#downloadedImg').attr('style', 'display:inline');
		 	});
		 }); 
		</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>
		<ul>
			<img id='giko_kabe' src="./img/giko_kabe.jpg" alt='giko' width="150" height="150"/>
			<img id='downloadedImg' src="./img/giko_w.jpg" alt='giko' width="150" height="150" style="display:none;"/>
		</ul>
		<h2>Input value and submit Test:</h2>
		<ol>
			<li>ID<input type="text" value="" id="id"/></li>
			<li>PassWord<input type="password" value="" id="passWord"/></li>
			<li>Link<input type="text" value="" id="strToBeLinked"/>
			</li>
			<div id="strLinked"/></div>
			<li>隠し画像表示</li>
			<input id="submitBtn" type="button" value="画像表示"/><br>
		</ol>