Using FlexUnit 4 with Flash CS5

1. Using FlexUnit 4 with Flash Professional CS5 Ben Schmidtke Digital Primates

2. Who Am I? Ben Schmidtke III Consultant - Digital Primates IT Consulting Group Flash Platform Developer for 11 years Adobe Certified Instructor & Developer Currently primary focus is enterprise Flex application development Mentoring clients to become better developers and help overcome complex project requirements using the Flash Platform 2

3. Who Are You? A Flash ActionScript developer who spends a significant amount of time in Flash Professional CS. You are interested in FlexUnit 4 and learning ways to use it with Flash Professional application development. You may or may not have experience with unit tests. If this doesn’t describe you then go and enjoy another session. People fitting the above description will get the most out of this session and I personally want you to get the most from your MAX experience. 3

4. What Is This Session About? Overview of FlexUnit 4 Why we should consider using FlexUnit 4 with Flash CS5 Projects ActionScript Development Workflows For CS5 Building a testable class using Flash CS5 Workflow and testing using Flash Builder 4 Workflow and testing using only Flash Professional CS5 Sneak peak of the FlexUnit 4 panel for Flash CS5 Resources Q&A 4

5. What Is Not On The Agenda? There is a lot of functionality in FlexUnit 4, we will not be covering a majority of it’s features. There are numerous articles on FlexUnit 4 that go into greater detail regarding it’s full functionality For more information visit www.FlexUnit.org Our time will be spent less on FlexUnit features and more about how to use it with Flash Professional CS 5

6. A Common Assumption One of the most common false assumptions is that: “FlexUnit is only for Flex.” This is incorrect! 6

7. FlexUnit is a Mystical Beast? Possibly… A poorly named testing framework that supports unit and integration testing for ActionScript or Flex projects A pluggable testing architecture which facilitates the use of multiple test runners and multiple test listeners Resulting in FlexUnit 4 being able to: Be used with a Flash Professional CS5 Project Be used with a Flash Builder 4: Flash Professional Project 7

8. Brief List of FlexUnit 4.x Features Used with ActionScript 3 and Flex projects Use of Metadata tags: [Test], [Suite], etc. Test environment support [Before], [After], [BeforeClass], [AfterClass] Exception Handling Async testing: per test & timeout support Hamcrest assertions Suites & Parameterized Testing Theories, Datapoints and Assumptions And more! 8

9. Why Should We Be Unit Testing? Developer responsibility to ensure the code written works 100% of the time, all the time. Responsibility to the client Responsibility to fellow developers Responsibility to the budget Responsibility to the brand Flash brand is under increased scrutiny over stability of the platform and the quality of the developers “Flash crashes … ( insert random browser or operation system ) ” 9

10. Strive To Be Better Programmers 80% of your time as a developer is spent identifying and correcting defects Software mistakes cost the US Economy about 80 billion dollars a year An error found after release can cost 100x more to fix than during early development The point is that we need to do a better job of finding errors and we need to find them sooner 10

11. ActionScript Development Workflows For CS5 When writing a Flash application there are two main workflows available to us within the Adobe software when working with ActionScript Native development in Flash Professional CS New workflow using Flash Builder 4 for ActionScript development 11

12. Workflow Considerations Native Flash Professional CS5 Development No dependency on other programs ActionScript editor is lacking in many areas Hybrid Development using Flash Builder 4 Possibly better ActionScript editor and code generation tools Constantly having to switch between tools 12

13. Multiple Workflows Allows For Multiple Implementations There are multiple ways to use FlexUnit 4: Native Approach in Flash Professional CS5 Building a FlexUnit 4 application in CS5 to test your application Requires manual setup and additional work No dependency on having Flash Builder Hybrid Approach using Flash Builder 4 Using existing FlexUnit 4 functionality in Flash Builder to test the Flash Professional project Arguably the easiest solution Dependency on having Flash Builder 13

14. Limitations of Flash Professional CS5 No built in support for FlexUnit 4 No panels No visual feedback for tests run Unable to support additional compiler arguments Required for custom MetaData tags No templates for Tests and Theories 14

15. Limitations of Flash Builder 4 Flash Builder does not know how to compile FLA’s Flash Builder needs to modify the application to: Support MetaData tags Compile & Run the tests Provide visual feedback regarding success / failures 15

16. Thinking Small In The Project Writing testable code means writing small pieces of functionality Tests focus on testing small pieces of code “Good Lego’s make strong Lego castles” Many tests result in the testing of the project framework Build an ActionScript framework for your project Building corresponding tests to ensure the framework is bulletproof 16

17. Walkthrough: Creating the Circle Class In this walkthrough: Using Flash Professional CS5 Create a class that will have rules about a Circle Create a property for diameter Create a property for radius Make sure the class can be compiled into the swf 17

