マウスの動きも再現--強力なテストライブラリ：YUI Test Utility

テストケースの実行

　テストケースを実行するには、先にTestLoggerというテスト用のログ出力コンポーネントを設定しておくとよいだろう。テストケースはTestRunnerに複数登録してまとめて実行することができる。リスト2で設定したテストケースを実行する例をリスト3に示す。TestLoggerによるログ出力は図1のようになる。

リスト3 テストの実行(リスト2の続き)

// ログ出力コンポーネント(<div id="logger"></div>の部分に表示)
var testLogger = new YAHOO.tool.TestLogger( 'logger' );

// 実行するテストケースを設定
YAHOO.tool.TestRunner.add( testCase1 );
// テストケースを実行
YAHOO.tool.TestRunner.run();
// 実行後のテストをクリア
YAHOO.tool.TestRunner.clear();

図1 TestLoggerによるテストログ出力

複数のテストケースをまとめる

　TestSuiteで複数のテストケースをまとめる例をリスト4に示す。TestRunnerにはTestCaseと同じように登録し、リスト3と同じ方法で実行する。TestSuiteのコンストラクタ引数で区別しやすい名称をつけておこう。

リスト4 複数のテストケースをまとめるTestSuite(例)

// テストケースの設定(1)
var testCase2 = new YAHOO.tool.TestCase({
  name : 'YUIによるテスト2',
  testTrue : function()  {
    YAHOO.util.Assert.isTrue( 1 + 1 == 2 );
  }
});

// テストケースの設定(2)
var testCase3 = new YAHOO.tool.TestCase({
  name : 'YUIによるテスト3',
  testTrue : function()  {
    YAHOO.util.Assert.isNaN( 'abc' );
  }
});

// 複数のテストケースをまとめる
var testSuite = new YAHOO.tool.TestSuite( '複数のテストをまとめて実行' );
testSuite.add( testCase2 );
testSuite.add( testCase3 );

YAHOO.tool.TestRunner.add( testSuite );

// テストを実行(省略)

マウスの動きを再現

　UserActionを用いると、テストケース実行時にマウスの動きやキー入力を再現してくれる。YUIが対応するWebブラウザであれば、自動的にユーザーによる操作とその反応をテストできる。Webブラウザにアドインを追加しなくて済むのは便利だろう。

　ここでは、マウスのクリックとマウスカーソルをかざした状態を再現する例を示す。キー入力の再現などについては、オンラインドキュメントを参照していただきたい。

　次ページ図2の中央に緑色の領域がある。ここはすぐ上の「テストするボタン」をクリックすると緑色に変わり、マウスカーソルをかざすと橙色に変わるようになっている。もう一度同じことをすると透明(transparent)になる。画面上に2つ横に並んだボタンをクリックすると、それぞれを再現するテストが実行され、その結果は画面下のコンポーネントに出力される。