Test Driven Development (TDD) with FlexUnit 4 - 360|Flex San Jose preso

Test Driven Development (TDD)San Jose 360|Flex@EladElrom

@EladElromAssociate Dev Director @ Sigma GroupSenior Flash Engineer & LeadTechnical WriterFlashAndTheCity OrganizerAdobe Community Professional

TOCUSING FLEXUNIT 4 WITH TEST DRIVEN DEVELOPMENTTest Driven Development quick overviewDefining Application’s ObjectiveUser StoriesGETTING STARTED Creating the applicationCreating the class to be testedCreating your first Test SuiteAdd your first test case classIMPLEMENTING YOUR USER STORIESRetrieve Tweets User StoryRetrieve tweets every few seconds User Story

Show & tellHow many of you have used TDD?How have of you have tried to use TDD and gave up?How many always wanted wanted to use TDD but never did?

In Software Engineer, What’s your development techniques options?

Asshole Driven Development (ADD)Any team where the biggest jerk makes all the big decisions is asshole driven development. All wisdom, logic or process goes out the window when Mr. Asshole is in the room, doing whatever idiotic, selfish thing he thinks is best. There may rules and processes, but Mr. A breaks them and people follow anyway. Scott Berkun

Cover Your Ass Engineering (CYAE)The driving force behind most individual efforts is to make sure than when the shit hits the fan, they are not to blame.Scott Berkun

Duct-tape Driven Design (DDD)Get it out the door as quickly as possible, cut-n-paste from anything that you find that works on Google, if it works it’s ready

Test Driven Development (TDD) with FlexUnit 4 - 360|Flex San Jose preso

WaterfallSoftware Development Process

Disadvantages of Waterfall ProcessCreating tasks based on developer’s opinion rather than project’s needs.Spending time on technical design documents such as UML diagrams.May create code that is not used in the app and increase development time.One programmer code may break another programmer code.Many time methods do more than one task and code is hard to maintain.Changing requirements may require re-engineering parts of the app.

What’s TDD? The concept is pretty simple. You write your tests before you write your code. It’s that simple and worth repeating: write tests before code!Test Driven Development is a software development technique in which programmers are writing a failed test that will define the functionality before writing the actual code.

Developers are lazy!Software developers our job is to be lazy.Lazy = Efficient.. Really?We automate repetitive tasks. Yet we most of our time testing and debugging our code manually (80% as some studies suggest).Why would you choose to do this repetitive and annoying task when you automate all of the others?

Automate testingLet humans do the work they do best while letting computers do the work they do best and ending up with code that is more stable and more maintainable!

FurthermoreThe concept of TDD is based on Extreme Programming (XP) development paradigm, which talks about teams that work on the development of dynamic projects with changing requirements and a development cycle that includes TDD for writing the test before the code itself. TDD is not the complete development cycle; it is only part of the Extreme Programming (XP) development paradigm. Preparing the tests before writing the code helps a development team to demonstrate their work in small steps, rather than making the customer or other stakeholders wait for the complete result.Moving in small increments also makes it easier to accommodate changing requirements and helps ensure that your code does what it needs to do, and nothing more. It is important to mention that the focus of the TDD technique is to produce code and not to create a testing platform. The ability to test is an added benefit.TDD is based on the idea that anything you build should be tested and if you are unable to test it, you should think twice about whether you really want to build it.

“The single most important effect of practicing TDD is that it forces you as the developer to be the first consumer of your own API.”Brian Button

TDD RulesYou are not allowed to write any production code unless it is to make a failing unit test pass.You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.Via butunclebob.com

What most programmers think about TDD when they are first introduced to the technique?

Programmers respond:"This is stupid!" "It's going to slow me down”“It's a waste of time and effort”“It will keep me from thinking”“It will keep me from designing”“It will just break my flow”Via butunclebob.com

Defining Application’s Objective Understanding the application objectives is as important as coding your application. Here’s aLessons we can learn from a Master Carpenter: MeasureTwice, Cut Once!

Defining Application’s ObjectiveYou need to understand what you are developingbefore you get started. In our case, we are building an application that will do the following: Allow attendees to communicate with each other through twitter API. The class will keep a list of tweets with #FlashAndTheCityhashtagThe class will check for updates of tweets often

User StoriesA good approach to take to ensure the tasks are defined well is to follow Agilesoftware development mythology. The Agile mythologies talks about creatingone or more informal sentences in an everyday or business language, this typeof approach is known as a User Story. The User Story should be limited incharacters and should fit a small paper note card. The user stories are usuallywritten by the client in order to give direction to build the software. Think ofthis list as your todo list.In our case here are the User Stories:Retrieve tweets with #FlashAndTheCityHashTag from Twitter API.Have a service call to twitter and retrieve tweets every few seconds.Login into user's twitter account and retrieve personal information.Store user's information so user wouldn’t have to login again every time. Post a tweet on twitter from a user Add #FlashAndTheCityHashtag to a tweet so user wont have to type it every time and the application will be able to retrieve all tweets related to the conference.Keep a list of tweets with the ability to add a tweet & remove a tweet.

