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

649 views

Published on

A session from Software Architect 2014 conference.

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

×