jquery - 如何使用 JASMINE 监视多个 AJAX 调用？

Question

我无法从单个测试规范中监视多个 ajax 请求。我想测试以下内容myFirstFunction()并mySecondFunction()使用 JASMINE。

function myFirstFunction() {
    $.postJSON('test1.htm', {operation:operation}, function (data) {    
        if (data != null && data.errorMsg != null && data.errorMsg.length > 0) {
            $.populateErrorMessage(data);
        } else { 
            operationAccess = data;
            var tempAccessFlag = operationAccess[0].accessFlag;
            if (tempAccessFlag) {
                mySecondFunction();
            }                  
        }
    });
}

function mySecondFunction(operation, operationAccess, reason) {
        $.postJSON('test2.htm', {windowStart:0, windowSize:4}, function (data) {
            if (data != null && data.errorMsg != null && data.errorMsg.length > 0) {
                $.populateErrorMessage(data);
            } else {
                if (null != data && data.accessFlag == "SUCCESS") {
                    //do something
                } else {
                    //do something
                }
            }
        });
}

我编写了以下测试规范并能够监视第一个 postJSON，如下所示-

it("Test myFirstFunction & mySecondFunction", function () {
        var operation = "customerPreviousOrder";
        var myFirstFunctionData = [{"accessFlag":true}]
        spyOn($, "ajax").andCallFake(function(params) {
            params.success(myFirstFunctionData);
        });
        myFirstFunction();
        expect(<Something>).toEqual(<Something>);

});

我想mySecondFunction()从上面的测试规范进行测试。因为myFirstFunction()调用mySecondFunction(). 那么我怎样才能窥探第二个 postJSON 呢？

Answer 1

来自 Pivotal 的人开发和维护Jasmine-Ajax，它为 Jasmine 添加了 AJAX 支持，因此您可以测试请求和模拟响应。mock 安装在 test 或者beforeEachby

jasmine.Ajax.useMock();

测试中的所有请求都被收集并在全局变量中可用ajaxRequests。对这些请求中的任何一个都不会返回任何响应。要模拟响应，您必须.response([some data])在测试中调用。

所以它会是这样的：

it("Test myFirstFunction & mySecondFunction", function () {
    var myFirstFunctionData = {responseText: '[{"accessFlag":true}]'};
    jasmine.Ajax.useMock();  
    myFirstFunction();
    ajaxRequests[0].response(myFirstFunctionData);  // index depends on the order of the AJAX calls
    expect(<Something>).toEqual(<Something>);

});

注意：有获取最新 AJAX 请求的全局方法mostRecentAjaxRequest();。当您需要直接访问的元素时ajaxRequests请添加：

afterEach(function(){
    clearAjaxRequests();
});

Answer 2

你应该使用sinonJS，它有一个模拟 ajax 东西的假服务器，所以你不必关心它。

var server = sinon.fakeServer.create();
server.respondWith('test1.htm', '[{"accessFlag":true}]');
server.respondWith('test2.htm', 'second answer');
server.autoRespond = true;

myFirstFunction();

Answer 3

您可以在下面尝试您的问题的虚拟解决方案。

源函数：

function myFunction(){
 $.ajax({                               //First Ajax Call
    url: <URL1>,
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    async: false,

    success: function (data) {
            … some success statement
    } else {
           var enableCardReaderCall = $.ajax({            //Nested Ajax Call
                    type: 'POST',
                    url: <URL2>,
                    dataType: 'json',
        data: JSON.stringify(data),
                   contentType: "application/json; charset=utf-8",

                    success: function (result) {
    // … some success statement
                    }
              }
 });

}); }

测试套件：

describe("Test Suit", function(){
   beforeEach(function () {
      var fakeData = "hi";
     spyOn($, "ajax").andCallFake(function(params) {            //First Spy On 
        params.success(function(fakeData){
            spyOn($, "ajax").andCallFake(function(params) {     //Nested Spy On
               params.success("there is data")
            })
        });
     });
});
it("Test Function", function() {
    $.myFunction();
});

});

Answer 4

ajax 函数的参数有 url 值。

describe("Test Suit", function() {
  beforeEach(function() {
    spyOn($, 'ajax').and.callFake(function(options) {
      if (options.url === 'test1.htm') {
        options.success([{"accessFlag":true}]);
      } else {
        options.success('second answer'); 
      }
    });
  });
  it("Test myFirstFunction & mySecondFunction", function () {
    myFirstFunction();
    expect(<Something>).toEqual(<Something>);
  }
});