JavaScript Unit Testing with Jasmine

JavaScript
unit testing
with

@rsim

github.com/rsim
Raimonds Simanovskis

The easiest Business Intelligence tool on the Web

Using threads
in Ruby applications

Using threads
in JavaScript
applications

RSpec-like testing for
JavaScript

Syntax
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});

describe("A suite is just a function", function() {
var a;

it("and so is a spec", function() {
a = true;

expect(a).toBe(true);
});
});

Matchers

describe("The 'toBe' matcher compares with ===", function() {

it("and has a positive case ", function() {
expect(true).toBe(true);
});

it("and can have a negative case", function() {
expect(false).not.toBe(true);
});

});

Included matchers

toBe toContain
toEqual toBeLessThan
toMatch toBeGreaterThan
toBeDefined toBeCloseTo
toBeUndefined toThrow
toBeNull
toBeTruthy
toBeFalsy

Setup & teardown
describe("A spec (with setup and tear-down)", function() {
var foo;

beforeEach(function() {
foo = 0;
foo += 1;
});

afterEach(function() {
foo = 0;
});

it("is just a function, so it can contain any code", function() {
expect(foo).toEqual(1);
});

it("can have more than one expectation", function() {
expect(true).toEqual(true);
});
});

describe("A spec", function() {
var foo;
Nesting
foo = 0;
foo += 1;
});
afterEach(function() {
foo = 0;
});
it("is just a function, so it can contain any code", function() {
});
it("can have more than one expectation", function() {
expect(true).toEqual(true);
});
describe("nested inside a second describe", function() {
var bar;
bar = 1;
});
it("can reference both scopes as needed ", function() {
expect(foo).toEqual(bar);
});
});
});

Disabling
xdescribe("A spec", function() {
var foo;

foo = 0;
foo += 1;
});

xit("is just a function, so it can contain any code", function() {
});
});

describe("A spy", function() {

Spies
var foo, bar = null;
foo = {
setBar: function(value) {
bar = value;
}
};
spyOn(foo, 'setBar');
foo.setBar(123);
foo.setBar(456, 'another param');
});
it("tracks that the spy was called", function() {
expect(foo.setBar).toHaveBeenCalled();
});
it("tracks its number of calls", function() {
expect(foo.setBar.calls.length).toEqual(2);
});
it("tracks all the arguments of its calls", function() {
expect(foo.setBar).toHaveBeenCalledWith(123);
expect(foo.setBar).toHaveBeenCalledWith(456, 'another param');
});
it("allows access to the most recent call", function() {
expect(foo.setBar.mostRecentCall.args[0]).toEqual(456);
});
it("allows access to other calls", function() {
expect(foo.setBar.calls[0].args[0]).toEqual(123);
});
it("stops all execution on a function", function() {
expect(bar).toBeNull();
});
});

describe("A spy, when faking a return value", function() {
var foo, bar, fetchedBar;

andReturn
foo = {
setBar: function(value) {
bar = value;
},
getBar: function() {
return bar;
}
};
spyOn(foo, 'getBar').andReturn(745);
foo.setBar(123);
fetchedBar = foo.getBar();
});
it("tracks that the spy was called", function() {
expect(foo.getBar).toHaveBeenCalled();
});
it("should not effect other functions", function() {
expect(bar).toEqual(123);
});
it("when called returns the requested value", function() {
expect(fetchedBar).toEqual(745);
});
});

Async tests
describe("Asynchronous specs", function() {
var value, flag;
it("should support async execution of test preparation and
exepectations", function() {
runs(function() {
flag = false;
value = 0;
setTimeout(function() {
flag = true;
}, 500);
});
waitsFor(function() {
value++;
return flag;
}, "The Value should be incremented", 750);
runs(function() {
expect(value).toBeGreaterThan(0);
});
});
});

Jasmine tests runner

Demo

Works nice
with CoffeeScript
and Backbone.js

Testing Backbone.js
model
describe "Todo", ->
todo = null
ajaxCall = (param) -> jQuery.ajax.mostRecentCall.args[0][param]

beforeEach ->
todo = new TodoApp.Todo
todos = new TodoApp.TodoList [todo]

it "should initialize with empty content", ->
expect(todo.get "content").toEqual "empty todo..."

it "should initialize as not done", ->
expect(todo.get "done").toBeFalsy()

it "should save after toggle", ->
spyOn jQuery, "ajax"
todo.toggle()
expect(ajaxCall "url").toEqual "/todos"
expect(todo.get "done").toBeTruthy()

