Testing Backbone applications with Jasmine

Leon van der Grient 2014

You know you should

Why?

Confidence

What?

Unitsbehavior

When?

BeforeDuringAfter

How?• qUnit

• SinonJS

• Mocha

• Jasmine

Behavior Driven Testing

"Users should be able to like a message"

Test suite | * Spec | * Expectations

describe("Users should be able to", function () {

// Your specs

});

describe("Users should be able to", function () {

it("like a message", function () {

var a = 1;

var b = 2;

var c = a + b;

expect(c).toEqual(3);

expect(c).not.toEqual(4);

});

});

Spies and mocksspyOn($, "ajax");

$.ajax(arg);

!

expect($).toHaveBeenCalled();

expect($).toHaveBeenCalledWith(arg);

expect($.calls.count()).toEqual(1);

But there is more!

spyOn($, "ajax").and.callFake(function () {

// mock ajax call

var response = {

success: true,

data: {...}

};

arguments[0].success(response);

});

Models

Collections

Views

Testing models

it("like a message", function () {

this.message.set({liked:false});

this.message.like();

expect(this.message.get('liked').toBeTruthy();

});

Testing views

it("like a message", function () {

this.message.set({liked:false});

this.view.likeMessage();

expect(this.message.get('liked').toBeTruthy();

});

Using mocks

spyOn($, "ajax").and.callFake(function () {

// mock ajax call

var response = {

success: true,

data: {...}

};

arguments[0].success(response);

});

Test for triggers

it("like a message", function () {

var spy = jasmine.createSpy();

this.view.listenTo(this.model, "change",

spy);

this.view.likeMessage();

expect(spy).toHaveBeenCalled();

});

Test user interaction with jasmine-jquery plugin

it("follow a user", function () {

var followBtn = $('.follow-btn');

followBtn.click();

expect(followBtn).toHaveClass("unfollow");

});

(too) many tests

toBeInDOM()

toBeVisible()

toHaveAttr()

toHaveClass()

toHaveText()

toHaveValue()

toBeChecked()

toBeDisabled()

Results

Again, what?

• Methods

• The el property

• Events

• ...?