Client Side Unit Testing

Client-Side Unit Testing

Cloud Chen
2012/5/11

You know you should,
but you don’t

There are many common issues
that prevent developers
for writing tests

You think
• Tests are not necessary and irrelevant

You think
• Manual testing is enough

You think
• Lacking of speciﬁcation

You think
• Spaghetti code are hard for testing

You think
• Web application needs functional testing rather
than unit testing

You think
than unit testing
• Unit testing looks like only useful for back-end
code rather than front-end

You think
than unit testing
• Unit testing looks like only useful for back-end
code rather than front-end
• Lazy...

Our goal

Help you start
writing unit tests
for front-end code

Let’s start with another
type of testing

What is functional testing

Functional testing is a type of black box
testing that bases its test cases on the
speciﬁcations of the software component
under test. Functions are tested by feeding
them input and examining the output, and
internal program structure is rarely
considered.

In a nutshell

• Written from user perspective

In a nutshell

• Proving users are able to reproduce deﬁned steps

In a nutshell

• Don’t need to consider internal program structure

In a nutshell

• Don’t need to consider internal program structure
• Automating manual testing

What is unit testing

unit testing is a method by which individual
units of source code, sets of one or more
computer program modules together with
associated control data, usage procedures, and
operating procedures, are tested to determine
if they are ﬁt for use.

In a nutshell
• Unit testing is complete isolation

In a nutshell
• Must irrelevant to external dependencies

In a nutshell
• All unreliable or slow dependencies of a
tested unit should be stubbed

In a nutshell
• Only the logic of that single unit is exercised

In a nutshell
• Must be fast

What are differences between
functional and unit testing

What are differences between
functional and unit testing
unit functional

perspective programmer user

every module every process
goal
works as expected works as expected

all cases
coverage most user cases
even edge cases

result programmer :) user :)

Hence..
• We are programmer

Hence..
• We care our code quality

Hence..
• We care our code quality
• We should write unit test code

Why, When
of
unit testing

Why need unit testing

• Ensuring every component is bug-free


• Ensuring every component is easy to modify


• Easy to locating bug of complex logic


• Preventing and capturing regression bug


• Testable code must be high readability and
maintainability code


• Testable code must be high readability and
maintainability code
• and so on...

When to do unit testing

• When you write your own classes, modules,
libraries, frameworks.

When to do unit testing

• When you write your own classes, modules,
libraries, frameworks.
• You don’t need to write test code for
fundamental framework

testing style comparison
TDD BDD

based on function oriented feature oriented

syntax testing language idiomatic

spring from programmer stakeholder || PO

accumulation test as code test as documentation


• It doesn’t matter which style you choose


• It doesn’t matter which style you choose
• It does matter how many cases you have


As we are using Scrum,


As we are using Scrum,
BDD is more suitable for us.

BDD Framework
• Focuses on assertion, doesn’t depend on DOM

BDD Framework
• Succinct API

BDD Framework
• Succinct API
• Natively support Spy

BDD Framework
• Succinct API
• Support spec helper

BDD Framework
• Succinct API
• Be able to extend matcher

BDD Framework
• Succinct API
• Be able to run in several environments

BDD Framework
• Succinct API
1. Browser

BDD Framework
• Succinct API
1. Browser
2. CI

BDD Framework
• Succinct API
1. Browser
2. CI
3. NodeJS

Typical Spec & Succinct API
describe("Flashcard model", function () {
beforeEach(function () {
this.Flashcard = require('models/Flashcard');
});
afterEach(function () {
});

describe(“when initialized”, function() {
beforeEach(function() {
this.flashcard = new this.Flashcard({
"Value": "here",
"Translation": "这儿",
"Audio": "here_en.mp3",
"IsWord": true,
"ContentId": 174087,
"IsWordIKnow": false
});
});

it(“composite key should be composed by ContentId and IsWord properties”,
function() {
var expected_url = this.flashcard.get('ContentId') + '-' +
this.flashcard.get('IsWord');
expect(this.flashcard.id).toEqual(expected_url);
});
});

this.Flashcard = require('models/Flashcard'); Suite
});
});

"Value": "here",
"IsWord": true,
});
});

function() {
});
});

});
afterEach(function () { Inner Suite
});

"Value": "here",
"IsWord": true,
});
});

function() {
});
});

});
});

"Value": "here",
"IsWord": true,

});
Spec
});

function() {
});
});

});
});

"Value": "here",
"IsWord": true,
});
});

function() {
expect(this.flashcard.id).toEqual(expected_url); Expectation
});
});

});
});

"Value": "here",
"IsWord": true,
});
});

function() {
});
}); Matcher

this.Flashcard = require('models/Flashcard'); Setup
});
});

"Value": "here",
"IsWord": true,
});
});

function() {
});
});

this.Flashcard = require('models/Flashcard'); Setup
});
}); Tear down
"Value": "here",
"IsWord": true,
});
});

function() {
});
});

