独学ActionScript

FlashDevelopの使い方 (18)FlexUnit 4のテスト結果をGUI表示にするMXML

FlashDevelop

前回の記事に引き続き、Flex/AS3のユニットテスト用フレームワーク「FlexUnit 4」を使って得たテスト結果をGUI表示にする方法についてのメモ。※このエントリーで使用しているバージョンはFlashDevelop-3.0.6-RTMです。

はじめに

2009年11月22日現在のFlexUnit 4の最新版は「FlexUnit 4 beta 2.0」ですが、最新版ではうまく動作させることができなかったため、1つ前のバージョンである「FlexUnit 4 beta 1.0」を使用しています。

準備

テスト対象となるメソッドや実際のテストコードは、前回の記事で説明した状態のままを使用しますので、もしまだご覧になっていない場合は前回の記事を先にお読みいただく必要があります。

今回は、前回「Main」クラスでFlexUnitCoreインスタンスを作成し、run()メソッドを使ってテスト実行した部分（「テストランナー」と呼びます）を、GUI表示用のMXMLで記述したものに置き換えます。以下は、前回「Main」クラスに記述したテストランナー部分の抜粋です。

// FlexUnitCoreインスタンスを作成する
var core:FlexUnitCore = new FlexUnitCore();

// テストを実行するrunメソッドで、引数に作成したテストクラスを指定する
core.run(HogeTest);

テストランナーをGUI表示用のMXMLで記述する

「Main」クラスで記述していたテストランナー部分を、以下のコード内容の新規作成したMXMLファイル「FlexUnit4.mxml」に置き換えます。また、Always Compileの設定を「Main.as」から「FlexUnit4.mxml」に切り替えます。ちなみに、MXMLのファイル名は特に決まっていませんので、「FlexUnit4.mxml」以外でも構いません。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:flexUnitUIRunner="http://www.adobe.com/2009/flexUnitUIRunner" 
	width="1024" height="600" creationComplete="creationCompleteHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import org.flexunit.listeners.UIListener;
			import org.flexunit.runner.FlexUnitCore;
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				// FlexUnitCoreインスタンスを作成する
				var core:FlexUnitCore = new FlexUnitCore();
				
				// GUI表示させる場合は、専用のリスナーを追加する
				core.addListener(new UIListener(testRunner));
				
				// テストを実行するrunメソッドで、引数に作成したテストクラスを指定する
				core.run(HogeTest);
			}
		]]>
	</mx:Script>
	<flexUnitUIRunner:TestRunnerBase id="testRunner" width="100%" height="100%" />	
</mx:Application>

このMXMLコードは、FlexUnit 4 beta 1.0に同梱されている「FlexUnit4Turnkey.mxml」を参考に、コードの内容を最小限に削ったものです。

実行結果のGUI表示

上記の「FlexUnit4.mxml」をAlways Compileに設定した上で、実行（パブリッシュ）すると以下のようなGUIによるテスト結果が表示されます。前回の記事では「わざとテストを失敗させる」ところで終了したので、そのまま実行するとテスト失敗の赤いバツマークが表示されます。

表示されている情報は、前回のOutputパネル（トレース結果）の情報と同じものですが、グラフィカルに表示され、項目のツリー表示やフィルタリング機能などが可能になっています。

テストを成功させる

今度は「HogeTest」クラスのassertEquals()メソッドの第1引数を元に戻して、テストが成功するように修正します。

Assert.assertEquals(7, hoge.add(3, 4)); // テストが成功するように第1引数を元に戻す
//Assert.assertEquals(6, hoge.add(3, 4));

そして同じように実行（パブリッシュ）すると、テスト成功の緑色のチェックマークが表示されます。

このようにすべてのテストに成功した場合は、該当する項目が無いので左側のリストには何も表示されません。 ユニットテストをベースにした開発では、この状態が保たれることが理想です。

最後に

以上のように、MXMLベースでFlexUnit 4を実行させるとグラフィカルな表示でのテスト結果の情報を得ることができます。そして、Wikipediaのテスト駆動開発の項目でも説明されている通り、テスト駆動開発における最も基本となる開発サイクルは以下のようになります。

• 失敗するテストを書く（赤いバツマーク）
• できる限り早く、テストがパスするような最小限のコード本体を書く（緑色のチェックマーク）
• リファクタリングをする

この色から上記の開発サイクルのことを「Red/Green/Refactor」と呼ぶそうです。

自分もコードを書く際に、この「Red/Green/Refactor」が実践できるようになるといいんですが、まずは前回の記事で課題として挙げた部分をクリアしないことにはなんともなりませんねｗ

まとめ

このシリーズのエントリーは、「FlashDevelopの使い方」のまとめにまとめてあります。

Permalink | コメント(0) | トラックバック(1)