Get help with testing, discuss unit testing strategies etc.


Post by ankgkp »

Hi,
How would I simulate chained click events where I first click on the ExtJS combobox, then click on the one of the items in the drop down menu. The only thing I found in the API is getCell(), but this function only works with gridpanels and trees.

Thank you!

Post by nickolay »

To perform such tasks you need to learn a little about the combo box internals. For example to expand it, you need to click on the expand icon, which has "x-form-trigger-wrap" CSS class. Then, to click on the item from combo, you need to find it in picker, etc:
StartTest(function(t) {
    
    t.diag("Selecting the combobox item");

    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields  : ['abbr', 'name'],
        data    : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });
    
    var selected    = false
    
    // Create the combo box, attached to the states data store
    var combo = Ext.create('Ext.form.ComboBox', {
        fieldLabel      : 'Choose State',
        store           : states,
        queryMode       : 'local',
        displayField    : 'name',
        valueField      : 'abbr',
        renderTo        : Ext.getBody(),
        
        listeners       : {
            select  : function (combo, records) {
                selected = true
                
                Ext.Msg.alert('Item selected', 'Selected: ' + records[ 0 ].get('name'))
            }
        }
    });
    
    t.chain(
        {
            action      : 'click',
            target      : combo.el.query('.x-form-trigger-wrap')[ 0 ]
        },
        function (next) {
            t.click(combo.getPicker().getNode(2), next)
        },
        function () {
            t.ok(selected, 'Item was selected')
        }
    )
});
I included this snippet as the example. Also see /examples/020-extjs-general/020_ext-custom-combo.t.js

Post by ankgkp »

Thank you so much for the quick and very helpful reply. The code you provided works perfectly but I'm having trouble automating it. Let's say we want to go through every single item in the drop-down menu and test if the currently displayed value is the same as the one that was selected or not. For some reason, the code below only simulates the click action on the last item. It seems like the for loop does not wait for the component query to finish and pass the define-time value of i in the the getNode() function. By the time the query is done, the loop has gone to the last value(whatever store.getCount() returns). Am I missing something? Thank you!
for (var i = 0; i < combo.store.getCount(); i++) {
t.chain(
        {
            action      : 'click',
            target      : combo.el.query('.x-form-trigger-wrap')[ 0 ]
        },
        function (next) {
            t.click(combo.getPicker().getNode(i), next)
        },
        function () {
            //compare currently displayed value with the selected item's value
            t.is(combo.getRawValue(), combo.getPicker().getNode(i).childNodes[0].nodeValue ,'Item ' + i + ' passed')
        }
    )
});
}

Post by nickolay »

Sure, "for" loop is a synchronous construct, and each step inside of "t.chain" - asynchronous (the step function should call a provided callback when completes). You can't mix them in this way. Instead - create the steps in "for" loop and pass _all_ steps to the `t.chain`. Something like:
var steps = []

for (var i = 0; i < len; i++) steps.push({ ... })

t.chain.apply(t, steps)

Post by ankgkp »

Awesome!!! works like a charm. However, if you had 15 items in the drop-down list and only the first 10 is visible. How would we "click" on the 11th since it does not show up until we move the scroll bar down :?: . I mean I might be able to simulate a scrolling down event for every item at the bottom of the list, but then the code would not be very reusable. I'm just wondering if there some kind of "autoscroll" property in the click event so that it'd find the specified element automatically. Like in that example 020-ext-custom-combo, how would you click on the item at the very bottom of the list? Thanks again :D

Post by nickolay »

I guess you can use https://docs.sencha.com/ext-js/4-0/#!/ap ... llIntoView method to scroll the item from the drop-down list into view (will need to provide a `container` element)

Post by ankgkp »

I'm not really sure what would be the container element in this case. Would it be the view? or the parent node of the element we are scrolling to? Besides, the combo.getPicker().getNode() would not return the element but the html li<> tag. Thanks
Last edited by ankgkp on Mon Feb 20, 2012 7:59 pm, edited 1 time in total.

Post by nickolay »

Yes, it will be the parent element.

Post Reply