javascript - QUnit测试AJAX回调结果

Question

我是新来的。我已经阅读了有关 QUnit 和 AJAX 的旧帖子，但仍然找不到线索。我有一个函数可以执行 AJAX 调用并根据结果操作网页:

myObj.prototype.getName = function() {
  $.get('/url/to/server/', {id: this.id})
    .done(function(data) {
      var name = JSON.parse(data);
      var html = '<p>' + id.toString() + ': ' + name + '</p>';
      $('.content').append(html);
    });
};

我想测试整个功能是否成功。遵循 QUnit 2.x 的 cookbook ，我做了:

QUnit.test('myObj.getName', function(assert) {
  var done = assert.async();
  var obj = new myObj(1);  // 1 is the ID
  obj.getName();
  setTimeout(function() {
    assert.equal($('.content').html(), '<p>1: name-of-1</p>');
    done();
  });
});

该函数本身可以工作并将名称打印到网页，但在 QUnit 测试中， $('.content').html() 为 None。看来测试是在回调函数完成之前启动的。

对此有什么想法吗？谢谢!

Answer 1

这里的问题是你的setTimeout实际上并没有等待Ajax调用完成，它只是等待Ajax调用开始，从而释放JS引擎来运行下一个函数。 ..你的setTimeout。在稍后的某个时间点，Ajax 调用完成并执行您的 done 回调。最好的解决方案是根本不使用setTimeout...相反，尝试从源代码函数返回 Ajax 调用。这应该允许您在测试中 Hook Promise:

myObj.prototype.getName = function() {
  // notice the new `return` on the line below!
  return $.get('/url/to/server/', {id: this.id})
    .done(function(data) {
      var name = JSON.parse(data);
      var html = '<p>' + id.toString() + ': ' + name + '</p>';
      $('.content').append(html);
    });
};

然后在您的测试代码中您可以使用返回的 promise :

QUnit.test('myObj.getName', function(assert) {
  var done = assert.async();
  var obj = new myObj(1);  // 1 is the ID
  obj.getName()
    .done(function() {
      assert.equal($('.content').html(), '<p>1: name-of-1</p>');
      done();
    });
});