Other Native Matchers
expect(x).toEqual(y);
expect(x).toBe(y);
expect(x).toMatch(pattern);
expect(x).toBeDefined();
expect(x).toBeUndefined();
expect(x).toBeNull();
expect(x).toBeTruthy();
expect(x).toBeFalsy();
expect(x).toContain(y);
expect(x).toBeLessThan(y);
expect(x).toBeGreaterThan(y);
expect(function(){fn();}).toThrow(e);

Other Native Matchers
expect(x).not.toEqual(y);
expect(x).not.toBe(y);
expect(x).not.toMatch(pattern);
expect(x).not.toBeDefined();
expect(x).not.toBeUndefined();
expect(x).not.toBeNull();
expect(x).not.toBeTruthy();
expect(x).not.toBeFalsy();
expect(x).not.toContain(y);
expect(x).not.toBeLessThan(y);
expect(x).not.toBeGreaterThan(y);
expect(function(){fn();}).not.toThrow(e);

Spec Helper
this.fixtures = {
Flashcard: {
valid: { // response starts here
"Value": "here",
"IsWord": true,
},
error: { // response starts here
"ErrorCode": "101",
"IsSuccess": "false"
}
}
}

Spec Helper
this.fixtures = {
Flashcard: {
valid: { // response starts here
"Value": "here",
"IsWord": true,
},
error: { // response starts here
"ErrorCode": "101",
"IsSuccess": "false"
}
}
}

Using this.fixtures.Flashcard.valid to access pre-defined fixture
for testing when this spec file is included in your spec runner.

Spy
});

spyOn(jQuery, ‘ajax’);
this.flashcard = new this.Flashcard();
this.flashcard.fetch();
});

it(“should communicate with back-end via http get method”, function() {
expect(jQuery.ajax).toHaveBeenCalled();
expect(jQuery.ajax.mostRecentCall.args[0].type).toEqual(‘GET’);
});
});
});

Spy
});

spyOn(jQuery, ‘ajax’); spy on instance method
});

});
});
});

Spy
});

}); original function won’t be called
});
});
});

Spy
});

});

});
}); match spied function was called
});

Spy
});

});

});
});
}); arguments of last call

Spy
});

});

});
});
}); arguments of last call type of ﬁrst argument

Extending Matcher
<a href=”#” class=”link”>this is a link</a>
expect($(‘a’).hasClass('s-selected')).toBeTruthy();
expectation failed:
Expected false to be truthy.

Extending Matcher
expectation failed:

jasmine-jquery comes to rescue

Matcher from
jasmine jquery
expectation failed:

Matcher from
jasmine jquery
expectation failed:

expect($(‘a’).toHaveClass(‘s-selected’);

Matcher from
jasmine jquery
expectation failed:

expectation failed:

Matcher from
jasmine jquery
expectation failed:

expectation failed:
Expected '<a></a>' to have class 's-selected'.

jasmine-jquery features

• a set of custom matchers for jQuery
framework
• an API for handling HTML ﬁxtures in your
specs

jasmine-jquery matchers
expect(x).toBeHidden()
expect(x).toBeVisible()
expect(x).toHaveAttr(attributeName, attributeValue)
expect(x).toHaveProp(propertyName, propertyValue)
expect(x).toHaveText(string)
expect(x).toHaveHtml(string)
expect(x).toHaveId(id)
expect(x).toBeDisabled()
expect(x).toBeFocused()
expect(x).toHandle(eventName)

jasmine-jquery ﬁxtures
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...;

Running Jasmine
Standalone Runner

* Manually manage of your project files and specs

Running Jasmine
Dedicated Server runs jasmine
Ruby jasmine Gem

* Using yaml manages of your project files and specs

Recap rules of Unit Testing

• Must be fast

Stub every dependency

• Native spy feature of Jasmine is not enough


• It doesn’t support fake timer


• It doesn’t support fake HTTP server


• It misuses Spy and Stub


• It misuses Spy and Stub

Sinon.js comes to rescue

Spy/Stub/Mock
• A test spy is a function that records arguments, return value,
the value of this and exception thrown (if any) for all its calls.
A test spy can be an anonymous function or it can wrap an
existing function.

Spy/Stub/Mock
existing function.

• Test stubs are functions (spies) with pre-programmed
behavior. They support the full test spy API in addition to
methods which can be used to alter the stub's behavior.

Spy/Stub/Mock
existing function.

• Test stubs are functions (spies) with pre-programmed
behavior. They support the full test spy API in addition to
methods which can be used to alter the stub's behavior.

• Mocks (and mock expectations) are fake methods (like spies)
with pre-programmed behavior (like stubs) as well as pre-
programmed expectations. A mock will fail your test if it is not
used as expected.

Spy/Stub/Mock

Spy

Stub

Spy/Stub/Mock

Spy

Stub

Mock

Spy
describe("when initialized", function () {
sinon.spy(this, "Flashcards"); create a spy for this.Flashcards
})

afterEach(function() {
this.Flashcards.restore();
})

it("should throw Error when cultureCode is not passed", function() {
try {
var flashcards = new this.Flashcards([], {
});
} catch(e) {}
expect(this.Flashcards.calledOnce()).toBeTruthy();
expect(this.Flashcards.threw()).toBeTruthy();
expect(this.Flashcards.calledWith([], {})).toBeTruthy();
});
});

Spy
sinon.spy(this, "Flashcards");
})

this.Flashcards.restore(); unwraps the spy
})

try {
});
} catch(e) {}
});
});

Spy
})

})

try {
});
} catch(e) {}
expect(this.Flashcards.calledOnce()).toBeTruthy(); spy was called once
});
});

Spy
})

})

try {
});
} catch(e) {}
});
});
spy threw exception at least once

Spy
})

})

try {
});
} catch(e) {}
});
}); spy was called at least once with
provided argument

Stub
describe("when update model", function () {
this.sync = sinon.stub(Backbone, "sync");
});

afterEach(function () { create a stub for this.Flashcards
this.sync.restore();
});

it("should put IsWordIKnow and IsWord properties at the end of url property",
function () {
this.flashcard.set('IsWordIKnow', true);

var expected_url = this.flashcard.url() + '&IsWordIKnow=' +
this.flashcard.get('IsWordIKnow') + '&IsWord=' + this.flashcard.get('IsWord');

this.flashcard.save();

expect(this.sync.getCall(0).args[2].url).toEqual(expected_url);
});
});

Stub
});

});

function () {



});
});
save method will invoke Backbone.sync that already stubbed

Stub
});

});

function () {



});
});
original sync method won’t be called if it was stubbed
So, no ajax request won’t be ﬁred

Stub
});

});

function () {



});
});

get arguments of stubbed calling (spy can also do this)

Stub
But, Spy cannot do like so:

it("should always confirm every confirmation", function () {
sinon.stub(window, 'confirm');
confirm.returns(true);
expect(confirm('Are you sure?')).toBeTruthy();
window.confirm.restore();
}

Makes window.conﬁrm() return truth

Stub

}

Native conﬁrm behavior won’t ﬁred

Stub

}

Native confirm behavior won’t fired

It needs user interaction to finish this test without stub.
This test probably be failed if user not confirms with it.
That test case is unstable.

Mock

• Mock focuses on implementation details of
one method
• It utilizes upfront expectation to verify details
rather than asserting after the details

Mock
var myAPI = { method: function () {} };

var spy = sinon.spy();
var mock = sinon.mock(myAPI);
mock.expects("method").once(); expectation upfront
myAPI.method();
spy();
verify mock behavior
mock.verify();
expect(spy.calledOnce).toBeTruthy();
});
});

Without FakeTimers
it("should show teacher box after 1 hour", function () {
var hour = 1000 * 60 * 60;
setTimeout(showTeacherbox, hour);

waits(hour); must wait 1 hour...crazy
runs(function() {
expect($(‘#teacherbox’)).toBeVisible();
});
});

FakeTimers
this.clock = sinon.useFakeTimers();
var hour = 1000 * 60 * 60;
create a fake timer

this.clock.tick(hour);

this.clock.restore();
});

FakeTimers
var hour = 1000 * 60 * 60;

tick the clock ahead 1 hour
this.clock.tick(hour);

});

FakeTimers
var hour = 1000 * 60 * 60;


this.clock.tick(hour - 1);
expect($(‘#teacherbox’)).toBeHidden(); won’t happen

this.clock.tick(1);
expect($(‘#teacherbox’)).toBeVisible(); will happen

});

Fake Server
});

describe(“when fetch”, function() {
this.server = sinon.fakeServer.create();
this.flashcard = new this.Flashcard({contentId: 174087});
});
this.server.restore();
});

it(“should get data from backend”, function() {
this.server.respondWith(
"GET",
"/community/dailylesson/wordiknowupdate.ashx?contentId=174087",
[200,
{ "Content-Type": "application/json" },
'{ "Value": "here", "Translation": "这儿", "Audio": "here_en.mp3", "IsWord": true,
"ContentId": 174087, "IsWordIKnow": false }'
]
);
this.server.respond();

expect(this.flashcard.get(‘Value’)).toEqual(‘here’);
});
});
});

Fake Server
});

beforeEach(function() { Fake server stub XHR
});
});

"GET",
[200,
]
);

});
});
});

Fake Server
});

});
}); responds to given URL and HTTP method
"GET",
[200,
]
);

});
});
});

Fake Server
});

});
});

given HTTP method
"GET",
[200,
]
);

});
});
});

Fake Server
});

});
});

given URL
"GET",
[200,
]
);

});
});
});

Fake Server
});

});
});

"GET",
[200,
{ "Content-Type": "application/json" }, fake response header
]
);

});
});
});

Fake Server
});

});
});

"GET",
[200,
]
); fake response body

});
});
});

Fake Server
});

});
});

"GET",
[200,
]
);
immediately responds with fake data

});
});
});

Fake Server
});

});
});

"GET",
[200,
]
);

expect(this.flashcard.get(‘Value’)).toEqual(‘here’); verify changes
});
});
});

Next Step
• ﬁxture management
• DOM
• HTTP Response
• Code Coverage for Javascript
• Integration with CI
• Integration with jsTestDriver

Thank you

if you like this topic please give me

Client Side Unit Testing

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Client Side Unit Testing (20)

Recently uploaded (20)

Client Side Unit Testing

Editor's Notes