If you ever have a serious attempt at unit testing Flex code sooner or later you are going to need to test something that involves user confirmation. Lets take a simple example of deleting critical business information, the last thing we want is to have a user accidently click the wrong button and delete something they didn’t mean to.

package com.compact {
  import mx.controls.Alert;
  import mx.events.CloseEvent;

  public class CustomerListModel {
    public var wasDeleted:Boolean = false;
    public function deleteCustomer(customer:Customer): void {
      Alert.show(
        "Are you sure you want to delete?",
        "Confirm",
        Alert.YES + Alert.NO,
        null,
        function(e:CloseEvent): void {
          if(e.detail == Alert.YES) {
            wasDeleted = true;
          }
        }
      );
    }
  }
}

Now, lets say we wanted to write a unit test so that we can be 100% sure that our important information is only going to be deleted if the user confirms that is what they want to do.

package com.compact {
  import flexunit.framework.TestCase;

  public class CustomerListModelTest extends TestCase {
    private var _model:CustomerListModel;
    override public function setUp(): void {
      _model = new CustomerListModel();
    }
    public function testDeleteSavesIfUserConfirms(): void {
      // wait a minute, damn i'm screwed!
      assertEquals(true, _model.wasDeleted);
    }
    public function testDeleteDoesNotSaveIfUserDoesNotConfirm(): void {
      // wait a minute, damn i'm screwed!
      assertEquals(false, _model.wasDeleted);
    }
  }
}

Ok we didn’t get very far! The main problem with trying to test this method is that Alert.show() will only invoke our close handler if a user physically clicks the alert. We simply have no way to control or replace the actual behaviour of the alert with something that we can simulate for testing.

This is a common problem that you will encounter with unit testing, no matter which language you are using. Fortunately there is a very simple design pattern you can apply to solve it, the adapter pattern.

First we create an interface.

package com.compact {
  public interface Confirmer {
   /**
    * Obtain user confirmation and call the appropriate functions.
    *
    * @param onYes Invoked if the user responds yes.
    * @param onNo Invoked if the user responds no.
    * @param onComplete Invoked regardless of the response.
    */
    function confirm(
      onYes:Function,
      onNo:Function=null,
      onComplete:Function=null):void;
  }
}

And an implementation.

package com.compact {
  import flash.display.Sprite;

  import mx.controls.Alert;
  import mx.events.CloseEvent;

  public class AlertConfirmer implements Confirmer {
    public var title:String = "Confirm";
    public var message:String = "Are you sure you want to delete?";
    public var parent:Sprite = null;
    public function confirm(
      onYes:Function,
      onNo:Function=null,
      onComplete:Function=null):void {

      Alert.show(
        message,
        title,
        Alert.YES + Alert.NO,
        parent,
        function(e:CloseEvent): void {
          if(e.detail == Alert.YES) {
            onYes();
          } else if(onNo != null) {
            onNo();
          }
          if(onComplete != null) {
            onComplete();
          }
        }
      );
    }
  }
}

And then we can change our model to use the new adapter.

package com.compact {
  import mx.controls.Alert;
  import mx.events.CloseEvent;

  public class CustomerListModel {
    public var confirmer:Confirmer = new AlertConfirmer();
    public var wasDeleted:Boolean = false;
    public function deleteCustomer(customer:Customer): void {
      confirmer.confirm(
        function(): void {
          wasDeleted = true;
        }
      );
    }
  }
}

So now we are back were we started with one exception, our alert is hidden behind a well defined interface for obtaining confirmation. This gives us one very significant benefit, we can create a mock (fake) confirmer that we can use for testing.

package com.compact {
  public class MockConfirmer implements Confirmer {
    private var _confirm:Boolean;
    public function MockConfirmer(confirm:Boolean) {
      _confirm = confirm;
    }
    public function confirm(
      onYes:Function,
      onNo:Function=null,
      onComplete:Function=null):void {

      if(_confirm) {
        onYes();
      } else if(onNo != null) {
        onNo();
      }
      if(onComplete != null) {
        onComplete();
      }
    }
  }
}

And now, finally we can complete our unit test.

package com.compact {
  import flexunit.framework.TestCase;

  public class CustomerListModelTest extends TestCase {
    private var _model:CustomerListModel;
    override public function setUp(): void {
      _model = new CustomerListModel();
    }
    public function testDeleteSavesIfUserConfirms(): void {
      _model.confirmer = new MockConfirmer(true);
      _model.deleteCustomer(new Customer());
      assertEquals(true, _model.wasDeleted);
    }
    public function testDeleteDoesNotSaveIfUserDoesNotConfirm(): void {
      _model.confirmer = new MockConfirmer(false);
      _model.deleteCustomer(new Customer());
      assertEquals(false, _model.wasDeleted);
    }
  }
}

Excellent! Lets summarise what we have done:

We used the adapter pattern to create a wrapper around something that is difficult to test. We created a default implementation of the adapter that we will use to replace our original implementation. We then created a very basic mock object that allows us to simulate the behaviour of the adapter so that we can easily test it.

Congratulations you have just learned how to unit test alert confirmations in flex. But more importantly you have learned one of the most common techniques for testing code that is otherwise untestable.

Note: To be completely thorough you will need to manually test the default implementation of the adapter to make sure it works.