Für mehr Qualität in JavaScript-Applikationen Recording verfügbar unter: http://www.mayflower.de/de/ressourcen/webinare/archiv/test-driven-javascript

1. TEST-DRIVEN JAVASCRIPT
Für mehr Qualität in JavaScript-Applikationen
Wednesday, January 23, 13

2. WER BIN ICH?
• Sebastian Springer
• 30
• Dipl. Inf. (FH)
• Teamleiter @ Mayflower München
• Nebenbei: JavaScript-Entwickler
• @basti_springer
Wednesday, January 23, 13

3. WAS ERWARTET EUCH?
?
Wednesday, January 23, 13

4. WAS ERWARTET EUCH?
• Was ist TDD?
?
Wednesday, January 23, 13

5. WAS ERWARTET EUCH?
• Was ist TDD?
?
• Warum TDD?
Wednesday, January 23, 13

6. WAS ERWARTET EUCH?
• Was ist TDD?
?
• Warum TDD?
• Was benötige ich dafür?
Wednesday, January 23, 13

7. WAS ERWARTET EUCH?
• Was ist TDD?
?
• Warum TDD?
• Was benötige ich dafür?
• Wie funktioniert’s?
Wednesday, January 23, 13

8. WAS

9. IST

10. TDD?
WARUM

11. TDD?
VORAUSSETZUNGEN?
WIE

12. FUNKTIONIERT’S?
Wednesday, January 23, 13

13. WAS IST TDD?
• Angewandtes Softwaredesign und -entwicklung
• Erst Tests, dann den Code
• Red, Green, Refactor
• Clean Code that works
Wednesday, January 23, 13

14. TDD

15. ist

16. doof
Wednesday, January 23, 13

17. DIE SCHATTENSEITEN
• Verständnis
• Disziplin und Konsequenz
• Einstiegshürde
• Anfänglich langsame Geschwindigkeit
Wednesday, January 23, 13

18. WAS

19. IST

20. TDD? ✓
WARUM

21. TDD?
VORAUSSETZUNGEN?
WIE

22. FUNKTIONIERT’S?
Wednesday, January 23, 13

23. Weil’s

24. geht!
Wednesday, January 23, 13

25. Das Problem verstehen
Wednesday, January 23, 13

26. Sicherheit für Refactorings
Wednesday, January 23, 13

27. Schnelles Feedback
Wednesday, January 23, 13

28. Software muss getestet werden
Wednesday, January 23, 13

29. Software muss getestet werden
entweder manuell oder automatisch
Wednesday, January 23, 13

30. Dokumentation
Wednesday, January 23, 13

31. Basis für Weiterentwicklung
Wednesday, January 23, 13

32. Besserer Code
Wednesday, January 23, 13

33. Weniger Bugs
Wednesday, January 23, 13

34. Spaß an der Arbeit
Wednesday, January 23, 13

35. Qualität und Lauffähigkeit
Wednesday, January 23, 13

36. WAS

37. IST

38. TDD? ✓
WARUM

39. TDD? ✓
VORAUSSETZUNGEN?
WIE

40. FUNKTIONIERT’S?
Wednesday, January 23, 13

41. IDE
Wednesday, January 23, 13

42. FRAMEWORK
Wednesday, January 23, 13

43. BROWSER
Wednesday, January 23, 13

44. Gibt’s

45. das

46. nicht

47. in

48.
besser?
Wednesday, January 23, 13

49. INTEGRATION
Wednesday, January 23, 13

50. INTEGRATION
JsTestDriver Plugin
Wednesday, January 23, 13

51. JSTESTDRIVER
Wednesday, January 23, 13

52. + = ♥
Wednesday, January 23, 13

53. WAS

54. IST

55. TDD? ✓
WARUM

56. TDD? ✓
VORAUSSETZUNGEN? ✓
WIE

57. FUNKTIONIERT’S?
Wednesday, January 23, 13

58. DAS BEISPIEL:
FIZZ BUZZ
Wednesday, January 23, 13

59. FIZZ BUZZ
• Es wird eine Zahl eingegeben.
• Ist die Zahl durch 3 teilbar, ist das Ergebnis “fizz”.
• Ist die Zahl durch 5 teilbar, ist das Ergebnis “buzz”.
• Ist die Zahl sowohl durch 3 als auch durch 5 teilbar, ist das
Ergebnis “fizzbuzz”.
Wednesday, January 23, 13

60. FIZZ BUZZ
1 1 11 11 21 fizz
2 2 12 fizz 22 22
3 fizz 13 13 23 23
4 4 14 14 24 fizz
5 buzz 15 fizzbuzz 25 buzz
6 fizz 16 16 26 26
7 7 17 17 27 fizz
8 8 18 fizz 28 28
9 fizz 19 19 29 29
10 buzz 20 buzz 30 fizzbuzz
Wednesday, January 23, 13

61. SETUP
Wednesday, January 23, 13

62. FIZZBUZZ.JSTD
load:
- lib/jasmine.js
- lib/JasmineAdapter.js
- spec/FizzBuzz.spec.js
- src/FizzBuzz.js
• YAML-Format
• Speicherorte der verschiedenen Dateien
Wednesday, January 23, 13

