Using FlexUnit 4 with Flash CS5


Published on

Using FlexUnit 4 with Flash CS5

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using FlexUnit 4 with Flash CS5

  1. 1. Using FlexUnit 4 with Flash Professional CS5<br />Ben Schmidtke<br />Digital Primates <br />
  2. 2. Who Am I?<br />Ben Schmidtke III<br />Consultant - Digital Primates IT Consulting Group<br />Flash Platform Developer for 11 years<br />Adobe Certified Instructor & Developer<br />Currently primary focus is enterprise Flex application development<br />Mentoring clients to become better developers and help overcome complex project requirements using the Flash Platform<br />2<br />
  3. 3. Who Are You?<br />A Flash ActionScript developer who spends a significant amount of time in Flash Professional CS.<br />You are interested in FlexUnit 4 and learning ways to use it with Flash Professional application development.<br />You may or may not have experience with unit tests. <br />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.<br />3<br />
  4. 4. What Is This Session About?<br />Overview of FlexUnit 4<br />Why we should consider using FlexUnit 4 with Flash CS5 Projects<br />ActionScript Development Workflows For CS5<br />Building a testable class using Flash CS5<br />Workflow and testing using Flash Builder 4<br />Workflow and testing using only Flash Professional CS5<br />Sneak peak of the FlexUnit 4 panel for Flash CS5<br />Resources<br />Q&A<br />4<br />
  5. 5. What Is Not On The Agenda?<br />There is a lot of functionality in FlexUnit 4, we will not be covering a majority of it’s features.<br />There are numerous articles on FlexUnit 4 that go into greater detail regarding it’s full functionality<br />For more information visit<br />Our time will be spent less on FlexUnit features and more about how to use it with Flash Professional CS<br />5<br />
  6. 6. A Common Assumption<br />One of the most common false assumptions is that: <br />“FlexUnit is only for Flex.”<br />This is incorrect!<br />6<br />
  7. 7. FlexUnit is a Mystical Beast? Possibly…<br />A poorly named testing framework that supports unit and integration testing for ActionScript or Flex projects<br />A pluggable testing architecture which facilitates the use of multiple test runners and multiple test listeners<br />Resulting in FlexUnit 4 being able to:<br />Be used with a Flash Professional CS5 Project<br />Be used with a Flash Builder 4: Flash Professional Project<br />7<br />
  8. 8. Brief List of FlexUnit 4.x Features<br />Used with ActionScript 3 and Flex projects<br />Use of Metadata tags: [Test], [Suite], etc.<br />Test environment support [Before], [After], [BeforeClass], [AfterClass]<br />Exception Handling<br />Async testing: per test & timeout support<br />Hamcrest assertions<br />Suites & Parameterized Testing<br />Theories, Datapoints and Assumptions<br />And more!<br />8<br />
  9. 9. Why Should We Be Unit Testing?<br />Developer responsibility to ensure the code written works 100% of the time, all the time.<br />Responsibility to the client<br />Responsibility to fellow developers<br />Responsibility to the budget<br />Responsibility to the brand<br />Flash brand is under increased scrutiny over stability of the platform and the quality of the developers<br />“Flash crashes … ( insert random browser or operation system ) ”<br />9<br />
  10. 10. Strive To Be Better Programmers<br />80% of your time as a developer is spent identifying and correcting defects<br />Software mistakes cost the US Economy about 80 billion dollars a year<br />An error found after release can cost 100x more to fix than during early development <br />The point is that we need to do a better job of finding errors and we need to find them sooner<br />10<br />
  11. 11. ActionScript Development Workflows For CS5<br />When writing a Flash application there are two main workflows available to us within the Adobe software when working with ActionScript<br />Native development in Flash Professional CS<br />New workflow using Flash Builder 4 for ActionScript development<br />11<br />
  12. 12. Workflow Considerations<br />Native Flash Professional CS5 Development<br />No dependency on other programs<br />ActionScript editor is lacking in many areas<br />Hybrid Development using Flash Builder 4<br />Possibly better ActionScript editor and code generation tools<br />Constantly having to switch between tools<br />12<br />
  13. 13. Multiple Workflows Allows For Multiple Implementations<br />There are multiple ways to use FlexUnit 4:<br />Native Approach in Flash Professional CS5<br />Building a FlexUnit 4 application in CS5 to test your application<br />Requires manual setup and additional work<br />No dependency on having Flash Builder<br />Hybrid Approach using Flash Builder 4<br />Using existing FlexUnit 4 functionality in Flash Builder to test the Flash Professional project<br />Arguably the easiest solution<br />Dependency on having Flash Builder<br />13<br />
  14. 14. Limitations of Flash Professional CS5<br />No built in support for FlexUnit 4<br />No panels<br />No visual feedback for tests run<br />Unable to support additional compiler arguments<br />Required for custom MetaData tags<br />No templates for Tests and Theories<br />14<br />
  15. 15. Limitations of Flash Builder 4<br />Flash Builder does not know how to compile FLA’s<br />Flash Builder needs to modify the application to:<br />Support MetaData tags<br />Compile & Run the tests<br />Provide visual feedback regarding success / failures<br />15<br />
  16. 16. Thinking Small In The Project<br />Writing testable code means writing small pieces of functionality<br />Tests focus on testing small pieces of code<br />“Good Lego’s make strong Lego castles”<br />Many tests result in the testing of the project framework<br />Build an ActionScript framework for your project<br />Building corresponding tests to ensure the framework is bulletproof<br />16<br />
  17. 17. Walkthrough: Creating the Circle Class<br />In this walkthrough:<br />Using Flash Professional CS5<br />Create a class that will have rules about a Circle<br />Create a property for diameter<br />Create a property for radius<br />Make sure the class can be compiled into the swf<br />17<br />
  18. 18. Option 1: Using an ActionScript Library in FB4<br />In Flash Professional CS5:<br />Go to: “File > Publish Settings…”<br />On the “Flash” Options Tab, Select “Export SWC”<br />Publish the project<br />In Flash Builder 4:<br /> Create a ActionScript 3 project<br />Add the SWC built by Flash Professional to Flex Build Path<br />Write tests<br />18<br />
  19. 19. FlexUnit 4 Terminology<br />Assert<br />A piece of code that asserts something meets the expected results.<br />Test Method<br />The smallest unit of the testing framework<br />Executes code and checks an outcome<br />Test Case<br />Collection of Test Methods that share a common test environment<br />Test Suite<br />Collection of Test Cases, and possibly other Test Suite’s<br />19<br />
  20. 20. Closer Look: What is a Test?<br />A test is a piece of code that determines if a small portion of your project is working as intended<br />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.<br />[Test]<br />public function testDiameter():void {<br />assertEquals( (circle_r2.radius * 2), circle_r2.diameter );<br />}<br />20<br />
  21. 21. Walkthrough 2: Write a Test for the Circle Class<br />Export & Add the Flash Project SWC<br />Create a Test Case Class<br />Write a Test Method for the radius property<br />Run the test<br />Review the results<br />Look at a more complete example<br />21<br />
  22. 22. Notes on Hybrid Testing Workflow & Issues<br />Have to publish the project to generate the SWC when changes are made to the FLA project.<br />Classes and Assets Linkage:<br />Classes must be referenced at least once in the project<br />Assets & Fonts should be linked in via “Export for ActionScript”<br />22<br />
  23. 23. Option 2: Using FlexUnit 4 in Flash CS5<br />Required to include FlexUnit4 SWC as a External Library<br />Download latest build from<br />ActionScript only version<br />Optionally include additional libraries that work with FlexUnit4<br />Hamcrest Library<br />CI Library for use with Hudson or other Continuous Integration Systems<br />23<br />
  24. 24. Option 2: Using FlexUnit 4 in Flash CS5 Setup<br />Setup FlexUnit 4 FLA project to run tests for Flash CS5 project<br />Check “Export SWC” on Flash publish settings<br />Required to use MetaData tags in FlexUnit 4<br />Add FlexUnit SWC to ActionScript 3 Library Path<br />Add Flash CS5 Project SWC to Library Path<br />Write code to use FlexUnit core & attach a listener to report the outcome of the FlexUnit tests<br />Write code for what FlexUnit tests, suites, etc. to run<br />24<br />
  25. 25. Walkthrough 3: FlexUnit 4 in Flash CS5 Setup<br />Create FlexUnit CS5 Project<br />Include required SWC’s<br />Setup core & attach TraceListener<br />Include tests used in previous examples<br />Run FlexUnit Application application, review results<br />25<br />
  26. 26. Option 2: Pros and Cons<br />The Pros:<br />Can do all development and testing from Flash Professional<br />No use of Flash Builder 4<br />No use of the Flex Framework<br />The Cons:<br />Manual process of setting everything up<br />Use TraceListener or create a UI for FlexUnit Results<br />No templates or panels for assistance<br />26<br />
  27. 27. Two Problems For Available Workflows<br />Option 1: Importing Project SWC into Flash Builder<br />Dependency on Flash Builder 4 to use FlexUnit 4<br />FlexUnit does not require Flash Builder<br />Option 2: Bringing FlexUnit 4 into Flash CS5<br />Requires a lot of manual work!<br />Get/build the AS version of FlexUnit<br />Build a FlexUnit Runner application<br />Etc.<br />27<br />
  28. 28. Coming Soon: FlexUnit 4 Panel for CS5<br />Automated process for using FlexUnit 4 in the authoring environment<br />FlexUnit Project Panel<br />Similar to another workspace project for FlexUnit in Flash Builder<br />Easy creation of FlexUnit files<br />Templates for: Tests & Suites<br />Built in UI runner when executing tests<br />28<br />
  29. 29. A Look at the FlexUnit 4 Panel<br />Overview of the project panel<br />Target SWC’s to test<br />Ability to separate the tests from the Flash Project<br />Easy user interface for developing and managing tests<br />Walkthrough<br />29<br />
  30. 30. How Does It Work?<br />30<br />
  31. 31. Future Development Flash CS5 Panel Support<br />Support Results Panel<br />Provide visual feedback about the results<br />Detailed information for failed tests<br />Ability to upgrade and add new FlexUnit supported SWC’s as new libraries are supported.<br />31<br />
  32. 32. Honorable Mention<br />ActionScript editors supporting FlexUnit 4<br />FDT 4 Support for FlexUnit 4<br />Intellij<br />Numerous community projects integrating with FlexUnit we can leverage:<br />AS3Signals, Hamcrest, Mockolate, FlexMojos, FlexCover, PMD, JavaNCSS, FlexCPD, FlexMentrics<br />And many more<br />For more information:<br />32<br />
  33. 33. Resources<br /> – Wiki, Tutorials and More<br /><br />Adobe Open Source Site<br /><br />Latest Source<br /><br />Nightly Builds:<br />33<br />
  34. 34. Q&A?<br />Questions, comments or clarification?<br />Contact:<br /><br />Blog:<br />Twitter:<br />34<br />