Get help with testing, discuss unit testing strategies etc.


t.type errors when testing Ext 3.4 app

Post Reply

Post by w_menzies »

I am keen to use Siesta, which seems to be an excellent tool, to test my Ext 3.4 application (150+ files). Trying to creating my first test suite for my login window...from the test examples...I have defined my Harness configuration like 
Harness.configure({
    title       : 'Awesome Test Suite',

    preload     : [
        '../siesta-1.0.8-lite/siesta-all.js',
        '../component/ext-3.4.0/resources/css/ext-all.css',
        '../css/ext-app-all_0.83.css',     // my app file
        '../scripts/desktop/css/ext-desktop-all_0.83.css',    // my app file
        '../css/Spinner.css',

        '../component/ext-3.4.0/adapter/ext/ext-base.js',
        '../component/ext-3.4.0/ext-all.js',

       // my app files
        '../scripts/ext-ux/ext-ux-all_0.84.js',
        '../scripts/desktop/ext-desktop-all_0.83.js',
        '../ExtDirect/php/api.php',
        '../include/ext-data-application.js',
        '../util/ext-util-application.js',
        '../util/ext-util-session.js',
        '../util/ext-util-appuser.js',
        '../util/ext-util-prdsrvmgnr.js',
        '../scripts/ext-app-createdatastore.js',
//        '../scripts/ext-app-all_0.84.js'
        '../scripts/ext-app-userlogin.js'
    ]
});

Harness.start(
    'ext-app-userlogin.t.js'
//    '020_basic.t.js'
);
...is this the correct approach?

...my StartTest suite is shaping up like so... 
StartTest(
  {
    waitForExtReady  : false
  },
  function(t) {
    var win = new Ext.app.OTIS.webdesktop.UserLogin({
    });
    win.show();
    t.chain({
      action  : 'type',
      target  : Ext.getCmp('edtUsername-00'), 
      text    : 'w_menzies'
    },{
      action  : 'type',
      target  : Ext.getCmp('edtPassword-00'), 
      text    : 'secret'
    },{
      action  : 'type',
      target  : Ext.getCmp('edtSecurityCode-00'), 
      text    : win.getSecurityCode()
    },{
      action  : 'click',
      target  : Ext.getCmp('btnLogin-00') 
    })
  }
)
I ran into a couple of problems when using the type method in siesta-all.js which I needed to modified
  • Siesta.Test.ExtJS original code (lines 22165 - 22172) 
            type: function (el, text, callback, scope) {
            var Ext = this.getExt();
            if (el instanceof Ext.form.Field) {
                el = el.inputEl;
            }
            this.SUPER(el, text, callback, scope);
        },
    in ExtJs 3.4 - Ext.form.Field does not have the property inputEl so el was being set to null which cause an error when SUPER was executed :(
    also if the field uses the emptyText config property the text value is appended to the emptyText value :(
so I made the following modification: 
        type: function (el, text, callback, scope) {
            var Ext = this.getExt();
            if (el instanceof Ext.form.Field) {
                if (el.emptyText){                      // if emptyText is defined
                    if (text != ''){                    // check if something is being typed in
                        el.removeClass(el.emptyClass);  // get rid of field emptyText
                        if (this.normalizeElement(el).value == el.emptyText){
                            this.normalizeElement(el).value = '';  // and clear field
                        }
                    }else{                              // otherwise show emptyText value
                      this.normalizeElement(el).value = this.emptyText;
                      el.addClass(this.emptyClass);
                    }
                }
                el = el.inputEl || this.normalizeElement(el); //get element if inputEl property not available
            }
            this.SUPER(el, text, callback, scope);
        },
...another problem I hit upon was...
  • Role('Siesta.Test.Simulate.Keyboard' original code (lines 20020 - 20026) 
            type: function (el, text, callback, scope) {
            el              = this.normalizeElement(el);
            
            var me          = this

            // Extract normal chars, or special keys in brackets such as [TAB], [RIGHT] or [ENTER]			
            var keys        = (text + '').match(/\[([^\])]+\])|([^\[])/g);

            var queue       = new Siesta.Util.Queue({
                
                deferer         : this.originalSetTimeout,
                deferClearer    : this.originalClearTimeout,
                
                interval        : this.actionDelay,
                callbackDelay   : this.afterActionDelay,
                
                observeTest     : this,
                
                processor       : function (data, index) {
                    me.keyPress(el, data.key)
                }
            })

            jQuery.each(keys, function (index, key) {
                queue.addStep({
                    key     : key.length == 1 ? key : key.substring(1, key.length - 1)
                })
            });
           ...
           ...
           ...
    if the value of the text argument is "" (empty/blank) the variable keys is set to null which then causes an error in the jQuery each call :(
to fix this it simple needed this modification when setting the variable keys 
            var keys        = (text + '').match(/\[([^\])]+\])|([^\[])/g) || ''; //ensure value is set
Please note these changes have only been tested against my application which is a ExtJs 3.4 application. I hope the changes would not break other applications especially higher ExtJs version (4.x.x)

Please do comment if otherwise.

And to Team Bryntum ...keep up the good work! ;)

Post by nickolay »

Hi,

No need to include the siesta in your preloads - except when you are going to test siesta itself :)

Why are setting "waitForExtReady" to false btw?

Added your fix for Siesta.Test.Simulate.Keyboard - thanks!

And created a ticket for t.type + Ext3 issue (we'll fix that in next preview): https://www.assembla.com/spaces/bryntum ... pport-ext3

Thanks for your feedback!

Post by nickolay »

Fixed by focusing the input element before typing (ExtJS then removes the classes and clears the field automatically), fix will be available in 1.1.0-beta-2

Post by w_menzies »

Hi Nickolay,

Thanks...look forward to the update.

I would like a provide a brief tutorial on the steps I have used for my testing with Siesta (so far)...where can I best create this?

Post by mats »

This would be great, just start a new thread in this forum - and then I can make it a Sticky.
Post Reply