quick tour to front-end unit testing using jasmine
DESCRIPTION
A session about JavaScript unit testing and Jasmine frameworkTRANSCRIPT
![Page 1: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/1.jpg)
Gil Fink Senior Consultant
sparXys
Quick Tour to Front-End
Unit Testing Using
Jasmine
![Page 2: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/2.jpg)
Agenda
Unit Testing in JavaScript?
Behavior Driven Development
Jasmine
Jasmine and Karma
![Page 3: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/3.jpg)
Life Without Unit Testing
![Page 4: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/4.jpg)
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
![Page 5: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/5.jpg)
Unit Testing in JavaScript?
JavaScript is everywhere
Browsers
Servers (Node.js, Meteor and etc.)
Operation Systems
Databases
Mobile
Devices
You are doing it in any other language…
![Page 6: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/6.jpg)
Behavior Driven Development (BDD)
![Page 7: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/7.jpg)
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(); )}; });
![Page 8: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/8.jpg)
Jasmine
A JavaScript BDD framework
Can be downloaded from: http://jasmine.github.io/
![Page 9: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/9.jpg)
Setting Up The Environment
Download Jasmine: http://jasmine.github.io/ 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
![Page 10: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/10.jpg)
Demo
Setting the Environment
![Page 11: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/11.jpg)
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
});
![Page 12: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/12.jpg)
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
});
});
![Page 13: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/13.jpg)
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
![Page 14: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/14.jpg)
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();
});
![Page 15: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/15.jpg)
Demo
Creating Suites and Specs
![Page 16: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/16.jpg)
Setup and Teardown
Jasmine includes
beforeEach – runs before each test
afterEach – runs after each test
Should exists inside a test suite
![Page 17: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/17.jpg)
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);
});
});
![Page 18: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/18.jpg)
Demo
Using Setup and Teardown
![Page 19: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/19.jpg)
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
![Page 20: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/20.jpg)
Demo
Working with Spies
![Page 21: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/21.jpg)
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(); });
![Page 22: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/22.jpg)
Demo
Working with Async Functions
![Page 23: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/23.jpg)
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
![Page 24: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/24.jpg)
Demo
Jasmine and Karma
![Page 25: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/25.jpg)
Questions
![Page 26: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/26.jpg)
Summary
Unit Tests are an important part of any development process
Jasmine library can help you to test your JavaScript code
Unit Test your JavaScript code today!
![Page 27: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/27.jpg)
Resources
Session slide deck and demos –
Jasmine – http://jasmine.github.io/
My Website – http://www.gilfink.net
Follow me on Twitter – @gilfink
![Page 28: Quick Tour to Front-End Unit Testing Using Jasmine](https://reader033.vdocuments.us/reader033/viewer/2022042814/554a042bb4c905557a8b531f/html5/thumbnails/28.jpg)
THANK YOU
Gil Fink @gilfink http://www.gilfink.net