Moderne Webanwendungen mit Node.js und Express.js

Webinterface-Tests mit Mocha

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Browser dargestellte lassen sich mit Mocha einfach testen.

Transkript

Einer der wichtigsten Bestandteile des Software-Entwicklungprozessses ist das korrekte Testen und Sicherstellen der Funktionalität der Anwendung. Das ist auch für Webanwendungen nicht weniger relevant als für Desktopanwendungen. Herkömmlicherweise gelten Websites als schwierig zu testen, da Entwicklungs- und Ausführungsumgebung sich signifikant unterscheiden. Mithilfe von Website-Tests und den Frameworks Mocha und Chai, die ich Ihnen nun vorstellen möchte, gestaltet sich das Ganze nicht so schwierig. Als Erstes muss ich nun die beiden Bibliotheken, Mocha und Chai, in mein Projekt installieren. Hierfür muss ich darauf achten, dass entsprechend "save-dev" angegeben ist, da es sich dabei um Abhängigkeiten handelt, die nicht zur Laufzeit relevant sind, sondern nur während der Entwicklung. Da ich beide dieser Bibliotheken später auch in meinem Webbrowser benötige, füge ich sie nun zu meinen statischen Dateien hinzu. In einem Ordner mit dem Titel "external", der Dateien bezeichnet, die ich selbst nicht verwalte. Ich gehe nun in meinen Ordner "node_modules", klappe entsprechend Chai auf, und kopiere die Datei "chai.js" in meinen Ordner "external". Das Gleiche mache ich mit Mocha. Hier wähle ich "mocha.css" und "mocha.js". Als Erstes muss ich dafür sorgen, dass diese Dateien nun in meinem Layout eingebunden sind. Aus diesem Grund öffne ich die "layout.jade" Datei, und füge an dieser Stelle das Mocha-Stylesheet dazu. Ich möchte aber nicht, dass nun dauerhaft das Mocha-Stylesheet in meine Seite eingebunden wird, aus diesem Grund bilde ich das Ganze mit einer Bedingung ab. "if showTests", wenn diese Variable definiert ist, und "true", dann möchte ich, dass das Stylesheet angegeben wird. Als Nächstes muss ich noch die Ergebnisse von Mocha selbst einbinden. Ich gehe nun unterhalb der Navigation an eine Stelle, in der ich wieder nur dann etwas einbinde, wenn tatsächlich "showTests" definiert ist, Als Nächstes definiere ich das div-Element, das Mocha später beinhaltet, also die Ergebnisse von Mocha, und referenziere gleich die JavaScript-Dateien. Als Nächstes benötige ich noch einen kleinen JavaScript-Block. der es mir später leichter macht, mit beiden zu arbeiten. Der Referenzblock "script." bedeutet, alles, das hier an Logik steht, als JavaScript-Block definiert wird. Mit "mocha.ui" stelle ich auf "test driven development", und mit dem Keyword "assert" nehme ich entsprechend aus der Chai-Bibliothek die Funktion "assert". Als Nächstes binde ich meine tatsächlichen Tests ein, die ich noch nicht erstellt habe. Ich möchte diese unter dem Ordner "tests" in "global.js" definieren. Dabei handelt es sich um Tests, die immer gelten müssen. Da ich unter Umständen aber auch Tests habe, die bspw. nur für die Seite "posts" oder die Seite "index" relevant sind, führe ich eine zusätzliche Variable ein, mit der Bezeichnung "testScript". Sobald diese definiert ist, binde ich entsprechend das "testScript" als "source" ein. Wenn all diese Sachen definiert sind, muss ich Mocha lediglich noch in Gang setzen mit einem script block, und "mocha.run". Als Nächstes lege ich im "public" Ordner meine Testfälle an. Zunächst möchte ich eine JavaScript-Datei für alle globalen Testfälle, und danach möchte ich eine JavaScript-Datei, die lediglich die "posts" Seite testet. Für die globalen Testfälle wäre es nun sehr interessant, zu überprüfen, ob der Titel der Website korrekt ist. Dafür definiere ich zunächst eine "suite", eine Test-Suite, und gebe ihr eine Bezeichung, bspw. handelt es sich hierbei um alle globalen Tests. Ich definiere nun eine Funktion, und innerhalb dieser Funktion kann ich nun verschiedene Testfälle definieren. Bspw. der Testfall "page title has to be present". Um das sicherzustellen, kann ich nun innerhalb des Kontexts von JavaScript im "document object model" arbeiten, wie ich es gewohnt bin. Ich nutze hier die vorher definierte Funktion "assert". Mit "assert" setze ich voraus, dass es einen "document title" gibt, und dass dieser "document title" mit einer "regular expression" übereinstimmt, die aussagt, dass er immer mit dem Wort "Bootstrap" beginnen muss. In der "posts.js" gehe ich ähnlich vor. Ich lege eine "suite" an, für die "Posts page test", und teste dann, ob der erste Artikel existiert. Ich suche mit jQuery nach einem Element "h4", das folgenden Text beinhaltet: "My first article" und dessen Menge muss größer sein als 0. Aktuell ist der Posts page noch nicht bekannt, das dieser Test auszuführen ist, das bedeutet, ich muss die testScript-Variable noch innerhalb der "posts route" definieren. Nichts leichter als das. Ich führe den Bezeichner "testScript" ein, der auf den jeweiligen Test-File verlinkt. Zu guter Letzt muss ich noch die Möglichkeit schaffen, Testfälle zu aktivieren mit der Variable "showTests". Dafür begebe ich mich in die "www.js", und führe hierfür eine neue Middleware ein. Diese behandelt alle Anfragen, und immer dann, wenn "t" als query-Parameter auf 1 gesetzt ist, wird entsprechend "showTests" aktiviert. Führe ich meine Webanwendung nun aus, hat sich soweit nichts verändert. Ich befinde mich nun im Index und wenn ich mit "t=1" die Testfälle aktiviere, sehe ich, dass die globalen Tests ausgeführt worden sind, und das "page title has to be present" entsprechend funktioniert hat. Wenn ich nun auf die Posts-Seite gehe, so sind die Testfälle standardmäßig auch nicht aktiviert. Füge ich "t=1" hinzu, sehe ich bei genauerem Scrollen, dass die Posts page tests ausgeführt sind. Aufgrund des CSS-Layouts empfiehlt es sich, die Mocha-Tests etwas prominenter zu platzieren als unterhalb der Navigation. In den letzten Minuten habe ich also mit Ihnen Website Tests etabliert, die absolut nur im Browser stattfinden. Die Überprüfung kann die Zusammensetzung der Elemente auf der Website feststellen, und auf Abruf entsprechend eingebunden werden. Mit dem Mocha Test-Framework wurde diese Darstellung auch auf der Seite angezeigt, sodass feststellbar war, welche test cases funktionieren und welche nicht. Die Bibliothek Chai war dafür notwendig, dass man mit Ausdrücken wie "assert" arbeiten kann, und bietet damit die ideale Ergänzung zum Mocha Test-Framework.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!