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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Testing javascriptwithjasmine sydjs

Similar a Testing javascriptwithjasmine sydjs (20)

Último

Último (20)

Testing javascriptwithjasmine sydjs