利用 Sinon 测试 AJAX 请求

AJAX BDD DOM HTTP Mocha Mock Promise XHR jQuery 异步 测试

在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 下测试异步代码

Harttle

致力于简单的、一致的、高效的前端开发

看看这个?