JavaScript umfangreich testen

JavaScript feiert dieses Jahr 18. Geburtstag - fristet aber ein Nischendasein. Die Skriptsprache wird vor allem für die Vereinfachung von HTML-Konstruktionen verwendet. In geschäftskritischen Produktionsumgebungen ist JavaScript hingegen nicht nur verpönt, sondern oft verboten. Niemand ist sich sicher, was in dem von Browsern zu interpretierenden Programmcode steckt und welche unerwünschten Effekte auftreten könnten. Im gleichen Maße wie neue Programmiersprachen und Implementierungstechniken auftauchen, müssen Qualitätssicherer daher Anwender durch Softwaretests vor möglichen Folgeschäden bewahren.

JavaScript erschwert Softwaretests

Software wird häufig auf verschiedenen Ebenen getestet. Jeder Anwendungsentwickler, der einzelne Komponenten programmiert, muss sich zum Beispiel sicher sein, dass sein lokal entwickeltes Werk den Web-Anforderungen entspricht. Auf übergeordneter Ebene stellen Integrationstests dann sicher, dass die einzelnen Komponenten erwartungsgemäß zusammenwirken.

Ein weiteres Verfahren sind klassische Oberflächentests. Sie zeichnen die Bedienung einer Anwendung auf und vermerken die Änderungen. Entsprechen die Ergebnisse der Erwartung, gilt der Oberflächentest als erfolgreich. Benutzt die Anwendung jedoch JavaScript-Komponenten, steigt die Komplexität der Benutzeroberfläche und ihrer Funktionalität. Und die aufgezeichneten Bedienungswege des automatisierten Tests greifen oft ins Leere. Der Test gerät vollends ins Wanken, wenn neben dem Client-Browser viele unterschiedliche Browser in jeweils mehreren Versionen als Client dienen sollen.

Qualität früh sichern

Wer einzelne Anwendungsteile in Java entwickelt, sichert sich mit Unit-Tests ab. Moderne Entwicklungsumgebungen bieten eine gute Unterstützung. Softwareentwickler verwenden Unit-übergreifend Testtreiber, um größere Komponenten auch im Zusammenspiel zu überprüfen. Bei JavaScript hört diese Unterstützung jedoch auf. Der JavaScript-Code kann erst im Browser getestet werden, entsprechend nehmen Entwickler die Auswirkungen erst im Systemtest wahr. Dieser Systemtest, der üblicherweise zum Schluss ausgeführt wird, prüft, ob Anwender mit der Software das erwünschte Ziel erreicht haben. Alle technischen Zwischenschritte, die dafür erforderlich sind, spielen in diesem Stadium keine Rolle.

Das ist mitunter ein Grund dafür, warum viele Entscheider mit Unbehagen auf JavaScript reagieren. Oftmals verbieten schon die Browsereinstellungen die Ausführung der Skriptsprache. Manche Entwickler verlagern daher das Schreiben von JavaScript in eine andere Instanz. Die Entwicklung basierend auf dem Google Web Toolkit (GWT) wäre ein Ansatz, da es die Übersetzung nach JavaScript übernimmt. Jedoch unterstützt GWT nicht alle Browser. Zudem begibt sich der Entwickler durch die weitere Abstraktionsschicht in die Hand eines anderen Werkzeugs, was potenzielle Fehlerquellen und Folgekosten mit sich bringen kann.

Test von JavaScript

Seit dem Aufkommen der asynchronen Datenübertragungstechnik Ajax und dem sich abzeichnenden Standard HTML5 ist JavaScript ein Thema. Die Möglichkeiten der optischen und funktionalen Anwendungsgestaltung sind verlockend. JavaScript hat zudem die Chance, künftig zur "Lingua franca" der Anwendungen zwischen mobilen Endgeräten, klassischen Desktopsystemen und Servern zu werden. Es bietet die Chance, für alle Plattformen einen einheitlichen Programmcode zu verwenden. Dafür ist es sinnvoll, neue Standardprozesse zu entwickeln. Softwarekomponenten sollten nach Veränderungen in den Testfallsammlungen stets regelmäßig geprüft werden. Diese Tests müssen zudem reproduzierbar sein. Denn je länger eine Anwendung lebt und sich weiterentwickelt, desto wichtiger wird die funktionale Kontinuität.

