Testing javascriptwithjasmine ddd-sydney

Testing JavaScript
LIKE A BOSS
Jo Cranford
@jocranford

Thursday, 19 July 12

Y U NO JAVASCRIPT
TESTS?


BDD With Jasmine Is
Awesome Sauce

describe("Score Calculation Behaviour", function() {

it("should score 0 when no pins are knocked down", function() {

var game = new BowlingGame(10);
game.roll(0);

expect(game.score()).toBe(0);

});

});


Basic Shizzle


Jasmine In Your Project

• Ruby Gem

• Maven

• Node.js

• Standalone


Ruby Gem

> jasmine init
> rake jasmine

https://github.com/pivotal/jasmine-gem

Maven

• Searls Jasmine Maven plugin
• Add it to the pom to run tests within the test lifecycle
phase

> mvn jasmine:bdd

http://searls.github.com/jasmine-maven-plugin/

Node.js

> npm install jasmine-node -g

> jasmine-node specs/

https://github.com/mhevery/jasmine-node

Standalone
• Download the ﬁles and copy them all across to your
project.
• Edit the SpecRunner.html to include your JavaScript
source and tests.
• Open in your favourite browser.

https://github.com/pivotal/jasmine/downloads

Now Let’s Write A Test

• describe("Score Calculation Behaviour", function() {

it("should score 0 when no pins are knocked down", function() {

var game = new BowlingGame(10);
game.roll(0);

expect(game.score()).toBe(0);

});

});


• expect(game.score()).not.toBe(1);

expect(true).toBeTruthy();
expect(false).toBeFalsy();

expect(undefined).toBeUndefined();
expect({}).toBeDefined();
expect(null).toBeNull();

expect(1).toBeLessThan(2);
expect(2).toBeGreaterThan(1);

expect(new Date(2012, 1, 1).toBeLessThan(new Date(2012, 2, 1));

expect("aaa").toBeLessThan("bbb");


.toContain()

describe("How to test for items in an Array", function() {

it("should tell me if the array contains an item", function() {

var theArray = [1, 2, 3];

expect(theArray).toContain(1);
expect(theArray).not.toContain(4);

});
});


.toThrow()

it("should accept a single digit at a time", function() {

expect(function() {
calculator.enterDigit("2");
}).not.toThrow();

});

it("should not accept letters", function() {

expect(function() {
calculator.enterDigit("a");
}).toThrow("Only accepts numbers");

});


.toMatch()

it("should compare to a regex", function () {

expect("@jocranford").toMatch("@([A-Za-z0-9_]+)");

});


Before And After

beforeEach(function() {
fakeFrame = {
addRoll: jasmine.createSpy("Add roll"),
isComplete: jasmine.createSpy("Is complete"),
setSpareBonus: jasmine.createSpy("spare bonus"),
setStrikeBonus: jasmine.createSpy("strike bonus"),
score: jasmine.createSpy("score")
};

});


Is JavaScript Ever Really
That Simple?


What About ...

• Asynchronous goodness

• Interacting with teh DOMz

• Evil Legacy Code

• Continuous Integration

• Clean readable tests that reﬂect your domain


Approaches To Testing
Asynchronous Code


Let’s Load Some JSON

[
{
"firstName": "Jo",
"lastName": "Cranford",
"company": "Atlassian"
},
{
"firstName": "Rachel",
"lastName": "Laycock",
"company": "ThoughtWorks"
}
]


The JavaScript Code

var Presentation = function() {
this.presenters = [];
};

Presentation.prototype.loadPresenters = function() {
var presenters = this.presenters;

$.getJSON("people.json", function(data) {
$.each(data, function(idx, person) {
presenters.push(person);
});
});
};


Easy, Right?

describe("How not to test an asynchronous function", function
() {

it("should load the presenters", function () {

var presentation = new Presentation();
presentation.loadPresenters();

expect(presentation.presenters.length).toBe(2);

});
});


Well ... Not So Much.


But This Might Work ...

describe("Still not ideal though", function () {

it("should load the presenters", function () {

spyOn($, "getJSON").andCallFake(function (url, callback) {
callback([{},{}]);
})

presentation.loadPresenters();


});
});


A Little Detour ...


Spy On An Existing Method

it("can spy on an existing method", function() {

var fakeElement = $("<div style='display:none'></div>");
spyOn(fakeElement, 'show');

var toggleable = new Toggleable(fakeElement);

toggleable.toggle();

expect(fakeElement.show).toHaveBeenCalled();

});


Spy On An Existing Method

it("can create a method for you", function() {

var fakeElement = {};
fakeElement.css = function() {};
fakeElement.show = jasmine.createSpy("Show spy");

var toggleable = new Toggleable(fakeElement);

toggleable.toggle();

expect(fakeElement.show).toHaveBeenCalled();

});


Wait, There’s More ...

• expect(spy).not.toHaveBeenCalled()

• createSpy().andReturn(something)

• createSpy().andCallFake(function() {})

• createSpy().andCallThrough()


Spy On The Details

• expect(spy).toHaveBeenCalled()

• expect(spy.callCount).toBe(x)

• expect(spy).toHaveBeenCalledWith()

• Tip: use jasmine.any(Function/Object) for parameters
you don’t care about


... And We’re Back.

Sooooo ... spies are great and all,
but what if your callback function
takes a while to run?


Don’t Do This At Home.

Presentation.prototype.loadPresentersMoreSlowly = function() {

var preso = this;

setTimeout(function() {
preso.presenters.push(person);
});
}, 2000);
});

};


