Zum Inhalt springen
Der Guide für ein smartes Leben.
VG Wort Pixel
Auf Herz und Nieren prüfen

JavaScript Testing

Das Testen von Anwendungen nimmt in Projekten immer größere Bedeutung ein. Für die JavaScript-Entwicklung gibt es zahlreiche Tools zur Unterstützung.

Autoren: Andreas Hitzig und Daniela Schrank • 1.12.2010 • ca. 4:45 Min

internet, webdesign, javascript, jsunit, tools
internet, webdesign, javascript, jsunit, tools
© Internet Magazin
Inhalt
  1. JavaScript Testing
  2. Tests mit Mozilla

JavaScript hat sich als Standardsprache für Browser-Entwicklungen etabliert. Immer mehr Anwendungslogik wandert zurück ins Frontend - inzwischen sind mit AJAX sogar komplexe Applikationen möglich, die es natürlich auch zu testen gilt. Bei Entwicklungen im Backend-Bereich gibt es ...

JavaScript hat sich als Standardsprache für Browser-Entwicklungen etabliert. Immer mehr Anwendungslogik wandert zurück ins Frontend - inzwischen sind mit AJAX sogar komplexe Applikationen möglich, die es natürlich auch zu testen gilt. Bei Entwicklungen im Backend-Bereich gibt es bereits seit Längerem automatisierte Testverfahren zur Überprüfung von Programmen, um mit automatisierten Verfahren die meisten Fehler bereits vor den Kunden zu finden und das Bugfixing so gering wie möglich zu gestalten.

Unit-Testing

Für diese Belange gibt es inzwischen auch einige freie Frameworks, die Sie beim sogenannten Unit-Testing unterstützen. In diesem Workshop zeigen wir Ihnen, wie Sie zum einen mithilfe des Frameworks JSUnit Ihre Anwendungen überprüfen können.Einen ersten Blick auf die Anwendung und Ihre Ergebnisse können Sie auf der Projektwebsite von JSUnit unter Testrunner (www.JSUnit.net/runner/app/main-frame.html ) werfen. An dieser Stelle sehen Sie die Oberfläche der aktuellen Testsuite. Möchten Sie die Tests auf verschiedenen Browsern durchführen, sollten Sie vorab über diese Webseite prüfen, ob die Auswertung in den einzelnen Programmen auch problemlos funktioniert.Setzen Sie für das Debugging mit Firefox das Plugin Firebug ein, gibt es eine interessante Alternative fürs Unit Testing. Das Addon Fireunit bietet Ihnen die Möglichkeit, über die Oberfläche des Plugins Ihre Entwicklungen zu testen.

JSUnit - Funktionsweise

Der Aufbau von JSUnit und die Namensgebung orientieren sich stark an xUnit, die Anwendung ist komplett in JavaScript geschrieben. Bei der Entwicklung haben die Entwickler darauf geachtet, die Strukturelemente von xUnit mit zu übernehmen. Somit werden Überprüfungen in Test-Funktionen ausgeführt und diese sind in Testpages gruppiert.Diese Testpages lassen sich konfigurieren und zu Testsuites zusammenfassen, die zusätzlich als Gruppierungselement für weitere Testsuites dienen können. Mit einer Testsuite führen Sie somit nacheinander verschiedene Tests aus, die sich in unterschiedlichen HTML-Dateien (Testpages) befinden.Sie können sowohl einzelne Testpages, wie auch Testsuites an den Testrunner übergeben. Dies ist eine eigene Anwendung, welche die Testergebnisse sammelt und anzeigt. Alternativ ist auch eine Übergabe der Ergebnis-Daten im XML-Format an einen HTTP-Server möglich.

JSUnit - Installation

internet, webdesign, javascript, jsunit, tools
JSUnit: Ihre Installation auf dem Webserver testen Sie am besten mithilfe der mitgelieferten Testsuite.
© Internet Magazin

