转载

利用 Sinon 测试 AJAX 请求

在Web前端测试中，常常会需要测试AJAX行为。为了简化测试的环境要求需要提供虚拟的测试环境。 Sinonjs 在这方面提供了两类API：

Fake XMLHttpRequest：覆盖DOM API中的XHR。使得我们可以捕获所有用户构建的XHR对象，包括直接构造的 XMLHttpRequest ，也包括通过jQuery等工具构造的。因此可以测试XHR构造是否正确。
Fake Server：Mock服务器行为。如果我们只希望Mock服务器的Response，可以使用Fake Server。

Fake XMLHttpRequest

sinon.useFakeXMLHttpRequest() API用于创建一个Fake对象，使用该对象可捕获所有新构造的 XMLHttpRequest （或 ActiveXObject ）实例。

Fake/Restore

通常在测试开始时进行fake，测试结束后恢复相关的DOM对象：

describe('xhr', function(){
    var xhr, fake;
    before(function(){
        fake = sinon.useFakeXMLHttpRequest();
        fake.onCreate = function(_xhr){ xhr = _xhr; };
    });
    after(function(){
        fake.restore();
    });
});

上述代码基于Mocha测试框架，参考：利用 Mocha 进行 BDD 风格测试。

测试XHR对象

然后在useFake后调用 $.get() ，jQuery会生成一个XHR对象，该对象会被 fake.onCreate() 回调捕捉捕捉到并赋值给 xhr 。

下面对该XHR对象进行测试：

it('should GET url: http://harttle.com', function() {
    var $.get('http://harttle.com');
    expect(xhr.url).to.equal('http://harttle.com');
    expect(xhr.method).to.equal('GET');
});

Fake Response

useFakeXMLHttpRequest 允许对每个 xhr 给出HTTP响应，即 useFakeXMLHttpRequest 包含了 useFakeServer 的功能。

$.get('http://harttle.com');
xhr.respond(200, { 'Content-Type': 'text/plain' }, 'okay');
expect(xhr.responseText).to.equal('okay');

虽然DOM XHR是异步的，但Fake XHR是同步的

Fake Server

sinon.fakeServer() 的功能是 sinon.useFakeXMLHttpRequest 功能的一部分。但提供了更加方便的Request/Response映射。如果我们只是希望Mock服务器行为而不关心XHR对象本身，可以使用 useFakeServer() API：

Fake/Restore

同样地，首先进行Fake和恢复：

describe('server', function(){
    before(function() {
        server = sinon.fakeServer.create();
        server.respondWith('GET', 'http://harttle.com', 
            [200, {'Content-Type': 'text/plain'}, 'harttleland']);
    });
    after(function() {
        server.restore();
    });
});

测试AJAX

然后开始测试AJAX行为，注意异步方法需要返回Promise，让Mocha等待该异步过程结束。

it('should respond with 200 harttleland', function() {
    reuturn $.get('http://harttle.com')
        .then(function(result){
            expect(result).to.equal('harttleland');
        });
});

引入chai-as-promised可以简化上述断言，例如：

expect($.get('http://harttle.com')).to.eventually.equal('harttleland');

详情请参考：Mocha 下测试异步代码

原文 http://harttle.com/2016/08/15/sinon-xhr.html

正文到此结束

所属分类：编程技术

本文标签： API Ajax jquery 同步 REST js XML 测试实例服务器 DOM web HTML 代码 http
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

利用 Sinon 测试 AJAX 请求

Fake XMLHttpRequest

Fake/Restore

测试XHR对象

Fake Response

Fake Server

Fake/Restore

测试AJAX

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流