63. Wednesday, January 23, 13

64. Na

65. dann

66. mal

67. los!
Wednesday, January 23, 13

68. TEST FIRST
• Erst den Test, dann den Quellcode
• Anforderungen in Test übersetzen
• One problem a time
Wednesday, January 23, 13

69. describe(FizzBuzz, function () {
use strict;
it(should return 1, if 1 is provided, function () {
expect(fizzbuzz(1)).toEqual(1);
});
});
Wednesday, January 23, 13

70. red
Wednesday, January 23, 13

71. EINFACHSTE LÖSUNG
• Ziel: Der Test muss grün werden.
• Fokus auf die aktuelle Problemstellung
Wednesday, January 23, 13

72. FAKE IT ‘TIL YOU MAKE IT
• Umsetzung mit fixen Werten
• Tests werden sehr schnell grün
• Wenig Code
• Kein Over-Engineering
Wednesday, January 23, 13

73. var fizzbuzz = function () {
use strict;
return 1;
};
Wednesday, January 23, 13

74. green
Wednesday, January 23, 13

75. TRIANGULATION
• Mehrere Tests mit verschiedenen Werten
• Klare Implementierung
• Saubere Abstraktion
• Tests mit Grenzwerten
Wednesday, January 23, 13

76. it(should return 2, if 2 is provided, function () {
expect(fizzbuzz(2)).toEqual(2);
});
Wednesday, January 23, 13

77. red
Wednesday, January 23, 13

78. var fizzbuzz = function (n) {
use strict;
return n;
};
Wednesday, January 23, 13

79. green
Wednesday, January 23, 13

80. OBVIOUS IMPLEMENTATION
• Keine unnötigen Tests
• Wenn 1 und 2 funktionieren, sollten auch alle weiteren Zahlen
funktionieren.
• Zu viel Aufwand für Tests
Wednesday, January 23, 13

81. BABY STEPS
• Die kleinst möglichen Schritte
• Sehr kurze Feedback-Scheifen
• Schnelle, übersichtliche Tests
Wednesday, January 23, 13

82. it(should return fizz, if 3 is provided, function () {
expect(fizzbuzz(3)).toEqual('fizz');
});
Wednesday, January 23, 13

83. red
Wednesday, January 23, 13

84. var fizzbuzz = function (n) {
use strict;
if (n === 3) {
return 'fizz';
}
return n;
};
Wednesday, January 23, 13

85. green
Wednesday, January 23, 13

86. THREE OUT OF FOUR
• Stabiler Codestand
• Maximal eine Änderung entfernt von grünen Tests
Wednesday, January 23, 13

87. YAGNI
• You Ain’t Gonna Need It
• Kein Code für zukünftige Probleme
• Fokus auf das aktuelle Problem
Wednesday, January 23, 13

88. it(should return fizz, if 6 is provided, function () {
expect(fizzbuzz(6)).toEqual('fizz');
});
Wednesday, January 23, 13

89. red
Wednesday, January 23, 13

90. var fizzbuzz = function (n) {
use strict;
if (n === 3 || n === 6) {
return 'fizz';
}
if (n === 5) {
return 'buzz';
}
return n;
};
Wednesday, January 23, 13

91. green
Wednesday, January 23, 13

92. REFACTOR
• Stellen, die verbessert werden können, identifizieren
• Anhand der bestehenden Tests den Code umbauen
Wednesday, January 23, 13

93. var fizzbuzz = function (n) {
use strict;
if (n % 3 === 0) {
return 'fizz';
}
if (n === 5) {
return 'buzz';
}
return n;
};
Wednesday, January 23, 13

94. green
Wednesday, January 23, 13

95. REMOVE DUPLICATION
• Bessere Wartbarkeit
• Übersichtlicher Quellcode
• Teure Weiterentwicklung
Wednesday, January 23, 13

96. GOLDEN MASTER
• kompletter Systemtest
• Generierter oder manueller Test
• bei umfangreicheren Workflows sehr aufwändig
Wednesday, January 23, 13

97. describe(FizzBuzz, function () {
use strict;
var map = [
'', 1, 2, 'fizz', 4, 'buzz', 'fizz',
7, 8, 'fizz', 'buzz', 11, 'fizz', 13,
14, 'fizzbuzz', 16, 17, 'fizz', 19,
'buzz', 'fizz', 22, 23, 'fizz', 'buzz',
26, 'fizz', 28, 29, 'fizzbuzz'
], i, bindFunc,
func = function (x, y) {
expect(fizzbuzz(x)).toEqual(y);
};
for (i = 1; i map.length; i += 1) {
bindFunc = func.bind(this, i, map[i]);
it(should return + map[i] + if + i + is provided, bindFunc);
}
});
Wednesday, January 23, 13

98. green
Wednesday, January 23, 13

99. UND JETZT?
• Nimm teil an einem Coding Dojo
• Führe Coding Katas durch
• Pair Programming
• Austausch mit anderen Entwicklern
Wednesday, January 23, 13

100. 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 Tests
Wednesday, January 23, 13

101. Fragen?
Wednesday, January 23, 13

102. VIELEN DANK!
Sebastian Springer
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82
Wednesday, January 23, 13