javascript - 使用 sinonjs 进行假 Ajax 调用

Question

我正在尝试使用 Protractor 自动化端到端测试，并且我正在使用 sinonjs 设置一个 fakeServer 来响应由按钮点击触发的某些 ajax 调用(不是全部)。

我陷入困境，不知道如何去做，并且作为自动化新手，我不确定自己是否走在正确的道路上。

var sinon = require('sinon');
describe("SinonFakeServerTest", function() {
    var fakeServer;
    beforeEach(function () {
        fakeServer = sinon.fakeServer.create();
        fakeServer.autoRespond = true;

        var data = {key1: 'xyz', key2: 'abc'};
        var response = [ 200, { "Content-Type": "application/json" }, data ];
        fakeServer.respondWith( '/abc/xyz/*', response );
    }

    afterEach(function () {
        fakeServer.restore();
    }

    it("should fake a ajax request", function () {
        // click on this button triggers ajax call..
        element(by.css('.take-button')).click();
        //should show fake data on ui
    });
});

这是按钮点击 Controller 和模型的生产代码

'.take-button click' : function(el, ev) {
    model.getData(listParams, this.proxy('setUpData'));
},

getList : function(params, success) {
    $.ajax({
        url : '/abb/xyz/getAll.htm',
        dataType : 'json',
        type : "GET",
        data : {
            params : params
        },
        success : success
    });
}

Answer 1

当生产代码使用 JQuery 进行 AJAX 调用时，我没有成功使用 Sinon 的 fakeServer 功能伪造服务器。

我建议尝试对$.ajax进行简单的Sinon stub 。实际上sinonjs.org上有例子站点(查看测试 Ajax 部分):

after(function () {
    // When the test either fails or passes, restore the original
    // jQuery ajax function (Sinon.JS also provides tools to help
    // test frameworks automate clean-up like this)
    jQuery.ajax.restore();
});

it("makes a GET request for todo items", function () {
    sinon.stub(jQuery, "ajax");
    getTodos(42, sinon.spy());

    assert(jQuery.ajax.calledWithMatch({ url: "/todo/42/items" }));
});