Unit Testing with JavaScript

1. Unit Testing with JavaScript QUnit, Jasmine and JsUnit Telerik Software Academy Learning & Development Team http://academy.telerik.com

2. Table of Contents • What is Unit Testing? • Code and Test vs. Test Driven Development • Unit testing Frameworks • JsUnit, QUnit, Jasmine • Unit Testing Best Practices

3. What is Unit Testing?

4. Unit Test – Definition A unit test is a piece of code written by a developer that exercises a very small, specific area of functionality of the code being tested. “Program testing can be used to show the presence of bugs, but never to show their absence!” Edsger Dijkstra, [1972]

5. Manual Testing • You have already done unit testing • Manually, by hand • Manual tests are less efficient • Not structured • Not repeatable • Not on all your code • Not easy to do as it should be

6. Unit Test – Example function sum(numbers) { var sum = 0; for (var i=0; i<numbers.length; i++) sum += array[i]; return sum; } void testSum() { if (sum([1,2]) != 3) throw new Error("1+2 != 3"); if (sum([-2]) != -2) throw new Error("-2 != -2"); if (sum([]) != 0) throw new Error("0 != 0"); }

7. Unit Testing – Some Facts • Tests are specific pieces of code • In most cases unit tests are written by developers, not by QA engineers • Unit tests are released into the code repository (TFS / SVN / Git) along with the code they test • Unit testing framework is needed • QUnit, Jasmine, JsUnit

8. Unit Testing – More Facts • All objects should be tested • All methods should be tested • Trivial code may be omitted • E.g. property getters and setters • Private methods can be omitted • Some gurus recommend to never test private methods  this can be debatable • Ideally all unit tests should pass before check-in into the source control repository

9. Why Unit Tests? • Unit tests dramatically decrease the number of defects in the code • Unit tests improve design • Unit tests are good documentation • Unit tests reduce the cost of change • Unit tests allow refactoring • Unit tests decrease the defect-injection rate due to refactoring / changes

10. Unit Testing in JavaScript

11. Unit Testing in JavaScript • There are too many frameworks for unit testing for JavaScript • QUnit • Developed to test jQuery • Later introduced as а separate framework • JsUnit • Come from the *Unit family (JUnit, NUnit, etc…) • Stopped from development • Jasmine • Uses behavior-driven development

12. Jasmine Overview

13. Jasmine • Jasmine is a behavior-driven development framework for testing JavaScript • Independent framework, no need for DOM or any other framework • Can test both Client and Server JavaScript • Node.js and stuff • Source code and documentation can be found at http://jasmine.github.io/

14. Jasmine Use • To use Jasmine: • Create an HTML page • Load its JavaScript and CSS files • Setup Jasmine • Write your specs

15. Setting up Jasmine • Since Jasmine can run in the console, it should be set up to work with HTML page • Just copy and paste the following: (function() { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval= 1000; var htmlReporter = new jasmine.HtmlReporter(); jasmineEnv.addReporter(htmlReporter); jasmineEnv.specFilter= function(spec) { return htmlReporter.specFilter(spec); }; var currentWindowOnload = window.onload; window.onload= function() { if (currentWindowOnload) { currentWindowOnload();} execJasmine(); }; function execJasmine() { jasmineEnv.execute(); } })();

16. Setting up Jasmine Live Demo

17. Jasmine Test Suites and Specs

18. Jasmine Test Suites • A test suite is a block that tests some behavior • Contains a set of tests for this behavior • Done by calling a function describe • Describe has two parameters: • A string, containing the test suite title • A function, implementing the test suite tests describe("Test Suite Title", function() { it("Spec Title", function() { expect(true).toBe(true); }); });

19. Jasmine Specs • A spec is the actual test • Done by invoking a function it • Has two parameters • Spec title • Spec body, containing the test function sum(a, b) {} describe("Sum", function() { it("When 2 and 3, should return 5", function() { var actual = sum (2, 3); var expected = 5; expect(actual).toBe(expected); }); });

20. Jasmine Test Suitesand Specs Live Demo

21. Jasmine Expectationsand Matchers

22. Jasmine Expectations • A Jasmine expectation is an assert • It checks for the value of an operation • A Matcher is a function that is called on an expectation and checks for the value of the operation expect(actual).toBe(expected); //compares with === expect(actual).toEqaul(expected); //compares with == expect(actual).not.toBe(expected); //compares with !== expect(actual).toBeTruthy(); //whether it is TRUE expect(actual).toBeFalsy(); //whether it is TRUE expect(actual).toBeNull(); expect(actual).toBeLessThan(expected); expect(actual).toThrow()

23. Jasmine Expectationsand Matchers Live Demo

24. Setup and Teardown

25. Setup and Teardown • Jasmine has callbacks to execute before and after each spec • Done by using functions beforeEach and afterEach • Both take just a callback handler to be executed describe(…, function(){ beforeEach(function(){ … }); afterEach(function(){ … }); });

26. Nested Test Suites

27. Nested Test Suites • Test Suites can be nested in on another • describe in describe, in describe, etc… • Each of them can contain specs describe("Snake", function(){ //consume Snake behavior describe("init", function(){ //test init behavior }); describe("move", function(){ //test move behavior }); describe("consume", function(){ //test consume behavior }); });

28. Nested Test Suites Live Demo

29. Unit Testing in JavaScript http://academy.Telerik.com