测试没有后端的前端应用程序

Question

My web application uses XMLHttpRequest to load JSON data returned by a backend server running PHP. It then renders the result in the browser using a client-side Javascript templating library.

function load(src) {
    var oReq = new XMLHttpRequest();
    oReq.onload = function () {
        _this.data = JSON.parse(oReq.responseText);
        _this.render(_this.data);
    };
    oReq.open('get', src, opts.async || true);
    oReq.send();    
}
load('article.php?page=1&lang=en');
load('userprofile.php?userid=1548&lang=en');

The real backend API article.php is not ready. I want to simulate/mock the response of article.php?page=1&lang=en in order to make an end to end test or to demonstrate the application .

How can I change the behaviour of XMLHttpRequest (or mock it) so that it won't open a HTTP connection , but returns pre-configured data according to each request? The mock should simulate a slow connection (delay 1 sec before returning the response) and also support timeout (as the normal XMLHttpRequest).

Answer 1

UPDATE: sinon.js is the right answer

Here an example to show how we can fake a RESTful server which is capable of respond to some specific ajax requests of application (other requests will call the real service)

https://gist.github.com/duongphuhiep/f4c807309a25906fc1c1

---

ok, I think this is the answer

https://github.com/philikon/MockHttpRequest

This library replace the XMLHttpRequest with a mock object. So I won't need to refactor or change the existing codes.

In this example: I faked the response coming from backend/blog.php?page=1&lang=fr

https://gist.github.com/duongphuhiep/b36a7fffa3fec7d955ac

However, I did not successfully simulate the timeout due to network latency.