Successfully reported this slideshow.
Your SlideShare is downloading. ×

Quick tour to front end unit testing using jasmine

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Quick tour to front end unit testing using jasmine

  1. 1. Quick Tour to Front-End Unit Testing Using Jasmine #devconnections Gil Fink Senior Consultant sparXys
  2. 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. 3. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Why Unit Testing?
  4. 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. 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. 6. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE BDD and TDD
  7. 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. 8. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Jasmine • A JavaScript BDD framework • Can be downloaded from: http://jasmine.github.io/
  9. 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. 10. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Demo SETTING THE ENVIRONMENT
  11. 11. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Suggested Folder Structure js |--tests | |--spec |--vendor | |--Jasmine SpecRunner.html #devconnections
  12. 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. 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. 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. 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. 16. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Demo CREATING SUITES AND SPECS
  17. 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. 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. 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. 20. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Demo USING SETUP AND TEARDOWN
  21. 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. 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. 23. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Demo WORKING WITH SPIES
  24. 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. 25. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Demo WORKING WITH ASYNC FUNCTIONS
  26. 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. 27. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE Demo JASMINE AND KARMA
  28. 28. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE QUESTIONS?
  29. 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. 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. 31. QUICK TOUR TO FRONT-END UNIT TESTING USING JASMINE THANK YOU

×