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 Gil Fink Join the conversation on Twitter: @SoftArchConf #SA2014
  2. 2. Agenda • Why Unit Testing? • Behavior Driven Development • Unit Testing in JavaScript? • 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. Behavior Driven Development • Development approach based on test driven development (TDD) • Combines the good parts of different development approaches – Test driven development (TDD) – Domain driven development (DDD) – Object oriented analysis (OOA) – Object oriented design (OOD) – The combination of approaches isn’t mandatory
  6. 6. Behavior Driven Development – Cont. • BDD specifies that tests should be created for the requirements (behaviors) – Set by the business owners • Developers and business owners should collaborate to specify the requirements • The output of the tests should be readable – For to the developer – For the business owners
  7. 7. BDD and TDD
  8. 8. BDD Language • 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(); )}; });
  9. 9. Unit Testing in JavaScript? • JavaScript is everywhere – Browsers – Servers – Operation Systems – Databases – Mobile – Devices • You are doing it in any other language…
  10. 10. Jasmine • JavaScript BDD framework • Can be downloaded from: http://jasmine.github.io/
  11. 11. 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
  12. 12. Demo SETTING THE ENVIRONMENT
  13. 13. Suggested Folder Structure js |--src |--tests | |--spec |--vendor | |--jasmine SpecRunner.html
  14. 14. Jasmine Tests Suites • First create a Suite which is a Specs container – Use the describe function – Typically a single suite should be written for each JavaScript file describe("Suite Name", function() { // Put here your tests });
  15. 15. 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 de scribe("Suite Name", function() { it("a spec with one expectation", function() { // create the spec body }); });
  16. 16. 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
  17. 17. Matchers Example it("matchers", function() { var a = 12, b = a, c = function () { }; expect(a).toBe(b); expect(a).not.toBe(null); expect(a).toEqual(12); expect(null).toBeNull(); expect(c).not.toThrow(); });
  18. 18. Demo CREATING SUITES AND SPECS
  19. 19. 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(); }); });
  20. 20. Creating a Custom Matcher • You can create your own custom matcher • The matcher should return true/false according to the actual value and the expectation you set
  21. 21. Setup and Teardown • Jasmine includes – beforeEach – runs before each test – afterEach – runs after each test • Should exists inside a test suite
  22. 22. 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); }); });
  23. 23. Demo USING SETUP AND TEARDOWN
  24. 24. 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() { }); });
  25. 25. 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
  26. 26. Demo WORKING WITH SPIES
  27. 27. 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(); });
  28. 28. Demo WORKING WITH ASYNC FUNCTIONS
  29. 29. 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
  30. 30. Demo JASMINE AND KARMA
  31. 31. Questions?
  32. 32. 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!
  33. 33. Resources • Session slide deck – • Jasmine – http://jasmine.github.io/ • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
  34. 34. Thank You

×