• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript unit testing with QUnit and Sinon
 

Javascript unit testing with QUnit and Sinon

on

  • 991 views

 

Statistics

Views

Total Views
991
Views on SlideShare
991
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript unit testing with QUnit and Sinon Javascript unit testing with QUnit and Sinon Presentation Transcript

    • 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 agileengineering practices● Assessing software projectsand companies● Founder and CEO ofBestBrains and ZeaLake
    • 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
    • ● 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?
    • QUnit - tests and fixturesmodule(module name, {setup: function () {this.account = new Account(4711);}});test(test name, function () {equal(this.account.id, 4711);});test(..., function () {...});
    • 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);
    • 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);});
    • 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
    • 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);};
    • 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 <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
    • Advanced mocking● Constructors● Time: new Date()● Timers: setTimeout(), setInterval()● Ajax● Events● DOM● CSS transitions● Sinon sessions