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


SETTING THE ENVIRONMENT

Demo


Suggested Folder Structure

js

|--tests

| |--spec

|--vendor

| |--Jasmine

SpecRunner.html

#devconnections


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

– of the code

describe("Suite Name", function() {

it("a spec with one expectation", function() {

// 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();

});


CREATING SUITES AND SPECS

Demo


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

#devconnections

xdescribe("A spec", function() {

xit(“that is pending", function() {

pending();

});

});


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);

});

});


USING SETUP AND TEARDOWN

Demo


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

#devconnections

describe("A spec", function() {

describe("nested inside a second describe", function() {

});

});


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


WORKING WITH SPIES

Demo


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();

});


WORKING WITH ASYNC

FUNCTIONS

Demo


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


JASMINE AND KARMA

Demo


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



http://www.gilfink.net/


THANK YOU

Technology

Quick tour to front end unit testing using jasmine