Flight - Event-gesteuertes Web-Framework von Twitter
Unter Softwareentwicklern genießt Twitter einen guten Ruf, nicht zuletzt weil das Unternehmen zahlreiche Frameworks und Tools an die Community freigegeben hat.

Google Code Prettify macht Quelltexte besser lesbar
Es soll ja Programmierer geben, die mit einem einfachen Editor und unformatiertem Text arbeiten können. Die meisten Entwickler finden es aber mühsam, ohne Syntax-Hervorhebung Code zu lesen.

TideSDK - plattformunabhängige Desktop-Apps erstellen
Mit dem quelloffenen Framework "TideSDK" können Web-Entwickler ihr Know-how nutzen, um plattform-übergreifende Desktop-Anwendungen für Windows, Mac OS X und Linux zu erzeugen.

"LaunchRock" erstellt attraktive Landingpages im Nu
Der Dienst stellt ein Online-Tool bereit, mit dem man eine standardisierte Landingpage mit schlichtem Registrierungsformular erstellen kann.

App Annie liefert wertvolle App-Store-Statistiken
Wer neben Metriken über die Nutzung der eigenen Software auch an den Statistiken der App-Stores besonders interessiert ist, sollte einen Blick auf App Annie werfen.

Loggr - Monitoring und Analytics für Web-Anwendungen
Betreiber von Web-Anwendungen sind bedacht, eine möglichst hohe Performance und Verfügbarkeit sicherzustellen. Application-Performance-Management-Tools wie Loggr helfen dabei.

WPTouch macht aus Wordpress-Blogs mobile Apps
Das kostenlose Plugin "WPTouch" wandelt Wordpress-Blogs in eine mobile App um. Dabei nimmt die Seite das charakteristische Look and Feel der jeweiligen Plattform automatisch an.

The M-Project - HTML5-Framework für mobile Web-Apps
Mit "The M-Project" steht ein quelloffenes HTML5-Framework für mobile Web-Apps zur Verfügung, das in Deutschland entwickelt wird.

HockeyApp - Smartphone-Apps besser testen
HockeyApp sammelt Informationen wie Crash-Reports und Anwendungs-Logs und liefert ausführliche Testberichte.

Kirby - ein textbasierendes Content-Management-System
OpenWe hat mit "Kirby" ein Content-Management-System (CMS) entwickelt, das ganz ohne Datenbank auskommt.

Mashape - Zentraler Marktplatz für APIs
APIs, die verschiedene WebDienste miteinander integrieren können, werden mit SaaS, Cloud Computing & Co. immer wichtiger. Das Startup Mashape stellt eine zentrale Drehscheibe für Programmierschnittstellen zur Verfügung, die die Integration heterogener Cloud-Dienste vereinfachen soll - quasi eine Art App Store für APIs.

Tower - Anspruchsvolles Git-Tool für den Mac
"Tower" ist ein professioneller Git-Client für Mac OS X, der in Sachen Bedienkomfort und Funktionalität kaum Wünsche offenlässt.

Google Swiffy verwandelt Flash-Inhalte in HTML5
Wer sicherstellen will, dass sich Flash-Inhalte auch auf iOS-Plattformen betrachten lassen, sollte sich das Konverter-Tool "Swiffy" ansehen.

Cappuccino bringt Mac-Usability ins Web
Die jungen Entwickler hinter "Cappuccino" sind sehr ehrgeizig: Ein Web-Framework, bei dem man keinen HTML- beziehungsweise CSS-Code schreiben kann und sich mit dem DOM (Document Object Model) nicht auseinandersetzen muss, ist allein schon ein recht mutiger Ansatz. Dazu kommt noch eine selbst entwickelte Programmiersprache, Objective-J, die das Beste von Javascript und Objective-C vereinen soll.

Flotr2 - Interaktive Diagramme auf HTML5-Basis erstellen
Angeboten von der Softwareschmiede Humble Software bietet "Flotr2" einen einfachen Weg, dynamische und interaktive Diagramme in Web-Seiten und -Anwendungen zu integrieren.

MooTools - das objektorientierte Javascript-Framework
Wie wichtig die Rolle ist, die Javascript in der heutigen Web-Entwicklung spielt, spiegelt sich in der großen Zahl von Frameworks, Tools und Klassenbibliotheken wider, die die Arbeit mit der mächtigen Skriptsprache erleichtern und heute auf dem Markt zu finden sind.

