QuickTip testing

[zombeerose]

Is it possible to test quick tips using Siesta?

Below is a simple test that I can't get to work. The callback is never executed.

Code: Select all

StartTest(function (t) {
    var Ext = t.getExt();
   
    var cmp = Ext.create('Ext.button.Button',{
        renderTo: Ext.getBody(),
        text: 'Some Button',
        tooltip: 'A tooltip describes the purpose'
    });
   
    var M = Ext.tip.QuickTipManager;
   
    M.init();
   
    t.mouseOver(cmp);
    t.waitFor(
        function(){ return M.getQuickTip().isVisible(); },
        function(){
            t.diag('Tooltip was displayed');
            t.done();
        },
        this
    );
});


If you hover over the button while the test is running and waiting, it will pass.

[mats]

Are you sure that code actually uses a QuickTip under the hood, and not a Tooltip?

[zombeerose]

Hmmm....interesting question. I would believe so because if you inspect the element, the property in the html is 'data-qtip,' which directly correlates to the values of the tagConfig property that is defined in Ext.tip.QuickTip. Secondly, if you hover the mouse over the button while the test is running so that the tip pops up, then the test will continue and pass.

Code: Select all

<button id="button-1014-btnEl" type="button" class="x-btn-center" hidefocus="true" role="button" autocomplete="off" data-qtip="A tooltip describes the purpose of this button" style="width: 194px; height: 44px; "><span id="button-1014-btnInnerEl" class="x-btn-inner" style="width: 194px; height: 44px; line-height: 44px; ">Some Button</span><span id="button-1014-btnIconEl" class="x-btn-icon "></span></button>


[nickolay]

Try to also move a "virtual" cursor a little may be?:

Code: Select all

    t.mouseOver(cmp);
    t.moveMouseBy([ 5, 0 ]);
    t.waitFor(...

[mats]

This works fine for me:

Code: Select all

StartTest(function (t) {
    var Ext = t.getExt();

    var cmp = Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Some Button',
        tooltip: 'A tooltip describes the purpose'
    });

    var M = Ext.tip.QuickTipManager;

    M.init();

    t.moveMouseTo(cmp.el);
    t.waitForComponentVisible(M.getQuickTip(), function () {
        t.pass('Tooltip was displayed');
    });
});


[zombeerose]

Cool - thanks guys!