Javascript & browsers have been for years a complex and unsafe environment for a web developer, now we have the right tools to gain control on what we are distributing in our web applications. During the workshop you will learn first-hand basic Javascript Test Driven Development practices including testing, refactoring and related agile practices such as continuous integration and pair programming. presented at italian Back To The Front conference /w @sirLisko

1. back to the front
javascript tdd is between us

2. Who are we?
Marco Cedaro Luca Lischetti
javascript pirate, arr 8-bit lover and super hero
Spreaker Frontend Developer (almost) Shazam Frontend Developer

3. Who are we?
Marco Cedaro Luca Lischetti
javascript pirate, arr 8-bit lover and super hero
Spreaker Frontend Developer (almost) Shazam Frontend Developer
The content of this workshop do not necessarily reflect the opinion of authors employers

4. Who are we?
Marco Cedaro Luca Lischetti
javascript pirate, arr 8-bit lover and super hero
Spreaker Frontend Developer (almost) Shazam Frontend Developer
The content of this workshop do not necessarily reflect the opinion of authors employers
Authors employers are not responsible in any way of authors bad coding and funny spoken english

5. I believe I can fly

6. Fearless & Unconscious

7. Fearless & Unconscious

8. But Life Goes On

9. TDD is about control

10. and about DESIGN too

11. The curious case of JavaScript unit testing

12. Unit Test and Functional Test

13. Pro/Cons
test consistency
control
interaction against execution test
over
between external time integration
codebase
libraries changes

14. That's the browsers,
baby

16. Unit testing is
supposed to test a
single atomic “unit”
of functionality
without
dependencies on
anything else

17. Unit testing is
This is where you
supposed to test a
start to run into
single atomic “unit”
serious dependency
of functionality
problems due to the
without
interrelation HTML
dependencies on
and CSS
anything else

18. Unit testing is
This is where you What do you test?
supposed to test a
start to run into Usually how the user
single atomic “unit”
serious dependency interface responds
of functionality
problems due to the to user input.
without
interrelation HTML Actually, the realm of
dependencies on
and CSS functional testing
anything else

19. How does it work?

20. have you seen LOST?

22. Write a new test

23. Write a new test
Run test & let it fail

24. Write a new test
Run test & let it fail
Write the code

25. Write a new test
Run test & let it fail
Write the code
Run test & let it succeed

26. Write a new test
Run test & let it fail
Write the code
Run test & let it succeed
Refactor your code

27. Coding

28. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

29. pub.. What?

30. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

31. _$.watch("customEvent", function(obj) {
! //DO STUFF
});
_$.notify("customEvent");
_$.notify("customEvent", { prop : "value" });

32. _$.watch("customEvent", function(obj) {
! //DO STUFF
});
_$.notify("customEvent");
_$.notify("customEvent", { prop : "value" });

33. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

34. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

35. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

36. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

37. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

38. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

39. _$.watch("customEvent", function(obj) {
! //DO STUFF
});
_$.notify("customEvent");
_$.notify("customEvent", { prop : "value" });

40. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

41. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

42. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

43. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

44. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

45. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

46. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

47. _$ = (function (_) {
return {
notify: function (a, b, c, d) {
for (d = -1, c = [].concat(_[a]); c[++d];) c[d](b);
},
watch: function (a, b) {
(_[a] || (_[a] = [])).push(b);
}
}
})({});

48. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

49. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

50. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

51. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

52. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

53. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

