Sencha Modern component selection
Posted: Mon Jun 03, 2019 5:52 pm
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.
index.js
buttons.t.js
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();
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");
}
);
})
})