Creating the applicationWith the knowledge of what we need to develop we are ready to get started. The first step is to create the application open Eclipse or Flash Builder 4 Beta and create a new project name Companion (see instructions below).Select File > New > Flex Project to create the project. For the Project Name, type Companion, ensure you set the project as Desktop application type.Click Finish.

Creating your first Test SuiteA test suite is a composite of tests. It runs a collection of test cases. During development you can create a collection of tests packaged into test suite and once you are done, you can run the test suite to ensure your code is still working correctly after changes have been made.To create a test suite, choose File > New > Test Suite class.

ContinueAfter you select New Test Suite Class a wizard window opens up. Fill in the following information:In the New Test Suite Class dialog box, name the class CompanionTestSuite.Select New FlexUnit 4 Test. Click Finish.

Look at your Test SuiteFlash Builder 4 added the following class under the flexUnitTests folder:packageflexUnitTests{ [Suite] [RunWith("org.flexunit.runners.Suite")] publicclassCompanionTestSuite { }} The Suite metadata tag indicates that the class is a suite. The RunWith tag instructs the test runner to execute the tests that follow it using a specific class. FlexUnit 4 is a collection of runners that will run a complete set of tests. You can define each runner to implement a specific interface. You can, for example, specify a different class to run the tests instead of the default runner built into FlexUnit 4.

FlexUnit 4 MetadataThe FlexUnit 4 framework is based on metadata tags. So far you've seen [Suite], [Test], and [RunWith]. Here are some other common metadata tags:[Ignore] - Causes the method to be ignored. You can use this tag instead of commenting out a method. [Before] - Replaces the setup() method in FlexUnit 1 and supports multiple methods. [After] - Replaces the teardown() method in FlexUnit 1 and supports multiple methods. [BeforeClass] - Allows you to run methods before a test class. [AfterClass] - Allows you to run methods after a test class.

Add your first test case classNext, you need to create a test case. A test case comprises the conditions you want to assert to verify a business requirement or a User Story. Each test case in FlexUnit 4 must be connected to a class. Create the Test Case class: Choose File > New > Test Case Class.Select New FlexUnit 4 Test.Type flexUnitTests as the package.Type TwitterHelperTesteras the name.

Add a Reference Important: Ensure that there is a reference in CompanionTestSuite.as to TwitterHelperTester: packageflexUnitTests{ [Suite] [RunWith("org.flexunit.runners.Suite")]publicclassCompanionTestSuite {publicvartwitterHelperTester:TwitterHelperTester; }}

Implementing your User StoriesRetrieve Tweets User StoryWe can start with the first User Story, Retrievetweets with #FlashAndTheCityHashTagfromTwitter API.

Understand your goalIn our case we are testing that the service is working correctly. We are using a public API that is maintained by Twitter and creating a Mashup application. Using a well maintain API helps us creating our application quickly, however it also store a disadvantage that in any time Twitter may change their API and our application will stop working.We are testing that the fail and success events are dispatching correctly and ensuring that the API is working, see the code below:

