Your SlideShare is downloading. ×
0
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Testdriven javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Testdriven javascript

446

Published on

Talk von Martin Ru

Talk von Martin Ru

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
446
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TESTDRIVEN JAVASCRIPT DEVELOPMENTMonday, October 15, 12
  • 2. WER BIN ICH? • Sebastian Springer • 29 • Dipl. Inf. (FH) • Developer @ MayflowerMonday, October 15, 12
  • 3. MARTIN RUPRECHT • Martin Ruprecht • 34 • Dipl. Ing. (FH) • Developer @ MayflowerMonday, October 15, 12
  • 4. WER SEID IHR?Monday, October 15, 12
  • 5. AGENDA • Was ist ein Unittest? • Welche Testframeworks gibt es? • Wie funktioniert TDD? • Was sind Spies, Stubs und MocksMonday, October 15, 12
  • 6. LET’S GOMonday, October 15, 12
  • 7. GRUNDLAGENMonday, October 15, 12
  • 8. WAS SIND UNITTESTS?Monday, October 15, 12
  • 9. FEEDBACK • klar, unmittelbar und wiederkehrend • je schneller / früher, umso weniger Fehler • weniger böse ÜberraschungenMonday, October 15, 12
  • 10. DOKUMENTATION • Prüfen nicht nur Funktionalität • Dokumentieren die Verwendung von SchnittstellenMonday, October 15, 12
  • 11. BASIS FÜR CONTINUOUS INTEGRATIONMonday, October 15, 12
  • 12. ANFORDERUNGEN AN UNITTESTSMonday, October 15, 12
  • 13. ANFORDERUNGEN • Isoliert • Nur ein Testfall • Automatisiert • Kurz & verständlich • Hohe Qualität • Nur relevanter Code • SchnellMonday, October 15, 12
  • 14. ISOLIERT • Keine Abhängigkeiten zwischen den Tests • Keine Abhängigkeiten zu anderen Systemen • Beeinflussen sich nicht gegenseitig (Fehlschläge) • Reihenfolge ist nicht relevant • Müssen ein sauberes System hinterlassenMonday, October 15, 12
  • 15. NUR EIN TESTFALL • Nur eine logische Einheit • Ein Test schlägt nicht aus verschiedenen Grunden fehlMonday, October 15, 12
  • 16. AUTOMATISIERT • Keine Nutzerinteraktion • Durchläufe werden automatisiert gestartet • Lokale und globale AusführungMonday, October 15, 12
  • 17. KURZ & VERSTÄNDLICH • Übersichtlich • Dokumentierend • Wartungsfreundlich • Nicht unnötig komplexMonday, October 15, 12
  • 18. HOHE QUALITÄT • Langlebige Tests • Gleiche Qualitätsmaßstäbe wie an normalen Code • Wartbarkeit • ErweiterbarkeitMonday, October 15, 12
  • 19. NUR RELEVANTER CODE • Ziel ist nicht 100% Coverage • Keine Getter & Setter Testen • Kosten-Nutzen-Relation • Keine Software-Prototypen testenMonday, October 15, 12
  • 20. “Tests, die lange laufen, werden nicht oft ausgeführt” Kent BeckMonday, October 15, 12
  • 21. SCHNELL • Langsame Tests - ein Teufelskreis: • Tests werden nicht ausgefüht, • Funktionalität wird nicht geprüft, • Qualität leidet!Monday, October 15, 12
  • 22. WIE SCHREIBE ICH EINEN TEST? • 3A - Vorgehen beim Schreiben von Tests: • Arrange: Erstelle die Objekte • Act: Interagiere mit ihnen • Assert: Prüfe das ErgebnisMonday, October 15, 12
  • 23. UNITTESTS FÜR JAVASCRIPT?Monday, October 15, 12
  • 24. FRAMEWORKSMonday, October 15, 12
  • 25. Sinon.js FRAMEWORKSMonday, October 15, 12
  • 26. jsunit Sinon.js FRAMEWORKSMonday, October 15, 12
  • 27. jsunit Sinon.js FRAMEWORKS dohMonday, October 15, 12
  • 28. jsunit Sinon.js FRAMEWORKS JS Test Driver dohMonday, October 15, 12
  • 29. jsunit qunit Sinon.js FRAMEWORKS JS Test Driver dohMonday, October 15, 12
  • 30. jsunit qunit Sinon.js FRAMEWORKS Jasmine JS Test Driver dohMonday, October 15, 12
  • 31. jsunit qunit Siesta Sinon.js FRAMEWORKS Jasmine JS Test Driver dohMonday, October 15, 12
  • 32. QUNITMonday, October 15, 12
  • 33. QUNIT • http://qunitjs.com/ • Testframework von jQuery • Standalone Browser Testing • Integration in IDE und CIMonday, October 15, 12
  • 34. QUNIT - STRUKTUR • qunit.js • qunit.css • index.html • test.jsMonday, October 15, 12
  • 35. QUNIT - INDEX.HTMLMonday, October 15, 12
  • 36. QUNIT - TEST.JSMonday, October 15, 12
  • 37. QUNIT - RESULTATMonday, October 15, 12
  • 38. QUNIT - ASSERTS • ok() • equal() • strictEqual() • deepEqual() • not...Equal()Monday, October 15, 12
  • 39. Monday, October 15, 12
  • 40. JASMINE • http://pivotal.github.com/jasmine/ • Unabhängiges Testframework • BDD in Javascript • Standalone Browser Testing • Integration in IDE und CI • Aktuell der defacto StandardMonday, October 15, 12
  • 41. JASMINE - STRUKTUR • jasmine.js • jasmine.css • jasmine-html.js • spec/ • src/ • SpecRunner.htmlMonday, October 15, 12
  • 42. JASMINE - SPECRUNNERMonday, October 15, 12
  • 43. JASMINE - SPECRUNNERMonday, October 15, 12
  • 44. JASMINE - SRCMonday, October 15, 12
  • 45. JASMINE - SPECMonday, October 15, 12
  • 46. JASMINE - RESULTATMonday, October 15, 12
  • 47. JASMINE - ASSERTS • expect(a).toEqual(b); • expect(a).toMatch(/foo/); • expect(a).toBeDefined(); • expect(a).toBeTruthy(); • exptect(a).toThrow(); • expect(a).not.toEqual(b);Monday, October 15, 12
  • 48. JSTESTDRIVERMonday, October 15, 12
  • 49. JS TESTDRIVER • http://code.google.com/p/js-test-driver/ • Testserver in Java • Remote Browsercapturing • Integration in die IDE • Plugins für andere Frameworks • Kommunikation über HTTPMonday, October 15, 12
  • 50. JSTESTDRIVERMonday, October 15, 12
  • 51. JSTESTDRIVER - STRUKTUR • src/ • src-test/ • jsTestDriver.confMonday, October 15, 12
  • 52. JSTESTDRIVER - SRCMonday, October 15, 12
  • 53. JSTESTDRIVER - SRC-TESTMonday, October 15, 12
  • 54. JSTESTDRIVER - CONFIGMonday, October 15, 12
  • 55. JSTESTDRIVER - INITIALISIERUNG • Server start: java -jar JsTestDriver.jar --port 9876 • Browser öffnen (lokal): http://localhost:9876/capture • Browser öffnen (remote): http://172.16.0.15:9876/capture • Test start: java -jar JsTestDriver.jar --tests allMonday, October 15, 12
  • 56. JSTESTDRIVER - RESULTATMonday, October 15, 12
  • 57. TESTDRIVEN DEVELOPMENTMonday, October 15, 12
  • 58. ONE PROBLEM A TIMEMonday, October 15, 12
  • 59. WAS IST TDD? • Iterativer Ansatz • Eckpfeiler der agilen Softwareentwicklung • Gegensatz zum klassichen Vorgehen • kein großes Design zu Beginn • Änderungen durch RefactoringsMonday, October 15, 12
  • 60. WAS IST TDD • Besser als: “Debug later programming” • Führt zu: “Clean code that works” • Sorgt für: “high code coverage with tests”Monday, October 15, 12
  • 61. WAS IST TDD • Besser als: “Debug later programming” • Führt zu: “Clean code that works” • Sorgt für: “high code coverage with tests” ABER: muss erlernt und geübt werdenMonday, October 15, 12
  • 62. VERKEHRTE WELT • Klassische Softwareentwicklung • Erst der Code • Dann die Tests (...wenn noch Zeit ist)Monday, October 15, 12
  • 63. VERKEHRTE WELT • Klassische • Testgetriebene Softwareentwicklung Softwareentwicklng • Erst der Code • Zuerst die Tests (hier haben wir noch Zeit) • Dann die Tests • Dann der Code (...wenn noch Zeit ist)Monday, October 15, 12
  • 64. TDD FEELS GOODMonday, October 15, 12
  • 65. SETUP PHPStorm, JsTestDriver, JasmineMonday, October 15, 12
  • 66. SETUP - PHPSTORMMonday, October 15, 12
  • 67. SETUP - PHPSTORMMonday, October 15, 12
  • 68. SETUP - DATEIEN • jasmine.js • https://github.com/pivotal/jasmine/downloads • JasmineAdapter.js • https://github.com/ibolmo/jasmine-jstd-adapterMonday, October 15, 12
  • 69. SETUP - KONFIGURATIONMonday, October 15, 12
  • 70. TDD APPLIEDMonday, October 15, 12
  • 71. Monday, October 15, 12
  • 72. REDMonday, October 15, 12
  • 73. TDD - REDMonday, October 15, 12
  • 74. TDD - REDMonday, October 15, 12
  • 75. GREENMonday, October 15, 12
  • 76. TDD - GREENMonday, October 15, 12
  • 77. TDD - GREENMonday, October 15, 12
  • 78. REFACTORMonday, October 15, 12
  • 79. TDD - REFACTORMonday, October 15, 12
  • 80. TDD - REFACTORMonday, October 15, 12
  • 81. FRAGEN?Monday, October 15, 12
  • 82. DEMO Fizz BuzzMonday, October 15, 12
  • 83. FORTGESCHRITTENE THEMENMonday, October 15, 12
  • 84. TEST PATTERNS Strategien für das TestenMonday, October 15, 12
  • 85. WAS WIRD GETESTET? “Everything that could possibly break!” Ron JeffriesMonday, October 15, 12
  • 86. BABY STEPS • Ziel: die einfachste Lösung • Test & Code: so kleine Schritte wie möglich (nichts überspringen) • Faustformel: ein Assert pro Step • Vorteile: • sehr kurze Feedback-Schleife • schnelle, übersichtliche TestsMonday, October 15, 12
  • 87. FAKE IT ‘TIL YOU MAKE IT • Ziel: effiziente Entwicklung • Test & Code: Umsetzung mit fixen Werten • Faustformel: Duplikate erkennen und entfernen • Vorteile: • Tests sehr schnell grün • Kein Over-Engineering • Sehr wenig CodeMonday, October 15, 12
  • 88. TRIANGULATION • Ziel: • Test & Code • Faustformel • VorteileMonday, October 15, 12
  • 89. TRIANGULATION • Ziel: Operationen abstrahieren • Faustformel: Mehrere Tests mit verschiedenen Werten für eine Funktionalität • Vorteile • Klare Implementierung • Saubere AbstraktionMonday, October 15, 12
  • 90. OBVIOUS IMPLEMENTATION • Ziel: Zeitersparnis, keine unnötigen Tests • Test & Code: Keine Tests für trivialen Code • Faustformel: Wird man von einem roten Test überrascht: gehe zurück zu Los und ziehe keine 2.000 EUR.Monday, October 15, 12
  • 91. THREE OUT OF FOUR • Ziel: Stets ein Stabiler Stand • Faustformel: Sei nie mehr als eine Änderung von einem grünen Test entfernt • Vorteile: • Sicherer und stabiler CodeMonday, October 15, 12
  • 92. GOLDEN MASTER • Ziel: Finaler Test • Test & Code: Manuell geschriebene oder generierte Erwartung • Faustformel: Man kann nur mit einem kompletten Systemtest sicher seinMonday, October 15, 12
  • 93. SPIES, STUBS & MOCKSMonday, October 15, 12
  • 94. SINON.JSMonday, October 15, 12
  • 95. SINON.JS • http://sinonjs.org/releases/sinon-1.4.2.js • Testing Framework • Spies, Stubs und Mocks • Timers • Servers • Sandboxes • Kann mit anderen Frameworks eingesetzt werdenMonday, October 15, 12
  • 96. SPIESMonday, October 15, 12
  • 97. SPIES The Test Spy is designed to act as an observation point by recording the method calls made to it by the system under test as it is exercised. (xUnit Test Patterns)Monday, October 15, 12
  • 98. SPIES - EIGENSCHAFTEN • Wrapper um eine Funktion • Aufrufe werden gespeichert • Spy-Objekt kann später abgefragt werden • Sollte nach Verwendung wieder zurückgesetzt werdenMonday, October 15, 12
  • 99. SPIES - ERSTELLUNG • var spy = sinon.spy(); Anonymer Spy - z.B. für Callbacks • var spy = sinon.spy(myFunc); Spy um eine Funktion • var spy = sinon.spy(object, “myFunc”); Spy um eine Methode eines ObjektsMonday, October 15, 12
  • 100. SPIES - API • spy.called - wurde der Spy aufgerufen • spy.callCount - wie oft wurde der Spy aufgerufen • spy.calledWith() - wurde der Spy mit diesen Argumenten aufgerufen • spy.withArg() - Spy nur für bestimmte Argumente • spy.args - Argumente sämtlicher Calls als Array • spy.threw() - Wurde eine Exception geworfenMonday, October 15, 12
  • 101. SPIES - DEMOMonday, October 15, 12
  • 102. STUBSMonday, October 15, 12
  • 103. STUBSThe Test Stub replaces a real object with a test-specific object that feeds the desired indirect inputs into the system under test. (xUnit Test Patterns)Monday, October 15, 12
  • 104. STUBS - EIGENSCHAFTEN • Wrapper um eine Funktion (Erweitern die Spy-API) • Vordefiniertes Verhalten • Wird verwendet um ein bestimmtes Verhalten zu erzwingen • Vermeiden, dass eine Methode aufgerufen wird (z.B. xhr)Monday, October 15, 12
  • 105. STUBS - ERSTELLUNG • var stub = sinon.stub(); • var stub = sinon.stub(object, “method”); • var stub = sinon.stub(object, “method”, func); • var stub = sinon.stub(object);Monday, October 15, 12
  • 106. STUBS - API • stub.returns(obj); • stub.withArgs(“hello world”).returns(42); • stub.throws(obj); • stub.yields();Monday, October 15, 12
  • 107. STUBS - YIELDS Ruft einen Callback mit den angegeben Argumenten auf var todoList = { getItem: function (id, callback) { // ... } }; var values = { id: 1, text: "foo", isDone: false }; sinon.stub(todoList, "getItem").yields(values); todoList.getItem(1, function (item) { assertEquals(item, { id: 1, text: "foo", isDone: false }); });Monday, October 15, 12
  • 108. STUBS - DEMOMonday, October 15, 12
  • 109. MOCKSMonday, October 15, 12
  • 110. MOCKS The mock replaces an object the system under test depends on with a test-specific object that verifies it is being used correctly by the system under test. (xUnit Test Patterns)Monday, October 15, 12
  • 111. MOCKS - EIGENSCHAFTEN • Wrapper um eine Funktion (wie ein Spy) • Wird verwendet, um zu prüfen, ob eine Funktion korrekt benutzt wird • Generell maximal ein Mock pro UnittestMonday, October 15, 12
  • 112. MOCKS - ERSTELLUNG • var mock = sinon.mock(obj)Monday, October 15, 12
  • 113. MOCKS - API • var expectation = expects(‘method’); • expectation.once • expectation.atLeast(n) • expectation.atMost(m) • expectation.withArgs(arg, arg,...)Monday, October 15, 12
  • 114. TIMERS & FAKE SERVERSMonday, October 15, 12
  • 115. TIMERS • Für zeitkritische Tests • Browserzeit ist nicht Zuverlässig • Für solide Tests braucht man seine eigene UhrMonday, October 15, 12
  • 116. TIMERSMonday, October 15, 12
  • 117. SINON HÄLT DIE ZEIT ANMonday, October 15, 12
  • 118. TIMERS IN SINON • var clock = sinon.useFakeTimers(); • var clock = sinon.useFakeTimers(now); • clock.tick(ms); • clock.restore();Monday, October 15, 12
  • 119. TIMERMonday, October 15, 12
  • 120. FAKE SERVERMonday, October 15, 12
  • 121. FAKE SERVER • Tests unabhängig vom Server • Rückmeldung vom Server festlegen • Überschreibt das native XMLHttpReqest und ActiveXObjectMonday, October 15, 12
  • 122. FAKE SERVER - API • var server = sinon.fakeServer.create(); • server.respondWith(meth, url, response); • server.respond(); • server.restore();Monday, October 15, 12
  • 123. FAKE SERVERMonday, October 15, 12
  • 124. FRAGEN?Monday, October 15, 12
  • 125. WIE GEHT ES JETZT WEITER? • Nimm teil an einem Coding Dojo • Führe Coding Katas durch • Pair Programming • Austausch mit anderen EntwicklernMonday, October 15, 12
  • 126. TIPPS & TRICKSMonday, October 15, 12
  • 127. CHEAT SHEET • Write a failing Test • Triangulate • Write the simplest code to • Keep your test and model test code separate • Refactor to remove duplication • Isolate your tests • Write the assertion first and • Test should test one thing work backwards • Don’t refactor with a failing • See the test fail test • Write meaningful tests • Maintain your TestsMonday, October 15, 12
  • 128. KONTAKT Sebastian Springer Martin Ruprecht sebastian.springer@mayflower.de martin.ruprecht@mayflower.de Mayflower GmbH Mayflower GmbH Mannhardtstr. 6 Mannhardtstr. 6 80538 München 80538 München Deutschland Deutschland @basti_springer @mrupilo https://github.com/sspringer82 https://github.com/mruprechtMonday, October 15, 12

×