JavaScript testgetrieben entwickeln mit QUnit
Kommentare

Wir öffnen jetzt also unsere JavaScript-Datei businessClasses.js und erstellen uns eine Funktion TodoList mit einem Parameter name. Das sollte dann so ähnlich aussehen wie in Listing 4.
Listing 4: To-do-Liste

function

Wir öffnen jetzt also unsere JavaScript-Datei businessClasses.js und erstellen uns eine Funktion TodoList mit einem Parameter name. Das sollte dann so ähnlich aussehen wie in Listing 4.

Listing 4: To-do-Liste
function TodoList(listname){
    this.listname = listname;
    this.listitems = [];
    this.addListItem = function(item){
        var currentIndex = this.listitems.length;
        this.listitems[currentIndex] = item;
    }
}

Wenn wir jetzt unsere unittest.html-Seite erneut aufrufen, sollte das Ergebnis ähnlich wie in Abbildung 4 aussehen.

Abb. 4: Test erfolgreich

Im Quellcode zu diesem Artikel finden sich noch weitere einfache Tests, die analog zu dem eben gezeigten Beispiel entstanden sind. Um unnötige Wiederholungen zu vermeiden, überspringen wir diese jetzt aber und kommen zu einem weiteren wichtigen Prinzip des Unit Testings, dem Mocking. Mit diesem Begriff verwandt ist das Wort Mockup, was so viel bedeutet wie „Attrappe“ oder „Modell“. Da wir noch nicht wissen, wie konkret die Persistenz in der finalen Version der Anwendung aussehen wird, verwenden wir für den Unit Test einfach ein Mockup. Das wird in Unit Tests häufig dann gemacht, wenn noch keine konkrete Implementierung vorliegt oder die Initialisierung der Komponente für den Test zu aufwändig wäre. Mockups werden auch eingesetzt, um reproduzierbare Ergebnisse zur Verfügung zu stellen, die mit dem Test abgeprüft werden können.

Wie gehabt, beginnen wir damit, den Test zu schreiben. Erst überlegen wir uns, was wir testen wollen, und zwar soll uns die Persistenzschicht ein Array der gespeicherten To-do-Listen zurückgeben können. Dies wird benötigt, um beispielsweise über eine Drop-down-Box eine To-do-Liste auszuwählen. In meiner Realisierung habe ich gesagt, ich definiere mir eine Variable persistence, die das Persistenzobjekt hält. Als zweite Variable habe ich ein Array namens expectedNames erstellt und Werte für To-do-Listen-Namen zugewiesen, die später auch mein Mockup enthalten wird. In Listing 5 sieht man, wie ich den Test mit bisherigen Mitteln realisiert habe.

Listing 5: Testen des Mockups
//Datei unittests.js
...
test( "PersistenceMock getTest", function() {
    //Initialisierung des Tests
    var persistence = new Persistence();
    var expectedNames = ["Allgemein","Arbeit","Familie","Artikel","Karriere"];
    var names = persistence.getTodoListNames();
    
    //Durchführung des Tests (Auswertung der Annahmen)
    ok(names.length == 5, 
       "Es sind 5 todoListen Namen im persistenceMock hinterlegt");
        
    ok(names[0] == expectedNames[0], 
      "Folgende Namen werden erwartet:"+expectedNames[0]);
...
    ok(names[4] == expectedNames[4], 
       "Folgende Namen werden erwartet:"+expectedNames[4]);
});

Dieser Test schlägt natürlich vorerst fehl, da die Implementierung des Persistenz-Mockups noch nicht geschehen ist. Mit allen vorhin erwähnten zusätzlichen Tests sieht der Testverlauf im Browser jetzt so aus wie in Abbildung 5.

Abb. 5: Test des Persistenz-Mockups fehlgeschlagen

Themen der letzten Seite:

  • Persistenz
  • deep Equal
  • Änderungen an „unittest.html“
  • DOM-Manipulation
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -