Question

We have about 3-5 XHR requests on mobile page – and sometimes part of them not working, only on real devices, only on slow connection. I want to improve sustainability of our mobile web application.

So my question is.. How to emulate edge connection, that randomly brokes?

In emulators like MobiOne – connection speed limit work, but connection has desktop stability – so everything just work slowly.

Answer 1

Why not write a unit test? You could create a mock/spy for your xhr function. In doing so you could forcefully break various ajax based components predictably. This forces you to always account for dropped connections by doing things like just trying again, and making sure load screens and messages appear when things fail.

I think by taking those steps you are creating a more fool proof application. A bad connection emulator will just prove to you that things are unpredictable. If you were to fix one thing then then next time you run the emulator it would simply find something else wrong infinitely.

Here is an example using jasmine/jquery:

it("Will allow failed ajax events", function() {
    var dfd = $.Deferred();
    spyOn($, "ajax").andReturn(dfd);
    dfd.reject(); // calls all failed events
});

it("Will allow done ajax events", function() {
    var dfd = $.Deferred();
    spyOn($, "ajax").andReturn(dfd);
    dfd.resolve(); // calls all done events
});

Your source could look something like this:

$.get("url").then(function() { 
    //done
}, function () {
    //fail
});

or

$.ajax("url")
    .done(function() {})
    .fail(function() {});

or

var dfd = $.post("url");
$.when(dfd).done(fn).fail(fn);

That could test individual ajax events. You could also try to generalize some default behavior potentially.

If you aren’t using jquery you can still use deferreds. There are other deferred libraries out there or you can just grab dfd from jquery source, which should help with all this. If you are using some other XHR or something home brewed you should be able to integrate the 2 by always returning dfds and resolving or failing them at their normal callbacks.

Lastly, to actually test the functionality of your app, just replace the normal urls temporarily with something that won’t work. And observe how your app reacts. If all your URLs are incorrect that should basically simulate no internet connection.