Advanced Javascript Unit Testing
3 likes1,783 views
This document summarizes best practices for JavaScript unit testing presented by Lars Thorup. It discusses how to test asynchronous code using callbacks and promises, fake timers to test delayed behavior, mock the DOM and AJAX requests, enable cross-browser testing using Karma, and detect memory leaks between tests. Lars Thorup is a software developer who focuses on JavaScript, TDD, and continuous integration.
![Asynchronous code: callbacks
● How to wait for the callback?
● Call done() when done! [Mocha, Jasmine]
https://github.com/larsthorup/mha2015-demo
it('should eventually return a+b', function () {
code.addSlow(4, 5, function (result) {
result.should.equal(9);
});
});
it('should eventually return a+b', function (done) {
code.addSlow(4, 5, function (result) {
result.should.equal(9);
done();
});
});
When this is called
the test has
already ended](https://image.slidesharecdn.com/advanced-javascript-unit-testing-150403120520-conversion-gate01/85/Advanced-Javascript-Unit-Testing-4-320.jpg)
![Asynchronous code: promises
● Return a promise from the test [Mocha]
● Use promise matchers [chai-as-promised]
it('should eventually return a+b', function () {
return code.adding(4, 5).should.become(9);
});
https://github.com/larsthorup/mha2015-demo](https://image.slidesharecdn.com/advanced-javascript-unit-testing-150403120520-conversion-gate01/85/Advanced-Javascript-Unit-Testing-5-320.jpg)
![Time and timers
● How to test delayed behavior fast?
● Fake the built-in timer! [Sinon, Jasmine]
beforeEach(function () {
this.sinon = sinon.sandbox.create();
this.sinon.useFakeTimers();
});
afterEach(function () {
this.sinon.restore();
});
it('should eventually return a+b', function () {
var adding = code.adding(4, 5);
this.sinon.clock.tick(500);
return adding.should.become(9);
});
https://github.com/larsthorup/mha2015-demo](https://image.slidesharecdn.com/advanced-javascript-unit-testing-150403120520-conversion-gate01/85/Advanced-Javascript-Unit-Testing-6-320.jpg)
![CSS / responsive design
● Render into an iframe, then adjust size [quixote]
beforeEach(function () {
iframe = $('<iframe></iframe>').appendTo(fixture);
context = $(iframe.get(0).contentDocument);
$('<style></style>').text(menuCss).appendTo(context.find('head'));
var menu = $(multiline(function () {/*
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
*/})).appendTo(context.find('body'));
items = menu.find('li');
});
it('should turn horizontal when wide', function () {
iframe.attr('width', '401px');
expect(items.eq(0).offset().left).to.be.below(items.eq(1).offset().left);
expect(items.eq(0).offset().top).to.equal(items.eq(1).offset().top);
});
https://github.com/larsthorup/jsdevenv-mocha-require/blob/master/src/test/js/style/menu-responsive.test.js](https://image.slidesharecdn.com/advanced-javascript-unit-testing-150403120520-conversion-gate01/85/Advanced-Javascript-Unit-Testing-8-320.jpg)
![Ajax
● Don't call any services
● Slow, fragile, setup heavy
● Mock or fake server responses [Sinon, mockjax]
https://github.com/larsthorup/jsdevenv-mocha-require/blob/master/src/test/js/page/weather.test.js
it('fetches', function (done) {
$.mockjax({
url: 'http://api.openweathermap.org/data/2.5/weather',
data: {q: 'Denver'},
responseText: {
weather: [{
description: 'sun'
}]
},
responseTime: 1
});
var fetching = weather.fetch('Denver');
fetching.then(function (data) {
expect(data.text).to.equal('sun');
done();
});
});](https://image.slidesharecdn.com/advanced-javascript-unit-testing-150403120520-conversion-gate01/85/Advanced-Javascript-Unit-Testing-9-320.jpg)
![Leak detection
● To ensure that tests don't influence each other
● To make our code more reusable
● Use global beforeEach() and afterEach() [Mocha, Jasmine]
● Sample before, verify after
● window / global properties
● DOM elements
● localstorage keys](https://image.slidesharecdn.com/advanced-javascript-unit-testing-150403120520-conversion-gate01/85/Advanced-Javascript-Unit-Testing-12-320.jpg)
More Related Content
What's hot (20)
Similar to Advanced Javascript Unit Testing (20)
More from Lars Thorup (19)
Recently uploaded (20)
Advanced Javascript Unit Testing
- 1. Advanced JavaScript Unit Testing Lars Thorup ZeaLake Software Consulting April, 2015
- 2. Who is Lars Thorup? ● Software developer/architect ● JavaScript, C# ● Test Driven Development ● Continuous Integration ● Coach: Teaching TDD and continuous integration ● Founder of ZeaLake ● @larsthorup
- 3. Best practices for JavaScript unit testing ● Asynchronous code: callbacks and promises ● Time and timers ● The DOM ● Ajax ● Cross-browser testing ● Leak detection ● Continuous testing
- 4. Asynchronous code: callbacks ● How to wait for the callback? ● Call done() when done! [Mocha, Jasmine] https://github.com/larsthorup/mha2015-demo it('should eventually return a+b', function () { code.addSlow(4, 5, function (result) { result.should.equal(9); }); }); it('should eventually return a+b', function (done) { code.addSlow(4, 5, function (result) { result.should.equal(9); done(); }); }); When this is called the test has already ended
- 5. Asynchronous code: promises ● Return a promise from the test [Mocha] ● Use promise matchers [chai-as-promised] it('should eventually return a+b', function () { return code.adding(4, 5).should.become(9); }); https://github.com/larsthorup/mha2015-demo
- 6. Time and timers ● How to test delayed behavior fast? ● Fake the built-in timer! [Sinon, Jasmine] beforeEach(function () { this.sinon = sinon.sandbox.create(); this.sinon.useFakeTimers(); }); afterEach(function () { this.sinon.restore(); }); it('should eventually return a+b', function () { var adding = code.adding(4, 5); this.sinon.clock.tick(500); return adding.should.become(9); }); https://github.com/larsthorup/mha2015-demo
- 7. The DOM ● Don't copy real markup ● Use the real thing if fast+easy (client side templating, RequireJS) ● Else inject minimal fake markup ● Use a fragment, or insert a fixture, don't use document https://github.com/larsthorup/jsdevenv-mocha-require/blob/master/src/test/js/page/weather.test.js it('listens', function () { var context = $('<div><input type="text" id="city" /></div>'); weather.listen(context); var city = context.find('#city'); city.val('San Francisco'); city.trigger('change'); expect(weather.fetch.calledWith('San Francisco')).to.equal(true); });
- 8. CSS / responsive design ● Render into an iframe, then adjust size [quixote] beforeEach(function () { iframe = $('<iframe></iframe>').appendTo(fixture); context = $(iframe.get(0).contentDocument); $('<style></style>').text(menuCss).appendTo(context.find('head')); var menu = $(multiline(function () {/* <ul class="menu"> <li>Item 1</li> <li>Item 2</li> </ul> */})).appendTo(context.find('body')); items = menu.find('li'); }); it('should turn horizontal when wide', function () { iframe.attr('width', '401px'); expect(items.eq(0).offset().left).to.be.below(items.eq(1).offset().left); expect(items.eq(0).offset().top).to.equal(items.eq(1).offset().top); }); https://github.com/larsthorup/jsdevenv-mocha-require/blob/master/src/test/js/style/menu-responsive.test.js
- 9. Ajax ● Don't call any services ● Slow, fragile, setup heavy ● Mock or fake server responses [Sinon, mockjax] https://github.com/larsthorup/jsdevenv-mocha-require/blob/master/src/test/js/page/weather.test.js it('fetches', function (done) { $.mockjax({ url: 'http://api.openweathermap.org/data/2.5/weather', data: {q: 'Denver'}, responseText: { weather: [{ description: 'sun' }] }, responseTime: 1 }); var fetching = weather.fetch('Denver'); fetching.then(function (data) { expect(data.text).to.equal('sun'); done(); }); });
- 10. Ajax - generate mocks from real responses ● zealake.com/2015/01/05/unit-test-your-service-integration-layer/ https://github.com/larsthorup/mars/blob/master/test/util/api.proxy.js https://github.com/larsthorup/mars/tree/master/demo/test/api-faker.js
- 11. Cross-browser testing ● Use Karma to run your tests in real browsers ● Also valuable for debugging ● Use browser services for continuous integration ● BrowserStack ● SauceLabs https://github.com/larsthorup/jsdevenv-mocha-require/blob/master/Gruntfile.js
- 12. Leak detection ● To ensure that tests don't influence each other ● To make our code more reusable ● Use global beforeEach() and afterEach() [Mocha, Jasmine] ● Sample before, verify after ● window / global properties ● DOM elements ● localstorage keys
- 13. Wallaby.js ● Continuous Testing ● For JetBrains IDE's ● Visual Studio is in progress ● wallabyjs.com