Don’t Do This, Either.
it("should have loaded after three seconds, right?", function()
{

spyOn($, "getJSON").andCallFake(function(url, callback) {
callback([{}, {}]);
})

presentation.loadPresentersMoreSlowly();

}, 3000);

});


But What If I Just ...

Presentation.prototype.loadPresentersMoreSlowly = function() {

var preso = this;

preso.presenters.push(person);
});
preso.presentersHaveLoaded = true;
}, 2000);
});

};


Now Wait, Wait ... RUN!
it("should load the presenters", function() {

spyOn($, "getJSON").andCallFake(function(url, callback) {
callback([{}, {}]);
})

presentation.loadPresentersMoreSlowly();

waitsFor(function() {
return presentation.presentersHaveLoaded;
}, "presenters have loaded");

runs(function() {
});

});


Testing Interaction With The
DOM

• Do you REALLY need to?

• Tests will have a high maintenance cost

• Instead separate logic from view and test logic

• Use templates for the view


Testing Interaction With The
DOM
it("should display the score", function() {

setFixtures("<div id='score'></div>");

var bowlingGameView = new BowlingGameView();
bowlingGameView.showScore(100);

expect($("#score").text()).toBe("Your current score is 100");

});

https://github.com/velesin/jasmine-jquery

Legacy (untested)
JavaScript Code
• Long methods

• Violation of Single Responsibility Principle

• Side effects

• Lack of dependency injection

• Lots of new X()

• Unclear intentions


Testing Interaction

it("should call the method on the dependency", function() {

var dependency = {};
dependency.method = jasmine.createSpy();

var myObject = new Something(dependency);
myObject.doSomething();

expect(dependency.method).toHaveBeenCalled();
});


If Dependencies Aren’t
Injected ...

var LegacySomething = function() {

this.doSomething = function() {
var dependency = new Dependency();
dependency.method();
};

};


Create Stubs

it("is a pain but not impossible", function() {

Dependency = function() {};
Dependency.prototype.method = jasmine.createSpy()

var myObject = new LegacySomething();
myObject.doSomething();

expect(Dependency.prototype.method).toHaveBeenCalled();
});


Continuous Integration

• Ruby Gem

• Maven

• Node.js

• Rhino (Java)


Ruby Gem
require 'jasmine'
load 'jasmine/tasks/jasmine.rake'

> rake jasmine:ci

https://github.com/pivotal/jasmine-gem

Maven

> mvn clean test

http://searls.github.com/jasmine-maven-plugin/

Node.js

> jasmine-node specs/

https://github.com/mhevery/jasmine-node

Rhino

• Download:

• Rhino (js.jar) from Mozilla

• env.rhino.js from www.envjs.com

• Jasmine console reporter from Larry Myers Jasmine
Reporters project (github)

http://www.build-doctor.com/2010/12/08/javascript-bdd-jasmine/

Rhino
load('env.rhino.1.2.js');

Envjs.scriptTypes['text/javascript'] = true;

var specFile;

for (i = 0; i < arguments.length; i++) {
specFile = arguments[i];

console.log("Loading: " + specFile);

window.location = specFile
}

> java -jar js.jar -opt -1 env.bootstrap.js ../SpecRunner.html


Extending Jasmine With
Custom Matchers
it("should match the latitude and longitude", function() {

var pointOnMap = { latitude: "51.23", longitude: "-10.14" };

expect(pointOnMap.latitude).toBe("51.23");
expect(pointOnMap.longitude).toBe("-10.14");

});



expect(pointOnMap).toHaveLatitude("51.23");
expect(pointOnMap).toHaveLongitude("-10.14");

});


Custom Matchers



expect(pointOnMap).toHaveLatLongCoordinates("51.23", "-10.14");

});


Custom Matchers

beforeEach(function() {
this.addMatchers({
toHaveLatitude: function(lat) {
return this.actual.latitude === lat;
},
toHaveLongitude: function(lat) {
},
toHaveLatLongCoordinates: function(lat, lng) {
return (this.actual.latitude === lat &&
this.actual.longitude === lng);
}
});
});


Custom Failure Messages

toHaveLatitude: function(lat) {
this.message = function() {
return "Expected Latitude " + this.actual.latitude
+ " to be " + lat;
};
}


Do We Really Need To Test
Everything?
DO: DON’T:

• Test Behaviour and • Over-test DOM interaction
Functionality
• Test Getters and Setters
• Test the places where the
bad bugs bite • Test functionality in third
party libraries

• Write tests that are
expensive to maintain

Tips & Gotchas

• Tests aren’t completely independent!

• If tests are hard to write, it’s often an indication of a smell
in the code

• Automate creation of SpecRunner.html

• Run tests in different browsers


With thanks to our sponsors


Please complete your feedback
forms, and return them to the
registration desk for a chance
to win a
Nokia Lumia


Questions


Testing javascriptwithjasmine ddd-sydney

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Recently uploaded

Recently uploaded (20)

Testing javascriptwithjasmine ddd-sydney