54. [...]
testNotify: function(){!
!
! ! var a = 0;!
! ! _$.watch('testNotify', function(){ a = 1; });
! ! _$.notify('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){! !
! ! var a = 0 ;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

55. [...]
! testNotifyWithMultipleWhatches: function(){!
!
! ! var a = 0, b = 0;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.watch('testNotify', function(memo){ b = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(1, b);
! },
[...]

56. [...]
! testNotifyWithMultipleWhatches: function(){!
!
! ! var a = 0, b = 0;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.watch('testNotify', function(memo){ b = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(1, b);
! },
[...]

57. [...]
! testNotifyWithMultipleWhatches: function(){!
!
! ! var a = 0, b = 0;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.watch('testNotify', function(memo){ b = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(1, b);
! },
[...]

58. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

59. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

60. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

61. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

62. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
! ! ! ! else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

63. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

64. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

65. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

66. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

67. [...]
testNotifyWithMultipleWhatchesNested: function(){!!
! ! var a = 0, b = 0, c=0;!
! ! _$.watch('testNotify', function(memo){
a = memo.test;
! ! ! _$.watch('testNotify', function(memo){
! ! ! ! if (b<2){ b = memo.test; }
else { c = memo.test; }
! ! ! });
! ! });
! !
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(0, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 2});
! ! assertEquals(2, a);
! ! assertEquals(2, b);
! ! assertEquals(0, c);
! !
! ! _$.notify('testNotify', {test: 3});
! ! assertEquals(3, a);
! ! assertEquals(2, b);
! ! assertEquals(3, c);
! },
[...]

68. There's no parachute
There's a major bug, let's take
another look at the code...

69. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

70. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

71. There's no parachute
How would you write a test to
check it?

72. [...]
! testNotifyWithMultipleWhatches: function(){!
!
! ! var a = 0, b = 0;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.watch('testNotify', function(memo){ b = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(1, b);
! },
[...]

73. [...]
! testWhatchWithoutHandler: function(){! !
! ! var a = 0, b = 0;!
! ! _$.watch('testNotify', function(memo){ a = memo.test; });
! ! _$.watch('testNotify');
! ! _$.watch('testNotify', function(memo){ b = memo.test; });
! ! _$.notify('testNotify', {test: 1});
! ! assertEquals(1, a);
! ! assertEquals(1, b);
! },
[...]

74. _$ = (function() {
var registered = {};
return {
! ! notify: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, handler; (handler = handlers[i]); i++){
! ! ! ! ! handler.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! !
! ! watch: function(event, handler) {
! ! ! if (handler) {
if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
}
! ! }
};
})();

75. _$ = (function (_) {
return {
notify: function (a, b, c, d) {
for (d = -1, c = [].concat(_[a]); c[++d];) c[d](b);
},
watch: function (a, b) {
if(b)(_[a] || (_[a] = [])).push(b);
}
}
})({});

76. Spy, Stub & Mock

77. Fake objects & methods

78. Sinon.js

80. Spies
a function that
records arguments,
return value, the
value of this and
exception thrown (if
any) for all its calls.

81. Spies Stub
a function that functions (spies) with
records arguments, pre-programmed
return value, the behavior.
value of this and
exception thrown (if
any) for all its calls.

82. Spies Stub Mock
a function that functions (spies) with functions (spies) with
records arguments, pre-programmed pre-programmed
return value, the behavior. behavior (stubs) as
value of this and well as pre-
exception thrown (if programmed
any) for all its calls. expectations.

83. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SysyemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

84. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

85. [...]
"test MyLib Registers To 'SystemOn' Event": function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

86. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

87. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

88. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

89. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

90. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

91. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

92. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){! !
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

93. [...]
testMyLibRegistersToSystemOnEvent: function(){!!
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
[...]

94. [...]
//testMyLibRegistersToSystemOnEvent: function(){! !
! ! //var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! //assertTrue(spy.calledWith('SysyemOn'));
! //},
!
! testMyLibRegistersToSystemOnEvent: function(){!!
! ! var mock = sinon.mock(_$);
! ! mock.expect('watch').calledWith('SysyemOn');
! ! //DO STUFF TO INIT YOUR LIB
! ! mock.verify();
! },
[...]

95. [...]
//testMyLibRegistersToSystemOnEvent: function(){! !
! ! //var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! //assertTrue(spy.calledWith('SysyemOn'));
! //},
!
! testMyLibRegistersToSystemOnEvent: function(){!!
! ! var mock = sinon.mock(_$);
! ! mock.expect('watch').calledWith('SysyemOn');
! ! //DO STUFF TO INIT YOUR LIB
! ! mock.verify();
! },
[...]

96. What are we going to do

97. svn co https://svn.dsgn.it/jstdd
cheat
config
dist
libs
tools
workshop
build.sh
build.bat
readme.txt

98. svn co https://svn.dsgn.it/jstdd
cheat /config/
config browsers.prop
dist build.xml
libs default.prop
tools
workshop
build.sh
build.bat
readme.txt

99. svn co https://svn.dsgn.it/jstdd
cheat /config/
config browsers.prop
dist /libs/ build.xml
libs base.js default.prop
tools sinon.js
workshop
build.sh
build.bat
readme.txt

100. svn co https://svn.dsgn.it/jstdd
cheat /config/
config browsers.prop
dist /libs/ build.xml
libs base.js default.prop
tools /tools/ sinon.js
workshop ant
build.sh browser
build.bat jslint
readme.txt JsTestDriver

101. svn co https://svn.dsgn.it/jstdd
cheat /config/
config browsers.prop
dist /libs/ build.xml
libs base.js default.prop
tools /tools/ sinon.js
workshop ant
build.sh browser
build.bat jslint
readme.txt JsTestDriver
/workshop/
append
find
syntax

102. svn co https://svn.dsgn.it/jstdd
cheat /config/
config browsers.prop
dist /libs/ build.xml
libs base.js default.prop
tools /tools/ sinon.js
workshop ant
build.sh browser
build.bat jslint /append/
readme.txt JsTestDriver src
append.js
/workshop/ test
append append.test.js
find jsTestDriver.conf
syntax

103. svn co https://svn.dsgn.it/jstdd
cheat /config/
config browsers.prop
dist /libs/ build.xml
libs base.js default.prop
tools /tools/ sinon.js
workshop ant
build.sh browser
build.bat jslint /append/
readme.txt JsTestDriver src
append.js
/workshop/ test
append append.test.js
find jsTestDriver.conf
syntax
build append | sh build.sh append

104. A simple modular event driven app
a javascript code highlighter with 3 components:
syntax highlighter
selected word highlighter
finder

105. First step - syntax
watch a SRC_LOADED event with the memo {file:'{{FILE_SRC}}'}
highlight (wrap in a span with the keyword itself as classname)
function => <span class="function">function</span>
var, if ... else, for, return, ...
notify SRC_READY with the memo {file:'{{EDITED_SRC}}'}

106. Second step - append
watch previous SRC_READY
create a div[id="src_container"] and fill it with the source
append to document
llisten dblclick event and notify SRC_HIGHLIGHT with this memo:
{keyword:'{{HIGHLIGHTED_WORD}}'}
manage the SRC_HIGHLIGHT notification
<span class="highlight">{{HIGHLIGHTED_KEYWORKD}}</span>

107. Third step - find
watch to SRC_READY
create a div[id=form] and append inside of it
input[type=text][id=search]
input[type=button][id=submitBtn][value=Search]
append the div to the document
on click on submit notify a SRC_HIGHLIGHT event with memo
{keyword:"{{SEARCHED_TEXT}}"}

108. Where are we now?

109. Costs of change

110. I Build So Consistently

111. Identify Build
I Build So Consistently
Share make it Continuous