Test-Driven Development with ActionScript 3.0

Posted by Ali Mills Thu, 09 Mar 2006 15:50:00 GMT

On March 2nd, Luke and I presented at Flashfoward on the topic “Test-Driven Development with ActionScript 3.0”. The talk covered ActionScript 3.0, Flex Builder 2.0, and AsUnit. We had a blast giving it and were stunned at the level of attendence. For all who attended, we thank you for being there! For those who couldn’t make it, we’ve posted our presentation notes. They follow:

- – - – 8< – - – - – - – - – - – - – - – - – - – - – - -

• What is TDD?
  • TDD is a technique that allows you to embrace change and ultimately leads to clean code that works.

• Why was TDD created? It was because of change.
  • Change is difficult/expensive/impossible in software
  • Change is inevitable
  • Business needs change and developers need to respond to and inform these changes (Ward Cunningham example)
  • Designs change and developers need to have confidence while improving the design of the existing code
  • We don’t know what the future will hold
• In addition to helping developers deal with change, TDD helps you to
  • Avoid long debugging sessions
  • Avoid fear and code with courage
• There are three popular testing strategies for code
  • Acceptance testing
  • Customer testing
  • Developer testing
• Developer testing includes
  • Unit testing (trace() and the first AsUnit which was just an Assert class) – unit testing is the act of proving that any small bit of code works as expected
  • Unit testing with xUnit frameworks – made up of test fixtures and test harnesses where tests are executed in an isolated environment and assembled into a harness that runs them in order and presents the results in a display (rich ui?)
  • Red, Green, Refactor – write a failing test, get it to pass, and remove duplicate code
• If you’re not having problems, then don’t change anything
  • We’re not here to convince you of anything
  • We’re here to show you a path that smart people before us created and guide you down that path since you’re interested

• How do you perform TDD in AS 3.0? With AsUnit! AsUnit…
  • Is a xUnit framework for AS 2.0 and 3.0
  • Supports development for Flash Player versions 6, 7, 8, and 8.5
• AsUnit 2.x (note that 2 corresponds to the AS language version)
  • Integrates with authoring MX 2004 and 8
  • One click MXP extension manager install
  • Simple class creation utility
  • Integrated results panel
  • Integrated test UI
• AsUnit 3.x beta
  • XulRunner
  • Framework
  • Integrated test runner
• AsUnit works with Flash MX 2004, Flash 8, Flex Builder, FDT, TextPad, Scite, ASDT, Primal Script
• AsUnit works with Flash Authoring compiler, MTASC, and MXMLC
• No test code ships in projects tested with AsUnit!

1. Download and install AsUnit 3.x beta
   1. Download
   2. Unzip
   3. Double-click
2. Examine what just installed (note that MAC folks should email us)
   1. XulRunner
   2. XUL UI
   3. Framework (show TestRunner, Assert, and TestCase)
3. Discuss the project that we’re going to create
   1. A proto for our soon to launch Web 2.0 live preview app
4. Create a FlexBuilder project
   1. Create a new AS project
   2. Edit classpath
   3. Change ‘extends MovieClip’ to ‘extends Sprite’
   4. Import flash.util.trace
   5. Debug and see ‘hello world’ trace statement
   6. Talk about changing the debug key command
   7. Change the debug profile to ‘.swf’
5. Creating your first test case (the model)
   1. set up XUL UI for the project
   2. note that superclasses are not yet present because Adobe hasn’t provided source
   3. create ‘LivePreviewModel extends EventDispatcher’
   4. in XUL UI create and show pop up that confirms file creation
   5. create again and show how to create only one of the two files
   6. open newly created test case and examine it
   7. how do we see the test case in action?
6. Create the testRunner
   1. create LivePreviewTestRunner (add ‘start(AllTests)’)
   2. set LivePreviewTestRunner to an application launcher file
   3. compile and see red
   4. WOW!
   5. Change the debug publish settings for the test runner
   6. Add scaleMode, stageAlign, and fullscreen = true to test runner
7. Non-visual test – digging into LivePreviewModelTest
   1. Add setContent to test
   2. Compile and see RED
   3. Discuss stack trace
   4. Add setContent to model
   5. Compile and see GREEN
8. Visual test – creating LivePreviewViewTest
   1. Create draw method on LivePreviewView (talk about height and width)
   2. Update test to include addChild and removeChild
   3. Update test runner’s start call to ‘start(TestCast, “testMethod”)’
   4. Test visual entity by checking width and height
9. Mock Objects
   1. Create LivePreviewViewMock and LivePreviewModelMock
10. Asynchronous test discussion

tips

back yourself out of a corner, leave a broken test, figure out where to start

thanks

- – - – >8 – - – - – - – - – - – - – - – - – - – - – - – -