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.

Quick tour to front end unit testing using jasmine

2,462 views

Published on

A session that I deliver in DevConnections 2014. The session explains how to do JavaScript unit testing using the Jasmine framework.

Published in: Technology
  • Be the first to comment

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

×