SlideShare a Scribd company logo

Using FlexUnit 4 with Flash CS5

•
•
Ben Schmidtke III
Ben Schmidtke III

The document discusses using FlexUnit 4 for testing ActionScript code written in Flash Professional CS5. It provides an overview of FlexUnit 4 and describes different workflows for using it with Flash Professional projects, including exporting the project as a SWC and testing it in Flash Builder 4 or bringing FlexUnit 4 into a Flash Professional project directly. It also previews a FlexUnit panel planned for Flash Professional that will automate the process of using FlexUnit 4 for testing within Flash authoring.

1 of 35
Using FlexUnit 4 with Flash Professional CS5Ben SchmidtkeDigital Primates
Who Am I?Ben Schmidtke IIIConsultant - Digital Primates IT Consulting GroupFlash Platform Developer for 11 yearsAdobe Certified Instructor & DeveloperCurrently primary focus is enterprise Flex application developmentMentoring clients to become better developers and help overcome complex project requirements using the Flash Platform2
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
What Is This Session About?Overview of FlexUnit 4Why we should consider using FlexUnit 4 with Flash CS5 ProjectsActionScript Development Workflows For CS5Building a testable class using Flash CS5Workflow and testing using Flash Builder 4Workflow and testing using only Flash Professional CS5Sneak peak of the FlexUnit 4 panel for Flash CS5ResourcesQ&A4
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 functionalityFor more information visit www.FlexUnit.orgOur time will be spent less on FlexUnit features and more about how to use it with Flash Professional CS5
A Common AssumptionOne of the most common false assumptions is that: “FlexUnit is only for Flex.”This is incorrect!6
FlexUnit is a Mystical Beast? Possibly…A poorly named testing framework that supports unit and integration testing for ActionScript or Flex projectsA pluggable testing architecture which facilitates the use of multiple test runners and multiple test listenersResulting in FlexUnit 4 being able to:Be used with a Flash Professional CS5 ProjectBe used with a Flash Builder 4: Flash Professional Project7
Brief List of FlexUnit 4.x FeaturesUsed with ActionScript 3 and Flex projectsUse of Metadata tags: [Test], [Suite], etc.Test environment support [Before], [After], [BeforeClass], [AfterClass]Exception HandlingAsync testing: per test & timeout supportHamcrest assertionsSuites & Parameterized TestingTheories, Datapoints and AssumptionsAnd more!8
Why Should We Be Unit Testing?Developer responsibility to ensure the code written works 100% of the time, all the time.Responsibility to the clientResponsibility to fellow developersResponsibility to the budgetResponsibility to the brandFlash 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
Strive To Be Better Programmers80% of your time as a developer is spent identifying and correcting defectsSoftware mistakes cost the US Economy about 80 billion dollars a yearAn 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 sooner10
ActionScript Development Workflows For CS5When writing a Flash application there are two main workflows available to us within the Adobe software when working with ActionScriptNative development in Flash Professional CSNew workflow using Flash Builder 4 for ActionScript development11
Workflow ConsiderationsNative Flash Professional CS5 DevelopmentNo dependency on other programsActionScript editor is lacking in many areasHybrid Development using Flash Builder 4Possibly better ActionScript editor and code generation toolsConstantly having to switch between tools12
Multiple Workflows Allows For Multiple ImplementationsThere are multiple ways to use FlexUnit 4:Native Approach in Flash Professional CS5Building a FlexUnit 4 application in CS5 to test your applicationRequires manual setup and additional workNo dependency on having Flash BuilderHybrid Approach using Flash Builder 4Using existing FlexUnit 4 functionality in Flash Builder to test the Flash Professional projectArguably the easiest solutionDependency on having Flash Builder13
Limitations of Flash Professional CS5No built in support for FlexUnit 4No panelsNo visual feedback for tests runUnable to support additional compiler argumentsRequired for custom MetaData tagsNo templates for Tests and Theories14
Limitations of Flash Builder 4Flash Builder does not know how to compile FLA’sFlash Builder needs to modify the application to:Support MetaData tagsCompile & Run the testsProvide visual feedback regarding success / failures15
Thinking Small In The ProjectWriting testable code means writing small pieces of functionalityTests focus on testing small pieces of code“Good Lego’s make strong Lego castles”Many tests result in the testing of the project frameworkBuild an ActionScript framework for your projectBuilding corresponding tests to ensure the framework is bulletproof16
Walkthrough: Creating the Circle ClassIn this walkthrough:Using Flash Professional CS5Create a class that will have rules about a CircleCreate a property for diameterCreate a property for radiusMake sure the class can be compiled into the swf17
Option 1: Using an ActionScript Library in FB4In Flash Professional CS5:Go to: “File > Publish Settings…”On the “Flash” Options Tab, Select “Export SWC”Publish the projectIn Flash Builder 4: Create a ActionScript 3 projectAdd the SWC built by Flash Professional to Flex Build PathWrite tests18
FlexUnit 4 TerminologyAssertA piece of code that asserts something meets the expected results.Test MethodThe smallest unit of the testing frameworkExecutes code and checks an outcomeTest CaseCollection of Test Methods that share a common test environmentTest SuiteCollection of Test Cases, and possibly other Test Suite’s19
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 intendedIn 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
Walkthrough 2: Write a Test for the Circle ClassExport & Add the Flash Project SWCCreate a Test Case ClassWrite a Test Method for the radius propertyRun the testReview the resultsLook at a more complete example21
Notes on Hybrid Testing Workflow & IssuesHave 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 projectAssets & Fonts should be linked in via “Export for ActionScript”22
Option 2: Using FlexUnit 4 in Flash CS5Required to include FlexUnit4 SWC as a External LibraryDownload latest build from FlexUnit.orgActionScript only versionOptionally include additional libraries that work with FlexUnit4Hamcrest LibraryCI Library for use with Hudson or other Continuous Integration Systems23
Option 2: Using FlexUnit 4 in Flash CS5 SetupSetup FlexUnit 4 FLA project to run tests for Flash CS5 projectCheck “Export SWC” on Flash publish settingsRequired to use MetaData tags in FlexUnit 4Add FlexUnit SWC to ActionScript 3 Library PathAdd Flash CS5 Project SWC to Library PathWrite code to use FlexUnit core & attach a listener to report the outcome of the FlexUnit testsWrite code for what FlexUnit tests, suites, etc. to run24
Walkthrough 3: FlexUnit 4 in Flash CS5 SetupCreate FlexUnit CS5 ProjectInclude required SWC’sSetup core & attach TraceListenerInclude tests used in previous examplesRun FlexUnit Application application, review results25
Option 2: Pros and ConsThe Pros:Can do all development and testing from Flash ProfessionalNo use of Flash Builder 4No use of the Flex FrameworkThe Cons:Manual process of setting everything upUse TraceListener or create a UI for FlexUnit ResultsNo templates or panels for assistance26
Two Problems For Available WorkflowsOption 1: Importing Project SWC into Flash BuilderDependency on Flash Builder 4 to use FlexUnit 4FlexUnit does not require Flash BuilderOption 2: Bringing FlexUnit 4 into Flash CS5Requires a lot of manual work!Get/build the AS version of FlexUnitBuild a FlexUnit Runner applicationEtc.27
Coming Soon: FlexUnit 4 Panel for CS5Automated process for using FlexUnit 4 in the authoring environmentFlexUnit Project PanelSimilar to another workspace project for FlexUnit in Flash BuilderEasy creation of FlexUnit filesTemplates for: Tests & SuitesBuilt in UI runner when executing tests28
A Look at the FlexUnit 4 PanelOverview of the project panelTarget SWC’s to testAbility to separate the tests from the Flash ProjectEasy user interface for developing and managing testsWalkthrough29
How Does It Work?30
Future Development Flash CS5 Panel SupportSupport Results PanelProvide visual feedback about the resultsDetailed information for failed testsAbility to upgrade and add new FlexUnit supported SWC’s as new libraries are supported.31
Honorable MentionActionScript editors supporting FlexUnit 4FDT 4 Support for FlexUnit 4IntellijNumerous community projects integrating with FlexUnit we can leverage:AS3Signals, Hamcrest, Mockolate, FlexMojos, FlexCover, PMD, JavaNCSS, FlexCPD, FlexMentricsAnd many moreFor more information: http://docs.flexunit.org/index.php?title=Community_Projects32
ResourcesFlexUnit.org – Wiki, Tutorials and Morehttp://flexunit.org/Adobe Open Source Sitehttp://opensource.adobe.com/wiki/display/flexunit/FlexUnitLatest Sourcehttp://www.flexunit.org/?page_id=14Nightly Builds: http://flexunit.digitalprimates.net:8080/33
Q&A?Questions, comments or clarification?Contact:bschmidtke@digitalprimates.netBlog: http://blogs.digitalprimates.net/excessiveRecursion/Twitter: http://twitter.com/stunnedgrowth34
Using FlexUnit 4 with Flash CS5

