Writing testable javascript preso given at YUIConf 2011 (11/3/11) - good times!!!

1. Testable Javascript
MARK ETHAN TROSTLERmark@zzo.com
@zzoass
http://randomgoo.blogspot.com/

2. “If today were the last day
of my life, would I want to
do what I am about to do
today?”

3. KISS

4. Minimize Your Pain
•Write Small
•Write Simple
•Test Early
•Test Often

5. Write Small – Write Simple
•Isolate code to test
•Loosely couple
dependencies
•Be obvious
•Optimize last

6. Test Early – Test Often
Test Now

7. Explicit Dependencies

8. How things can go wrong…
// Call x.flub with twice z
function foo(z) {
varx = new X(); // Mmmmmtightly coupled…
return x.flub(z*2);
}
// We want to test if x.flub was called with 14
var back = foo(7);
// But only have „back‟ to test!
November 9, 2011

9. How can we test only our
code?
// Call x.flub with twice z
function foo(x, z) {
return x.flub(z*2);
}
// Test x.flub got called with 14…
varx = new MockX(),
foo(x, 7);
If (x.called(„flub‟).with(14)) {
// a winner!!
}
November 9, 2011

10. Really see this in constructors…
// Ewww – not directly testable
function MyObject() {
this.x = new X();
}
MyObject.Prototpe.foo = function(z) {
return this.x.flub(z*2);
}
var test = new MyObject(),
back = test.foo(7) // cannot test what foo() did
November 9, 2011

