Quirks and Twists of Unit Testing JavaScript

The presentation gives a walkthrough of different aspects of unit testing JavaScript code.

Transcript

1. QUIRKS AND TWISTS OF UNIT TESTING JAVASCRIPT Pavels Jelisejevs, C.T.Co
2. WHY DO WE EVEN NEED UNIT TESTS?
3. ➤Reduces the risk of regressions ➤Enforces modularity and complexity constraints ➤Reduces maintenance costs
4. Unit testing requires you to understand how your code works.
5. TESTING JAVASCRIPT
6. WHAT’S SO SPECIAL ABOUT JAVASCRIPT ➤Asynchrony ➤Time ➤User interaction ➤DOM and other APIs
7. TOOLS OF THE TRADE Istanbul code coverage
8. LET’S GET PRACTICAL
9. 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); }); });
10. 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'); });
11. 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); });
12. TIMEOUTS it('setTimeout() should call a function after some time', function() { var spy = jasmine.createSpy(); setTimeout(spy, 200); expect(spy).toHaveBeenCalled(); });
13. 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(); });
14. 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); });
15. 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(); });
16. SIMULATING EVENTS WITH JQUERY.SIMULATE() it('jQuery.simulate() should simulate a keydown event', function() { var spy = jasmine.createSpy(); var div = $('<div></div>').on('keydown', function() { spy(); }); div.simulate('keydown', { keyCode: 84 }); expect(spy).toHaveBeenCalled(); });
17. MODULES, BROWSERIFY AND REQUIRE()
18. THE MODULE var bar = require('./bar'); module.exports = function() { bar.buz(); }
19. 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
20. WRAPPING REQUIRE() WITH PROXYQUIRE var proxyquire = require('proxyquireify')(require); var stubs = { './bar': { buz: function () { return 'Buz!'; } } }; var foo = proxyquire('./foo', stubs);
21. MONKEY PATCHING WITH REWIREIFY() var foo = require('./foo'); foo.__set__('./bar', { buz: function () { return 'Buz!'; } });
22. A WORD OF ADVICE
23. 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
24. 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
25. THANK YOU