http://www.opitz-consulting.com/go/3-4-898 In Zeiten von Single-Page Web Apps wird es immer wichtiger, das UI zu testen. Die Tests sollen in JavaScript implementiert und mit der App im Browser ausgeführt werden. Dies erlaubt z. B. das Mocking des Backends. Die Tests werden damit robuster und schneller. Die Referenten stellen die entstehenden Herausforderungen vor und erläutern Lösungen, die sie für das Testframeworks Jasmine-UI gewählt haben. Stefan Scheidt und Tobias Bosch, Solution Architects und Mobile-Web-Experten bei OPITZ CONSULTING, präsentierten diese Session am 04.September 2012 bei der Mobile TechCon in Frankfurt a. M. -- Zukunft?! Wir arbeiten dran. Mobile Solutions by OPITZ CONSULTING http://www.opitz-consulting.com/go/3-4-898 Über uns: Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen. Über unsere IT-Beratung: http://www.opitz-consulting.com/go/3-8-10 Unser Leistungsangebot: http://www.opitz-consulting.com/go/3-8-874 Karriere bei OPITZ CONSULTING: http://www.opitz-consulting.com/go/3-8-5

1. Tobias Bosch | Stefan Scheidt
OPITZ CONSULTING GmbH
Oberflächentests für
JavaScript-Web-Apps

2. Wer sind wir?
tobias.bosch@opitz-consulting.com
(@tigbro)
stefan.scheidt@opitz-consulting.com
(@stefanscheidt)

3. Mission Märkte
Wir entwickeln gemeinsam mit allen  Branchenübergreifend
Branchen Lösungen, die dazu führen, dass  Über 600 Kunden
sich diese Organisationen besser entwickeln 29%
als ihr Wettbewerb. 29%
Handel / Logistik /
Dienstleistungen
Industrie / Versorger /
Unsere Dienstleistung erfolgt Telekommunikation
partnerschaftlich und ist auf eine langjährige 42%
Zusammenarbeit angelegt. Öffentliche Auftraggeber / Banken und
Versicherungen / Vereine und Verbände
Leistungsangebot Eckdaten
 Business IT Alignment  Gründung 1990
 Business Information Management  400 Mitarbeiter
 Business Process Management  8 Standorte
 Anwendungsentwicklung
 SOA und System-Integration
 IT-Infrastruktur-Management
<Präsentationstitel – bitte im Folienmaster ändern> © OPITZ CONSULTING GmbH 2011 Seite 3

5. Wer sind Sie?

6. In diesem Vortrag geht‘s um ...
... automatisierte UI-Tests
... für JavaScript-Web-Apps
... geschrieben von Entwicklern

7. Warum testen?

8. Warum JavaScript-Code testen?

9. Testgetriebene Entwicklung

10. Test First

11. Red – Green – Refactor

12. Clean Code

13. Evolutionäres Design

14. Die UI testen ...

15. Architektur

16. "Single Page Web App"
Browser Server
Model
View Data Backend
Controller

17. Wie kann man das Verhalten der
UI in diesem Kontext testen?

18. Jasmine-UI
https://github.com/tigbro/jasmine-ui

19. Steckbrief
Erweiterung des JS-Test-Framework Jasmine
Ermöglicht das Laden, Instrumentieren
und Testen einer Web-App im Browser
Unterstützt insbesondere das Testen
von asynchronem Verhalten

20. Specs HTML Session Storage Ergebnisse
analysieren anzeigen
Skripte: App Skripte:
laden
jasmine-ui.js jasmine-ui.js
jasmine-html.js jasmine-html.js
"uiSpec.js" Ergebnisse "uiSpec.js"
sammeln
UiSpecRunner.html UiSpecRunner.html
Skripte:
"app.js"
Tests "uiSpec.js"
ausführen
index.html

21. Kein iframe
"Step into" App-Code aus Test-Code möglich
Die selben Prototypes in App- und Test-Code
Test-Code kann Mocks "einweben"

22. Testen der UI in Isolation
Jasmine-UI erlaubt es, die Kommunikation mit
dem Backend durch Mocks zu ersetzen
Dies macht die UI-Tests schnell und robust
Erlaubt die Simulation von Systemzuständen
Das ersetzt aber keine "End-to-End"-Tests!

23. Demo

24. Testausführung automatisieren

25. JsTestDriver
http://code.google.com/p/js-test-driver/

26. Jasmine UI
unterstützt
JsTestDriver

27. Demo

28. Ausblick
Unterstützung für weitere Test-Runner
Laden und Instrumentieren werden
vom Testframework separiert
Integration mit weiteren Test-Frameworks

29. Zurzeit: describeUi
describeUi('todo', '/todo-mobile', function() {
// ...
});

30. Zukünftig: jasmineui.inject
jasmineui.inject('/todo-mobile', function() {
describe('todo', function() {
// ...
});
});

31. Zukünftig: jasmineui.inject
jasmineui.inject('/todo-mobile', ['someScript.js'],
function() {
describe('todo', function() {
// ...
});
});

32. Fazit
Jasmine UI unterstützt das Testen
der UI mit JavaScript
Es ermöglicht insbesondere das Testen
der UI in Isolation

33. Fazit
Testen Sie Ihren Code!
Testen Sie insbesondere Ihren JavaScript-Code!
Testen Sie auch das Verhalten der UI!
Sie haben keine Ausrede ... 

34. Making tin soldiers 3
Andrei! (http://www.flickr.com/photos/andrein/)
Red Light – Green Light
MoToMo (http://www.flickr.com/photos/90155419@N00/)
I'm not it
erix! (http://www.flickr.com/photos/erix/)
In the hive 11: nectar and pollen
Max xx (http://www.flickr.com/photos/max_westby/)
Smiley Keyboard
~Prescott (http://www.flickr.com/photos/ppym1/)
bios [bible]
Gastev (http://www.flickr.com/photos/gastev/)

35. Vielen Dank
für Ihr Interesse!
@tigbro
@stefanscheidt

36. www.opitz-consulting.com/go_mobile