11. Inject It - Constructor
// Yea! Testable!
function MyObject(x) {
this.x = x;
}
MyObject.Prototpe.foo = function(z) {
return this.x.flub(z*2);
}
varx = new MockX(), test = new MyObject(x);
test.foo(7);
If (x.called(„flub‟, with(14)) {
// We tested only our function!
} November 9, 2011

12. Inject It - Setter
// Yea! Testable!
function MyObject() { }
MyObject.prototpe.setX= function(x) {
this.x = x;
};
MyObject.prototpe.foo = function(z) {
return this.x.flub(z*2);
};
varx = new MockX(), test = new MyObject();
test.setX(x);
test.foo(7);
If (x.called(„flub‟, with(14)) {
// We tested only our function!
} November 9, 2011

13. YUI

14. YUI Explicit Dependencies
YUI.add(„myObject‟, function(Y) {
// Code you want to test
Y.MyObject = function() {
this.a = new Y.a();
this.b = new Y.b();
this.c = new Y.c();
};
}, { requires: [ „a‟, „b‟, „c‟ ] });
YUI.use(„myObject‟, function(Y) {
new Y.MyObject();
November 9, 2011
});

15. Injecting YUI3 Dependencies??
YUI.add(„myObject‟, function(Y) {
//// Code you want to test
Y.MyObject = function(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
};
});
YUI.use(„myObject‟, „a‟, „b‟, „c‟, function(Y) { // Prod
new Y.MyObject(newY.a(), new Y.b(), new Y.c());
});
YUI.use(„myObject‟, „test‟, function(Y) { // Test
new Y.MyObject(Y.Mock(), Y.Mock(), Y.Mock());
November 9, 2011
});

16. Isolating Dependencies
<script src =“yui3.js”></script>
<script src =“a.mock.js”></script>
<script src =“b.mock.js”></script>
<script src =“c.mock.js”></script>
<script src =“myObject.js”></script>
<script>
YUI.use(„myObject‟, function(Y) {
new Y.MyObject();
</script>
November 9, 2011

17. Injecting YUI3 Dependencies
YUI.add(„myObject‟, function(Y) {
//// Code you want to test
Y.MyObject = function(a, b, c) {
this.a = a || new Y.a();
this.b = b|| new Y.b();
this.c = c|| new Y.c();
};
}, { requires: [„a‟, „b‟, „c‟ ] });
YUI.use(„myObject‟, function(Y) { // Prod
new Y.MyObject();
});
YUI.use(„myObject‟, „test‟, function(Y) { // Test
new Y.MyObject(Y.Mock(), Y.Mock(), Y.Mock());
}); November 9, 2011

18. Injecting YUI3 Dependencies
YUI.add(„myObject‟, function(Y) {
//// Code you want to test
Y.MyObject = function() {
}
Y.MyObject.prototype.setX = function(x) {
this.x = x;
};
}, { requires: [„a‟, „b‟, „c‟ ] });
YUI.use(„myObject‟, function(Y) { // Prod
new Y.MyObject();
});
YUI.use(„myObject‟, „test‟, function(Y) { // Test
new Y.MyObject().setX(Y.Mock());
}); November 9, 2011

19. Isolating Dependencies
YUI({
modules: {
a: {
fullpath: ‟/a-mock.js'
}
}
}).use('test', ‟myObject', 'console', function(
Y) {
varobj = new Y.MyObject();
November 9, 2011
});

20. Isolating Dependencies
YUI({
filter: mock:
{ 'searchExp': “.js",
'replaceStr': "-mock.js" }
}).use('test', ‟myObject', 'console', function(
Y) {
varobj = new Y.MyObject();
});
November 9, 2011

21. Mock Objects

22. Mock Object
YUI().add(‟a', function(Y) {
Y.A= function() {
var me = Y.Mock();
Y.Mock.expect(me, {
method: ”render",
args: [„#toolbar‟]
});
return me;
}
}, '1.0.0' ,{requires:['test']}); November 9, 2011

23. Testing with Mocked
Dependencies
YUI().add(‟a', function(Y) {
Y.A= function() { return Y.Mock(); };
}, '1.0.0' ,{requires:['test']});
YUI().use(„a‟, „test‟, „myObject‟, function(Y) {
var a = new Y.A();
Y.Mock.expect(a, {
method: ”render",
args: [„#toolbar‟]
});
new MyObject(a).render();
//// verify a.render(„#toolbar‟) was called
}); November 9, 2011

24. Implicit Dependencies

25. „Hidden‟ Dependencies
 Private functions are „hidden‟ dependencies
 Cannot test by definition!
 Make public? Are they part of the public API??
 Mock them out?? How??
 Refactor private function to be explicit
dependencies
 Minimize their use – they cannot be tested
directly
 Treated exactly like any other dependency
November 9, 2011

26. Private functions
YOU CANNOT TEST
THEM!
November 9, 2011

27. Don‟t forget browser
dependencies!
YUI.add(„myObject‟, function(Y) {
//// Code you want to test
Y.MyObject = function(window) {
this.window = window;
};
myObject.prototype.fiddle = function(str) { return
window.escape(str + „ FOOBIE‟); };
});
YUI.use(„myObject‟, function(Y) {
varwinMock = new WindowMock(),
myObj = new myObject(winMock);
myObj.fiddle(„foobie‟); // Check WindowMock!!
}
November 9, 2011

28. Recap

29. Explicit Deps
Problem: Public dependencies
Symptom: Explicitly declared
dependencies
Cure:
• Eliminate tightly coupled code/use
injection
• Pre-load mock‟ed versions of public
dependencies
November 9, 2011

30. Private Deps
Problem: Private dependencies
Symptom: Private methods and
functions
Cure:
• Minimize private dependencies
• Make public dependency
• Use composition to pull in private stuff
November 9, 2011

31. Browser Deps
Problem: Browser dependencies
Symptom: „window‟ or global scope
usage
Cure:
• Eliminate tightly coupled code/use
injection
• Pre-load mock‟ed versions of public
dependencies
November 9, 2011

32. Unit Testing Principles &
Practices
All about dependency management
Identify dependencies and mock
them out
Do not take your environment for
granted
November 9, 2011

33. “Don‟t Be Foolish”

34. Resources
• https://github.com/zzo/JUTE
• trostler@yahoo-inc.com
• @zzoass
• http://randomgoo.blogspot.com/
November 9, 2011