Unit Testing Flex – More MXML

This is a continuation of my previous post. Today I am going to show you three more simple techniques you can use to unit test your mxml:

1. Button Clicks
2. List Selection
3. DataGrid Rendering

Button Clicks

ClickForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:compact="com.compact.*">
    <compact:ClickModel id="model" />
    <mx:Button 
      id="button" 
      label="Increment" 
      click="model.incrementClickCount()"/>
</mx:HBox>

ClickModel.as

package com.compact {
    public class ClickModel {
      public var clickCount:int = 0;
      public function incrementClickCount(): void {
        clickCount++;
      }
    }
}

ClickTest.as

package com.compact {
    import flash.events.MouseEvent;
    import flexunit.framework.TestCase;
    public class ClickTest extends TestCase {
      private var _form:ClickForm;
      override public function setUp():void {
        _form = new ClickForm();
        _form.initialize();
      }
      public function testClickingButtonIncrementsClickCount(): void {
        _form.button.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        assertEquals(1, _form.model.clickCount);
      }
    }
}

List Selection

SelectionForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:compact="com.compact.*">
    <compact:SelectionModel id="model"/>
    <mx:List 
      id="listView" 
      dataProvider="{model.list}" 
      change="model.selected = listView.selectedItem"/>
</mx:HBox>

SelectionModel.as

package com.compact {
    import mx.collections.ArrayCollection;
    [Bindable]
    public class SelectionModel {
        public var list:ArrayCollection = new ArrayCollection();
        public var selected:Object;
    }
}

SelectionTest.as

package com.compact {
    import flexunit.framework.TestCase;
    import mx.events.ListEvent;

    public class SelectionTest extends TestCase {
      private var _form:SelectionForm;
      override public function setUp():void {
        _form = new SelectionForm();
        _form.initialize();
      }
      public function testListViewSelectionUpdatesModel(): void {
        var itemOne:Object = new Object();
        var itemTwo:Object = new Object();
        _form.model.list.addItem(itemOne);
        _form.model.list.addItem(itemTwo);
        _form.listView.selectedItem = itemTwo;
        _form.listView.dispatchEvent(new ListEvent(ListEvent.CHANGE));
        assertEquals(itemTwo, _form.model.selected);
      }
    }
}

DataGrid Rendering

DataGridForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:compact="com.compact.*">
    <compact:DataGridModel id="model" />
    <mx:DataGrid id="customerGrid" dataProvider="{model.customers}">
      <mx:columns>
        <mx:DataGridColumn id="nameCol" dataField="name"/>
        <mx:DataGridColumn 
          id="birthCol" 
          dataField="birth" 
          labelFunction="model.formatBirth"/>
       </mx:columns>
    </mx:DataGrid>
</mx:HBox>

DataGridModel.as

package com.compact {
  import mx.collections.ArrayCollection;
  import mx.controls.dataGridClasses.DataGridColumn;
  import mx.formatters.DateFormatter;

  [Bindable]
  public class DataGridModel {
    [ArrayElementType("com.compact.Customer")]
    public var customers:ArrayCollection = new ArrayCollection();
    private var _format:DateFormatter = new DateFormatter();
    public function formatBirth(item:Object, col:DataGridColumn): String
      _format.formatString = "MMMM/YYYY";
      return _format.format(item.birth);
    }
  }
}

Customer.as

package com.compact {
  [Bindable]
  public class Customer {
    public var name:String
    public var birth:Date;
  }
}

DataGridTest.as

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

  public class DataGridTest extends TestCase {
    private var _form:DataGridForm;
    override public function setUp():void {
      _form = new DataGridForm();
      _form.initialize();
      // Initializes the datagrid columns.
      _form.customerGrid.validateProperties();
    }
    public function testNameIsRenderedAsIs(): void {
      var customer:Customer = new Customer();
      customer.name = "foo";
      assertEquals("foo", _form.nameCol.itemToLabel(customer));
    }
    public function testBirthIsRenderedUsingDateFormat(): void {
      var customer:Customer = new Customer();
      customer.birth = new Date(2000, 0, 1);
      assertEquals("January/2000", _form.birthCol.itemToLabel(customer));
    }
  }
}

Do you find this useful? Does it need more explanation? I’m not really sure what people are looking for so I have left this post as lightweight as possible.

As requested my next post will start looking at some slightly more complicated tests and how we can use mock objects to simplify them.

Advertisement