javascriptのテストのはなし：YUI

ともだつばさ

2012.04.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回はYUIのユニットテストを紹介します。
YUIは「Yahoo! User Interface Library」の略称で、webアプリケーション開発用のJavaScriptとCSSのユーティリティ群です。
http://developer.yahoo.co.jp/yui/によると

YUIは拡張性、速さ、堅牢さに実績があり、米国Yahoo!や世界中のフロントエンドエンジニアによって開発されているため、JavaScriptを活用するプロフェッショナルの業務にも耐えうる実用性を持ったJavaScriptライブラリとなっています。

との事です。

準備

現時点でのYUIの最新版は3.4.1でhttp://yui.yahooapis.com/3.4.1/build/yui/yui-min.jsにホスティングされているので、それを読み込んでおきます。

記述

基本

YUI.use("test", function(Y){
	//テストを記述
});

としてテストを記述していきます。YUI.use()で使うモジュールをロードして、そのモジュールをYとして扱うというイメージですね。
テストを実行する場合、Console.logが対応しているブラウザであれば、デバッガのコンソールで結果を確認できます。

テストケースの記述

テストケースはY.Test.Caseクラスを使って作ります。インスタンスを作成するときに引数に、name、テストケースのメソッド(、setUp、tearDown)を含んだオブジェクトを渡します。こんな感じです。

var testCase = new Y.Test.Case({
	name : "testcase name",
	setUp : function(){},
	tearDown : function(){},
	testSomething : function(){},
	testSomethingElse : function(){},
	"Something should happen here" : function(){}
});

テストケースのメソッドは"test"から始まる名前を付けるか、"Something should happen here"の様に"should"を含んだ文章調にする事も可能です。

ignore、error

テストケース内に_shouldの要素を作る事で、ignoreとerrorの機能が使えます。
ignoreは特定のテストを実施しない様にします。メソッド名とBooleanのセットにしたオブジェクトです。
errorはテスト対象のロジックでエラーが発生した場合のテストになります。trueとすればErrorが発生したかどうかだけ、"error occured"などの文字列にすればエラー内容、new TypeError("error occured")とすれば型までチェックしてくれます。

var testCase = new Y.Test.Case({
	name : "testcase name",
	_should:{
		ignore : {
			testSomethingElse:true
		}
		error : {
			testSomething:true
			//testSomething : "error occured"
			//testSomething : new TypeError("error occured")
		}
	}
	setUp : function(){...},
	tearDown : function(){...},
	testSomething : function(){...},
	"Something should happen here" : function(){...}
});

テストスイート作成とテスト実行

テストスイートの作成とケースの追加、テスト実行は次の様に行います。

var suite = new Y.Test.Suite({
	name: "test suite",
});
suite.add(testCase);

Y.Test.Runner.add(suite);
Y.Test.Runner.run();

非同期テスト

wait(milliseconds)メソッドを使う事で、テスト実行を指定したミリ秒待つ事ができます。

var testCase = new Y.Test.Case({
	name : "async test",
	testSomething : function(){
		this.wait(function(){...}, 1000);
	}
});

モック

モックオブジェクトを作る事で、サービスアクセス時のパラメタのテストが出来ます。流れは、

Y.Mock()でMockオブジェクト作成
Y.Mock.expect()で期待する動作の設定
対象の処理実行
Y.Mock.verify()で検証

です。
Y.Mock.expect()は、第1引数にはMockオブジェクトを、第2引数にはメソッド名と引数がセットになったオブジェクトを取ります。
次の様な感じになります。

var testCase = new Y.Test.Case({
	name: "logToServer Tests",
	
	testPassingDataToXhr: function(){
		var mockXhr = Y.Mock();
		
		Y.Mock.expect(mockXhr, {
			method: "open", 
			args: ["get", "/log.php?msg=%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A", true]
		});
		
		Y.Mock.expect(mockXhr, {
			method: "send", 
			args: [null]
		});
		
		logToServer("こんにちは", mockXhr);
		
		Y.Mock.verify(mockXhr);
	}
});

function logToServer(message, xhr){
	xhr.open("get", "/log.php?msg=" + encodeURIComponent(message), true);
	xhr.send(null);
}

実行する

このブログの最後に掲載したテストコードを実行した結果は次の様になります。Firebugのコンソール画面ですが、色分けされないのでみにくいですね。

Consoleを使ってみる

Y.Concoleというテスト結果を出力する機能があるので使ってみます。まずはYUI().use("test", function(Y){...})としているところを、YUI().use("test", "console", function(Y){...})としてconsoleを使う事を宣言します。
また、次のコードをY.Test.Runner.run()する前に記述し、コンソールのインスタンスを作って表示させます。"#testLogger"はdiv要素です。

