Get help with testing, discuss unit testing strategies etc.


Post by klodoma »

For some reasons, click actions don't work anymore on checkboxes. It used to work, but now I cannot get it running.
I've tried different selectors, but none seems to do the job anymore.

The other fields seem ok.
Ext.ComponentQuery.query delivers the object but the click action doesn't work.

Any ideas?

A demo test-case. Using, Extjs 6.7 Modern and Siesta-Lite

StartTest(function (t) {

    Ext.Viewport.removeAll(true);
    Ext.Viewport.add({
        xtype: 'formpanel',
        items: [
            {
                xtype: 'checkboxfield',
                name: 'tomato',
                label: 'Tomato',
                value: 'tomato',
                checked: true
            }, {
                xtype: 'checkboxfield',
                name: 'salami',
                label: 'Salami'
            }, {
                xtype: 'togglefield',
                label: 'Toggle'
            }
        ]
    });

    t.pass('View could be rendered');

    console.log(Ext.ComponentQuery.query('field[label=Tomato]'));

    t.chain(
        { click: '>> togglefield => .x-component' },
        { click: '>> field[label=Tomato]' },
        { click: '>> checkbox' }
    );

});
Screenshot_465.png
Screenshot_465.png (29.03 KiB) Viewed 4239 times

Post by nickolay »

Might be some markup change in the recent Ext. I'll check in the evening. What if you try to click the dom element directly?

Post by klodoma »

{ click: Ext.ComponentQuery.query('field[label=Tomato]')[0].el.dom },
This works, as said, I have this problem only with checkboxes.

Post by nickolay »

Thanks for the detailed report. Its now fixed and pushed (fully cycle of nightly testing in all browsers is still pending). You can verify in the tomorrow nightly, or in the upcoming 5.3.0.

If you are ok with hotpatching, you can also find this place in "siesta-all.js"
            if (Ext && Ext.form && Ext.form.Field && locateInputEl) {
                // Deal with bizarre markup in Ext 5.1.2+
                if (
                    (Ext.form.Checkbox && comp instanceof Ext.form.Checkbox || Ext.form.Radio && comp instanceof Ext.form.Radio)
                    && comp.el
                ) {
                    var displayEl   = comp.displayEl;

                    if (displayEl && comp.boxLabel) {
                        return displayEl;
                    }
                    //                                                    Ext6 Modern
                    return comp.el.down('.x-form-field') || comp.el.down('.x-field-input') || comp.inputEl;
                }

                if (comp instanceof Ext.form.Field && comp.inputEl) {
                    var field       = comp.el.down('.x-form-field');

                    return (field && field.dom) ? field : comp.inputEl;
                }

                if (Ext.form.HtmlEditor && comp instanceof Ext.form.HtmlEditor) {
                    //     Ext JS 3       Ext JS 4
                    return comp.iframe || comp.inputEl;
                }
            }

            // Sencha Touch: Form fields can have a child input component
            if (Ext && Ext.field && Ext.field.Field && comp instanceof Ext.field.Field && locateInputEl && comp.getComponent) {
and update it to:
            if (Ext && Ext.form && Ext.form.Field && locateInputEl) {
                // Deal with bizarre markup in Ext 5.1.2+
                if (
                    (Ext.form.Checkbox && comp instanceof Ext.form.Checkbox || Ext.form.Radio && comp instanceof Ext.form.Radio)
                    && comp.el
                ) {
                    var displayEl   = comp.displayEl;

                    if (displayEl && comp.boxLabel) {
                        return displayEl;
                    }

                    var inputComponent  = Ext.ComponentQuery.query('checkboxinput', comp)[ 0 ]

                    if (inputComponent) return this.compToEl(inputComponent)

                    //                                                    Ext6 Modern               Ext6.7                                   Fallback
                    return comp.el.down('.x-form-field') || comp.el.down('.x-field-input') || comp.el.down('.x-input-el') || comp.inputEl || comp.el;
                }

                if (comp instanceof Ext.form.Field && comp.inputEl) {
                    var field       = comp.el.down('.x-form-field');

                    return (field && field.dom) ? field : comp.inputEl;
                }

                if (Ext.form.HtmlEditor && comp instanceof Ext.form.HtmlEditor) {
                    //     Ext JS 3       Ext JS 4
                    return comp.iframe || comp.inputEl;
                }
            }

            if (Ext && Ext.field && Ext.field.Slider && (comp instanceof Ext.field.Slider)) {
                return this.compToEl(Ext.ComponentQuery.query('slider', comp)[ 0 ])
            }

            // Sencha Touch: Form fields can have a child input component
            if (Ext && Ext.field && Ext.field.Field && comp instanceof Ext.field.Field && locateInputEl && comp.getComponent) {

Post by klodoma »

Thanks for the update. I'll wait for the fix, as it comes from npm repos

Post Reply