JavaScript testgetrieben entwickeln mit QUnit
Kommentare

Testgetriebene JavaScript-Entwicklung mit QUnit
Testgetriebene Entwicklung folgt immer dem gleichen Muster:
Test für eine Funktion schreiben, der fehlschlägt
Methode nur soweit implementieren, dass

Testgetriebene JavaScript-Entwicklung mit QUnit

Testgetriebene Entwicklung folgt immer dem gleichen Muster:

  1. Test für eine Funktion schreiben, der fehlschlägt
  2. Methode nur soweit implementieren, dass der Test erfolgreich durchläuft
  3. neuen Test verfeinern, sodass er wieder fehlschlägt

Dies wird solange durchgeführt, bis die Funktion alle Anforderungen erfüllt. Danach wird mit der nächsten Funktion fortgefahren. Bevor wir nun beginnen, testgetrieben an einem Beispiel zu entwickeln, möchte ich zuerst das Beispiel vorstellen (Kasten: „Das Beispielprojekt – To-do-Liste“).

Das Beispielprojekt – To-do-Liste

Als Beispiel habe ich eine kleine Anwendung gewählt, die jeder inhaltlich nachvollziehen können sollte: die JavaScript-Implementierung einer To-do-Liste. In der finalen Anwendung soll es möglich sein, mehrere To-do-Listen zu verwalten. Innerhalb der To-do-Listen soll es möglich sein, Listeneinträge hinzuzufügen, sie zu entfernen oder als fertig zu kennzeichnen.

Die spätere Anwendung soll über eine noch nicht näher definierte Schnittstelle die To-do-Listen persistieren können. Da die Implementierung der kompletten Anwendung den Rahmen dieses Artikels sprengen würde, habe ich mich nur auf einzelne Aspekte der Aufgabenstellung konzentriert.

In Abbildung 1 kann man sich einen Eindruck verschaffen, wie eine fertige Version der To-do-Liste aussehen könnte.

Abb. 1: Screenshot der fertigen To-do-Liste
Rahmenbedingungen

Um den Beispielcode übersichtlich und anschaulich zu gestalten, wird für die DOM-Manipulation das Framework jQuery verwendet. Auch werden nur die jeweils relevanten Ausschnitte des JavaScript-Quellcodes aufgeführt. Der komplette Quelltext aller Dateien wird als Download [2] zur Verfügung gestellt. Um den HTML-Quelltext so lesbar wie möglich zu gestalten, wurde oft die HTML5-Syntax verwendet und auf alles verzichtet, was nicht zum Thema beiträgt. Auf die verwendeten CSS Style Sheets wird nicht näher eingegangen, da das Layout für die Funktion unerheblich ist.

Beginnen möchte ich mit der Datei unittest.html. Diese ist in unserem Beispiel das Hauptdokument. Damit wir QUnit verwenden können, müssen das entsprechende Style Sheet und JavaScript auf dieser Seite, wie in Listing 1, eingebunden werden. Um etwas von den Unit Tests sehen zu können, fehlt noch ein div-Tag mit der id=“qunit“. Dieses befindet sich ebenfalls in unserem Hauptdokument. Wenn wir nun unittest.html im Browser ansehen, können wir schon den Rahmen sehen, den uns QUnit bietet. In Abbildung 2 ist ebenfalls zu sehen, in welchem Browser, hier Firefox, der Unit Test ausgeführt wurde.

Abb. 2: Anzeige der noch leeren unittest.html im Firefox
Listing 1: Die Unit-Test-HTML-Seite

    
        Unit Tests 

Themen der folgenden Seiten:

  • Erweiterung von unittest.html
  • Unser erster QUnit-Test
  • To-do-Liste
  • Testen des Mockups
  • 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 -