Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 d...
Unit Testing in JavaScript?
JavaScript is everywhere
Browsers
Servers
Operation Systems
Databases
Mobile
Devices
You are d...
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 ...
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 fi...
Demo
Setting the Environment
Jasmine Tests Suites
First create a Suite which is a container of Specs
Use the describe function
describe("Suite Name", f...
Jasmine Tests
A Spec (Test) is defined by calling the it function
Receives a spec name and a spec callback function
Contai...
Expectations
Expectations are assertions that can be either
true or false
Use the expect function within a spec to declare...
Matchers
it("matchers", function() {
var a = 12;
var b = a;
var c = function () {
}
expect(a).toBe(b);
expect(a).not.toBe(...
Demo
Creating Suites and Specs
Setup and Teardown
Jasmine includes
beforeEach – runs before each test
afterEach – runs after each test
Should exists insi...
Setup and Teardown Example
describe("A suite", function() {
var index = 0;
beforeEach(function() {
index += 1;
});
afterEa...
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, crea...
Demo
Working with Spies
Jasmine Async Support
Jasmine enables to test async code
Calls to beforeEach, it, and afterEach take an
additional done fu...
Demo
Working with Async Functions
Jasmine and Karma
Karma is a test runner for JavaScript
Executes JavaScript code in multiple browser
instances
Makes BDD/T...
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 c...
Resources
Session slide deck – http://slidesha.re/1mO08Mq
Jasmine – http://jasmine.github.io/
My Website – http://www.gilf...
THANK YOU
Gil Fink
@gilfink
http://www.gilfink.net
Upcoming SlideShare
Loading in …5
×

Front end unit testing using jasmine

1,057 views

Published on

A session about BDD and unit testing with Jasmine framework

Published in: Technology, Education
  • Be the first to comment

Front end unit testing using jasmine

  1. 1. SELA DEVELOPER PRACTICE Gil Fink Front-End Unit Testing Using Jasmine
  2. 2. Agenda Unit Testing in JavaScript? Behavior Driven Development Jasmine Jasmine and Karma
  3. 3. Life Without Unit Testing
  4. 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. 5. Unit Testing in JavaScript? JavaScript is everywhere Browsers Servers Operation Systems Databases Mobile Devices You are doing it in any other language…
  6. 6. Behavior Driven Development (BDD)
  7. 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. 8. Jasmine A JavaScript BDD framework Can be downloaded from: http://jasmine.github.io/
  9. 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. 10. Demo Setting the Environment
  11. 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. 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. 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. 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. 15. Demo Creating Suites and Specs
  16. 16. Setup and Teardown Jasmine includes beforeEach – runs before each test afterEach – runs after each test Should exists inside a test suite
  17. 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. 18. Demo Using Setup and Teardown
  19. 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. 20. Demo Working with Spies
  21. 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. 22. Demo Working with Async Functions
  23. 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. 24. Demo Jasmine and Karma
  25. 25. Questions
  26. 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. 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. 28. THANK YOU Gil Fink @gilfink http://www.gilfink.net

×