Testing javascriptwithjasmine sydjs

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);

});

});


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;
};
}


Testing javascriptwithjasmine sydjs

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Testing javascriptwithjasmine sydjs

Similar to Testing javascriptwithjasmine sydjs (20)

Recently uploaded

Recently uploaded (20)

Testing javascriptwithjasmine sydjs