Aber eben lief das doch noch! HTML5 Testing mit Jasmine BDD

Mit einer HTML5-Anwendung können gleichzeitig verschiedenste klassische und mobile Plattformen erreicht werden. Doch wie testet man diese modularen Anwendungen mit hohem JavaScript-Anteil? Für den Test bietet sich Jasmine als JavaScript-basiertes Test-Framework an.

Transcript

1. Aber eben lief das doch noch! HTML5 Testing mit Jasmine BDD Alexander Schwartz Herbstcampus 2013 / 3. September 2013 2 © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
2. 3 Was ich vorhabe 1. Worum es geht 2. Fachlicher Einstieg in das Beispiel 3. Testen mit Jasmine 4. Verwendung von Jasmine mit Sinon.JS 5. Ausführung im Browser und in Continuous Integration 6. Debugging von JavaScript-Tests 7. Zusammenfassung © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
3. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 4 Worum es hier geht • HTML als Seitenbeschreibung • CSS für ansprechendes (responsive) Design • Widget z. B. via jQueryUI + Plugins • Clientlogik via JavaScript • Strukturierung mit Javascript MV*-Frameworks (z. B. KnockoutJS) • Modularisierung und Nachladen von Resourcen (z. B. requireJS) • Kommunikation via REST/JSON ideal für JavaScript • Verschiedene Implementierungen möglich • JAX-RS 1.0 / JEE 6 Browser als Client-Plattform REST für Backend Services Automatisiertes Testen der HTML+JavaScript Client-Plattform
4. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 5 Mein Sponsor und Arbeitgeber 1980 gegründet mehr als 4000 Kollegen 9 Branchen 540 Mio € Umsatz 2012 23 Länder in 13 Städten in Deutschland präsent msg systems ag
5. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 6 Wer ich bin Alexander Schwartz Lead IT Consultant im GB Travel und Logistics 10 Jahre Java 7 Jahre PL/SQL 7 Jahre Absatzfinanzierung 3,5 Jahre Direktbank 1 Frau 2 Kinder 287 gefundene Geocaches
6. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 7 User Story: „Nutzer möchte die Sichtung eines Schiffes erfassen, um später sehen zu können, ob auch andere dieses Schiff gesehen haben. Hierzu erfasst er Schifftstyp, Datum, Zeitzone und eine Notiz.“ Die heutige Aufgabe Online-Datenbank für Schiffsichtungen Garantiert kein Bezug zu einem Kundenprojekt! https://github.com/ahus1/rest-samples
7. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 8 Wie´s für den Kunden aussieht Ein erster Blick auf die Anwendung
8. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 9 Unser Wegweiser • Darstellung User-Interface • Interaktion mit dem Nutzer V View • Datenhaltung im Client • Bindung an den View M View Model • Kommunikation zwischen Server/Client • Besteht aus server- und clientseitigem Teil C Communication • Fachliche Business-Logik • Greift auf Persistenz zu B Business Services • Datenhaltung und Persistenz P Persistence Mit JavaScript den kompletten Client-Stack testen Client Server
9. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 10 Automatisiertes Testen Client Server Verschiedene Testframeworks decken verschiedene Bereiche ab V M C B P Jasmine, Sinon Selenium IDE Selenium RC Mock oder echt? Mock oder echt? geringe Komplexität hohe Komplexität
10. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 11 Jasmine Steckbrief Jasmine ist ein JavaScript Testframework http://pivotal.github.io/jasmine/ describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); }); Test Suite Test Case Test Code mit Matcher Behaviour Driven Development (BDD) Testing: Erstelle eine strukturierte Beschreibung des beobachtbaren Verhaltens der Software
11. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 12 Umgesetzt mit KnockoutJS Test – Model Only Client Server Prüfen, ob das Model sich wie beschrieben verhält V // menu.js var Menu = function() { // Data var self = this; self.folders = ko.observableArray([ { name : 'Schiffstypen', link : '#/vessel/main' }, { name : 'Sichtungen', link : '#/sighting/main' }, { name : 'Zeitzonen', link : '#/timezone/main' } ]); self.folder = ko.observable(); … <!-- index.html --> <ul class="nav" data-bind="foreach: menu.folders"> <li data-bind="css: { active: $data.link == $parent.menu.folder() }, attr: {id: $data.link} "><a data-bind="text: $data.name, attr: {href: $data.link}"></a></li> </ul> M Demo & Live Coding
12. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 13 View-Model Client Server Ein Menü anzeigen – Trennung von View und View Model describe("Menu", function() { it("has three menu items", function() { expect(menu.folders().length).toBe(3); }); it("has first item named 'Schiffstypen'", function() { expect(menu.folders()[0].name()).toBe("Schiffstypen"); }); it("can be switched to English", function() { // when runs(function() { menu.language("en"); }); // then waitsFor(function() { return menu.folders()[0].name(); }, "translation to change to 'Vessels'", 750); }); … M
13. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 14 View-Model Client Server Interaktion des Models mit dem Browser describe("Link Interaction", function() { beforeEach(function() { // reset to start hash hasher.setHash(""); }); it("knowns the active entry", function() { // given var firstEntry = menu.folders()[0]; var secondEntry = menu.folders()[1]; expect(menu.isCurrentSubfolder(firstEntry.link)).toBe(false); // when hasher.setHash("vessel/main"); // then expect(menu.isCurrentSubfolder(firstEntry.link)).toBeTruthy(); expect(menu.isCurrentSubfolder(secondEntry.link)).toBeFalsy(); }); afterEach(function() { // reset to start hash hasher.setHash(""); }); }); M
14. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 15 View - View-Model Client Server Interaktion mit dem View describe("Manage Timezones Real Backend", function() { it("shows a list of two timezones at the start", function() { expect($("#timezoneList")).toBeVisible(); expect($("#timezoneList > tbody > tr")[0]).toContainHtml( "Europe/Berlin"); }); it("has the first menu item highlighted at the start", function() { expect($("#subfolder0")).toHaveClass('active'); }); … M V • Zugriff via jQuery auf die aktuelle Seite • Werte kommen hier noch aus dem Backend C B P Demo & Live Coding
15. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 16 View - View-Model Client Server Interaktion mit dem View beforeEach(function() { expect($("#timezoneList > tbody > tr").length).toBe(1); expect($("a[name=edit]").length).toBe(1); $("a[name=edit]").first().click(); waitsFor(function() { return $("#timezoneName").is(":visible"); }, "the time zone name should appear", 5000); }); it("show a timezone on editing", function() { expect($("#timezoneName")).toBeVisible(); expect($("#timezoneName")).toHaveValue("Europe/Berlin"); }); M V • Benutzerinteraktionen werden via jQuery ausgelöst C B P
16. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 17 • Abfangen von JavaScript-Zugriffen auf den Server werden abgefangen • Antworten können simuliert werden Mocking des Backends Client Server Mit Sinon.JS das REST-Backend simulieren V M // create a fake server with some responses server = sinon.fakeServer.create(); var timezoneList = ko.toJSON(getJSONFixture('timezoneList.json')); server.respondWith("GET", "rest/timezone", [ 200, { "Content-Type" : "application/json" }, timezoneList ]); server.respondWith("DELETE", "rest/timezone/1", [ 204, null, "" ]); C Demo & Live Coding
17. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 18 • Asynchrone Aufrufe werden eingefroren • Antworten und deren Verarbeitung werden zu einem definierten Zeitpunkt ausgelöst • Übersichtlicher und robuster Testfall, da Warteschleifen entfallen Mocking des Backends Client Server Mit Sinon.JS asynchrone Verarbeitung synchronisieren V M it("removes a timezone when clicking on delete", function() { // starting with two timezones expect($("#timezoneList > tbody > tr").length).toBe(2); // click on the first one $('#timezoneList a[name="delete"]').first().click(); server.respond(); // expect only the second to be left over expect($("#timezoneList > tbody > tr").length).toBe(1); expect($("#timezoneList > tbody > tr")[0]).toContainHtml( "Europe/London"); }); C
18. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 19 • 22 Tests • 2,6 s Gesamtlaufzeit • Cross-Browser • Unabhängig vom Backend • Dokumentation aus fachlicher Sicht • Beliebige Schachtelung • Chrome etwas schneller als Firefox Jasmine ist schnell und einfach Client Server Ein Browser-Reload lässt die Tests erneut laufen C V M
19. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 20 • Integration in CI Server möglich • Jasmine Tests erstellen XML entsprechend JUnit (für Jenkins, Eclipse et al) $ phantomjs phantomjs-testrunner.js \ http://localhost:8080/rest-samples/?spec= Testen in der Dunkelverarbeitung Client Server Mit PhantomJS auf der Kommandozeile testen C V M
20. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 21 • Verbinden mit einer laufenden Browser-Instanz • Breakpoint setzen, Variablen sehen • Hot Code Replacement Debugging mit Chome Client Server Wie Java und ein bisschen mehr? V M
21. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 22 Debugging mit Chome
22. © msg systems ag, 3. September 2013 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz 23 • Testfälle können genauso wie die Anwendung modular sein • Ausführung ist schnell • Turnaroundzeiten sind kurz • JavaScript Entwickler können brauchen keine neuen Technologien kennenzulernen • Tests sind automatisierbar, auch in Continuous Integration Zusammenfassung Strukturierte Tests in JavaScript sind möglich
23. www.msg-systems.com Vielen Dank für Ihre Aufmerksamkeit msg systems ag Mergenthalerallee 73 - 75 65760 Eschborn Telefon: +49 (171) 5 62 57 67 E-Mail: Alexander.Schwartz@msg-systems.com www.msg-systems.com 24 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz © msg systems ag, 3. September 2013