使用 Jasmine 2.0 测试初始 ajax 请求的结果

Question

我正在使用 Jasmine 2.0 测试主干视图。视图在加载时发出初始 ajax 请求，以用值填充其表单字段。我希望我的 Jasmine 测试（在下面的 it 函数中）仅在收到这些值后运行。

测试当前失败，因为似乎在测试运行后收到了 ajax 请求，即使我正在存根 ajax 请求。

我应该如何编写这个测试？

describe('View', function() {

  var formFieldValues = [/* blah */];
  var view;

  beforeEach(function(done) {
    jasmine.Ajax.install();
    jasmine.Ajax.stubRequest('/form-fields').andReturn({
      responseJSON: formFieldValues
    });
    view = new View({el: $('<main></main>')}); // makes ajax call on initialization
    $('body').append(view.el);
  });

  afterEach(function() {
    view.remove();
    jasmine.Ajax.uninstall();
  });

  it('form fields have values', function(done) {
    // PROBLEM IS HERE: THE FOLLOWING RUNS BEFORE VIEW'S AJAX CALL FINISHES
    expect(view.$('[name="fieldName"]').children().length).toEqual(formFieldValues.length);
  });

});

Answer 1

看起来您实际上并没有运行异步规范。我注意到您的 beforeEach 和 it 都收到了 done 回调，但他们都没有调用。如果你正在使用 ajax，那么你可能不需要运行异步规范，因为 stub 会 有效地使ajax请求同步。

当我运行以下代码时，一切正常。

规格：

describe('View', function() {

  var formFieldValues = [{name: 'foo'}, {name: 'bar'}];
  var view;

  beforeEach(function() {
    jasmine.Ajax.install();
    jasmine.Ajax.stubRequest('/form-fields').andReturn({
      responseText: JSON.stringify(formFieldValues)
    });
    view = new View(); // makes ajax call on initialization
  });

  afterEach(function() {
    jasmine.Ajax.uninstall();
  });

  it('form fields have values', function() {
    // PROBLEM IS HERE: THE FOLLOWING RUNS BEFORE VIEW'S AJAX CALL FINISHES
    expect(view.$('[name="fieldName"]').children().length).toEqual(formFieldValues.length);
  });

});

我的虚拟实现：

Collection = Backbone.Collection.extend({
  url: '/form-fields'
});

View = Backbone.View.extend({
  initialize: function() {
    this.collection = new Collection();
    this.collection.on('reset', this.render, this);
    this.collection.fetch({reset: true});
  },

  render: function() {
    var innerEl = $('<div name="fieldName"></div>')
    this.collection.each(function(item) {
      innerEl.append('<span></span>');
    });
    this.$el.append(innerEl);
  }
});

Answer 2

应该使用 runs() 和 waitFor() 方法 使其异步。 对 run() 方法的调用充当单独的测试块，其中最后一个将进行异步调用。在最简单的情况下，可以使用 setTimeout() 来模拟异步行为。在更复杂的用法中，会进行实际调用，例如对启用 Ajax 的对象。

waitsFor() 方法接受三个参数：“latch”函数、失败消息、超时（以毫秒为单位）

runs(function() {
    flag = false;
    value = 0;

setTimeout(function() {
  value++;
  //keep returning false…
  flag = false;
}, 500);
  });

  waitsFor(function() {
    return flag;
  }, "The Value should be incremented", 5000);
});

或者你可以试试 发出真正的 Ajax 请求

当需要执行集成测试时，您可能希望执行真正的 Ajax 调用，而不仅仅是模仿它们。没问题。只需创建一个间谍，进行 Ajax 调用，然后是 waitsFor()，您可以在其中检查 callback.callCount 属性或你有什么： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

it("should make a real AJAX request", function () {
    var callback = jasmine.createSpy();
    makeAjaxCall(callback);
    waitsFor(function() {
        return callback.callCount > 0;
    }, "The Ajax call timed out.", 5000);

    runs(function() {
        expect(callback).toHaveBeenCalled();
    });
});

function makeAjaxCall(callback) {
    $.ajax({
        type: "GET",
        url: "data.json",
        contentType: "application/json; charset=utf-8"
        dataType: "json",
        success: callback
    });
}