18. Option 1: Using an ActionScript Library in FB4 In Flash Professional CS5: Go to: “File > Publish Settings…” On the “Flash” Options Tab, Select “Export SWC” Publish the project In Flash Builder 4: Create a ActionScript 3 project Add the SWC built by Flash Professional to Flex Build Path Write tests 18

19. FlexUnit 4 Terminology Assert A piece of code that asserts something meets the expected results. Test Method The smallest unit of the testing framework Executes code and checks an outcome Test Case Collection of Test Methods that share a common test environment Test Suite Collection of Test Cases, and possibly other Test Suite’s 19

20. Closer Look: What is a Test? A test is a piece of code that determines if a small portion of your project is working as intended In the example below, the test verifies the rules of a Circle by checking if (radius * 2) is equal to the diameter property on a circle object. [Test] public function testDiameter():void { assertEquals( (circle_r2.radius * 2), circle_r2.diameter ); } 20

21. Walkthrough 2: Write a Test for the Circle Class Export & Add the Flash Project SWC Create a Test Case Class Write a Test Method for the radius property Run the test Review the results Look at a more complete example 21

22. Notes on Hybrid Testing Workflow & Issues Have to publish the project to generate the SWC when changes are made to the FLA project. Classes and Assets Linkage: Classes must be referenced at least once in the project Assets & Fonts should be linked in via “Export for ActionScript” 22

23. Option 2: Using FlexUnit 4 in Flash CS5 Required to include FlexUnit4 SWC as a External Library Download latest build from FlexUnit.org ActionScript only version Optionally include additional libraries that work with FlexUnit4 Hamcrest Library CI Library for use with Hudson or other Continuous Integration Systems 23

24. Option 2: Using FlexUnit 4 in Flash CS5 Setup Setup FlexUnit 4 FLA project to run tests for Flash CS5 project Check “Export SWC” on Flash publish settings Required to use MetaData tags in FlexUnit 4 Add FlexUnit SWC to ActionScript 3 Library Path Add Flash CS5 Project SWC to Library Path Write code to use FlexUnit core & attach a listener to report the outcome of the FlexUnit tests Write code for what FlexUnit tests, suites, etc. to run 24

25. Walkthrough 3: FlexUnit 4 in Flash CS5 Setup Create FlexUnit CS5 Project Include required SWC’s Setup core & attach TraceListener Include tests used in previous examples Run FlexUnit Application application, review results 25

26. Option 2: Pros and Cons The Pros: Can do all development and testing from Flash Professional No use of Flash Builder 4 No use of the Flex Framework The Cons: Manual process of setting everything up Use TraceListener or create a UI for FlexUnit Results No templates or panels for assistance 26

27. Two Problems For Available Workflows Option 1: Importing Project SWC into Flash Builder Dependency on Flash Builder 4 to use FlexUnit 4 FlexUnit does not require Flash Builder Option 2: Bringing FlexUnit 4 into Flash CS5 Requires a lot of manual work! Get/build the AS version of FlexUnit Build a FlexUnit Runner application Etc. 27

28. Coming Soon: FlexUnit 4 Panel for CS5 Automated process for using FlexUnit 4 in the authoring environment FlexUnit Project Panel Similar to another workspace project for FlexUnit in Flash Builder Easy creation of FlexUnit files Templates for: Tests & Suites Built in UI runner when executing tests 28

29. A Look at the FlexUnit 4 Panel Overview of the project panel Target SWC’s to test Ability to separate the tests from the Flash Project Easy user interface for developing and managing tests Walkthrough 29

30. How Does It Work? 30

31. Future Development Flash CS5 Panel Support Support Results Panel Provide visual feedback about the results Detailed information for failed tests Ability to upgrade and add new FlexUnit supported SWC’s as new libraries are supported. 31

32. Honorable Mention ActionScript editors supporting FlexUnit 4 FDT 4 Support for FlexUnit 4 Intellij Numerous community projects integrating with FlexUnit we can leverage: AS3Signals, Hamcrest, Mockolate, FlexMojos, FlexCover, PMD, JavaNCSS, FlexCPD, FlexMentrics And many more For more information: http://docs.flexunit.org/index.php?title=Community_Projects 32

33. Resources FlexUnit.org – Wiki, Tutorials and More http://flexunit.org/ Adobe Open Source Site http://opensource.adobe.com/wiki/display/flexunit/FlexUnit Latest Source http://www.flexunit.org/?page_id=14 Nightly Builds: http://flexunit.digitalprimates.net:8080/ 33

34. Q&A? Questions, comments or clarification? Contact: bschmidtke@digitalprimates.net Blog: http://blogs.digitalprimates.net/excessiveRecursion/ Twitter: http://twitter.com/stunnedgrowth 34