Mats Bryntse
27 February 2014

Siesta Tips-n-Tricks: Extending the Test class

One great aspect of Siesta is its extensibility. It’s designed from the core to be customizable and overridable by anyone […]

One great aspect of Siesta is its extensibility. It’s designed from the core to be customizable and overridable by anyone using it. After you have written a few tests, you likely find some repeated lines of code, violating the DRY principle. This is when you should extend the built-in Siesta test class. In your own test class you can put snippets of code that you use a lot throughout your tests, this is well described in our guide on how to extend the Siesta.Test class with your own abstractions. In this blog post I want to show you another cool trick you can use to do very cheap but useful sanity testing.

A recent bug report…

We recently had a bug report filed which caused a strange rendering artifact in the Scheduler component. In essence, the grid implementation stopped rendering properly. It felt really strange as we don’t override the rendering mechanism of the underlying Ext JS Grid class but after a while (a quite long while) we found the culprit. In one place we forgot to call Ext.resumeLayouts() after calling Ext.suspendLayouts(). This is a really tricky thing to debug and figure out, as this bug doesn’t cause any runtime errors – only visual unpredictable rendering quirks. Since I really didn’t feel like debugging this one more time, I decided to override the initialize template method of our Bryntum.Test class (which extends Siesta.Test). In this method I can easily inject a listener for the ‘beforetestfinalize’ event which is fired just before each test is completed. This gives us a great hook to do per-test sanity checks, such as verifying that no layouts are suspended. We use a bit of Ext.ComponentQuery to detect any components with layouts suspended:

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
// Use the power of Ext CQ
Ext.ComponentQuery.query(‘{isLayoutSuspended()}’)

[/crayon]

The final snippet took about 5 minutes to write. Even better for you, as it’ll only take you about 5 seconds to copy paste this into your own Test class and you (and your customers) will never face this hard-to-debug rendering issue.

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
Class(‘Bryntum.Test’, {

isa : Siesta.Test.ExtJS,

methods : {

initialize : function() {
this.SUPERARG(arguments);

this.on(‘beforetestfinalize’, function() {
var win = this.global;

if (win.Ext) {
var suspendedComponents = this.cq(‘{isLayoutSuspended()}’);

// only report in case of failure
if (suspendedComponents.length > 0) {
this.diag(‘POST TEST SANITY CHECKS’);

this.is(suspendedComponents.length, 0, ‘No components found with layouts suspended’);

this.fail(‘Suspended layouts detected for components’, {
annotation : Ext.Array.map(suspendedComponents, function(cmp) { return (cmp.id + ‘(‘ + cmp.xtype + ‘) ‘) }).join(‘\r\n’)
});
}

if (win.Ext.AbstractComponent.layoutSuspendCount > 0) {
this.is(win.Ext.AbstractComponent.layoutSuspendCount, 0, ‘Layouts should not be suspended globally by accident’);
}
}
});
}
}
});
[/crayon]

Any suggestions of other cool sanity tests that could be done this way? Let your voice be heard!

Happy testing!

Mats Bryntse

Siesta Testing Tips 'n tricks