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 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:

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.

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.

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

Comments ( 6 )

  • Casper

    As a tip setting the defaultSimlet to null will leave the non registered urls intact, otherwise you’ll get when using non registered urls. The use case is that you register the fake urls and when testing for example a store you point your store to the fake url. When you want to perform an integration test you use the original url.

  • riccardo

    Is there anything similar we can use when testing sencha touch apps?

  • Mats

    @ricardo. I’d recommend copy pasting the Simlet code bits into your Sencha Touch test environment (adding those classes to your ‘preload’). That should solve it!

  • riccardo

    Not so sure… from what I’ve seen, this class overrides methods in ExtJS you can’t find in the corresponding ST class. In fact, I’ve seen that the store url is actually called (returning 404) when I try to load a store.
    I’ll try with sinon, then.

  • Vasuvi

    Is it possible to have different responses for the same URL in a test file?

Leave a Comment