Quick tour to front end unit testing using jasmine
1. Quick Tour to Front-End Unit
Testing Using Jasmine
#devconnections
Gil Fink
Senior Consultant
sparXys
2. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Agenda
⢠Why Unit Testing?
⢠Unit Testing in JavaScript?
⢠Behavior Driven Development
⢠Jasmine
⢠Jasmine and Karma
3. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Why Unit Testing?
4. 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
5. 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();
)};
});
6. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
BDD and TDD
7. 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âŚ
8. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Jasmine
⢠A JavaScript BDD framework
⢠Can be downloaded from:
http://jasmine.github.io/
9. 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
10. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Demo
SETTING THE ENVIRONMENT
11. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Suggested Folder Structure
js
|--tests
| |--spec
|--vendor
| |--Jasmine
SpecRunner.html
#devconnections
12. 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
});
13. 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
describe("Suite Name", function() {
it("a spec with one expectation", function() {
â of the code
// create the spec body
});
});
14. 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
15. 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();
});
16. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Demo
CREATING SUITES AND SPECS
17. 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
xdescribe("A spec", function() {
xit(âthat is pending", function() {
pending();
});
});
#devconnections
18. 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
19. 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);
});
});
20. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Demo
USING SETUP AND TEARDOWN
21. 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
describe("A spec", function() {
describe("nested inside a second describe", function() {
});
});
#devconnections
22. 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
23. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Demo
WORKING WITH SPIES
24. 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();
});
25. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Demo
WORKING WITH ASYNC
FUNCTIONS
26. 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
27. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
Demo
JASMINE AND KARMA
28. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
QUESTIONS?
29. 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!
30. 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
31. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE
THANK YOU