More Related Content

Using FlexUnit 4 with Flash CS5

  • 1. Using FlexUnit 4 with Flash Professional CS5Ben SchmidtkeDigital Primates
  • 2. Who Am I?Ben Schmidtke IIIConsultant - Digital Primates IT Consulting GroupFlash Platform Developer for 11 yearsAdobe Certified Instructor & DeveloperCurrently primary focus is enterprise Flex application developmentMentoring clients to become better developers and help overcome complex project requirements using the Flash Platform2
  • 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 4Why we should consider using FlexUnit 4 with Flash CS5 ProjectsActionScript Development Workflows For CS5Building a testable class using Flash CS5Workflow and testing using Flash Builder 4Workflow and testing using only Flash Professional CS5Sneak peak of the FlexUnit 4 panel for Flash CS5ResourcesQ&A4
  • 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 functionalityFor more information visit www.FlexUnit.orgOur time will be spent less on FlexUnit features and more about how to use it with Flash Professional CS5
  • 6. A Common AssumptionOne 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 projectsA pluggable testing architecture which facilitates the use of multiple test runners and multiple test listenersResulting in FlexUnit 4 being able to:Be used with a Flash Professional CS5 ProjectBe used with a Flash Builder 4: Flash Professional Project7
  • 8. Brief List of FlexUnit 4.x FeaturesUsed with ActionScript 3 and Flex projectsUse of Metadata tags: [Test], [Suite], etc.Test environment support [Before], [After], [BeforeClass], [AfterClass]Exception HandlingAsync testing: per test & timeout supportHamcrest assertionsSuites & Parameterized TestingTheories, Datapoints and AssumptionsAnd 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 clientResponsibility to fellow developersResponsibility to the budgetResponsibility to the brandFlash 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 Programmers80% of your time as a developer is spent identifying and correcting defectsSoftware mistakes cost the US Economy about 80 billion dollars a yearAn 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 sooner10
  • 11. ActionScript Development Workflows For CS5When writing a Flash application there are two main workflows available to us within the Adobe software when working with ActionScriptNative development in Flash Professional CSNew workflow using Flash Builder 4 for ActionScript development11
  • 12. Workflow ConsiderationsNative Flash Professional CS5 DevelopmentNo dependency on other programsActionScript editor is lacking in many areasHybrid Development using Flash Builder 4Possibly better ActionScript editor and code generation toolsConstantly having to switch between tools12
  • 13. Multiple Workflows Allows For Multiple ImplementationsThere are multiple ways to use FlexUnit 4:Native Approach in Flash Professional CS5Building a FlexUnit 4 application in CS5 to test your applicationRequires manual setup and additional workNo dependency on having Flash BuilderHybrid Approach using Flash Builder 4Using existing FlexUnit 4 functionality in Flash Builder to test the Flash Professional projectArguably the easiest solutionDependency on having Flash Builder13
  • 14. Limitations of Flash Professional CS5No built in support for FlexUnit 4No panelsNo visual feedback for tests runUnable to support additional compiler argumentsRequired for custom MetaData tagsNo templates for Tests and Theories14
  • 15. Limitations of Flash Builder 4Flash Builder does not know how to compile FLA’sFlash Builder needs to modify the application to:Support MetaData tagsCompile & Run the testsProvide visual feedback regarding success / failures15
  • 16. Thinking Small In The ProjectWriting testable code means writing small pieces of functionalityTests focus on testing small pieces of code“Good Lego’s make strong Lego castles”Many tests result in the testing of the project frameworkBuild an ActionScript framework for your projectBuilding corresponding tests to ensure the framework is bulletproof16
  • 17. Walkthrough: Creating the Circle ClassIn this walkthrough:Using Flash Professional CS5Create a class that will have rules about a CircleCreate a property for diameterCreate a property for radiusMake sure the class can be compiled into the swf17
  • 18. Option 1: Using an ActionScript Library in FB4In Flash Professional CS5:Go to: “File > Publish Settings…”On the “Flash” Options Tab, Select “Export SWC”Publish the projectIn Flash Builder 4: Create a ActionScript 3 projectAdd the SWC built by Flash Professional to Flex Build PathWrite tests18
  • 19. FlexUnit 4 TerminologyAssertA piece of code that asserts something meets the expected results.Test MethodThe smallest unit of the testing frameworkExecutes code and checks an outcomeTest CaseCollection of Test Methods that share a common test environmentTest SuiteCollection of Test Cases, and possibly other Test Suite’s19
  • 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 intendedIn 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 ClassExport & Add the Flash Project SWCCreate a Test Case ClassWrite a Test Method for the radius propertyRun the testReview the resultsLook at a more complete example21
  • 22. Notes on Hybrid Testing Workflow & IssuesHave 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 projectAssets & Fonts should be linked in via “Export for ActionScript”22
  • 23. Option 2: Using FlexUnit 4 in Flash CS5Required to include FlexUnit4 SWC as a External LibraryDownload latest build from FlexUnit.orgActionScript only versionOptionally include additional libraries that work with FlexUnit4Hamcrest LibraryCI Library for use with Hudson or other Continuous Integration Systems23
  • 24. Option 2: Using FlexUnit 4 in Flash CS5 SetupSetup FlexUnit 4 FLA project to run tests for Flash CS5 projectCheck “Export SWC” on Flash publish settingsRequired to use MetaData tags in FlexUnit 4Add FlexUnit SWC to ActionScript 3 Library PathAdd Flash CS5 Project SWC to Library PathWrite code to use FlexUnit core & attach a listener to report the outcome of the FlexUnit testsWrite code for what FlexUnit tests, suites, etc. to run24
  • 25. Walkthrough 3: FlexUnit 4 in Flash CS5 SetupCreate FlexUnit CS5 ProjectInclude required SWC’sSetup core & attach TraceListenerInclude tests used in previous examplesRun FlexUnit Application application, review results25
  • 26. Option 2: Pros and ConsThe Pros:Can do all development and testing from Flash ProfessionalNo use of Flash Builder 4No use of the Flex FrameworkThe Cons:Manual process of setting everything upUse TraceListener or create a UI for FlexUnit ResultsNo templates or panels for assistance26
  • 27. Two Problems For Available WorkflowsOption 1: Importing Project SWC into Flash BuilderDependency on Flash Builder 4 to use FlexUnit 4FlexUnit does not require Flash BuilderOption 2: Bringing FlexUnit 4 into Flash CS5Requires a lot of manual work!Get/build the AS version of FlexUnitBuild a FlexUnit Runner applicationEtc.27
  • 28. Coming Soon: FlexUnit 4 Panel for CS5Automated process for using FlexUnit 4 in the authoring environmentFlexUnit Project PanelSimilar to another workspace project for FlexUnit in Flash BuilderEasy creation of FlexUnit filesTemplates for: Tests & SuitesBuilt in UI runner when executing tests28
  • 29. A Look at the FlexUnit 4 PanelOverview of the project panelTarget SWC’s to testAbility to separate the tests from the Flash ProjectEasy user interface for developing and managing testsWalkthrough29
  • 30. How Does It Work?30
  • 31. Future Development Flash CS5 Panel SupportSupport Results PanelProvide visual feedback about the resultsDetailed information for failed testsAbility to upgrade and add new FlexUnit supported SWC’s as new libraries are supported.31
  • 32. Honorable MentionActionScript editors supporting FlexUnit 4FDT 4 Support for FlexUnit 4IntellijNumerous community projects integrating with FlexUnit we can leverage:AS3Signals, Hamcrest, Mockolate, FlexMojos, FlexCover, PMD, JavaNCSS, FlexCPD, FlexMentricsAnd many moreFor more information: http://docs.flexunit.org/index.php?title=Community_Projects32
  • 33. ResourcesFlexUnit.org – Wiki, Tutorials and Morehttp://flexunit.org/Adobe Open Source Sitehttp://opensource.adobe.com/wiki/display/flexunit/FlexUnitLatest Sourcehttp://www.flexunit.org/?page_id=14Nightly Builds: http://flexunit.digitalprimates.net:8080/33
  • 34. Q&A?Questions, comments or clarification?Contact:bschmidtke@digitalprimates.netBlog: http://blogs.digitalprimates.net/excessiveRecursion/Twitter: http://twitter.com/stunnedgrowth34