builder Top
HTML/CSS
- WebKit
- Safari
- WebKit
- CSS
- Opera
- ...

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

沖林正紀

2007/10/22 12:53

Webブラウザ上で動作するアプリケーションをテストする際に、マウスのクリックやキー入力を再現するために専用のアドインを導入することもあるが、この方法はアドインが対応するWebブラウザでしか有効でない。YUIであればその手段がライブラリに含まれている。

　YUI Test Utilityは、YUIを含むJavaScriptによるアプリケーションがWebブラウザ上でうまく動作するかをテストするものだ。Webブラウザ上でテスト結果が確認できるので、開発者にとっては便利なコンポーネントだろう。ただしこれはbetaリリースと位置づけられているため、仕様が今後変更されるかもしれない。

　YUIは、対応するブラウザや利用条件に配慮した上でご利用いただきたい。また、実行環境となるWebブラウザはJavaScriptを実行可能にしておかなくてはならないのはこれまでと同様だ。

コンポーネントの概要

　YUI Test Utilityには、いくつかのクラスが属しているが、そのうち主なものを以下に示す。

   a. TestCase - 個別のテストケースを設定する
   b. Assert - 実行結果をチェックする
   c. TestRunner - テストケースを実行する
   d. TestLogger - テスト結果をログ出力
   e. TestSuite - 複数のテストケースをまとめる
   f. UserAction - マウスの動きやキー入力を再現

　Webブラウザ上で動作するアプリケーションをテストする際に、マウスのクリックやキー入力を再現するために専用のアドインを導入することもあるが、この方法はアドインが対応するWebブラウザでしか有効でない。

　YUIであればその手段がライブラリに含まれているので、アドインが導入できない環境でもテストが可能だ。さまざまなWebブラウザへの対応が求められるアプリケーションを開発する際に活用していただきたい。

ロードするCSSとJavaScript

　前述の通り、多くのクラスがこのコンポーネントに属している関係で、ロードすべきCSSやJavaScriptの数も多くなる(リスト1)。これはログ出力のコンポーネントも同時に必要とすることが関係している。それを用いなくてもテスト結果を知ることは可能だが、筆者からはそれを勧めるつもりはない。

リスト1 CSSやJavaScriptの設定(HTMLの<head>内)

<!-- このソースコードはFirefox 2.0.0.7で実行確認 -->
<base href="YUIが展開されているディレクトリを設定" />
<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="build/yuitest/assets/skins/sam/yuitest.css" />
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="build/logger/logger-min.js"></script>

<script type="text/javascript" src="build/yuitest/yuitest-beta-min.js"></script>

テストケースの設定

　個別のテストケースはTestCaseのインスタンスにいくつかのプロパティを代入することで設定する。テスト前の初期設定はsetUp、テスト終了時の処理はtearDownというプロパティだ。実際に実行するテストはtest～という名称にしておく。JavaのテストツールJUnitを経験していれば、これらは馴染みのある名称だろう。リスト2にテストケースの例を示す。

　テストの結果を調べるのはAssertだが、対象をオブジェクトに特化したObjectAssertや配列に特化したArrayAssertも存在するので、テストの内容に応じて使い分けていただきたい。

リスト2 テストケースの設定例

<script type="text/javascript"><!--
  /*  ..... 以下のソースコードはFirefox2.0.0.7で実行確認 .....  */
  var testCase1 = new YAHOO.tool.TestCase({
    // テストの名前
    name : 'YUIによるテスト1',

    // テスト開始前の準備(データの初期化)
    setUp : function()  {
      this.testData = {
        name : 'Yahoo User Interface Library',
        description : 'Yahooが開発しているJavaScriptによるUIライブラリ',
        topic : ['イベント処理', 'DOMプログラミング', 'CSSテンプレート',
                 'ドラッグ&ドロップ', 'ほかにもいろいろ'],
        getTopicCount : function() {  return this.topic.length;  }
      };
    },

    // テスト終了時の後始末(データ消去)
    tearDown : function()  {
      delete this.testData;
    },

    // 実行されるテスト
    testObject : function()  {
      // testDataはオブジェクトであるか
      YAHOO.util.Assert.isObject( this.testData );
    }
    /* ----- (他にも複数のテストを記述可能) ----- */
  });
  /* ----- (リスト3) ----- */
// --></script>