CODEWITHSUNDEEP
javascriptajaxextjsextjs4mocking
JuHwon
JuHwon

Reputation: 2063

ExtJS 4.2.1 mocking Ext.Ajax.request

For frontend unit testing with jasmine i want to mock all my requests in my application.

I've already implemented a method to mock all my proxies.

proxy: appname.classes.proxy.ProxyNegotiator.getModelProxy("User")

and this method does something like this:

getModelProxy: function(config) {
    var url = this.getUrl(config);

    if (this.getProxyType() == 'api') {
        return appname.classes.proxy.WebApiProxy.getModelProxy(url);
    } else if (this.getProxyType() == 'test') {
        return appname.classes.proxy.LocalTestProxy.getModelProxy(url);
    }
    return undefined;
}

so you can imagine depending on my ProxyType configuration i get the web api proxy or the local proxy for testing. I do now have covered my crud operations..

Still, i do have another issue to deal with.. I do have some other requests in my application like this (validation of the username):

//check if Username is Valid
Ext.Ajax.request({
    url: '/api/User',
    method: 'GET',
    async: false,
    params: { id: user.get('Id'), username: user.get('UserName') },
    failure: function(response, opts) {
        myErrors.push({
            field: 'UserName',
            message: appname.locale.ErrorInvalidUsername
        });
    }
});

I do have some troubles with mocking this Ext.Ajax.request things... I've already searched in the web and did not find any nice solution for this. Whats best practice to mock this request? I am glad about every hint and/or idea u can give me. Please HELP!

Upvotes: 3

Views: 3900

Answers (2)

Eric
Eric

Reputation: 6995

All versions of Ext JS starting with 4.0.7 ship with the Ext.ux.ajax.SimManager class. It's not included in the base library builds, but the unminified source is found under examples/ux/ajax of your Ext JS folder.

To use it, you register a URL with a Simlet configuration that defines your return data.

Ext.onReady(function () {
    Ext.ux.ajax.SimManager.init({
        delay: 500  // Simulates network latency/server processing time
    }).register({
        '/api/User': {
            stype: 'json',  // stype is what kind of Simlet you want to use
            data:  [
                // JSON response data, if needed
            ]
        }
    });
});

Then you make your Ajax requests like normal and the SimManager will re-route the request through the registered Simlet.

Upvotes: 2

pllee
pllee

Reputation: 3959

I would check out sinon js to do your ajax mocking. We are currently using it to write unit tests in our Ext heavy application. http://sinonjs.org/docs/#fakeServer

You should be able to test your ajax request using something like this:

{
    setUp: function () {
        this.server = sinon.fakeServer.create();
    },

    tearDown: function () {
        this.server.restore();
    },

    "test user" : function () {
        this.server.respondWith("GET", "/api/User,
                                [500, { "Content-Type": "application/json" },
                                 '[{ "id": 12, "comment": "Hey there" }]']);

        Ext.Ajax.request({
            url: '/api/User',
            method: 'GET',
            async: false,
            params: { id: user.get('Id'), username: user.get('UserName') },
            failure: function(response, opts) {
                myErrors.push({
                    field: 'UserName',
                    message: appname.locale.ErrorInvalidUsername
                });
            }
        });

        this.server.respond();

        //assert myErrors
    }
}

Upvotes: 1

Related Questions