How to use FlexUnit in Flex

Earth-Scan-256x256 If you’re a java programmer, you may familiar with JUnit. Today, software testing is becoming more and more important. A good platform needs good testing tools. Now, Adobe release the unit test tool on flex named FlexUnit. So, let’s try it, and gives you a direct-viewing understand.

clip_image002

I’ll suppose the reader, you familiar with Flex and AS 3.0(or AS 2.0), and any knowledge about software testing is unnecessary. This demo can be ran in Flex Builder 3.0.

DownloadDownload Full Source

First thing first, we must download this tool from the official website. Open this page http://code.google.com/p/as3flexunitlib/,and you’ll see the Featured Downloads on your right hand side. Download the file named flexunit-.85.zip, and extract it.

There’ll be three directories including bin, doc and src after you extracted it. As usual, the bin directory is keeping the SWC library of FlexUnit, and the doc directory is about API documents, the last directory src is about the source code of this project.

Now, let’s build a test project to see how to use it.

clip_image004

Open your Flex Builder, create a new project called TestRunner, choose the project location, set the Application type as Web application and no server is needed.

Click Next, and you can choose the output folder, here we use the default path.

Next again, here comes the setting. Switch to the Library Path, click Add SWC, showing below.

clip_image005

clip_image007

Find the flexunit.swc, and the flexunit will added into the build path libraries. Such as the right hand side graph shows.

If you don’t want to setting it now, you can set it when you want to. You just need to right click the project, choose properties, then click the Flex Builder Path, you can see the same user interface. If you have some experience on Eclipse, you will familiar with it.

What is next? Eh, let’s write some code now. According to adobe, we should use TDD(Test Driven Development) this time. So let’s build the main framework for this project, put the code showing below on the main mxml.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
				xmlns:flexunit="flexunit.flexui.*"
				creationComplete="onCreationComplete()">

	<mx:Script>
		<![CDATA[
			import flexunit.framework.TestSuite;

			// After everything is built, configure the test
			// runner to use the appropriate test suite and
			// kick off the unit tests
			private function onCreationComplete():void
			{
 				testRunner.test = createSuite();
 				testRunner.startTest();
 			}

			// Creates the test suite to run
			private function createSuite():TestSuite {
 				var ts:TestSuite = new TestSuite();

 				// TODO: Add more tests here to test more classes
 				// by calling addTest as often as necessary

 				ts.addTest( TemperatureConverterTest.suite() );

 				return ts;
 			}

		]]>
	</mx:Script>

	<flexunit:TestRunnerBase id="testRunner" width="100%" height="100%" />
</mx:Application>

You don’t need to understand the code now, here we’re going to test a little toy program convert the degrees on Celsius and Fahrenheit.

We need to create a test class, inherited from flexunit.framework.TestCase. Choose File->new->ActionScript File, named it as TemperatureConverterTest.as, the code is showing below.

package {

 	import flexunit.framework.TestCase;
 	import flexunit.framework.TestSuite;

 	public class TemperatureConverterTest extends TestCase {

  	    public function TemperatureConverterTest( methodName:String ) {
   			super( methodName );
           }

  		public static function suite():TestSuite {
   			var ts:TestSuite = new TestSuite();

   			ts.addTest( new TemperatureConverterTest( "testToFahrenheit" ) );
   			ts.addTest( new TemperatureConverterTest( "testToCelsius" ) );
   			return ts;
   		}

  		/**
  		 * Ensures the celsius to fahrenheit conversion works as expected.
  		 */
  		public function testToFahrenheit():void {
   			// Test boiling point
   			var celsius:Number = 100;
   			var fahrenheit:Number = TemperatureConverter.toFahrenheit( celsius );
   			assertTrue( "Expecting 212 fahrenheit", fahrenheit == 212 );

   			// Test freezing point
   			var celsius:Number = 0;
   			var fahrenheit:Number = TemperatureConverter.toFahrenheit( celsius );
   			assertTrue( "Expecting 32 fahrenheit", fahrenheit == 32 );
   		}

  		/**
  		 * Ensures the fahrenheit to celsius conversion works as expected.
  		 */
  		public function testToCelsius():void {
   			// Test boiling point
   			var fahrenheit:Number = 212;
   			var celsius:Number = TemperatureConverter.toCelsius( fahrenheit );
   			assertTrue( "Expecting 100 celsius", celsius == 100 );

   			// Test freezing point
   			fahrenheit = 32;
   			celsius = TemperatureConverter.toCelsius( fahrenheit );
   			assertTrue( "Expecting 0 celsius", celsius == 0 );
   		}

  	}
}

Now, we need to create the class which needs to be tested. Create the ActionScript File named TemperatureConverter.as, we can write some simple code to fill it, show as blow.

package {

 	public class TemperatureConverter {

  		public static function toFahrenheit( celsius:Number ):Number {
   			return ( 9 / 5 ) * celsius + 32;
   		}

  		public static function toCelsius( fahrenheit:Number ):Number {
   			return ( 5 / 9 ) * ( fahrenheit - 32 );
   		}
  	}
}

It seems everything goes all right, let’s run the project. And you’ll see

clip_image008

From this graph, we can see the Running bar is red, it means some failures happened, and you can see the failures showing on the graph.

Now, let’s change the code to fix it. The code is showing below.

package {

public class TemperatureConverter {

public static function toFahrenheit( celsius:Number ):Number {
return ( 9 / 5 ) * celsius + 32;
}

public static function toCelsius( fahrenheit:Number ):Number {
return ( 5 / 9 ) * ( fahrenheit - 32 );
}

}

}

Run it again. You’ll get…

clip_image009

This time, the Running bar was changed to green, it means no failure.

According to this simple introduction, I think you can get a direct-viewing on this powerful tool. Now you can get it from Google code, and use it on your daily life.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

5 Responses to “How to use FlexUnit in Flex”

  1. Jonecir says:

    Hello,

    Nice article, however I installed the flexunit0_9 version which is quite different from the version you used. Any how, it did not show me any errors when I run the application. Also, you have defined the celsius and fahrenheit variables twice so I’ve got a warning.

    Now after making sure the application is free of errors, how do I release the application? Should I remove the TemperatureConverterTest file from the project and recompile the application again?

  2. [...] 関連リンクhttp://opensource.adobe.com/wiki/display/flexunit/FlexUnit 公式サイトhttp://ntt.cc/2008/08/12/how-to-use-flexunit-in-flex.html 初心者向け メインコンテンツEND ■ (No Ratings Yet)  Loading … [...]

  3. Swathi says:

    Good article, As Jonecir said, I too installed the flexunit0_9 version and it did not show me any errors. Please let me know how to proceed…

  4. [...] FlexUnit is a unit testing framework for Flex and ActionScript 3.0 applications and libraries. It mimics the functionality of JUnit, a Java unit testing framework, and comes with a graphical test runner. You also can read this tutorials to learn How to use FlexUnit in Flex. [...]

Leave a Reply