Das Framework laden Sie am besten direkt von der Projekt-Homepage (www.JSUnit.net/ ) herunter. Nach dem Entpacken des Archivs steht Ihnen ein Ordner JSUnit zur Verfügung. Sie können JSUnit entweder lokal oder auf einem Webserver betreiben. Letzteres bietet den Vorteil, dass mehrere Personen gleichzeitig damit arbeiten können. Kopieren Sie dazu einfach das komplette Verzeichnis auf Ihren Webserver.Ein erster Test, ob Ihre Installation erfolgreich war, führen Sie am besten mithilfe der mitgelieferten Testdateien aus. Rufen Sie Ihren lokal installierten Testrunner über den Link localhost/JSUnit/Testrunner.html auf und wählen Sie die Testdatei JSUnitTestsuite.html aus dem tests-Verzeichnis. Geben Sie als Link localhost/JSUnit/tests/JSUnitTestsuite.html an und führen Sie über die Run-Schaltfläche die Überprüfungen aus. JSUnit sollte Ihnen bei korrekter Ausführung 90 erfolgreich abgearbeitete Tests melden.

JSUnit - Die erste Entwicklung

Die Tests mit JSUnit erfolgen auf Basis einer HTML-Seite. In diese binden Sie als Erstes den Verweis auf die JavaScript- sowie die CSS-Datei ein:

<link rel="stylesheet" type="text/ css" href="../css/JSUnitStyle.css"><script type="text/javascript" src="../app/JSUnitCore.js"></script>

Die Testfunktionen innerhalb der HTML-Seite sollten immer den Präfix test besitzen, also beispielsweise testFunktion(). Für den Test nutzen wir eine einfache Funktion, die zwei Zahlen addiert. Diese werden in die Funktion als Variablen x und y übergeben. Der Rückgabewert ist die Summe aus den beiden Übergabewerten.

function plus(x, y) { return (x+y); }

Die Funktion wird in einer separaten Java- Script-Datei mit dem Namen plus.js gespeichert und entsprechend in die HTML-Datei eingebunden:

<script type="text/javascript" src="plus.js"></script>

Die Funktionen von JSUnit erlauben die Prüfung der erwarteten Rückgabewerte der Funktionen. Für einen exakten Treffer gibt es zur Kontrolle die Funktion assertEquals(), im Falle einer bewussten Abweichung die Funktion assertNotEquals(). Die beiden Funktionen besitzen jeweils drei Parameter:

  • An erster Stelle befindet sich der optionale Kommentar.
  • Geben Sie als Zweites den erwarteten Rückgabewert an und
  • als Drittes den Aufruf der zu prüfenden Funktion samt Parameter.

In der ersten Funktion wird auf Gleichheit überprüft und die Werte 1 und 2 zur Addition in die Funktion übergeben. Die Prüfung erfolgt gegen die korrekte Endsumme 3 - die Funktion sollte korrekt ausgeführt werden.

function testAdd() { assertEquals("", 3, plus(2, 1)); }

In der zweiten Funktion wird, ebenfalls mit einem möglichen korrekten Ergebnis auf Ungleichheit geprüft.

function testAdd2() { assertNotEquals("", 0, plus(2, 1)); }

Entsprechend wird auch in diesem Fall kein Fehler in der Überprüfung festgestellt. Lediglich im dritten Fall kommt es zu einer Rückmeldung, die einen Fehlerfall dokumentiert.

function testAdd3() { assertEquals("", 6, plus(2, 1)); }

 

Auswertung der Tests

Rufen Sie die HTML-Datei auf, ohne die Einbeziehung der grafischen Auswertung, werden Sie keine Ergebnisse sehen. Am einfachsten erhalten Sie die Kontrollergebnisse durch Nutzung des Testrunners. Betreiben Sie eine lokale Installation von Apache, dann rufen Sie den lokalen Server über localhost auf und wechseln Sie in das Verzeichnis von JSUnit.An dieser Stelle finden Sie die Datei Testrunner.html. Nach dem Aufruf geben Sie im Feld für die Lokation der Testseite die URL auf Ihrem Webserver inklusive der localhost-Angabe ein, etwa localhost/JSUnit/bsp/bsp1.html. Beim fehlerfreien Durchlauf einer Überprüfung geschieht nichts außer einem grünen Balken bei Progress. Tritt jedoch ein Fehler auf, so wird der Balken in roter Farbe dargestellt und Sie erhalten im Fenster einen Hinweis, welche Test-Funktion ihn ausgelöst hat.

Weitere Testbeispiele

Die Testsuite von JSUnit ist sehr umfangreich. Es gibt eine Online-Dokumentation auf der Website von JSUnit, schneller kommen Sie jedoch sicherlich über die mitgelieferten Beispiele voran. Diese befinden sich im Verzeichnis tests. Anhand der Namen erhalten Sie erste Rückschlüsse auf die Inhalte der einzelnen Prüfung.