QUnit Test AJAX Rückruf Ergebnis

Question

Ich bin neu hier. Ich habe die alten Posts über QUnit und AJAX gelesen, konnte aber immer noch keine Ahnung bekommen. Ich habe eine Funktion, die ein AJAX-Aufruf funktioniert und die Webseite manipulieren basierend auf dem Ergebnis:

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

Ich möchte testen, ob diese ganze Funktion erfolgreich ist. Nach QUnit der 2.x cookbook, ich tat.

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

Die Funktion selbst arbeitet und druckt den Namen auf der Webseite, aber in der QUnit Test, $ ('Inhalt') html() ist None. Es scheint, dass der Test ausgelöst wird, bevor die Callback-Funktion abgeschlossen ist.

Irgendwelche Ideen dazu? Vielen Dank!

Answer 1

Das Problem hier ist, dass Ihr setTimeout nicht wirklich auf den Ajax-Aufruf wartet, um zu vervollständigen, es wartet einfach auf den Ajax-Aufruf, um die JS-Engine freizugeben, um die nächste Funktion auszuführen ... Ihr setTimeout. Zu einem späteren Zeitpunkt wird der Ajax-Aufruf abgeschlossen und Ihr done Callback wird ausgeführt. Die beste Lösung ist, setTimeout überhaupt nicht zu verwenden ... versuchen Sie stattdessen, Ihren Ajax-Aufruf von der Quellcodefunktion zurückzugeben. Dies sollte Ihnen ermöglichen, in die Versprechen in Ihrem Test Haken:

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

Dann in Ihrem Testcode können Sie das zurückgegebene Versprechen verwenden:

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