Mobitest analysiert die Performance mobiler Websites
Mit "Mobitest" können Entwickler die Ladezeiten von mobilen Websites auf populären Smartphones und Tablets messen.

Ohne Programmierkenntnisse - Apps Marke Eigenbau
Die Entwicklung von Smartphone-Apps ist nicht gerade günstig. Wer eine tolle Idee für eine App hat, aber weder Programmierkenntnisse noch Geld für deren Umsetzung durch einen professionellen Entwickler besitzt, kann auf Tools zurückgreifen, die nach dem Baukastenprinzip arbeiten.

Mojito hilft bei der Entwicklung mobiler Web-Apps
Als erstes Entwickler-Tool im Rahmen der umfangreichen Initiative "Yahoo Cocktails" hat der Internet-Konzern Yahoo "Mojito" herausgebracht.

Socialize - Sharing-Funktionen in die eigene App integrieren
So gut wie jede Smartphone-App bietet den Nutzern die Möglichkeit, die Anwendung in den wichtigsten sozialen Netzwerken ihren Freunden und Kollegen zu empfehlen. Meistens steht dazu ein einfacher Button zur Verfügung, der den User nach Twitter, Facebook etc. weiterleitet.

RestKit - Solides Fundament für Cloud-basierende iOS-Apps
Bei der Entwicklung Web-basierender Apps fallen immer wieder die gleichen Aufgaben an. Ein typischer Use-Case sieht vor, dass vom Anwender erzeugte Daten validiert und via HTTP-Anfrage an den Server geschickt werden.

Flurry Analytics - Google Analytics für Apps
Welche Features werden am häufigsten verwendet? Wie oft wurde diese oder jene Ressource angeklickt? Welche Fehler treten in einem bestimmten Modul auf? App-Entwickler, die Antworten auf solche Fragen suchen, sind mit Flurry Analytics gut bedient.

Sproutcore - HTML5-Framework für moderne Web-Apps
Nutzer erwarten zunehmend, dass sich Applikationen im Browser genauso anfühlen wie Desktop-Anwendungen. Das ständige Warten auf Server-Daten stellt deshalb eine der größten Hürden für Web-Applikationen dar.

Jotform - Komplexe Web-Formulare einfach erstellen
Bei Jotform handelt es sich um einen Web-basierenden Wysiwyg-Formular-Wizard. Dieser ermöglicht es Web-Entwicklern wie Laien, optisch ansprechende und funktional anspruchsvolle Web-Formulare zu erstellen, und das in nur wenigen Schritten.

Bootstrap - Website-Vorlage von den Twitter-Entwicklern
Web-Entwickler erhalten mit Bootstrap eine professionelle HTML- und CSS-Vorlage, die als solides und flexibles Fundament für eigene Projekte dienen kann.

Modernizr hilft beim Einstieg in HTML5
Der neue Standard HTML5 bietet Programmierern und Designern Techniken und Funktionen, die sie sich lange gewünscht haben. Doch leider zögern noch viele, von den schönen neuen Features in eigenen Projekten Gebrauch zu machen.

Apache Wink - Einfache Rest-Services für Java
"Wink" ist ein junges Open-Source-Projekt der Apache Foundation, das Java-Entwicklern die einfache Implementierung von Web-Services im Rest-Style (Representational State Transfer) ermöglicht.

Aviary - Kostenloser Foto-Editor für Mobile- und Web-Apps
Die Softwareschmiede Aviary ist für zahlreiche innovative Online-Anwendungen im Bereich Multimedia bekannt. Die bei der Entwicklungsarbeit gesammelten Erfahrungen spiegeln sich in dem kostenlosen "Aviary"-Framework wider.

Three20 - Mächtige Open-Source-Bibliothek für iOS-Anwendungen
"Three20" ist eine quelloffene, erstklassige iOS-Bibliothek, die die Entwicklung nativer Anwendungen für iPhone und iPad vereinfachen und beschleunigen kann.

CForms - Mächtiges Formular-Plugin für Wordpress
Web-Formulare dürfen in so gut wie keinem Blog beziehungsweise keiner Website fehlen. Unter Wordpress-Nutzern sehr beliebt ist in diesem Bereich das kostenlose Tool "CForms". Damit lassen sich beliebig komplexe Formulare erstellen und auf einfache Weise in Blog-Einträge und Seiten integrieren.

