「FizzBuzzではじめるテスト」を AS3 と FlexUnit4 ではじめるテスト

先日、第１回関西PHP勉強会という勉強会に参加してきました。
テーマは「テスト」、TDD（テスト駆動開発）とか言う、僕には縁のなかったあれです。
ただ、わりと入門編ということで敷居の低いセッションも用意してくれていたので、
ActionScriptでテスト入門してみました。

TDDとかしらんがな

テストってなんぞ？っていう状態だったので、とりあえずこのへんの動画をみて、
テスト駆動開発の雰囲気をつかんで、話を聞いたようなそんなレベルです。
最後の方はリファクタリングの話にも触れられてるので、そのへんも勉強になります。

和田卓人の“テスト駆動開発”講座

と、まあ、急がば回れ的な雰囲気で、何やらよさそうです。

今回参考にさせてもらったのは、「FizzBuzzではじめるテスト – 第１回関西PHP勉強会」
こちらの内容で、そのままASに持ってきて試してます。

FizzBuzzもしらんがな

なにやらエンジニア界隈ではわりと常識らしい「FizzBuzz」、初めて聞きました。
参考のエントリできちんと説明されていますが、1から順に数字を出力していき、
3の倍数で”Fizz”、5の倍数で”Buzz”、公倍数で”FizzBuzz”と、
要は世界のナベアツ的な出力をするプログラムを指すらしいです。

ASで書くとこんな感じ。（サンプルのまんまですけどね。）

package
{
	/**
	 * FizzBuzzクラス
	 * @author Hidemasa Mori
	 */
	public class FizzBuzz
	{
		/**
		 * FizzBuzz テキスト表現を作成
		 *
		 * @param uint num
		 * @return String
		 */
		public static function makeFizzBuzz(num:uint):String
		{
			if (num % 3 == 0 && num % 5 == 0)
			{
				return "FizzBuzz";
			} else if (num % 3 == 0) {
				return "Fizz";
			} else if ( num % 5 == 0) {
				return "Buzz";
			} else {
				return num.toString();
			}
		}

	}

}

FlexUnit4+FlashDevelopでテスト

で、本題のテストですが、今回はAS3+FlexUnit4（4.1Betaが出てたけどうまく行かず）+FlashDevelop4でやってます。
プロジェクトごとGithubに置いてるので、そのままmxmlをドキュメントクラスにしてコンパイルすると動くかと。
サンプルの作成に「FlashDevelopの使い方 (17)FlexUnit 4でユニットテストをする方法」を大変参考にさせていただきました。

サンプルファイル

手順としては、FlexUnit4をダウンロードして、swcファイルをライブラリに追加していきます。
今回のサンプルはこんなファイル構成。

サンプルに入れているMain.asをドキュメントクラスにしても動くけど、
GUIを表示させることができなかった（traceはできる）ので、mxmlでのコンパイルに落ち着きました。

テストコードはこんな感じ。
[test]とメタタグを書いたメソッドがテスト用メソッドとなるようです。
ほかにも、testの前後に処理を行うbeforeやafter、非同期処理に対応したメタタグなど色々あるみたいです。

package
{
	import org.flexunit.Assert;
	/**
	 * FizzBuzzのテストクラス
	 * @author Hidemasa Mori
	 */
	public class FizzBuzzTest
	{
		[Test]
		public function testFizzBuzz():void
		{
			Assert.assertEquals("Fizz", FizzBuzz.makeFizzBuzz(3));
		}

		[Test]
		public function testFizzBuzz2():void
		{
			Assert.assertEquals("Buzz", FizzBuzz.makeFizzBuzz(5));
		}

		[Test]
		public function testFizzBuzz3():void
		{
			Assert.assertEquals("FizzBuzz", FizzBuzz.makeFizzBuzz(15));
		}

	}

}

Assert.assertEqualsの引数を比べて、同じなら、テストが通りグリーンの表示

違う結果が帰ってきた場合はレッドの表示となります。

とりあえず、赤と緑がみれたので満足。

他言語みたいなサクサクテストな環境は・・

今回の方法だと参考エントリでも言及されてるように、
GUIで確認するとなるとパブリッシュ→ムービープレビューの流れが必要になり、
手順としては冗長に感じますね・・こまめにテストするには敷居が高いです。
レッド/グリーンをGUIで確認しつつ、リアルタイムにテストを実行できる環境があればいーなー。
（勉強会でデモされてた、MakeGoodみたいな感じで）
FlashBuilderはこのあたり、連携スムーズになってるんでしょうか。興味湧いてきました。

UIのテスト

あと、Selenium IDEというのが紹介されていて、とってもいいなーと感じました。
ブラウザベースでの自動テストができるのは魅力的ですし、
デザイナーにも役立ちそうなツールなので是非試してみたいです。

また、FlashのUI自動テストについても調べてみたら、
FlexMonkey とか QTP とかってのがあるみたいです。
そのへんはまた今度。