Unit Testing with JavaScript

1. Unit Testing with JavaScript QUnit, Jasmine and JsUnit Doncho Minkov Telerik Software Academy http://academy.telerik.com Technical Trainer http://minkov.it

2. Table of Contents • Unit Testing • QUnit • Tests • Assertions and Modules • DOM Testing • Jasmine • Behavior-driven Development • Specs, describes and assertions • Matchers

3. Unit Testing

4. Unit Testing • Unit Testing is part of the development process • Used to test programming code • Tests programming code in small pieces (units) • Unit testing means testing in units • Testing the functions of a class, means the class works well

5. Unit Testing in JavaScript

6. Unit Testing in JavaScript • There are too many frameworks for component 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

7. QUnit Overview

8. QUnit • Used to test jQuery components (jQuery, jQueryUI, jQuery Mobile) • Lately introduced as a independent framework • No need of jQuery to use QUnit • QUnit supports synchronous and asynchronous testing, DOM testing

9. QUnit Use • To use QUnit: • Create an HTML page • Create a div with id "qunit" • Load its JavaScript and CSS files • Write your tests and assertions

10. Testing with QUnit • QUnit introduces a test method • It takes two parameters • A success message • An a test function function sum(a, b){…} test("Sum, when 2 and 3, should return 5", function(){ ok(sum(2,3) === 5, "expected result is 5"); });

11. Simple Unit Testing Live Demo

12. Assertions • Assertions are the actual test components • QUnit supports three types of assertions • ok(bool value [, message]) • Checks if the value is TRUE • equal(actual, expected [, message]) • Checks if actual and expected are equal • Uses == operator • deepEqual(actual, expected [, message]) • Deep recursive check, property by property • Also, does a strict check (type and value)

13. QUnit Assertions • Test methods can contain any number of asserts test("creating snake piece, should set correct values", function(){ varposition={x:150,y:150},size=15,speed=5,dir=0; var piece = new SnakePiece(position, size, speed, dir); equal(piece.position, position) equal(piece.size, "15"); //asserts TRUE deepEqual(piece.size, 15); //asserts FALSE }); test("SnakePiece.move,whendirectionis0,shouldupdatex", function(){ varposition={x:150,y:150},size=15,speed=5,dir=0; var piece = new SnakePiece(position, size, speed, dir); piece.move(); position.x - speed; deepEqual(piece.position, position); });

14. QUnit Assertions Live Demo

15. QUnit Modules • QUnit also introduces a way to create modules, so that tests can be organized in sections module("SnakePiece"); test("move,whendirectionis0,shouldupdatex"); test("move,whendirectionis1,shouldupdatey"); … test("equals, when pieces are colliding); test("equals, when pieces are not colliding); … module("Snake"); test("move,whendirectionis0,shouldupdatex"); test("move,whendirectionis1,shouldupdatey"); … test("consume, when object is Food, should grow snake"); test("consume, when object is Obstacle, should die"); …

16. QUnit Modules Live Demo

17. testStart, testDone

18. testStart and testDone • QUnit introduces callbacks to be called before and after test execution • testStart(startCallback) • Invoked before the execution of each test • Used to build and prepare the objects • testDone(doneCallback) • Invoked after the execution of each test • Mostly used for cleanup operations

19. Asynchronous Tests

20. Asynchronous Tests • QUnit supports asynchronous tests as well • Use asyncTest function instead of test function • Call start() right after all the assertions asyncTest("Asynchronous Test", function(){ setTimeout(function(){ ok(true); start(); }, 1000); });

21. Asynchronous Tests Live Demo

22. DOM Testing

23. DOM Testing • DOM can also be tested with Qunit • Create a div with id "qunit-fixture" • Everything inside it will be reset before each test function addDivs(root, count){ … } test("addDivs, when count is 5", function(){ varfixture=document.getElementById("qunit-fixture"); var count = 5; addDivs(fixture, count); var divs = fixture.getElementsByTagName("div"); equal(divs.length, count); });

24. DOM Testing Live Demo

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

26. Homework • Finish the Unit Tests for MovingGameObject • Finish the tests for Snake • Fix the big with the collision detection • Implement game logic, so the Snake dies, when it bites itself • And write unit tests • Test the Food contructor • Refactor the code, so that the SnakeGame.checkCollisions method becomes more testable

27. Homework (2) • *Extend the game by adding functionality for: • MovingFood, MovingObstacle and SnakeObstacle • Create Unit Test • Use TDD, writing first the tests, then implementing the programming logic • *Extend the game by increasing the speed of the snake, when it eats five food objects • Create Unit Test • Use TDD, writing first the tests, then implementing the programming logic