Testing in JavaScript using Velocity

Testing in JavaScript using Velocity

Unit testing required for to ensure the reliability and maintainability of software, and more there is also methods like Test-Driven Development and Behavior Driven Development are avilable.

Velocity supports many javascript framework for testing it includes;

Jasmine
Cucumber
Mocha

Jasmine supports most of the modes of testing in meteor. Following image shows testing modes and supported frameworks.

Jasmine

Each of the framework has advantages and disadvantage but Jasmine has unique fratures that makes it eady to use and get started with.

To use Jasmine, it does not required to have Node.js installed.

Installation

To install Jasmine run following command in your project directory.

meteor  add sanjo:jasmine

We  also need to install Velocity Reporter package to see test result.

meteor  add velocity:html-reporter

Suites and Specs

Each suite in turn contains a set of Expectations that compare the results of the test - called the actual - with the expected value. A Suite is defined by calling the describe() function. It takes two parameters: the name of the Suite, and the function which contains the calls to the expectation methods called Specs. These are defined using the it() method. Like describe(), it() also accepts a name and function parameter. The it() function parameter may contain variables and one or more calls to the expect() method. Used in conjunction with a Matcher function, these carry out the task of comparing the actual and expected values. Here's a simple example to demonstrate:

describe  ("the todo page : page contents", function() {

   	it  ("should include a page title of 'Todo List'", 		function()  {

     		expect($('title').text()).toEqual('Todo  List');

});

   	it  ("should include a page heading of 'Todo List'",  	function() {

     		expect($('h1').text()).toEqual('Todo  List');

});

});

  Put  above code in  /test/jasmine/client/integration/todos/page-contents-spec.js,  Jasmine  supports folder structures.

Pre-defined Matchers

In the above example, the toBeGreaterThan() method is a matcher. It represents a comparison such as ">" using plain English. There are many other matchers available, including:

toBe: represents the exact equality (===) operator.
toEqual: represents the regular equality (==) operator.
toMatch: calls the RegExp match() method behind the scenes to compare string data.
toBeDefined: opposite of the JS "undefined" constant.
toBeUndefined: tests the actual against "undefined".
toBeNull: tests the actual against a null value - useful for certain functions that may return null, like those of regular expressions (same as toBe(null))
toBeTruthy: simulates JavaScript boolean casting.
toBeFalsy: like toBeTruthy, but tests against anything that evaluates to false, such as empty strings, zero, undefined, etc…
toContain: performs a search on an array for the actual value.
toBeLessThan/toBeGreaterThan: for numerical comparisons.
toBeCloseTo: for floating point comparisons.
toThrow: for catching expected exceptions.

`Example`

Put follwing code in demoapplication.css

<head>

    <title>jasminetest</title>

</head>

<body>

<h1>Welcome  to Meteor!</h1>

	{{>  hello}}

</body>

<template  name="hello">

    <button  id="clickButton">Click Me</button>

    <p  id="buttonText">You've pressed the button  {{counter}} 		times.</p>

</template>

Put follwing code in demoapplication.js

if  (Meteor.isClient) {

    //  counter starts at 0

    Session.setDefault('counter',  0);

    Template.hello.helpers({

        counter:  function () {

            return  Session.get('counter');

});

    Template.hello.events({

        'click  button': function () {

            //  increment the counter when button is clicked

            Session.set('counter',  Session.get('counter') + 			1);

});

Write following tets to check counter display proper or not

inside tests/jasmine/cleint/integration/sample/buttonSpec.js

describe('clicking  the button', function () {

    //  reset the counter before each test

    beforeEach(function()  {

        Session.set('counter',  0);

});

    it('should  show how many times the button was pressed', 	function () {

        //  Get the text we are testing

        var  text = $('p#buttonText').text();

       //  assert that we see 'You've pressed the button 			times.'

        expect(text).toEqual("You've  pressed the button 0 			times.");

});

});

Output:

Pages

Sunday 13 December 2015