Test Driven Development mit JavaScript

Die JavaScript Projekte werden zunehmend größer und komplexer.
Test Driven Development (TDD) hilft dabei, die Entwicklung zu beschleunigen,
spätere Problemsuche zu erleichtern und den Code im Griff zu behalten.
Im Vortrag werden Techniken für den praktischen Einsatz von TDD gezeigt.

Niveau: mittel, JavaScript Kenntnisse werden vorausgesetzt

Transcript

1. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Test-Driven Development mit JavaScript Vladimir Dobriakov KarlsruheJS User Group, 1. Dezember 2011 Vladimir Dobriakov Test-Driven Development mit JavaScript
2. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! JavaScript Vladimir Dobriakov Test-Driven Development mit JavaScript
3. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Desktop-Anwendung Vladimir Dobriakov Test-Driven Development mit JavaScript
4. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Mobile Anwendung Vladimir Dobriakov Test-Driven Development mit JavaScript
5. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Motivation Vladimir Dobriakov Test-Driven Development mit JavaScript
6. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Vorteile von UnitTesting Regression Refactoring Cross-Browser Dokumentation Bessere Schnittstellen Vladimir Dobriakov Test-Driven Development mit JavaScript
7. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! TDD Ohne Ziel kein Weg Vladimir Dobriakov Test-Driven Development mit JavaScript
8. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Verwandte BDD und acceptance-TDD Continuous Integration Vladimir Dobriakov Test-Driven Development mit JavaScript
9. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Frameworks und Test Runner Vladimir Dobriakov Test-Driven Development mit JavaScript
10. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! In-Browser Frameworks YUI Test for YUI QUnit for jQuery Test.AnotherWay for OpenLayers qooxdoo mein eigenes Vladimir Dobriakov Test-Driven Development mit JavaScript
11. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Headless (Kommandozeile) v8 phantomjs Vladimir Dobriakov Test-Driven Development mit JavaScript
12. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! JsTestDriver Vladimir Dobriakov Test-Driven Development mit JavaScript
13. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! JsTestDriver kein HTML Container benötigt, Liste zur ladenden js Dateien `gem install jstdutil` assertions: assertEquals, assertElementId etc. Vladimir Dobriakov Test-Driven Development mit JavaScript
14. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Eclipse, IDEA PlugIns Vladimir Dobriakov Test-Driven Development mit JavaScript
15. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! TestSwarm http://testswarm.com/ von John Resig gehostet bei Mozilla Vladimir Dobriakov Test-Driven Development mit JavaScript
16. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Watir http://watir.com (ruby based) Vladimir Dobriakov Test-Driven Development mit JavaScript
17. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Jetzt anfangen! Vladimir Dobriakov Test-Driven Development mit JavaScript
18. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! jsTestDriver.conf server: http://localhost:4224 load: − static/jquery.js − static/jj.js − static/*.js − static/js−test/*.js Vladimir Dobriakov Test-Driven Development mit JavaScript
19. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Test Case TestCase("mapMarkerTest", { "test agent disappears": function () { loadAgentData(); var n = count_agents(); loadNewData(); assertTrue( n != count_agents()); }, "test another thing": function () { } } Vladimir Dobriakov Test-Driven Development mit JavaScript
20. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Lerntests keine Spec für JS, ECMA-262 zählt nicht Programming by observation GDD und Cargo Kult relative Performance Vladimir Dobriakov Test-Driven Development mit JavaScript
21. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! HTML snippets TestCase("mapMarkerTest", { setUp: function () { /*:DOC += <div class='post' id='map_wrapper'> <div class='map' id='map'> </div> </div> */ }, Vladimir Dobriakov Test-Driven Development mit JavaScript
22. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Tipps für gute Tests Vladimir Dobriakov Test-Driven Development mit JavaScript
23. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Lesbarkeit Namen - mit Leerzeichen Intention (Was und Warum nicht Wie) 'should' Leerzeile zwischen Setup, Machen, Prüfen befreien von 'test' Prex Vladimir Dobriakov Test-Driven Development mit JavaScript
24. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! helper Beispiel (function () { function example_agent_data() { } TestCase("mapMarkerTest", { "test agent appears": function () { /* implementation using example_agent_data */ }, "test agent disappears": function () { /* implementation using example_agent_data */ } }()); Vladimir Dobriakov Test-Driven Development mit JavaScript
25. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! testCaseEnhanced von Christian Johansen function testCaseEnhanced(name, tests) { var testMethods = {}; var property; for (var testName in tests) { property = tests[testName]; if (typeof property == "function" && !/^(setUp|tearDown)$/.test(testName)) { testName = "test " + testName; } testMethods[testName] = property; } return TestCase(name, testMethods); } Vladimir Dobriakov Test-Driven Development mit JavaScript
26. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! High level Abstractions assertCalledWith von Sinon stubbing library assertMapZoom(15) - domain specic assertion domain specic helpers Vladimir Dobriakov Test-Driven Development mit JavaScript
27. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! DRY nicht zu weit treiben Redundanz, nicht die Klarheit verringern genügend Kontext in den Test-Methoden beibehalten Vladimir Dobriakov Test-Driven Development mit JavaScript
28. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Beispiel "test agent appears": function () { loadInitialAgentData(); assertMarkerCount(2); processAgentData(agent3_with_location()); assertMarkerCount(3); }, "test agent disappears": function () { loadInitialAgentData(); assertMarkerCount(2); processAgentData(agent2_without_location()); assertMarkerCount(1); } Vladimir Dobriakov Test-Driven Development mit JavaScript
29. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Tests als Behavior Spec 'should' nur ein Verhalten auf Einmal jedes Verhalten nur ein Mal testen - denk an Wartung die eingesetzten Frameworks nicht noch mal testen Isolieren mit Mocks und Stubs Vladimir Dobriakov Test-Driven Development mit JavaScript
30. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Tests testen neuer Test muss ein Mal rot sein Test zuerst schreiben Vladimir Dobriakov Test-Driven Development mit JavaScript
31. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Break the Code Variablen löschen parameter-Werte ändern etc. Vladimir Dobriakov Test-Driven Development mit JavaScript
32. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Break the Code Variablen löschen parameter-Werte ändern etc. Test hinzufügen, der das Problem erfasst Vladimir Dobriakov Test-Driven Development mit JavaScript
33. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Test Double Vladimir Dobriakov Test-Driven Development mit JavaScript
34. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Zweck unbequemes Interface vermeiden spezielle Code-Pfad prüfen, die sonst schwer zu erreichen sind insbesondere Probleme simulieren Vladimir Dobriakov Test-Driven Development mit JavaScript
35. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! stub myproj.send_sms('+49 178 5555555', 'hello'); Vladimir Dobriakov Test-Driven Development mit JavaScript
36. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! stub myproj.send_sms('+49 178 5555555', 'hello'); myproj.send_sms = stubFn(true); postNewOrder('Repair X'); assertTrue(myproj.send_sms.called); assertEquals('new order: Repair X', myproj.send_sms.args[1]); Vladimir Dobriakov Test-Driven Development mit JavaScript
37. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! stubFn function stubFn(returnValue) { var fn = function () { fn.called = true; fn.args = arguments; return returnValue; }; fn.called = false; return fn; } Vladimir Dobriakov Test-Driven Development mit JavaScript
38. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! State vs. Behaviour Verication Vladimir Dobriakov Test-Driven Development mit JavaScript
39. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Sinon Library http://sinonjs.org/ stubs mocks fake timers fake XHR fake server assertions Vladimir Dobriakov Test-Driven Development mit JavaScript
40. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Risiko von Mocks und Stubs Javascript ist sehr dynamisch sinon.stubEverything(target) verdeckt Typos Vladimir Dobriakov Test-Driven Development mit JavaScript
41. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Build Process Vladimir Dobriakov Test-Driven Development mit JavaScript
42. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! precommit + continuous Tests der Web-Anwendung jslint JsTestDriver minify + merge Integration Tests (z.B. Selenium) Vladimir Dobriakov Test-Driven Development mit JavaScript
43. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! precommit + continuous Tests der Web-Anwendung jslint JsTestDriver minify + merge Integration Tests (z.B. Selenium) Tests durch Menschen Vladimir Dobriakov Test-Driven Development mit JavaScript
44. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! jslint für Produktions-Code für die Tests Teil von dem Build Precommit Vladimir Dobriakov Test-Driven Development mit JavaScript
45. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Integration Tests JsTestDriver Tests ersetzen nicht die Integration-Tests HTML Snippets vom echten Server liefern oder nicht? Vladimir Dobriakov Test-Driven Development mit JavaScript
46. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Menschliches Versagen Vladimir Dobriakov Test-Driven Development mit JavaScript
47. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Go! Vladimir Dobriakov Test-Driven Development mit JavaScript
48. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Kontakt http://www.mobile-web-consulting.de/ http://www.geekq.net http://twitter.com/#!/enterprise_geek http://www.xing.com/prole/Vladimir_Dobriakov Vladimir Dobriakov Test-Driven Development mit JavaScript
49. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Literatur Douglas Crockford "JavaScript: The Good Parts" Christian Johansen "Test-Driven JavaScript Development" Vladimir Dobriakov Test-Driven Development mit JavaScript
50. Kontext Motivation Frameworks Aller Anfang ist schwer Tipps für gute Tests Mocks, Stubs und andere Spione Build Process Go! Bildernachweis jslint http://www.ickr.com/photos/codepo8/2051752263/ break http://www.ickr.com/photos/mr_mo-fo/3570580386/ JsTestDriver Projekt Seite http://code.google.com/p/js-test-driver/ Wikipedia "Train wreck at Montparnasse_1895.jpg" Vladimir Dobriakov Test-Driven Development mit JavaScript