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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

8
Wie´s für den Kunden aussieht
Ein erster Blick auf die Anwendung

View Slide

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

View Slide

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

View Slide

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

View Slide

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();
…

data-bind="text: $data.name, attr: {href:
$data.link}">

M
Demo &
Live
Coding

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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
// 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")[0]).toContainHtml(
"Europe/London");
});
C

View Slide

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

View Slide

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

View Slide

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

View Slide

22
Debugging mit Chome

View Slide

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

View Slide

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: [email protected]
www.msg-systems.com
24 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz © msg systems ag, 3. September 2013

View Slide

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

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

Alexander Schwartz

More Decks by Alexander Schwartz

Other Decks in Technology

Featured

Transcript