Using FlexUnit 4 with Flash CS5

After all these years I still love working in the Flash IDE. It is a raw pure form of ActionScript that presents you with a blank canvas to express your creativity. Having said that, our mindless creations need solid testing before being released to the public. Today I will talk about the most direct way of using Flex Unit 4 with your ActionScript 3: Flash CS Project, by directly adding the Flex Unit SWC to your FLA. This gives full access to the FLA library during the tests. The easiest way to describe this is the FLA library is comprised of Class objects that are not external files, and they need testing too. This has been something that has been asked about for some time on the Adobe forums so I thought I would take some time to explain how to accomplish this and the numerous pitfalls associated with it. In the following example I will be using Flash Builder 4 and Flash Professional CS5 although that being said you should be able to integrate with any version of Flash CS that supports AS3 development. We are working at simplifying this in the future by providing a panel to be used in the Flash IDE but for now to those who have been waiting hopefully this gets you started. Requirements:

  • Flash Professional CS (3-5)
  • Flash Builder 4 or
  • Flex Unit 4 source and can compile the ActionScript only version of the Flex Unit 4 SWC.

Definitions: In Flash Builder 4 there is a new project type called a Flash Professional Project. In Flash Creative Suite there also is something called a Flash Project. They are not the same thing, and for the sake of clarity I will be referencing these two things as: FB: Flash Project and FCS: Flash Project. Flash Builder 4: The Unfortunate Truth One of the new features in Flash Builder 4 is not only Flex Unit 4 but the ability to a have Flash Professional Project with round trip development support, features and debugging. From a development standpoint that is pretty great for those of you who are not Flex developers and want to use Flash Builder as a AS development tool for our Flash CS project. While I’m not going to talk about everything that entails, my initial hope was that with this new project type in Flash Builder 4 I could run Flex Unit 4 against the FB4: Flash Project the same way you would run Flex Unit tests against a Flex/AS Project. Unfortunately this is not the case from Flash Builder. When attempting to launch your Flex Unit tests against a FB4:Flash Projects you will get several errors basically because Flash Builder is not actually compiling your application, Flash CS is, and Flash Builder does not know how to compile the Flex Unit tests into your FB: Flash Professional project. The FB4 IDE is slightly misleading in this regard, as it actually allows you to create and attempt to run the Flex Unit tests against your FB: Flash Project. Until this is supported should probably be disabled in Flash Builder 4 for Flash Professional Projects. Hopefully the Flash Builder and Flash CS teams can get this ironed out and working in the future. You can however create a new project that would just be for testing the ActionScript in your Flash CS project. You won’t be able to test anything that is working with items in the Library, and will have to be mindful of anywhere you are doing Library Linking MovieClip/Code Behind but you could approach your project that way. Flash Professional: Our Only Hope (For Now) In the meantime, if we want to test everything in Flash CS project including using library assets this leaves us with only one option, import the flex unit swc’s into Flash CS and run the tests from the Flash CS IDE. This is not as pretty of a workflow since it requires a few extra steps and some cleanup. For the time being let start from the top and work through the steps to get Flash CS working with Flex Unit 4. Don’t forget that at some point you may also need to remove the Flex Unit SWC and make your project normal again prior to deploying your Flash application excluding the tests from your deployment files. There are three ways of adding the SWC in Flash CS, the first is the old way of adding the necessary SWC to the properties on the FLA. The second is from the projects panel, where you can add SWC to your project there instead of directly on the FLA. The third way is adding the SWC to Flash CS Preferences via : Preferences > ActionScript 3.0 Settings. In this example I will be added to the FLA. Step 1: Add the correct SWC to the FLA or Project properties. Since Flex Unit 4 can be used for Flex projects and ActionScript 3 projects, there are two Flex Unit 4 SWC’s that are shipped with Flash Builder 4. We are not working with MXML so we need to make sure to get the ActionScript only Flex Unit 4 SWC. For a standard install on windows, you can find this SWC here: C:/Program Files/Adobe/Adobe Flash Builder 4/plugins/com.adobe.flexbuilder.flexunit_4.0.0.272416/flexunitframework/libs/version3libs/ASProject/flexunit-core-as3-4.0.0.4-sdk3.5.0.12683.swc Open up the Publish Settings for your FLA and add the SWC to the ActionScript 3.0 Settings. Step 2: Retaining MetaData Tags The next thing we need to do is make sure Flash CS does not strip out the metadata tags that we will need when working with Flex Unit 4. By default, Flash CS will remove MetaData tags at compile time. Currently there is no built in support in Flash CS to add compile time arguments like in Flash Builder. Oddly enough, if you configure the FLA to generate a SWC, it will keep the MetaData tags intact. On the Publish Settings for the FLA, make sure that “Export SWC” is checked. Step 3: Start working with Flex Unit 4 Now that we have the Flex Unit SWC and MetaData tags are being retained, we can start working with Flex Unit. To use Flex Unit, we need 4 things:

  1. Flex Unit UI : The HUD for Flex Unit to output our results to.
  2. UI Listener: The object that will be relaying information from the FlexUnitCore to the UI
  3. Initialize the FlexUnitCore
  4. Create some tests, and execute them.

