QUIRKS AND TWISTS OF UNIT TESTING JAVASCRIPT Pavels Jelisejevs, C.T.Co 

WHY DO WE EVEN NEED UNIT TESTS? 

➤Reduces the risk of regressions ➤Enforces modularity and complexity constraints ➤Reduces maintenance costs 

Unit testing requires you to understand how your code works. 

TESTING JAVASCRIPT 

WHAT’S SO SPECIAL ABOUT JAVASCRIPT ➤Asynchrony ➤Time ➤User interaction ➤DOM and other APIs 

TOOLS OF THE TRADE Istanbul code coverage 

LET’S GET PRACTICAL 

A TRIVIAL EXAMPLE function add(number1, number2) { return number1 + number2; } describe('add()', function() { it('should return the sum of the given numbers', function() { expect(add(1, 2)).toEqual(3); }); }); 

ADDING MOCKS function redirect(url) { window.location.replace(url); } it('redirect() should redirect to the given URL', function() { spyOn(window.location, 'replace'); redirect('http://google.com'); expect(window.location.replace).toHaveBeenCalledWith(' http://google.com'); }); 

MOCKING GLOBAL FUNCTIONS it('should mock the Date() constructor', function() { var oldDate = Date; spyOn(window, 'Date').and.callFake(function() { return new oldDate('2014-03-30'); }); var d = new Date(); expect(d.getFullYear()).toEqual(2014); }); 

TIMEOUTS it('setTimeout() should call a function after some time', function() { var spy = jasmine.createSpy(); setTimeout(spy, 200); expect(spy).toHaveBeenCalled(); }); 

TIMEOUTS it('setTimeout() should call a function after some time', function() { jasmine.clock().install(); var spy = jasmine.createSpy(); setTimeout(spy, 200); jasmine.clock().tick(200); expect(spy).toHaveBeenCalled(); jasmine.clock().uninstall(); }); 

DOM ELEMENTS it('offsetHeight contains the height of an element', function() { var div = document.createElement('div'); div.innerHTML = 'Unit test all the things!'; expect(div.offsetHeight).toBeGreaterThan(0); }); 

DOM ELEMENTS it('offsetHeight contains the height of an element', function() { var div = document.createElement('div'); div.innerHTML = 'Unit test all the things!'; document.body.appendChild(div); expect(div.offsetHeight).toBeGreaterThan(0); div.remove(); }); 

SIMULATING EVENTS WITH JQUERY.SIMULATE() it('jQuery.simulate() should simulate a keydown event', function() { var spy = jasmine.createSpy(); var div = $('').on('keydown', function() { spy(); }); div.simulate('keydown', { keyCode: 84 }); expect(spy).toHaveBeenCalled(); }); 

MODULES, BROWSERIFY AND REQUIRE() 

THE MODULE var bar = require('./bar'); module.exports = function() { bar.buz(); } 

THE REQUIRE() PROBLEM ➤Browserify allows to bundle modules using its own implementation of require() similar to node.js ➤We need to be able to mock libraries included by require() ➤This can be done in two ways: creating a proxy for require() or monkey patching 

WRAPPING REQUIRE() WITH PROXYQUIRE var proxyquire = require('proxyquireify')(require); var stubs = { './bar': { buz: function () { return 'Buz!'; } } }; var foo = proxyquire('./foo', stubs); 

MONKEY PATCHING WITH REWIREIFY() var foo = require('./foo'); foo.__set__('./bar', { buz: function () { return 'Buz!'; } }); 

A WORD OF ADVICE 

YOUR TESTS SHOULD BE ➤Granular - each test should check a separate feature ➤Independent - tests should not rely on each other ➤Easy to write - as much as the rest of the code ➤Fast - better performance means more tests runs 

WHAT TO DO IF YOU’RE STUCK ➤See other tests for example ➤Learn from 3rd party code vendors ➤Few tests are still better then no tests at all 

THANK YOU