var r = new Y.Console({
	newestOnTop : false,
	style: "block"
});
r.render("#testLogger");

最後にコンソールを装飾しておきます。このままだと何も装飾されていなく見にくいので次のコードをhtmlに記述しておきます。

<div class="example yui3-skin-sam">
<style scoped>
#testLogger {
	margin-bottom: 1em;
}
#testLogger .yui3-console .yui3-console-title {
	border: 0 none;
	color: #000;
	font-size: 13px;
	font-weight: bold;
margin: 0;
	text-transform: none;
}
#testLogger .yui3-console .yui3-console-entry-meta {
	margin: 0;
}
.yui3-skin-sam .yui3-console-entry-pass .yui3-console-entry-cat {
	background: #070;
	color: #fff;
}
</style>

<div id="testLogger"></div>
</div>

これで実行すると次の様な表示になり、ブラウザのコンソールで見るよりはまだ見やすいかもしれません。

実行したコード

<html lang="en">
<head>
	<title>YUI Test</title>
	<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
</head>

<body>
<script type="text/javascript">
	YUI().use("test", function(Y){
		var testCase = new Y.Test.Case({
			name: "Simple Test Case",
			setUp: function(){
				this.hoge = {name:"case", val:"test"};
			},
			tearDown: function(){
				delete this.val;
			},
			
			_should:{
				ignore:{
					testSomethingElse: true
				},
				error:{
					testSortArray: new TypeError("Expected an array")
				}
			},
			
			testSomething: function(){
				Y.assert(this.hoge.name == "case");
				Y.Assert.areSame(this.hoge.val, "test");
				Y.Assert.isObject(this.hoge);
				Y.Assert.isTypeOf("object", this.hoge);
				Y.Assert.isInstanceOf(Object, this.hoge);
				Y.Assert.isNaN("NaN");
				this.hoge.val = "test2"
			},
			
			testSomethingElse: function(){
				Y.assert(true, "third test");
			},
			"somethig should happen": function(){
				Y.Assert.areNotSame("test2", this.hoge.val);
			},
			testSortArray: function(){
				sortArray(12);
			}
		});
		
		var asyncTestCase = new Y.Test.Case({
			name: "logToServer Tests",
			
			testPassingDataToXhr: function(){
				var mockXhr = Y.Mock();
				
				Y.Mock.expect(mockXhr, {
					method: "open", 
					args: ["get", "/log.php?msg=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF", true]
				});
				
				Y.Mock.expect(mockXhr, {
					method: "send", 
					args: [null]
				});
				
				logToServer("こんにちは", mockXhr);
				
				Y.Mock.verify(mockXhr);
			}
		});
		
		
		var mocTestCase = new Y.Test.Case({
			name: "Async Test",
			
			setUp : function () {
				this.data = { name : "Nicholas", age : 29 };
			},
			
			tearDown : function () {
				delete this.data;
			},
			
			testAsync: function () {
				Y.Assert.areEqual("Nicholas", this.data.name, "Name should be 'Nicholas'");
				
				//wait 1000 milliseconds and then run this function
				this.wait(function(){
					Y.Assert.areEqual(29, this.data.age, "Age should be 29");
				}, 1000);
			}
		});
		
		var suite = new Y.Test.Suite({
			name: "test suite",
		});
		
		suite.add(testCase);
		suite.add(mocTestCase);
		suite.add(asyncTestCase);
		Y.Test.Runner.add(suite);
		Y.Test.Runner.run();
	});
	
	function logToServer(message, xhr){
		xhr.open("get", "/log.php?msg=" + encodeURIComponent(message), true);
		xhr.send(null);
	}
	
	function sortArray(array) {
		if (array instanceof Array){
			array.sort();
		} else {
			throw new TypeError("Expected an array");
		}
	}
</script>
</body>
</html>

javascriptのテストのはなし：YUI

準備

記述

基本

テストケースの記述

ignore、error

テストスイート作成とテスト実行

非同期テスト

モック

実行する

Consoleを使ってみる

実行したコード

イベント

EVENT【4/23リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS / システムアーキテクト案件特集〜を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩

javascriptのテストのはなし：YUI

準備

記述

基本

テストケースの記述

ignore、error

テストスイート作成とテスト実行

非同期テスト

モック

実行する

Consoleを使ってみる

実行したコード

イベント

EVENT【4/23リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜AWS / システムアーキテクト案件特集〜 を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制 はじめの一歩

EVENT【4/23リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS / システムアーキテクト案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