利用SinonJS测试 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');