Tobias Bosch | Stefan Scheidt OPITZ CONSULTING GmbH  Oberflächentests für JavaScript-Web-Apps
Wer sind wir?tobias.bosch@opitz-consulting.com            (@tigbro)stefan.scheidt@opitz-consulting.com          (@stefansc...
Mission                                                                  MärkteWir entwickeln gemeinsam mit allen         ...
Wer sind Sie?
In diesem Vortrag geht‘s um ...    ... automatisierte UI-Tests   ... für JavaScript-Web-Apps... geschrieben von Entwicklern
Warum testen?
Warum JavaScript-Code testen?
Testgetriebene Entwicklung
Test First
Red – Green – Refactor
Clean Code
Evolutionäres Design
Die UI testen ...
Architektur
"Single Page Web App"  Browser             Server   Model    View       Data   Backend  Controller
Wie kann man das Verhalten der UI in diesem Kontext testen?
Jasmine-UIhttps://github.com/tigbro/jasmine-ui
SteckbriefErweiterung des JS-Test-Framework Jasmine  Ermöglicht das Laden, Instrumentieren  und Testen einer Web-App im Br...
Specs              HTML Session Storage   Ergebnisse       analysieren                                    anzeigen    Skri...
Kein iframe"Step into" App-Code aus Test-Code möglichDie selben Prototypes in App- und Test-Code    Test-Code kann Mocks "...
Testen der UI in IsolationJasmine-UI erlaubt es, die Kommunikation mit   dem Backend durch Mocks zu ersetzen Dies macht di...
Demo
Testausführung automatisieren
JsTestDriverhttp://code.google.com/p/js-test-driver/
Jasmine UIunterstütztJsTestDriver
Demo
Ausblick Unterstützung für weitere Test-Runner   Laden und Instrumentieren werden      vom Testframework separiertIntegrat...
Zurzeit: describeUidescribeUi(todo, /todo-mobile, function() {    // ...});
Zukünftig: jasmineui.injectjasmineui.inject(/todo-mobile, function() {         describe(todo, function() {             // ...
Zukünftig: jasmineui.injectjasmineui.inject(/todo-mobile, [someScript.js],    function() {         describe(todo, function...
Fazit  Jasmine UI unterstützt das Testen        der UI mit JavaScriptEs ermöglicht insbesondere das Testen          der UI...
Fazit            Testen Sie Ihren Code!Testen Sie insbesondere Ihren JavaScript-Code!    Testen Sie auch das Verhalten der...
Making tin soldiers 3    Andrei! (http://www.flickr.com/photos/andrein/)                Red Light – Green LightMoToMo (htt...
Vielen Dankfür Ihr Interesse!     @tigbro  @stefanscheidt
www.opitz-consulting.com/go_mobile
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt, Tobias Bosch
Nächste SlideShare
Wird geladen in …5
×

Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt, Tobias Bosch

1.492 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.492
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
10
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt, Tobias Bosch

  1. 1. Tobias Bosch | Stefan Scheidt OPITZ CONSULTING GmbH Oberflächentests für JavaScript-Web-Apps
  2. 2. Wer sind wir?tobias.bosch@opitz-consulting.com (@tigbro)stefan.scheidt@opitz-consulting.com (@stefanscheidt)
  3. 3. Mission MärkteWir entwickeln gemeinsam mit allen  BranchenübergreifendBranchen Lösungen, die dazu führen, dass  Über 600 Kundensich diese Organisationen besser entwickeln 29%als ihr Wettbewerb. 29% Handel / Logistik / Dienstleistungen Industrie / Versorger /Unsere Dienstleistung erfolgt Telekommunikationpartnerschaftlich und ist auf eine langjährige 42%Zusammenarbeit angelegt. Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und VerbändeLeistungsangebot 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
  4. 4. Wer sind Sie?
  5. 5. In diesem Vortrag geht‘s um ... ... automatisierte UI-Tests ... für JavaScript-Web-Apps... geschrieben von Entwicklern
  6. 6. Warum testen?
  7. 7. Warum JavaScript-Code testen?
  8. 8. Testgetriebene Entwicklung
  9. 9. Test First
  10. 10. Red – Green – Refactor
  11. 11. Clean Code
  12. 12. Evolutionäres Design
  13. 13. Die UI testen ...
  14. 14. Architektur
  15. 15. "Single Page Web App" Browser Server Model View Data Backend Controller
  16. 16. Wie kann man das Verhalten der UI in diesem Kontext testen?
  17. 17. Jasmine-UIhttps://github.com/tigbro/jasmine-ui
  18. 18. SteckbriefErweiterung 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
  19. 19. Specs HTML Session Storage Ergebnisse analysieren anzeigen Skripte: App Skripte: ladenjasmine-ui.js jasmine-ui.jsjasmine-html.js jasmine-html.js"uiSpec.js" Ergebnisse "uiSpec.js" sammelnUiSpecRunner.html UiSpecRunner.html Skripte: "app.js" Tests "uiSpec.js" ausführen index.html
  20. 20. Kein iframe"Step into" App-Code aus Test-Code möglichDie selben Prototypes in App- und Test-Code Test-Code kann Mocks "einweben"
  21. 21. Testen der UI in IsolationJasmine-UI erlaubt es, die Kommunikation mit dem Backend durch Mocks zu ersetzen Dies macht die UI-Tests schnell und robustErlaubt die Simulation von Systemzuständen Das ersetzt aber keine "End-to-End"-Tests!
  22. 22. Demo
  23. 23. Testausführung automatisieren
  24. 24. JsTestDriverhttp://code.google.com/p/js-test-driver/
  25. 25. Jasmine UIunterstütztJsTestDriver
  26. 26. Demo
  27. 27. Ausblick Unterstützung für weitere Test-Runner Laden und Instrumentieren werden vom Testframework separiertIntegration mit weiteren Test-Frameworks
  28. 28. Zurzeit: describeUidescribeUi(todo, /todo-mobile, function() { // ...});
  29. 29. Zukünftig: jasmineui.injectjasmineui.inject(/todo-mobile, function() { describe(todo, function() { // ... }); });
  30. 30. Zukünftig: jasmineui.injectjasmineui.inject(/todo-mobile, [someScript.js], function() { describe(todo, function() { // ... }); });
  31. 31. Fazit Jasmine UI unterstützt das Testen der UI mit JavaScriptEs ermöglicht insbesondere das Testen der UI in Isolation
  32. 32. Fazit Testen Sie Ihren Code!Testen Sie insbesondere Ihren JavaScript-Code! Testen Sie auch das Verhalten der UI! Sie haben keine Ausrede ... 
  33. 33. Making tin soldiers 3 Andrei! (http://www.flickr.com/photos/andrein/) Red Light – Green LightMoToMo (http://www.flickr.com/photos/90155419@N00/) Im 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/)
  34. 34. Vielen Dankfür Ihr Interesse! @tigbro @stefanscheidt
  35. 35. www.opitz-consulting.com/go_mobile

×