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

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