compactcode keeping software simple

Unit Testing Flex – MXML

As promised previously this is my first attempt at sharing some of my accumulated knowledge on the topic of unit testing in Flex.

If you need a general introduction to unit testing in flex I would recommend reading this blog.

In this article I'll show you some simple techniques you can use to test your mxml:

1. Data Binding
2. Validators

CustomerEditForm.mxml

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" model="com.compact.*">
    <model:CustomerEditModel id="model" />
    <mx:Form width="100%">
        <mx:FormItem label="Name">
          <mx:TextInput id="nameText" text="{model.name}"/>
        </mx:FormItem>
        <mx:FormItem label="Age">
          <mx:TextInput id="ageText" text="{model.age}"/>
        </mx:FormItem>
    </mx:Form>
</mx:VBox>

This form is quite straight forward containing two text fields that display values obtained from the presentation model, listed below.

CustomerEditModel.as

1
2
3
4
5
6
7

package com.compact {
    [Bindable]
    public class CustomerEditModel {
      public var name:String;
      public var age:int;
    }
}

The first thing we want to do is ensure that our text fields are being automatically populated from the values in our model. We can check this using the following Flex Unit test:

CustomerEditFormTest.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package com.compact {
    import flexunit.framework.TestCase;
    public class CustomerEditFormTest extends TestCase {
      private var _form:CustomerEditForm;
      override public function setUp():void {
        _form = new CustomerEditForm();
        _form.initialize();
      }
      public function testChangingModelNameUpdatesNameText(): void {
        _form.model.name = "fred";
        assertEquals("fred", _form.nameText.text);
      }
      public function testChangingModelAgeUpdatesAgeText(): void {
        _form.model.age = 25;
        assertEquals("25", _form.ageText.text);
      }
    }
}

In this test we create an instance variable to hold a reference to the form we are testing. The setUp method is invoked before every test method. This ensures that we have a clean form for each test and prevents tests interfering which each other. An important thing to note is that we need to initialize the form manually before we can access any of its components. Once we have all that out of the way the tests themselves are pretty simple, we set a value on the model and make sure the text fields on the form reflect that value.

Now lets say we we want to add validation to our age field so that our users know that they should only enter numbers. We can do this by creating a standard flex NumberValidator and binding it to our age field. I'm going to mix things up a bit and write my test before I go changing the form.

CustomerEditFormTest.as

18
19
20
21
22
23
24
25
26

    public function testAgeTextValidWhenTextContainsOnlyNumbers(): void {
      _form.ageText.text = "25";
      assertEquals("", _form.nameText.errorString);
    }
    public function testAgeTextInvalidWhenTextContainsLetters(): void {
      var expected:String = "The input contains invalid characters.";
      _form.ageText.text = "twenty  five";
      assertEquals(expected, _form.ageText.errorString);
    }

In these tests I am expecting that the errorString property of the age text field to be changed by the results of the validation process. If you look at the documentation for errorString you will see this description.

The text that will be displayed by a component's error tip when a component is monitored by a Validator and validation fails.

Basically it works like this: If the value of the errorString is empty then the component is valid, on the other hand if the errorString is not empty we know that it has been marked invalid by a Validator.

As they stand these tests fail, but we can fix that by adding the following line to our form:

CustomerEditForm.mxml

12

    <mx:NumberValidator source="{ageText}" property="text" />

And now let us take a moment to marvel at the result our hard work...

Congratulations, you are now unit testing with Flex! Although I had planned on covering more in this article I don't want to risk turning it into a small novel. I appreciate your attention and I hope that you found this small exercise useful. Thats all for now.