Writing testable js [by Ted Piotrowski]

Writing testable JS
by Ted Piotrowski
Javascript Ho Chi Minh City

Excuses for not testing
● I know the code
● Test suite is hard to configure and run
● You can’t test UI
● You can’t unit test JS code

$(document).ready(function() {
$('#new-status form').submit(function(e) {
e.preventDefault();
$.ajax({
url: '/status',
type: 'POST',
dataType: 'json',
data: { text: $('#new-status').find('textarea').val() },
success: function(data) {
$('#statuses').append('<li>' + data.text + '</li>');
$('#new-status').find('textarea').val('');
}
});
});
});
source: https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md/

Documentation
● Impossible to write a good test without a
good specification
● If you don’t have time to write a test, at least
write documentation
○ it will allow others to write tests later

/**
* adds two numbers together
*/
function sum(a, b)
assert(sum(1, 2), 3);

/**
* adds two numbers together
*/
function sum(a, b)
assert(sum(1, ‘a’), ?);

/**
* adds two numbers together,
* otherwise returns null
*/
function sum(a, b)
assert(sum(1, ‘a’), null);

Dependencies
● Can’t write good tests unless you
understand what external objects the code
depends on
● loose coupling
● use requirejs, almond.js, squire.js
● move dependencies up the call stack and
inject

Scope
● An assertion should only rely on the method
being tested
● What is a “unit”?
● is $(function() { }) a unit?

// Should we stub addTwo, addOne?
// When we limit scope, we forfeit integration
function addThree(a) {
var x = addTwo(a);
var y = addOne(x);
return y;
}

Testing with the DOM
● Use a DOM fragment / jQuery fragment
● Inject it into the module constructor

function Word() {
this.el = $('.word'); // external dependency
}
Word.prototype.setText = function(text) {
this.el.text(text);
};
var word = new Word();
word.setText('Hello World');
assert(???, 'Hello World');

function Word(el) {
this.el = el; // dependency injection
}
this.el.text(text);
};
var mockEl = $('<div></div>'); // use a test double
var word = new Word(mockEl); // inject the dependency
assert(mockEl.text(), 'Hello World');

function Word(el) {
this.el = el || $('.word'); // optional injection
}
this.el.text(text);
};
var mockEl = $('<div></div>');
var word = new Word(mockEl);
assert(mockEl.text(), 'Hello World');

Dealing with window properties
● You code will likely touch Web API
○ document, Math,
● Can use mocks and stubs for methods
● Many Web API properties are read-only

// If your production code calls alert(), you can mock it
var spy = sinon.spy(window, "alert");
assert(spy.calledWith("My alert message"));
// However, you can't modify read only properties
Math.PI = 3.15; // won’t work
window.History.length = 12;

Dealing with network calls
● Use sinon fake server

{
"test should fetch comments from server" : function () {
this.server.respondWith("GET", "/some/article/comments.json",
[200, { "Content-Type": "application/json" },
'[{ "id": 12, "comment": "Hey there" }]']);
var callback = sinon.spy();
myLib.getCommentsFor("/some/article", callback);
this.server.respond();
sinon.assert.calledWith(callback, [{ id: 12, comment: "Hey there" }]));
}
}

Code coverage
● Reports what lines of production JS are
executed during testing
● necessary, but not sufficient
● Istanbul is a good tool
○ integrates with Karma

JS integration tests
● main.js file initializes your components and
injects DOM dependencies
● Stub your REST calls
● Just like unit testing, user events are your
input, DOM changes are your output

// Bootstrap your application here
// Inject your DOM dependencies at top of call stack
// Allows you to mock/stub the DOM for each component
$(function() {
var $el = $('.some-element');
var component = new Component($el);
var $el2 = $('.some-element2');
var component2 = new Component($el2);
// initialize more components, global state here
});

More information
● Testable Javascript
● Karma test runner
● Sinon.js
● Istanbul

About us
Author: Ted Piotrowski
Find me at: tpiotrowski@atlassian.com
Sample code: https://bitbucket.org/tpiotrowski/js-hcm
Presentation made for Javascript Ho Chi Minh City Meetup Group
You can find us at:
● http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/
● https://www.facebook.com/JavaScriptHCMC
● https://plus.google.com/u/0/communities/116105314977285194967
● http://www.slideshare.net/JavascriptMeetup

Writing testable js [by Ted Piotrowski]

More Related Content

What's hot (20)

Similar to Writing testable js [by Ted Piotrowski] (20)

More from JavaScript Meetup HCMC (8)

Recently uploaded (20)

Writing testable js [by Ted Piotrowski]