DEVELOPMENT FRAMEWORK FOR TESTING JAVASCRIPT CODE

Why Test JavaScript?

Testing JavaScript Enforces Good Design

◦ Object oriented-er◦ Modular and Namespaced◦ Make code flexible, updatable, and reusable.

Legible Output Regression Test Suites

JavaScript Test Frameworks ◦ Jasmine ◦ Mocha ◦ Qunit◦ UnitJS◦ JSUnit

Jasmine Jasmine is a behavior-driven development framework for testing JavaScript code.

Jasmine ◦ It does not depend on any other JavaScript frameworks.◦ Run on any JavaScript-enabled platform.◦ It has a clean, obvious syntax so that you can easily write

tests. ◦ Standalone distribution, which contains everything you

need to start running Jasmine.

Jasmine ◦ Jasmine tests are primarily three parts.

◦ Suites◦ Specs◦ Expectations

Suites A test suite begins with a call to the global Jasmine function ‘describe’ with two parameters: a string and a function.◦ String is a name or title for a spec suite.◦ Function is a block of code that implements the suite

describe("A suite", function() {});

Specs Specs are defined by calling the global Jasmine function ‘it’ with two parameters: a string and a function.◦ String is a title for a spec.◦ Function is the spec, or test.

it(“And so is a spec", function() {});

Expectations Expectations are built with the function ‘expect’ which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.

expect(actual). Matcher(expected);

Matchers Each matcher implements a boolean comparison between the actual value and the expected value. It is responsible for reporting if the expectation is true or false. ◦ toBe(true)◦ toEqual(12)◦ toMatch(/bar/)◦ toBeGreaterThan(1) ◦ toBeLessThan(5)◦ not. toBe(true)◦ toThrow()

Put all together

describe("A suite", function() { it("contains spec ", function() { expect(true).toBe(true); }); });

Grouping Tests A Suite for grouping related specs. A spec contains one or more expectations that test the state of the code.

Calls to describe can be nested, with specs defined at any level. (Suites within suites)

Grouping Tests

describe("A spec", function() { it("is just a function, so it can contain any code", function() { var foo = 0; foo += 1; expect(foo).toEqual(1); }); it("can have more than one expectation", function() { var foo = 0; foo += 1; expect(foo).toEqual(1); expect(true).toEqual(true); });});

DEMO

Setup and Teardown◦ DRY up any duplicated setup and teardown code, Jasmine

provides the global beforeEach and afterEach functions.

◦ beforeEach() function is called once before each spec in the describe in which it is called.

◦ afterEach() function is called once after each spec.

Disabling Suites Suites can be disabled with the xdescribe function. These suites and any specs inside them are skipped when run and thus their results will not appear in the results.

Pending Specs◦ Pending specs do not run, but their names will show up in

the result.◦ Any spec declared with xit is marked as pending.◦ Any spec declared without a function body will also be

marked pending in results.◦ And if you call the function pending anywhere in the spec

body, no matter the expectations, the spec will be marked pending.

Custom Matchers◦ We can add a custom matcher in a BeforeEach call.◦ It will be in scope and available for all of the specs inside

a given call to describe. ◦ Custom matchers are torn down between specs.

Writing Custom Matchers◦ Matcher Factories(not required)

◦ Custom matcher factories are passed two parameters: util and customEqualityTesters.

◦ The factory method should return an object with a compare function that will be called to check the expectation.

◦ The compare function must return a result object with a pass property that is a boolean result of the matcher and a message property it will be used for a failed expectation.

Writing Custom Matchers

var customMatchers = { customMatcherName: function (util, customEqualityTesters) { return { compare: function (actual, expected) { return { pass: actual=== expected, message: "Expected actual to equal expected "

}; }}; } });

beforeEach(function() { jasmine.addMatchers(customMatchers); });

Spies◦ Test double functions called spies. A spy can stub any

function and tracks calls to it and all arguments.◦ A spy only exists in the describe or it block in which it is

defined, and will be removed after each spec.

vehicle= { setWheels: function(value) { bar = value; }

spyOn(vehicle, ‘setWheels ');

Spies The toHaveBeenCalled matcher will return true if the spy was called.

The toHaveBeenCalledWith matcher will return true if the argument list matches any of the recorded calls to the spy.

expect(vehicle. setWheels).toHaveBeenCalled();expect(vehicle. setWheels).toHaveBeenCalledWith(4);

Other Features◦ Support Testing ajax calls.◦ Test Asynchronous Methods.◦ Support Testing AngularJS.◦ node.js support - Jasmine tests for node-based projects.◦ Support Python-based web projects (Django, Flask, etc.)

and ruby based web projects. ◦ Large number of test runners support Jasmine

◦ Karma◦ JSTestDriver

Questions?

Thank you