Testflight vereinfacht das Testen von iOS-Apps
Entwickler, die ihre iOS-Apps von Kunden, Betatestern oder Kollegen testen lassen möchten, müssen sich einem aufwendigen Prozedere beugen.

Einfache Web-Formulare mit Google Docs
Ein großer Vorteil des Web ist die papierlose Erfassung von Formulardaten. Jeder Internet-User kennt diese Formulare (Webforms) im täglichen Umgang mit Ebay, Amazon, Facebook & Co.

Imgscalr - Bilder in Java einfach skalieren
Bei Web-Anwendungen muss man Bilder häufig skalieren, weil sie in einer Größe angezeigt werden sollen, in der sie eigentlich nicht vorliegen.

Kendo UI Mobile - HTML5-Framework für Smartphone-Apps
Vor allem im Mobile-Bereich müssen Softwarehersteller in eine elegante, intuitive und schöne Arbeitsoberfläche investieren. Hilfe verspricht hier das auf HTML5, CSS3 und Javascript basierende Mobile-Framework "Kendo UI Mobile" von dem amerikanischen Softwareunternehmen Telerik.

Applicasa - Hosting-Service für Backend-Systeme
Mit einem umfassenden Hosting-Service, der Backend-Systeme für Mobile-Anwendungen bereitstellt, versetzt "Applicasa" iOS-Entwickler in die Lage, sich voll und ganz auf ihre App zu konzentrieren.

Pencil Sketching - GUI-Skizzen in Firefox
"Pencil Sketching” eignet sich optimal dazu, schnell und unkompliziert GUI-Prototypen für Web-Anwendungen zu erstellen.

Firebug - ein Muss für Web-Entwickler
Zur Analyse und Optimierung von Web-Seiten hat sich das Firefox-Add-on "Firebug" als Standardwerkzeug für Web-Entwickler etabliert.

Mit Bugzilla Programmfehlern auf der Spur
Die Mozilla Foundation bietet mit "Bugzilla" ein nützliches Web-Tool zur zentralen Erfassung, Analyse und Verwaltung von Programmfehlern.

Xampp installiert Ihren Apache-Server
Ein Apache-Server mit Perl-, PHP- und MySQL-Unterstützung lässt sich nicht so einfach einrichten. Wer eine solche Umgebung lokal auf seinem Rechner braucht, der kann auf "Xampp" zurückgreifen, anstatt alles selber zu installieren.

Http-Anfragen bequem mit URL Decoder editieren
Mit dem "URL Decoder” können Web-Entwickler Http-Anfragen mit vielen Parametern in einer Übersichtstabelle visualisieren und schnell bearbeiten.

MediaElementPlayer - HTML5-Video für jeden Browser
Egal ob Internet Explorer, Firefox, Safari oder Chrome, ob auf dem PC, iPhone, iPad oder Android-Smartphone: Mit dem JavaScript-Framework "MediaElementPlayer" funktioniert HTML5-Video in jedem Browser und auf jedem Gerät.

Poedit hilft bei der Software-Lokalisierung
Bei der Lokalisierung von Software-Anwendungen werden oft Portable-Object-Dateien verwendet. Mit dem kostenlosen Tool "Poedit" lassen sie sich bequem bearbeiten.

Hurl - Web-APIs direkt im Browser testen
Web-Entwickler haben täglich mit Http-Anfragen zu tun, sei es bei der Implementierung eigener Server-Client-Anwendungen, bei der Arbeit mit Web-Services oder bei der Integration mit externen APIs (Application Programming Interface).

Ein Werkzeug zum Unit-Testen von JavaScript ist Buster.JS. Das Testmodul eignet sich für Browser und die serverseitige Open-Source-Plattform Node.js. Buster.JS unterstützt Tests mittels statischer HTML-Seiten, wie sie QUnit nutzt sowie das Testen von asynchronem Code wie Mocha. Darüber hinaus kann es wie JsTestDriver die Browser-Bedienung automatisieren. Das Tool verfügt somit über eine große Anzahl an Funktionen und ist dennoch einfach zu bedienen. Erfinder von Buster.JS ist Christian Johansen, der das Buch "Test-Driven JavaScript Development" geschrieben hat. Vom norwegischen Entwickler stammt auch das beliebte Stubbing- und Mocking-Framework Sinon.JS und das JavaScript-Werkzeug Juicer. Aktuell befindet sich Buster.JS noch im Beta-Stadium - die finale Version 1.0 ist für dieses Jahr geplant.

