Get help with testing, discuss unit testing strategies etc.


Post by klodoma »

How does the component selection work with sencha modern?
I got some examples working in classic, but in modern I cannot select a simple button.

Although Ext.ComponentQuery.query('button[_text=Two]') delivers a hit, { click: 'button[_text=Two]' } doesn't work. The "el" is not visible. If I specify the el directly then the click works. Full example attached.
        
        let el1 = Ext.ComponentQuery.query('button[_text=One]')[0].el;
        let el2 = Ext.ComponentQuery.query('button[_text=Two]')[0].el;
        let el3 = Ext.ComponentQuery.query('button[_text=Three]')[0].el;

//this is OK, works
        t.chain(
            { click: el1 },
            { waitFor: 1000 },
            (next) => {
                t.pass("One Clicked");
            }
        );
//this is  NOK, it doesn't work
        t.chain(
            { click: 'button[_text=Two]' },
            { waitFor: 1000 },
            (next) => {
                t.pass("Two Clicked");
            }
        );

index.js
var project = new Siesta.Project.Browser.ExtJS();

project.configure({
    title: 'Some Tests',
    viewDOM: true,

    // Define any global JS and CSS dependencies, these files will be injected into each test.
    preload: [],

    // If your tests use dynamic loading, you can setup your paths using the 'loaderPath' config.
    loaderPath: { 'Ext.ux': '//cdn.sencha.com/ext/gpl/5.1.0/examples/ux' },

    recorderConfig: {
        // enable/disable certain features of the recorder, see the Siesta.Recorder.Recorder documentation
        recordMouseMoveOnIdle: true,
        recordPointsOfInterest: true,
        recordMouseMovePath: false,
        recordScroll: false,
        recordInitialWindowSize: false
    }
});

project.plan(
    {
        group: 'Ext JS Modern',
        autoCheckGlobals: false,
        preload: [
            '/vendor/ext/6.6.0/build/modern/theme-triton/resources/theme-triton-all.css',
            '/vendor/ext/6.6.0/build/ext-modern-all-debug.js',
            '/vendor/ext/6.6.0/build/modern/theme-triton/theme-triton.js'
        ],
        items: [
            'buttons.t.js'
        ]
    }
);

project.start();
buttons.t.js
StartTest(function (t) {

    t.it('Move mouse to select field', function (t) {

        if (!Ext.Viewport) {
            Ext.viewport.Viewport.setup();
        }
        Ext.Viewport.removeAll();

        Ext.Viewport.add({
            xtype: 'container',
            items: [{
                xtype: 'button',
                text: 'One'
            }, {
                xtype: 'button',
                text: 'Two'
            }, {
                xtype: 'button',
                text: 'Three'
            }]
        });

        let el1 = Ext.ComponentQuery.query('button[_text=One]')[0].el;
        let el2 = Ext.ComponentQuery.query('button[_text=Two]')[0].el;
        let el3 = Ext.ComponentQuery.query('button[_text=Three]')[0].el;

        t.chain(
            { click: el1 },
            { waitFor: 1000 },
            (next) => {
                t.pass("One Clicked");
            }
        );

        t.chain(
            { click: el3 },
            { waitFor: 1000 },
            (next) => {
                t.pass("Three Clicked");
            }
        );

        t.chain(
            { click: 'button[_text=Two]' },
            { waitFor: 1000 },
            (next) => {
                t.pass("Two Clicked");
            }
        );
    })
})
Attachments
modern-button.zip
(1.67 KiB) Downloaded 198 times
Last edited by klodoma on Mon Jun 03, 2019 5:55 pm, edited 1 time in total.

Post by klodoma »

Nevermind, found it:
{ click: '>> button[_text=Two]' },

Post by nickolay »

Cool-cool, yes, the default query type is CSS

Post Reply