Testable Javascript

Testable Javascript

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

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

Minimize Your Pain

•Write Small
•Write Simple
•Test Early
•Test Often

Write Small – Write Simple

•Isolate code to test
•Loosely couple
dependencies
•Be obvious
•Optimize last

Test Early – Test Often

Test Now

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

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

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

Inject It - Constructor
// Yea! Testable!
function MyObject(x) {
this.x = x;
}
MyObject.Prototpe.foo = function(z) {
}

varx = new MockX(), test = new MyObject(x);

test.foo(7);
If (x.called(„flub‟, with(14)) {
// We tested only our function!
} November 9, 2011

Inject It - Setter
// Yea! Testable!
function MyObject() { }
MyObject.prototpe.setX= function(x) {
this.x = x;
};
MyObject.prototpe.foo = function(z) {
};
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

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
});

Injecting YUI3 Dependencies??

//// 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
});

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>
new Y.MyObject();
</script>
November 9, 2011

Injecting YUI3 Dependencies

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();
});
new Y.MyObject(Y.Mock(), Y.Mock(), Y.Mock());
}); November 9, 2011

Injecting YUI3 Dependencies
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();
});
new Y.MyObject().setX(Y.Mock());


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


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

November 9, 2011

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

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

„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

Private functions

YOU CANNOT TEST
THEM!

November 9, 2011

Don‟t forget browser
dependencies!

Y.MyObject = function(window) {
this.window = window;
};
myObject.prototype.fiddle = function(str) { return
window.escape(str + „ FOOBIE‟); };
});

varwinMock = new WindowMock(),
myObj = new myObject(winMock);
myObj.fiddle(„foobie‟); // Check WindowMock!!
}
November 9, 2011

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

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

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

Unit Testing Principles &
Practices
All about dependency management

Identify dependencies and mock
them out

Do not take your environment for
granted

November 9, 2011

Resources

• https://github.com/zzo/JUTE
• trostler@yahoo-inc.com
• @zzoass
• http://randomgoo.blogspot.com/

November 9, 2011

Testable Javascript

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Testable Javascript (20)

Recently uploaded (20)

Testable Javascript

Editor's Notes