Post on 01-Nov-2014
description
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
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Why Unit Testing?
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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();
)};
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
BDD and TDD
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Unit Testing in JavaScript?
• JavaScript is everywhere
– Browsers
– Servers
– Operation Systems
– Databases
– Mobile
– Devices
• You are doing it in any other language…
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Jasmine
• A JavaScript BDD framework
• Can be downloaded from:
http://jasmine.github.io/
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
SETTING THE ENVIRONMENT
Demo
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Suggested Folder Structure
js
|--tests
| |--spec
|--vendor
| |--Jasmine
SpecRunner.html
#devconnections
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
});
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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();
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
CREATING SUITES AND SPECS
Demo
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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();
});
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Setup and Teardown
• Jasmine includes
– beforeEach – runs before each test
– afterEach – runs after each test
• Should exists inside a test suite
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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);
});
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
USING SETUP AND TEARDOWN
Demo
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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() {
});
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
WORKING WITH SPIES
Demo
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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();
});
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
WORKING WITH ASYNC
FUNCTIONS
Demo
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
JASMINE AND KARMA
Demo
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
QUESTIONS?
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
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!
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Resources
• Session slide deck –
• Jasmine – http://jasmine.github.io/
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink
QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
THANK YOU