Tests auf dem Server

Test-Frameworks wie Buster.JS bieten die Möglichkeit, Anwendungen mit JavaScript-Code umfassend zu testen. Wenn das Entwicklungsziel die ablauffähige JavaScript-Software im Browser ist, kann als Framework "JsTestDriver" eingesetzt werden. Will man JavaScript-Software jedoch auch auf dem Server in Zusammenhang mit der Open-Source-Plattform "Node.js" ausführen, bietet "Buster.JS" einen vielversprechenden Ansatz. Das Tool liefert eine Testumgebung, in der JavaScript-Code in einer isolierten Umgebung durch unterschiedliche Browser automatisiert getestet wird. Dadurch erreicht man kurze Turn-around-Zeiten beginnend bei der Testerstellung über die Programmierung bis hin zur Ausführung.

Softwareentwickler schreiben üblicherweise Tests und starten dann einen Testserver, an dem sich die gewünschten, unterschiedlichen Browser oder Browserversionen anmelden. Der Testserver liefert eine Testkomponente an die Browser aus. Anschließend liefert das Framework ein Protokoll. Der Testdurchlauf lässt sich automatisch auswerten. Das gesamte Verfahren reiht sich in die Kette der automatisierten Entwicklungs- und Testwerkzeuge ein. Somit ist eine permanente Integration von Buster.JS in die Entwicklungsumgebung möglich.

Installation von Buster.JS

Buster.JS lässt sich relativ einfach installieren und konfigurieren. Da das Testprogramm ein Node.js-Modul ist, wird es zum Beispiel unter Linux über den Node Paket Manager mittels "npm install -g buster" installiert. Das klappt mittlerweile auch unter Windows - allerdings hakt Buster.JS hier an manchen Stellen. Eine vollständige Unterstützung ist erst für die Version 1.0 geplant. Nach erfolgreicher Installation muss Buster.JS mitgeteilt werden, wo sich die Quell- und Testdateien befinden und in welcher Umgebung die Tests ausgeführt werden sollen - ob im Browser oder mit Node.js. Die Konfiguration erfolgt in JavaScript.

Bei Buster.JS wird zwischen einer Konfigurationsdatei und den eigentlichen Konfigurationen (Konfigurationsgruppen) unterschieden. Eine Konfigurationsdatei kann dabei mehrere Konfigurationen enthalten. Das Modul exportiert deshalb eine Anordnung (Array) von Konfigurationsobjekten. Diese können sich gegenseitig sogar erweitern. Das ist ein Vorteil, der später genutzt werden kann, um Tests sowohl im Browser als auch mit Node.js auszuführen.

Fazit: JavaScript berücksichtigen

Ein Trugschluss ist, dass nur wenig JavaScript in Anwendungen vorhanden ist und deshalb ein Testbereich ignoriert werden kann. Auch kleine JavaScript-Snippets können fehlerhaft sein und sich auf den verschiedenen Plattformen unterschiedlich verhalten. Es lohnt sich darüber nachzudenken, wie man als Entwickler mit bestehenden, sich in Wartung und Weiterentwicklung befindlichen Anwendungen umgehen soll. Sie enthalten mit zunehmender Lebensdauer mehr und mehr gewachsene Strukturen. Aus Kostengründen müssen Anwendungsentwickler bei Design-Entscheidungen häufig Kompromisse eingehen, ohne vorab an unerwünschte Auswüchse zu denken. Die Neigung zu diesen Kompromissen ist umso höher, je unklarer das Anwendungsverständnis ist und je weniger sicher ein Entwickler sein kann, ob die von ihm vorgenommenen Veränderungen einen negativen Effekt haben.

Hier schließt sich der Kreis: Liegen nach der Entwicklung Tests vor, kann das Re-Engineering mit größerem Vertrauen in die Anwendung ausgeführt werden. Das beschleunigt den Prozess und sichert die Qualität. Durch den Einsatz von modernen Frameworks wie Buster.JS lassen sich weite Teile der Anwendungsentwicklung abdecken. So sind Softwareentwickler in der Lage, die Qualität der Software zu verbessern. (tw)