Flex Article

Unit testing and Test Driven Development (TDD) for Flex and ActionScript 3.0

Installing FlexUnit

Installing FlexUnit is pretty straight forward. You get the Flex Unit source files, set up a Flex project, and in the process, you specify that the project should use the flexunit.swc file:

1. Get the flexunit .zip archive (from the Requirements area) and extract it to your hard drive. I created a new folder on my C drive called FlexDev and extracted it there, so the path on my machine is C:\FlexDev. Once extracted, FlexDev will contain a folder called flexunit, which in turn contains further sub folders (bin, docs and src folders).
2. Create the Flex Project. Open up FlexBuilder 2 and create a new Flex project using: File > New > Flex Project.
3. Choose a Basic Service (in other words, not Data Services) and press Next.
4. Give your project a name of 'TDD Example', deselect the Use default location option, and browse to the same location as before (on my machine this is the C:\FlexDev folder). This is the location where you are going to set up your project. Click Next. (If you pressed Finish by mistake, skip to the end of this list).
5. Select the Library Path tab, click the Add SWC… button and browse to the SWC file, which is in the bin folder of flexunit (using my set-up, the path is C:\FlexDev\flexunit\bin\flexunit.swc).
6. Press Finish button and you're done.

Note: If you need to add the SWC file to an existing project, right-click your project folder, select properties from the pop-up list and continue from step 5 above.

Am I done?

You're almost there. First I am going to briefly describe the three files that you are about to create:

• The first file is the .mxml, (which is set as the default application for our Flex project). This file contains an instance of the TestRunner component (the visual component that displays the test results). The file specifies to the component which test suites you want to run, and then starts the test. I simply called this "main.mxml."
• I'll refer to the second file as the test class. It is the one that contains the "test runner." Some developers refer to this as the test harness and some would simply call it a test runner. In this file, decide what you need to assert, and then write your test cases in it. I've named this class AccountTest.as as the example in this tutorial relates to money.
• Finally there is the actual class, Account.as. Build this file up bit by bit as you create more and more tests.

Creating the three files

Creating main.mxml:

Here is the MXML that belongs in the main.mxml file. Open up the file and copy and paste this in:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:flexunit="flexunit.flexui.*" 
    creationComplete="onCreationComplete()"
>    
    <mx:Script>
        <![CDATA[
                        
            private function onCreationComplete():void
            {
                testRunner.test = AccountTest.suite();
                testRunner.startTest();
            }
        ]]>
    </mx:Script>    
    <flexunit:TestRunnerBase id="testRunner" width="100%" height="100%" />
</mx:Application>

There are a few things to notice:

1. We've defined a new xml namespace in the Application tag
2. We have a creationComplete even calling our onCreationComplete method
3. we created an instance of TestRunnerBase

We defined a new xml namespace in the Application tag:

xmlns:flexunit="flexunit.flexui.*"

If you have created your own components in Flex before, this will be familiar to you. If not then I will briefly explain.

This creates a namespace called "flexunit," which refers to components located in the flexunit.flexui package. We have access to this package of course, because you associated the flexunit.swc file with the project library earlier.

To instantiate an instance of the component in MXML, you can use code similar to the following:

<flexunit:TestRunnerBase id="testRunner" />

If you had declared your namespace as "bananas", you would instantiate your component using code similar to:

<bananas:TestRunnerBase id="testRunner" />

But you've used common sense and gone for a more descriptive name.

The TestRunnerBase component is TestRunner (see the "Understanding Terminology" section, above, for a refresher). I assigned it an id of testRunner.

In the Application tag you also have the creationComplete event handler, which calls onCreationComplete(). This method sets the test suite(s) you are going to use, and then calls the startTest() method of the TestRunner to put everything in to action.

Finally, underneath the script block you instantiate our TestRunner as previously described, with a width and height of 100%.

Okay, that's it. You'll be glad to hear that you don't really need to touch this file again in this tutorial.

Creating AccountTest.as:

Create a new ActionScript file in the main project folder (at the same level as main.xml) called AccountTest.as, and paste the following code into it:

package
{
    import flexunit.framework.TestCase;
    import flexunit.framework.TestSuite;
    
    public class AccountTest extends TestCase
    {
        public function AccountTest(methodName : String){
            super(methodName);
        }
            
        public static function suite():TestSuite{
            var accountTS:TestSuite = new TestSuite();
                //tests are added to the suite here
            return accountTS;
            
        }
    }
}

There are a few things to notice:

1. The class extends TestCase.
2. There is one static function called suite (which returns a TestSuite).
3. The constructor calls its super class, passing it some method name.

Creating Account.as

Finally, you must create the Account class. Create a new ActionScript file in the main project folder (at the same level as main.xml and AccountTest.as) called Account.as and paste the following code into it:

package
{
    public class Account
    {
        public function Account(){
            
        }
    }
}

Not much to say about this. It is the bare bones of the actual class.

Page 2 of 4

Previous Page

Next Page