SELA DEVELOPER PRACTICE

Gil Fink

Front-End Unit Testing

Using Jasmine

Agenda

Unit Testing in JavaScript?

Behavior Driven Development

Jasmine

Jasmine and Karma

Life Without 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

Unit Testing in JavaScript?

JavaScript is everywhere

Browsers

Servers

Operation Systems

Databases

Mobile

Devices

You are doing it in any other language…

Behavior Driven Development (BDD)

BDD – Cont.

In BDD you describe your code

tell the test what it (the code) should do

expect your code to do something

The user can read the output and understand it

//suite describe ('', function(){ //test it ('', function(){ //expectation expect(); )}; });

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

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 that can be either true or false

Use the expect function within a spec to declare an expectation

Receives the actual value to test as parameter

Include fluent API for matchers

A Matcher is a Boolean comparison between the actual value and the expected value

Matchers

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

Setup and Teardown

Jasmine includes

beforeEach – runs before each test

afterEach – runs after each test

Should exists inside a test suite

Setup and 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

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 to test your JavaScript code

Add tests to your JavaScript code!

Resources

Session slide deck – http://slidesha.re/1mO08Mq

Jasmine – http://jasmine.github.io/

My Website – http://www.gilfink.net

Follow me on Twitter – @gilfink

THANK YOU

Gil Fink @gilfink http://www.gilfink.net