如何使用 jasmine 对 jquery ajax 调用进行单元测试？答案

【问题标题】：How to unit test jquery ajax calls using jasmine?如何使用 jasmine 对 jquery ajax 调用进行单元测试？
【发布时间】：2017-06-25 14:39:56
【问题描述】：

我的 .js 文件中有以下 ajax 调用代码，我想编写 jasmine 单元测试来覆盖。

var promise = $.ajax({
                url: URL,
                type: 'GET'
               });
promise.done(function(data, status) {
       console.log("success");
});
promise.fail(function(status, error) {
       console.log("error");
});

我可以通过存根/模拟数据为 $.ajax 调用编写单元测试用例，但不能为 .done 和 .fail 方法编写测试用例。无论如何要为 .done 和 .fail 方法编写规范。

【问题讨论】：

标签： javascript jquery unit-testing jasmine karma-jasmine

【解决方案1】：

您可以从您的成功/失败处理程序中调用其他函数来有效地模拟承诺处理程序。
除了使代码易于阅读之外，它还有助于调试和模拟
Slava Ivanov 的回答可帮助您存根适当的回调，它使用 Jquery Deferred 对象

以下是我如何稍微修改您的问题以适应模拟行为。亲身体验here

var handler = {
  success: function(data) {
    console.log("success");
  },
  fail: function(data) {
    console.log("error");
  }
};
var testObj = {
  ajaxFunction: function() {
    var promise =
      $.ajax({
        url: 'abc',
        type: 'GET'
      });
    promise.done(function(data, status) {
      handler.success(data);
    });
    promise.fail(function(status, error) {
      handler.fail(error);
    });
  }
};

describe('test ajax', function() {
  it('test success', function() {
    spyOn(handler, 'success').and.callFake(function(e) {
      console.log("This is a spy call for success handler");
    });
    spyOn($, 'ajax').and.callFake(function(e) {
      return $.Deferred().resolve({
        'hurray': 'success'
      }).promise();
    });
    testObj.ajaxFunction();
    expect(handler.success).toHaveBeenCalled();
  });

  it('test failure', function() {
    spyOn(handler, 'fail').and.callFake(function(e) {
      console.log("This is a spy call for fail handler");
    });
    spyOn($, 'ajax').and.callFake(function(e) {
      return $.Deferred().reject({
        'alas': 'failure'
      }).promise();
    });
    testObj.ajaxFunction();
    expect(handler.fail).toHaveBeenCalled();
  });

});

【讨论】：

【解决方案2】：

要为.done 和.fail 方法编写测试用例，您需要在$.ajax JQuery 函数上创建Spy，并调用您自己的假函数，您将在其中创建Deferred 对象并解析/拒绝这取决于你的测试。例如，您的代码可能看起来像...

// successful case
spyOn($, "ajax").and.callFake(function () {
    return $.Deferred().resolve(expected_data, expected_status).promise();
});

// failure case
spyOn($, "ajax").and.callFake(function () {
    return $.Deferred().reject(expected_status, expected_error).promise();
});

【讨论】：