Testing Ext JS 5 apps with Siesta
Over the past few weeks we have received a number of questions from Siesta users wondering about Siesta supporting Ext JS 5. Since Siesta is a generic JS tool, it can of course test any JavaScript code. There is of naturally a slight risk that the Ext JS layer in Siesta may need to be updated if Ext JS itself changes. The user interface for Siesta will continue to use Ext JS 4.2.0, which doesn’t affect your tests at all since this is just for the visualization of the test results. I recently took some time to investigate if our Ext JS tests in Siesta worked with Ext JS 5, and after a few minor tweaks they now pass all our tests. For anyone interested in trying these tests out, you can download our latest Siesta v2.0.7 release from our customer zone or try it online here.
Testing an Ext JS 5 code base
There are no special requirements when testing an Ext JS 5 application, the test code you write will look just like any of your previous Ext JS tests. To demonstrate this, I thought I would take a look at the Ext JS 5 beta SDK, in which you can find a new Ticketing app sample which uses various components and shows charts, grids and team member lists. Click the image to try this sample out.
I decided to write a few smoke tests for this app and below you can see the Siesta code I came up with. The test is divided into different it sections to make it easier to read and maintain. First it logs into the app, then it exercises a few different sections of it.
[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
describe(‘Testing the Ticket App example’, function (t) {
t.it(‘Should be possible to login’, function(t) {
t.chain(
{ waitForCQ : ‘window[title=Login – Ticket App]’ },
{ click : ‘>> textfield[inputType=password]’ },
{ type : ‘foo’, target : ‘>> textfield[inputType=password]’ },
{ click : ‘>> button[text=Login]’ },
{ waitForCQNotFound : ‘window[title=Login – Ticket App]’, desc: ‘Login window should be destroyed after login’ }
)
})
t.it(‘Should find various UI elements on the dashboard’, function(t) {
t.chain(
{ waitForCQ : ‘app-dashboard’, desc : ‘Should find dashboard component created’ },
function() {
t.contentLike(‘#app-header-username’, ‘Don’, ‘Should find current user name in the top right corner’);
t.cqExists(‘grid[title=Projects]’, ‘Found projects grid’)
t.cqExists(‘grid[title=Projects] actioncolumn’, ‘Found action column in projects grid’)
}
)
})
t.it(‘Dashboard interactions’, function(t) {
t.chain(
{ click : ‘>> grid[title=”My Active Tickets”] button[text=Refresh]’ },
function(next) {
t.cqNotExists(‘window[title^=Edit User]’, ‘User window not found before clicking Edit’)
next()
},
{ click : ‘grid[title^=Project Members] => .x-grid-cell:contains(Edit)’ },
{ waitForCQ : ‘window[title^=Edit User]{isVisible()}’},
{ click : ‘>> window[title^=Edit User] button[text=Close]’ },
{ waitForCQNotFound : ‘window[title^=Edit User]’, desc : ‘Edit window destroyed after close is pressed’}
)
})
t.it(‘Search interactions’, function(t) {
t.chain(
{ click : ‘grid[title=”Projects”] => .x-action-col-icon.search’ },
{ waitForCQ : ‘tabpanel grid[title^=Search]’, desc : ‘Should find Search tab created’ },
{ waitForRowsVisible : ‘>>grid[title^=Search]’, desc : ‘Search grid should contain rows’ },
{ click : ‘>>combobox[fieldLabel=”User”]’ },
function (next) {
var gridview = t.cq1(‘>>grid[title^=Search]’).getView()
t.firesOnce(gridview, ‘refresh’);
t.cq1(‘combobox[fieldLabel=”User”]’).select(2)
next();
},
{ click : ‘tab[text^=Search] => .x-tab-close-btn’},
{ waitForCQNotFound : ‘tabpanel grid[title^=Search]’, desc : ‘Should not find Search tab after close’ }
)
})
});
[/crayon]
The key to writing stable Siesta tests is to learn Ext.ComponentQuery. You can see above that I use it extensively to target various UI components in the application. Example:
>> textfield[inputType=password]
targets the password field and you can also pinpoint elements inside Ext components by using our Composite Query notation:
tab[text^=Search] => .x-tab-close-btn
This query targets the close icon in an individual tab which has a title beginning with “Search”. You can run this test yourself by clicking here and filter for “smoke”. If you have any questions relating to testing Ext JS 5 apps, our forums are always open.