Home

Tutorial

This a small tutorial about Extjs Unit Test Writing.

The class to Test

/**
 * @class Ext.ux.bootMask
 * Georges Booting  Mask
 * @extends Ext.LoadMask
 */
Ext.ux.bootMask = Ext.extend(Ext.LoadMask,{
   /**
     * @cfg {Number} zIndex (defaults to 11000) the mask zIndex value
     */
     zIndex: '11000'
    // add zIndex support to mask
   , onBeforeLoad : function(){
        if(!this.disabled){
            var mask = this.el.mask(this.msg, this.msgCls);
            mask.setStyle('z-index',this.zIndex);
        }
    }
});

This simple code allow you to change Mask zIndex.
Note: Ext.ux.bootMask.onBeforeLoad() is an alias of Ext.ux.bootMask.show() see Ext.LoadMask for more information.

Writing the test for Ext.ux.bootMask.

Read Comments! This sample is included in the package.

The TestSuite Class

new Ext.test.testSuite({
	 /* testSuite name */
	  name : 'Ext.ux.bootMask Sample 1'
	 /* This defaults function are available for all TestCase */
	, defaults : {
  /**
    * The setUp method create a div in the body allowing to render
    * bootMask into. This method is run before each test.
    */
      setUp : function() {
        this.el = Ext.getBody().createChild({tag: 'div'});
        this.bootMask = new Ext.ux.bootMask(this.el,{
          msg : 'Test'
        });
		  }   
    /**
     * The tearDown method is run after each test. It destroy the element 
     * and bootMask instancied in setUp.
     */
      , tearDown : function() {
	  this.bootMask.destroy();
          Ext.destroy(this.el);
      }
   }
   /* Here the testCases */
  , testCases : [{
      /* testCase name */
        name : 'Test defaultValues'
       /* Test default class values */
      , testDefaultValues : function() {
          Y.Assert.areEqual('11000', this.bootMask.zIndex, 'Test zIndex default value');
      }
	 },{
      /* testCase name */
        name : 'onBeforeLoad'
      /* Test if the setted zIndex after a bootMask show is valid */  
      , testZindex : function(){
          this.bootMask.show();
          var mask = this.el.child('.ext-el-mask');
          var zindex = mask.getStyle('z-index');
          Y.Assert.areSame(zindex, this.bootMask.zIndex, 'Test to ensure that global mask z-index is valid.');
      }
      /* Test that mask is not created if bootMask is disabled */
      , testDisable : function(){
          this.bootMask.disable();
          this.bootMask.show();
          var mask = this.el.child('.ext-el-mask');
          Y.Assert.isNull(mask, 'Test that mask is not created when Ext.ux.bootMask is disabled');
      }
	}]
});

This is the standard way for creating a test case and register it automatically in the Ext.test.session
Note: All available Assertions can be found in the YUI-test 2 Api documentation

The TestCase Class

You could write the same test by using only a the Ext.test.testCase.

new Ext.test.testCase({
  // the name of the testCase
   name : 'Test defaultValues, zIndex and disable'
  // Important automatically register testCase in Ext.test.session
  , autoReg : true
  // the testSuite is created if it doesn't exist
  , testSuiteName :  'Ext.ux.bootMask Sample 2'
 /**
   * The setUp method create a div in the body allowing to render
   * bootMask into. This method is run before each test.
   */
  , setUp : function() {
      this.el = Ext.getBody().createChild({tag: 'div'});
      this.bootMask = new Ext.ux.bootMask(this.el,{
				msg: 'Test'
      });
  }    
 /**
   * The tearDown method is run after each test. It destroy the element 
   * and bootMask instancied in setUp.
   */
  , tearDown : function() {
      this.bootMask.destroy();
      Ext.destroy(this.el);
  }
  /* Test default class values */
  , testDefaultValues: function() {
      Y.Assert.areEqual('11000', this.bootMask.zIndex, 'Test zIndex default value');
  }
  /* Test if the setted zIndex after a bootMask show is valid */
  , testZindex : function(){
      this.bootMask.show();
      var mask = this.el.child('.ext-el-mask');
      var zindex = mask.getStyle('z-index');
      Y.Assert.areSame(zindex, this.bootMask.zIndex, 'Test to ensure that global mask z-index is valid.');
  }
  /* Test that mask is not created if bootMask is disabled */
  , testDisable : function(){
	    this.bootMask.disable();
	    this.bootMask.show();
	    var mask = this.el.child('.ext-el-mask');
	    Y.Assert.isNull(mask, 'Test that mask is not created when Ext.ux.bootMask is disabled');
  }
}); 

The two important configuration options are autoReg that allow you to register automatically the testCase in the Ext.test.session, and the testSuiteName that create automatically a TestSuite for the testCase.