and collection
describe "TodoList", ->
attributes = [
content: "First"
done: true
,
content: "Second"
]
todos = null

beforeEach ->
todos = new TodoApp.TodoList attributes

it "should return done todos", ->
expect(_.invoke todos.done(), "toJSON").toEqual [attributes[0]]

it "should return remaining todos", ->
expect(_.invoke todos.remaining(), "toJSON").toEqual [attributes[1]]

jasmine-jquery

• a set of custom matchers for jQuery
framework
• an API for handling HTML, CSS, and
JSON fixtures in your specs

expect($('<div id="some-id"></div>')).toBe('div#some-id')

expect($('<input type="checkbox" checked="checked"/>')).toBeChecked()

expect($('<div style="display: none; margin: 10px;"></
div>')).toHaveCss({display: "none", margin: "10px"})

expect($('<option selected="selected"></option>')).toBeSelected()

expect($('<div><span class="some-class"></span></
div>')).toContain('span.some-class')

expect($('<div class="some-class"></div>')).toHaveClass("some-class")

expect($('<div><span></span></div>')).toHaveHtml('<span></span>')

expect($('<div><ul></ul><h1>header</h1></div>')).toContainHtml('<ul></
ul>')

expect($('<div>some text</div>')).toHaveText('some text')

expect($('<input type="text" value="some text"/>')).toHaveValue('some
text')

expect('<input type='submit' disabled='disabled'/>').toBeDisabled()

expect($('<input type='text' />').focus()).toBeFocused()

HTML fixtures

In myfixture.html file:

<div id="my-fixture">some complex content here</div>

Inside your test:

loadFixtures('myfixture.html');
$('#my-fixture').myTestedPlugin();
expect($('#my-fixture')).to...;

jasmine-fixture
// Let's say you want to write a Jasmine spec for some code
// that needs to select elements from the DOM with jQuery:

$('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]')

// In the good ol' days of manually crafting your HTML fixtures,
// you'd have to append some raw HTML to the DOM like this:

beforeEach(function(){
$('<div id="toddler"><div class="hidden toy"><input name="toyName"
value="cuddle bunny"></div></div>').appendTo('body');
});

afterEach(function(){
$('#toddler').remove()
});

// But jasmine-fixture's affix method lets you do this instead:

beforeEach(function(){
affix('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]')
});

jasmine-given
describe("assigning stuff to this", function() {
Given(function() { this.number = 24; });
Given(function() { this.number++; });
When(function() { this.number *= 2; });
Then(function() { return this.number === 50; });
// or
Then(function() { expect(this.number).toBe(50) });
});

describe("assigning stuff to variables", function() {
var subject;
Given(function() { subject = []; });
When(function() { subject.push('foo'); });
Then(function() { return subject.length === 1; });
// or
Then(function() { expect(subject.length).toBe(1); });
});

jasmine-given
describe "assigning stuff to this", ->
Given -> @number = 24
Given -> @number++
When -> @number *= 2
Then -> @number == 50
# or
Then -> expect(@number).toBe(50)

describe "assigning stuff to variables", ->
subject=null
Given -> subject = []
When -> subject.push('foo')
Then -> subject.length == 1
# or
Then -> expect(subject.length).toBe(1)

jasmine-stealth
describe("multiple stubbings", function() {
var someSpy;
someSpy = jasmine.createSpy();
someSpy.when("pirate", { booty: ["jewels",jasmine.any(String)]}).thenReturn("argh!");
someSpy.when("panda",1).thenReturn("sad");
});

it("stubs the first accurately", function() {
expect(someSpy("pirate",{ booty: ["jewels","coins"]})).toBe("argh!");
});

it("stubs the second too", function() {
expect(someSpy("panda",1)).toBe("sad");
});

it("doesn't return anything when a stubbing isn't satisfied",function(){
expect(someSpy("anything else at all")).not.toBeDefined();
});
});

References
http://pivotal.github.io/jasmine/
http://searls.testdouble.com/posts/2013-03-21-
jasmine-tactics-screencast.html

https://github.com/rsim/backbone_coffeescript_demo
https://github.com/rsim/rpn_calculator
http://vimeo.com/53655205

JavaScript Unit Testing with Jasmine

More Related Content

What's hot

Similar to JavaScript Unit Testing with Jasmine

More from Raimonds Simanovskis

Recently uploaded

JavaScript Unit Testing with Jasmine