Learning Unit Testing und Jasmine

Question

Ich bin Frontend-Entwickler und neu zu TDD und BDD.

Ich habe diese Aufgabe. Füllen Sie eine Tabelle mit einem JSON-Objekt aus, das von einem AJAX-Aufruf empfangen wurde. Wie würde ich das in einer Suite und Spezifikation beschreiben?

Vielen Dank im Voraus

EDIT

Ich verwende Backbone.js für MVC und sinon.js für Spione, Stubs usw.

Answer 1

Sie erwähnen nicht viel darüber, welche Bibliotheken Sie verwenden, also werde ich einfach weitermachen und annehmen, dass Ihre ajax-Anfrage aus einer GET-Anfrage besteht, die jQuery verwendet.

Normalerweise wäre dies so etwas wie:

$.ajax({ 
    url: 'http://server/populate_table', 
    data: {foo: 'bar'}, 
    success: populate_table 
}); 

Auch gehe ich davon aus, dass der Server das folgende Objekt {row: [1, 2, 3]} Für den Anfang zurückkehren würden Sie die Ajax-Antwort verspotten müssen, da Sie nicht sein wollen Berufung auf Ihrem Server verfügbar sein. Die Verspottung, die Überprüfung von Parametern und gefälschte Rückgabe der Daten kann unter Verwendung eines Spion als solche erreicht werden:

var ajaxMock = spyOn($, 'ajax').andCallFake(function (options) { 
    expect(options.url).toEqual('http://server/populate_table'); 
    expect(options.data.foo).toEqual('bar'); 
    options.success({row: [1, 2, 3]}; 
}); 

Beachten Sie, wie oben Sie definieren Erwartungen über die URL und Daten, die vom Server empfangen werden sollte, bevor Rückruf mit dem Ergebnis aufrufen.

Schließlich müssen Sie sehen, ob Ihre Tabelle belegt war. Sie geben keine Informationen über die Daten oder die Tabelle, aber wieder raten, dass Sie jQuery verwenden, sollten Sie versuchen, jasmine-jquery. Mit ihm können Sie die Erwartungen an Ihr DOM leicht beschreiben, sehen Sie sich die erweiterten Dokumente an. Sobald Sie auf abrechnen, was Sie testen wollen, Ihren vollständigen Test wird ähnlich aussehen wie:

it('populates the table making a JSON call', function() { 
    var ajaxMock = spyOn($, 'ajax').andCallFake(function (options) { 
     expect(options.url).toEqual('http://server/populate_table'); 
     expect(options.data.foo).toEqual('bar'); 
     options.success({row: [1, 2, 3]}; 
    }); 

    $.ajax({ 
     url: 'http://server/populate_table', 
     data: {foo: 'bar'}, 
     success: populate_table 
    }); 

    expect($('#mytable')).toExist(); 
    // DOM specific expectations go here... 

}); 

Answer 2

Sie an den asynchronous test Einrichtungen in Jasmin gebaut aussehen wollen.

Speziell waitFor und run.

Um schnell zu erklären: Sie können eine Ajax-Abfrage ausführen und lassen sie bei Erfolg true zurück. Sie warten auf diese Funktion und führen dann Ihren Test aus.

Answer 3

Da Sie bereits sinon.js verwenden, glaube ich, der beste Ansatz wäre fakeServer verwenden für die Prüfung von Objekten aus Ajax-Aufrufe erhalten . Es ist sehr gut hier beschrieben (Gefälschte Ajax und gefälschten Server Abschnitt):

http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html