1 / 27

Unit Testing with JavaScript

Unit Testing with JavaScript. QUnit, Jasmine and JsUnit. Doncho Minkov. Telerik Software Academy. http://academy.telerik.com. Technical Trainer. http://minkov.it. Table of Contents. Unit Testing QUnit Tests Assertions and Modules DOM Testing Jasmine Behavior-driven Development

lynda
Download Presentation

Unit Testing with JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related