A session about BDD and unit testing with Jasmine framework

1. SELA DEVELOPER PRACTICE
Gil Fink
Front-End Unit Testing
Using Jasmine

2. Agenda
Unit Testing in JavaScript?
Behavior Driven Development
Jasmine
Jasmine and Karma

3. Life Without Unit Testing

4. 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. Unit Testing in JavaScript?
JavaScript is everywhere
Browsers
Servers
Operation Systems
Databases
Mobile
Devices
You are doing it in any other language…

6. Behavior Driven Development (BDD)

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

8. Jasmine
A JavaScript BDD framework
Can be downloaded from:
http://jasmine.github.io/

9. 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. Demo
Setting the Environment

11. 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
});

12. 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
});
});

13. 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

14. 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();
});

15. Demo
Creating Suites and Specs

16. Setup and Teardown
Jasmine includes
beforeEach – runs before each test
afterEach – runs after each test
Should exists inside a test suite

17. 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);
});
});

18. Demo
Using Setup and Teardown

19. 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

20. Demo
Working with Spies

21. 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();
});

22. Demo
Working with Async Functions

23. 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

24. Demo
Jasmine and Karma

25. Questions

26. 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!

27. Resources
Session slide deck – http://slidesha.re/1mO08Mq
Jasmine – http://jasmine.github.io/
My Website – http://www.gilfink.net
Follow me on Twitter – @gilfink

28. THANK YOU
Gil Fink
@gilfink
http://www.gilfink.net