QUnit 测试 AJAX 回调结果答案

【问题标题】：QUnit test AJAX callback resultQUnit 测试 AJAX 回调结果
【发布时间】：2016-10-24 16:17:58
【问题描述】：

我是新来的。我已经阅读了有关 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。似乎测试在回调函数完成之前启动。

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

【问题讨论】：

标签： javascript ajax qunit

【解决方案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);
    });
};

然后在你的测试代码中你可以使用返回的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();
    });
});

【讨论】：