testRetrieveTweetsBasedOnHashTag [Test(async,timeout="500")]publicfunctiontestRetrieveTweetsBasedOnHashTag():void {classToTestRef = newTwitterHelper();varEVENT_TYPE:String = "retrieveTweets";classToTestRef.addEventListener(EVENT_TYPE, Async.asyncHandler( this, handleAsyncEvnet, 500 ), false, 0, true );classToTestRef.retrieveTweetsBasedOnHashTag("FlashAndTheCity”); }privatefunctionhandleAsyncEvnet(event:Event, passThroughData:Object):void {Assert.assertEquals( event.type, "retrieveTweets" ); }

Working on the compilation errorsSave the file and now you see a compile time error:Call to a possibly undefined method retrieveTweetsBasedOnHashTag through a reference with static type utils:TwitterHelper.This is actually a good. The compiler is telling you what you need to do next. We can now create the method in TwitterHelper in order to get rid of the compiler error.

Create TwitterHelper – write min code packageutils{importflash.events.EventDispatcher;importflash.events.IEventDispatcher;publicclassTwitterHelperextendsEventDispatcher {publicfunctionTwitterHelper(target:IEventDispatcher=null) {super(target); } /** * Method to send a request to retrieve all the tweet with a HashTag * @paramhashTag defined hashtag to search * */ publicfunctionretrieveTweetsBasedOnHashTag(hashTag:String):void {// implement } }}

Run FlexUnit TestsCompile the project and we don’t have any compile time errors and you can run the tests. Select the Run icon carrot and in the drop menu select FlexUnit Tests.

Review the ResultsFlash Builder opens a new window where the tests are run and shows the results of your test, see below:1 total test was run 0 were successful 1 was a failure 0 were errors0 were ignored

Change the Test from Fail to PassIn order to pass the test you now need to write the actual code. At this point we wrote the test and once we write the code the test will succeed. I have implemented the code to call Twitter and retrieve results that includes #FlashAndTheCityhashtagWrite the code on TwitterHelper; retrieveTweetsBasedOnHashTag & onResults methods

Write codepackageutils{importcom.adobe.serialization.json.JSON;importflash.events.EventDispatcher;importmx.rpc.events.FaultEvent;importmx.rpc.events.ResultEvent;importmx.rpc.http.HTTPService;publicclassTwitterHelperextendsEventDispatcher { /** * Holds the service class */ privatevarservice:HTTPService;//--------------------------------------------------------------------------//// Default Constructor////--------------------------------------------------------------------------publicfunctionTwitterHelper() {// implement } /** * Method to send a request to retrieve all the tweet with a HashTag * @paramhashTag defined hashtag to search * @url the twitter API url * */ publicfunctionretrieveTweetsBasedOnHashTag(hashTag:String, url:String):void { service = newHTTPService();service.url = url;service.resultFormat = "text";service.addEventListener(ResultEvent.RESULT, onResults);varobject:Object = new Object();object.q = hashTag;service.send( object );

Write code #2 }//--------------------------------------------------------------------------//// Event handlers////-------------------------------------------------------------------------- /** * Method to handle the result of a request to retrieve all the list * @param event * */privatefunctiononResults(event:ResultEvent):void {service.removeEventListener(ResultEvent.RESULT, onResults);service.removeEventListener(FaultEvent.FAULT, onFault);varrawData:String = String( event.result );varobject:Object = JSON.decode( rawData );varresults:Array = object.resultsas Array;varcollection:Vector.<TweetVO> = new Vector.<TweetVO>;results.forEach( functioncallback(item:*, index:int, array:Array):void {vartweet:TweetVO = newTweetVO( item.from_user, item.from_user_id, item.geo, item.id, item.profile_image_url, item.source, item.text, item.to_user, item.to_user_id );collection.push( tweet ); });// dispatch an event that holds the resultsthis.dispatchEvent( newTwitterHelperSuccessEvent( collection ) ); } }}

Run your test againRun the test again and observe the results.A test that does not fail succeeds Click the Run Completed Button Observe the Green Bar that indicates success

RefactorAt this point, we can do a small refactoring to the test case and include the static method from the custom event instead of having the string attached, which will ensure our tests still pass in case we refactor the event type string, see code below:classToTestRef = newTwitterHelper();varEVENT_TYPE:String= TwitterHelperSuccessEvent.RETRIEVE_TWEETS;

Refactor tests - tests have duplication that can become painful to maintainIn our case, we need to instantiating TwitterHelper in each test.Granted, there are just two, but this will growWe can solve this problem by using additional metadata provided by FlexUnit 4 called [Before] and [After] [Before] can be applied to any method that you wish called before each test. [After] will be called after each testFor good measure, let’s add a method name tearMeDown() and mark it with the [After] metadata. The [After] method gives you a place to clean up from your test case.In this case just set classToTestRef equal to null so the instance is available for garbage collectionIn more complicated tests it is often crucial to remove listeners, etc. in this way. In our case TwitterHelper is already removing the listeners so we don’t need to do that, but many other times you will.

Refactorthe actual codeWe focus on passing the test and didn’t care that much about the code, however you may find out that the code is too complex and can be simplify by implementing a design pattern, or just adding some small modification. For instance, I can add metadata so when you instantiate the class and add event listeners in MXML component you will get the event type available automatically. Add the code below to the TwitterHelperclass.

My personal notes about TDDDon’t use TDD for Micro-architecture User Gestures.Usually avoid using TDD for testing GUI.Use TDD for building APIs, frameworks, utilities and helpers.Use TDD for testing services.Use TDD for code that will be used on more than one application.

Where to go from here?Adobe Developer connectionhttp://www.adobe.com/devnet/flex/articles/flashbuilder4_tdd.htmlFlash&Flex Magazine:http://elromdesign.com/blog/2010/01/19/flexunit-4-with-test-driven-development-article-on-ffdmag/

Test Driven Development (TDD) with FlexUnit 4 - 360|Flex San Jose preso

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Test Driven Development (TDD) with FlexUnit 4 - 360|Flex San Jose preso (20)

More from Elad Elrom (7)

Recently uploaded (20)

Test Driven Development (TDD) with FlexUnit 4 - 360|Flex San Jose preso