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

リスト5 図2の表示(HTML)

<button id="start-button" onclick="javascript:runTest( clickTest );">クリックのテスト開始!</button>
<button id="start-button" onclick="javascript:runTest( mouseOverTest );">マウスをかざすテスト開始!</button>
<div id="test-div">
  <button id="test-button" onclick="javascript:changeColor( 'lightgreen' );">テストするボタン</button>
  <div id="result" onmouseover="javascript:changeColor( 'orange' );">クリックとカーソルで色が変わる</div>
</div>
<div id="logger"></div>

リスト6 リスト5に対するCSS設定

図2 マウスの動きを再現するテスト

　図2の表示を行うHTMLとCSSをリスト5、リスト6に示す。テストされるボタンなどは、onclickやonmouseoverによって前述した処理が実行されるようになっている。CSSでは、色を変化させる領域の背景を無効にしている。

<style type="text/css">
  #test-div {
    margin : 1em 0;
  }
  #result {
    width  : 300px;
    height : 100px;
    border : 1px solid black;
    font   : 15pt bold black;
    background : none;
  }
</style>

　マウスの動きを再現するテストケースの例をリスト7に示す。クリックはUserAction.click()、マウスカーソルをかざすのはUserAction.mouseover()というように、メソッド名が動作に対応しているのを確認していただきたい。他にも、ダブルクリックはdblclick、マウスの移動はmousemoveなどのメソッドがある。

リスト7 マウスの動きを再現するテストケース(例)

<script type="text/javascript"><!--
  // テストケース(クリック)
  var clickTest = new YAHOO.tool.TestCase({
        name : 'ボタンをクリックするテスト',
        setUp : function()  {
          this.testButton  = YAHOO.util.Dom.get( 'test-button' );
        },
        tearDown : function()  {
          delete this.testButton;
        },
        testClick : function()  {
          YAHOO.util.UserAction.click( this.testButton );
          YAHOO.util.Assert.areEqual( 'lightgreen',
            YAHOO.util.Dom.getStyle( 'result', 'backgroundColor' ) );
        }
      });

  // テストケース(かざす)
  var mouseOverTest = new YAHOO.tool.TestCase({
        name : 'マウスをかざすテスト',
        setUp : function()  {
          this.result  = YAHOO.util.Dom.get( 'result' );
        },
        tearDown : function()  {
          delete this.result;
        },
        testMouseOver : function()  {
          YAHOO.util.UserAction.mouseover( this.result );
          YAHOO.util.Assert.areEqual( 'orange',
            YAHOO.util.Dom.getStyle( 'result', 'backgroundColor' ) );
        }
      });

  /* ----- (ログ出力表示、テストケースの実行、領域の色の変更は省略) ----- */
// --></script>

　JavaScriptアプリケーションのテストは、アドインを使わない場合は実際に人間が操作しなければならないこともあったが、今回紹介した一連のクラスを用いれば、テストケースをユーザーの操作を再現しながら自動的に実行してくれるので、有効に活用して作業効率の改善を図っていただきたい。

　次回は、テストで用いたログ出力コンポーネントについて、より詳しく紹介したい。イベント処理とも連動させてみよう。