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＆＃39; 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测试中，$（＆＃39; .content＆＃39;）。html（）为None。似乎测试在回调函数完成之前启动。

有关于此的任何想法吗？谢谢！

Answer 1

这里的问题是你的setTimeout实际上并没有等待Ajax调用完成，它只是等待Ajax调用开始，从而释放JS引擎来运行下一个函数...你的setTimeout的。在稍后的某个时间点，Ajax调用完成，并执行done回调。最好的解决方案是根本不使用setTimeout ...而是尝试从源代码函数返回Ajax调用。这应该允许你在测试中挂钩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);
    });
};

然后在您的测试代码中，您可以使用返回的承诺：

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();
    });
});

QUnit测试AJAX回调结果

1 个答案: