Quick tour to front end unit testing using jasmine

Quick Tour to Front-End Unit
Testing Using Jasmine
#devconnections
Gil Fink
Senior Consultant
sparXys

QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Agenda
• Why Unit Testing?
• Unit Testing in JavaScript?
• Behavior Driven Development
• Jasmine
• Jasmine and Karma

Why Unit Testing?

Why Unit Testing?
• Tests
– Act as safety net when you modify your
code
• Increase your confidence in your code
– Encourage good design
– Help to detect bugs in early stages of the
project
– Serve as live documentation

Behavior Driven Development
• In BDD you
– describe your code
– tell the test what it (the code) should do
– expect your code to do something
//suite
describe ('', function(){
//test
it ('', function(){
//expectation
expect();
)};
});

BDD and TDD

Unit Testing in JavaScript?
• JavaScript is everywhere
– Browsers
– Servers
– Operation Systems
– Databases
– Mobile
– Devices
• You are doing it in any other language…

Jasmine
• A JavaScript BDD framework
• Can be downloaded from:
http://jasmine.github.io/

Setting Up The Environment
• Download Jasmine
– or use a package manager such as Bower or
Nuget
• Create a Spec (Test) Runner file
– Responsible to run all the unit tests
– Runs in the browser
• Create the Unit Test files
• Jasmine can also run headless
– Without a browser context

Demo
SETTING THE ENVIRONMENT

Jasmine Tests Suites
• First create a Suite which is a container
of Specs
– Use the describe function
– Typically a single suite should be written
for each JavaScript file
describe("Suite Name", function() {
// Put here your tests
});

Jasmine Tests
• A Spec (Test) is defined by calling the it
function
– Receives a spec name and a spec
callback function
– Contains expectations that test the state
describe("Suite Name", function() {
it("a spec with one expectation", function() {
– of the code
// create the spec body
});
});

Expectations
• Expectations are assertions
– Can be either true or false
• Use the expect function within a spec
to declare an expectation
– Receives the actual value as parameter
• Include fluent API for matchers
– A Matcher is a comparison between the
actual and the expected values

Matchers Example
it("matchers", function() {
var a = 12;
var b = a;
var c = function () {
}
expect(a).toBe(b);
expect(a).not.toBe(null);
expect(a).toEqual(12);
expect(null).toBeNull();
expect(c).not.toThrow();
});

Demo
CREATING SUITES AND SPECS

More on Suites and Specs
• You can disable a test suite by using
xdescribe
• You can mark a spec as pending (not
running)
– Using xit
– By calling the pending function
xdescribe("A spec", function() {
xit(“that is pending", function() {
pending();
});
});
#devconnections

Setup and Teardown
• Jasmine includes
– beforeEach – runs before each test
– afterEach – runs after each test
• Should exists inside a test suite

Setup/Teardown Example
describe("A suite", function() {
var index = 0;
beforeEach(function() {
index += 1;
});
afterEach(function() {
index = 0;
});
it("a spec", function() {
expect(index).toEqual(1);
});
});

Demo
USING SETUP AND TEARDOWN

Nested describe Calls
• Calls for describe can be nested
– Good for creation of hierarchies
• The beforeEach/afterEach of nested
describe runs after a parent describe
describe("A spec", function() {
describe("nested inside a second describe", function() {
});
});
#devconnections

Working with Spies
• A spy is a test double object
• It replaces the real implementation
and fake its behavior
• Use spyOn, createSpy and
createSpyObj functions

Demo
WORKING WITH SPIES

Jasmine Async Support
• Jasmine enables to test async code
• Calls to beforeEach, it, and afterEach
take an additional done function
beforeEach(function(done) {
setTimeout(function() {
value = 0;
done();
}, 1);
});
// spec will not start until the done in beforeEach is called
it("should support async execution", function(done) {
value++;
expect(value).toBeGreaterThan(0);
done();
});

Demo
WORKING WITH ASYNC
FUNCTIONS

Jasmine and Karma
• Karma is a test runner for JavaScript
– Executes JavaScript code in multiple
browser instances
– Makes BDD/TDD development easier
– Can use any JavaScript testing library
• In this session we will use Jasmine

Demo
JASMINE AND KARMA

QUESTIONS?

Summary
• Unit Tests are an important part of any
development process
• Jasmine library can help you test your
JavaScript code
• Add tests to your JavaScript code!

Resources
• Session slide deck –
• Jasmine – http://jasmine.github.io/
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink

THANK YOU

Quick tour to front end unit testing using jasmine

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Quick tour to front end unit testing using jasmine (20)

More from Gil Fink (20)

Recently uploaded (20)

Quick tour to front end unit testing using jasmine