Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript unit testingwith QUnit and SinonLars ThorupZeaLake Software ConsultingJune, 2013
Who is Lars Thorup?● Software developer/architect● JavaScript, C# and C++● Test Driven Development● Coaching teams in agil...
Resources● Tools● http://qunitjs.com/● http://sinonjs.org/● Sample code● https://github.com/larsthorup/jsdevenv-qunit● Sli...
● What is unit testing about?● Express expected behaviour of the code we write● Why is unit testing a good thing?● Faster ...
QUnit - tests and fixturesmodule(module name, {setup: function () {this.account = new Account(4711);}});test(test name, fu...
QUnit - assertionsok(account.isValid, isValid); // !equal(account.id, 4711, id); // ==notEqual(account.state, CLOSED, stat...
Sinon - spies, stubs and mocksMath.randomBelow = function (n) {return Math.floor(Math.random() * n);};module(util.random, ...
DOMmodule(Control.Button, {setup: function () {$(<button id="next"></button>).appendTo(#qunit-fixture);this.button = new C...
Asynchronous codetest(delayHide, function () {expect(2);stop();this.button.delayHide(function () {equal($(#next).is(:visib...
Workflow of Test Driven DevelopmentFailingtestSucceedingtestGooddesign RefactorCodeWrite atestIdeaThink, talk
Continuous Integration with Jenkins
Unit testing philosophy● Behaviour first● makes more sense than "Test first"● Structure of test programs● Given <precondit...
Advanced mocking● Constructors● Time: new Date()● Timers: setTimeout(), setInterval()● Ajax● Events● DOM● CSS transitions●...
Upcoming SlideShare
Loading in …5
×

Javascript unit testing with QUnit and Sinon

1,798 views

Published on

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Javascript unit testing with QUnit and Sinon

  1. 1. JavaScript unit testingwith QUnit and SinonLars ThorupZeaLake Software ConsultingJune, 2013
  2. 2. Who is Lars Thorup?● Software developer/architect● JavaScript, C# and C++● Test Driven Development● Coaching teams in agileengineering practices● Assessing software projectsand companies● Founder and CEO ofBestBrains and ZeaLake
  3. 3. Resources● Tools● http://qunitjs.com/● http://sinonjs.org/● Sample code● https://github.com/larsthorup/jsdevenv-qunit● Slides● http://www.slideshare.net/larsthorup● @larsthorup, lars@zealake.com
  4. 4. ● What is unit testing about?● Express expected behaviour of the code we write● Why is unit testing a good thing?● Faster development● Find and fix bugs faster● Prevent bugs from reappearing● Improve the design of our software● Reliable documentation● How do we do unit testing?● Write test code● Run the tests automaticallyWhy are we here today?
  5. 5. QUnit - tests and fixturesmodule(module name, {setup: function () {this.account = new Account(4711);}});test(test name, function () {equal(this.account.id, 4711);});test(..., function () {...});
  6. 6. QUnit - assertionsok(account.isValid, isValid); // !equal(account.id, 4711, id); // ==notEqual(account.state, CLOSED, state); // !=strictEqual(account.user, user, user); // ===deepEqual(account.privs, [1, 2], privs);throws(function () {account.close()}, /failed/, close);
  7. 7. Sinon - spies, stubs and mocksMath.randomBelow = function (n) {return Math.floor(Math.random() * n);};module(util.random, {setup: function () {sinon.stub(Math, random).returns(0.85);},teardown: function () {Math.random.restore();}});test(randomBelow, function () {equal(Math.randomBelow(6), 5, 6);});
  8. 8. DOMmodule(Control.Button, {setup: function () {$(<button id="next"></button>).appendTo(#qunit-fixture);this.button = new Control.Button(#next, {text: Next});}});test(constructor, function () {equal($(#next).attr(text), Next, .text);});● #qunit-fixture is emptied before each test
  9. 9. Asynchronous codetest(delayHide, function () {expect(2);stop();this.button.delayHide(function () {equal($(#next).is(:visible), false, !visible);start();});equal($(#next).is(:visible), true, visible);});Button.prototype.delayHide = function (callback) {var self = this;setTimeout(function () {self.element.hide();callback();}, 100);};
  10. 10. Workflow of Test Driven DevelopmentFailingtestSucceedingtestGooddesign RefactorCodeWrite atestIdeaThink, talk
  11. 11. Continuous Integration with Jenkins
  12. 12. Unit testing philosophy● Behaviour first● makes more sense than "Test first"● Structure of test programs● Given <precondition>● When <invocation>● Then <expectation>● High level as well as low level● Test user stories and requirements● Test class design and algorithms● Communicate intent● Fast feedback
  13. 13. Advanced mocking● Constructors● Time: new Date()● Timers: setTimeout(), setInterval()● Ajax● Events● DOM● CSS transitions● Sinon sessions

×