Javascript unit testing with QUnit and Sinon

1,406 views
1,193 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,406
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×