Step 4: The Flex Unit UI Flash Builder 4 provides a AS3 version user interface displaying the number of tests that passed / failed. Unfortunately, the “AS3 UI Runner” included with Flash Builder 4 actually was built using Flex. So if we wanted to use that one, we would need to add the necessary flex SWC’s to our project as well. Since I do not want the Flex Framework anywhere near my project for someone to accidentally program against, in this example I will opt not to do that.

  1. Create a new Class that extends MovieClip
  2. Implement the IRunListener interface Location: org.flexunit.runner.IRunListener
  3. Implement the appropriate methods: testRunStarted, testStarted, testFinished, testFailure, testAssumptionFailure, testIgnored
  4. Add any UI stuff to look at.
  5. Example just uses trace statements.
  6. See example file in the zip: FlexUnitDemoUI.as

Step 5: The UIListener Next we also need a UI Listener to go with our UIRunner, this will be the object delegating events from the core into the Listener. A simple example of this is included in the zip file. Step 6: Initialize FlexUnitCore The last setup item we need to do is initialize the FlexUnitCore, and add a Listener: UIListener, that has a reference to the Flex Unit UI. Step 7: Build Tests and Run Them Everything else is just like how we would do things in Flash Builder with Flex/AS only projects. Build your tests and run them by calling core.run( Test, Suite, etc.); Other: If you’d like to use the Hamcrest tests, feel free to add this SWC as well. C:/Program Files/Adobe/Adobe Flash Builder 4/plugins/com.adobe.flexbuilder.flexunit_4.0.0.272416/flexunitframework/libs/version3libs/Common/hamcrest-1.0.2.swc That wraps things up. Included below is a test project of this. You will need to have Flash Builder 4 installed, and you might need to update the swc path if your install is located in a different location depending on your operating system. Happy unit testing. Ben Schmidtke Download

4 Comments

    ‘A simple example of this is included in the zip file.’

    Where is the link for this?

    • by Flasher
    • 8:29 pm, May 27, 2010
    • Reply

    Found it the dl link, it’s hiding between ‘Print’ and “del.icios.us”.

    Perhaps a link within the article itself. I reasoned that the ‘download’ link of the bottom there was a link to download the article, not any support files.

    • by Flasher
    • 8:31 pm, May 27, 2010
    • Reply

    Sorry about that, yep it’s the download button at the bottom of the post. We are in the process of building some panels for CS5 to automate the process for users. Some details on that should be coming soon.

    Yep I will fix that for you, thanks for pointing that out.

    • by excessive-recursion
    • 4:08 pm, December 3, 2012
    • Reply

Leave a Reply to Ben Schmidtke Cancel reply