在没有后端的情况下测试前端应用程序答案

【问题标题】：Test front-end application without back-end在没有后端的情况下测试前端应用程序
【发布时间】：2016-08-14 11:53:04
【问题描述】：

我的 Web 应用程序使用 XMLHttpRequest 加载运行 PHP 的后端服务器返回的 JSON 数据。然后，它使用客户端 Javascript 模板库在浏览器中呈现结果。

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');

真正的后端 API article.php 还没有准备好。我想模拟/模拟article.php?page=1&lang=en 的响应 为了进行端到端测试或演示应用程序。

如何更改 XMLHttpRequest 的行为（或模拟它），以便 它不会打开 HTTP 连接，而是根据每个请求返回预先配置的数据？模拟应该模拟一个慢速连接（在返回响应之前延迟 1 秒）并且还支持超时（作为正常的 XMLHttpRequest）。

【问题讨论】：

@dave 我不想维护一个本地测试 PHP 服务器，它是前端的测试，我更喜欢让前端团队维护所有的假数据，并作为后端的规范PHP团队
我没试过，但看起来很有希望sinonjs.org
你的测试框架是什么？使用 jasmine 你可以使用 .callFake
@BirgitMartinelle 不是用于单元测试，而是端到端测试或演示，以显示网站如何使用假 json 数据呈现。我必须伪造许多来自内部 + 外部服务的 REST API，以便（离线本地主机）演示我的前端应用程序

标签： javascript mocking xmlhttprequest

【解决方案1】：

更新：sinon.js 是正确答案

这里有一个例子来展示我们如何伪造一个能够响应应用程序的某些特定 ajax 请求的 RESTful 服务器（其他请求将调用真正的服务）

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

好的，我想这就是答案

https://github.com/philikon/MockHttpRequest

这个库用一个模拟对象替换了 XMLHttpRequest。所以我不需要重构或更改现有代码。

在这个例子中：我伪造了来自backend/blog.php?page=1&lang=fr的响应

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

但是，由于网络延迟，我没有成功模拟超时。

【讨论】：