Mats Bryntse
7 May 2013

Mocking Ajax calls with Siesta

In the past couple of months we’ve received a few requests for mocking capabilities when it comes to Ajax requests […]

In the past couple of months we’ve received a few requests for mocking capabilities when it comes to Ajax requests with Siesta. We are actually quite interested in this feature ourself so we we’re very happy when we realized how easy it was to accomplish. The solution: Ext.ux.ajax.SimManager, is found in the Ext JS examples/ux folder.

Screen Shot 2013-05-07 at 2.31.35 PM

Introducing the Ext.ux.ajax.SimManager

This class (docs here) has actually been around for quite a while, and it is even well documented in the public Sencha docs though we didn’t really notice it until recently. Originally written by the Ext JS mastermind Don Griffin, this class provides very easy mocking support. The static SimManager class allows you to easily mount a simulated Ajax response referred to as a simlet, mapped to a given URL. To mount a dataset for a specific URL returning a basic JSON object, you call the init method as seen below:

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
Ext.ux.ajax.SimManager.init({
delay : 300
}).register(
{
‘/app/data/url’ : {
stype : ‘json’, // use JsonSimlet (stype is like xtype for components)
data : [
{ id : 1, name : ‘user1’, age : 25 },
{ id : 2, name : ‘user2’, age : 35 },
{ id : 3, name : ‘user3’, age : 45 }
]
}
}
);
[/crayon]

We can specify the delay to use, and just pass in the data we’d like the mocked response to contain. Later in your test when your store (or plain Ajax call) requests the ‘/app/data/url’ URL, this will be handled automatically by the SimManager. To make use of the SimManager class in a Siesta test, simply configure the ‘loaderPath’ to be able to require it inside the test.

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
{
url : ‘051_ext-ajax-mock.t.js’,

// Setup the path to the ‘ux’ folder on the Sencha CDN
loaderPath : { ‘Ext.ux’ : ‘https://cdn.sencha.io/ext-4.2.0-gpl/examples/ux’ }
}
[/crayon]

I just created a basic Siesta test (included in the next release) to the Ext JS examples folder of the Siesta SDK to prove how easy it is to get started. All we have to do is to ‘require’ the SimManager class first.

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
StartTest(function (t) {

t.requireOk(‘Ext.ux.ajax.SimManager’, function () {
Ext.define(‘MyModel’, {
extend : ‘Ext.data.Model’,
fields : [
‘id’,
‘name’,
‘age’
]
});

Ext.ux.ajax.SimManager.init({
delay : 300
}).register(
{
‘/app/data/url’ : {
stype : ‘json’, // use JsonSimlet (stype is like xtype for components)
data : [
{ id : 1, name : ‘user1’, age : 25 },
{ id : 2, name : ‘user2’, age : 35 },
{ id : 3, name : ‘user3’, age : 45 }
]
}
}
);

var store = new Ext.data.Store({
model : ‘MyModel’,

proxy : {
type : ‘ajax’,
url : ‘/app/data/url’ // doesn’t exist
}
});

t.willFireNTimes(store, ‘load’, 1);

t.it(‘should be possible to load mock data’, function (t) {
t.loadStoresAndThen(store, function () {
t.expect(store.first().get(‘id’)).toBe(1);
t.expect(store.first().get(‘name’)).toBe(‘user1’);
t.expect(store.getAt(1).get(‘id’)).toBe(2);
t.expect(store.getAt(1).get(‘name’)).toBe(‘user2’);
t.expect(store.getAt(2).get(‘id’)).toBe(3);
t.expect(store.getAt(2).get(‘name’)).toBe(‘user3’);
});
});
});
});
[/crayon]

You can simulate any number of URL’s and associate them with an Ext.ux.ajax.Simlet. To make non-simulated Ajax requests after the SimManager class is initialized, add a nosim : true option to your Ajax call config.

Summing up

Using mocked Ajax calls are a great way to simplify your testing and speed it up at the same time. We hope you will find this Ext JS feature useful in your test suite. Do you have any other mocking tips & tricks? Please let us know in the comments or our support forums.

Related links:

Ext.ux.ajax.SimManager docs

Mats Bryntse

Siesta Testing