Gulp Mocha Unit Test Tutorial

Hi Folks,

Today, I’m gonna teach you guys how to write unit testing in javascript with gulp and mocha js.

First, lets have our requirement.

I’m gonna write a javascript file to test whether a string is a palindrome or not.

And gonna write unit test cases to check it with a palindrome string, a non-palindrome string, and an undefined value.

Lets hop in. Before that, if you want the complete source code, you can get it here. And you can it can be executed as follows,

$ npm install
$ npm install --global gulp
$ gulp

You will need to have node.js, npm(node package manager) and nvm(node version manager) installed for this tutorial.

So, install them.

First, create a directory for our development and inside the directory create a file named package.json as follows.

{
"name": "gulp-training",
"version": "0.0.1",
"description": "This is a tutorial on how to write unit test with gulp and mocha js",
"author": "Sridhar <Replace with your name :)>",
"dependencies": {}
}

Thats it.

Now, open your terminal/command prompt in the directory having the package.json

npm install --save chai
npm install --save expect
npm install --save gulp
npm install --save gulp-eslint
npm install --save gulp-mocha
npm install --save run-sequence
npm install --save sinon

These are the dependencies we will require.

Once the installation completed,

create a folder names “scripts” in this only we’ll create our scripts.

inside scripts, create a file named, palindrome.js

In this file only we’ll have our function to check whether the string is a palindrome or not. The file contents will be as follows,


'use strict';
function Palindrome() {};
Palindrome.prototype.isPalindrome = function(input) {
if(input) {
return input == (input.split('').reverse().join(''));
}
return false;
}
module.exports = new Palindrome();

As you can see this is just a simple function to test a string is palindrome or not, it will return true for a palindrome and false for a non-palindrome. Note that I’ve also handled the undefined values to return false.

Now, we’ll write our test case.

Now in the project directory (the one contains package.json), create a new directory called test. Here create  a file named testpalindrome.js. The test will be as follows.


'use strict';
var expect = require('chai').expect;
var Palindrome = require('../script/palindrome');
describe('Palindrome Test Block',function(){
it('for palindrome',function(){
var result = Palindrome.isPalindrome('tat');
expect(result).to.not.be.undefined;
expect(result).to.equal(true);
});
it('for non palindrome',function(){
var result = Palindrome.isPalindrome('tata');
expect(result).to.not.be.undefined;
expect(result).to.equal(false);
});
it('handling of undefined value',function(){
var str;
var result = Palindrome.isPalindrome(str);
expect(result).to.not.be.undefined;
});
});

Now, let me explain the code here.

We’re creating the objects for expect (which is an assertion library) and the palindrome we created.

Then, we’ll describe the test case.

with the name of the test case and in the callback of the description, we’ll write the tests.

First: A palindrome

Test it with a string identification for the test case and the callback in which the test is performed.

The test expects the return value of the palindrome test to be true.

Second: A Non-palindrome

The test expects the return value of the palindrome test to be false.

Third: Undefined

Remember that in our palindrome example we handles the undefined value as well.

The test expects the return value of the palindrome test to be false(as handled in the palindrome.js).

So, this is our test script.

We’ll be using gulp and mocha to test our script.

In the project folder, create a new file named, gulpfile.js

This will be the file used for testing the project we just created.

The contents of gulp file will be as follows,


'use strict';
var gulp = require('gulp');
var mocha = require('gulp-mocha');
var runSequence = require('run-sequence');
var eslint = require('gulp-eslint');
gulp.task('lint', function() {
return gulp.src(['script/**/*.js', 'test/**/*.js']).pipe(eslint()).pipe(eslint.format()).pipe(eslint.failOnError());
});
gulp.task('test', function() {
return gulp.src('test/**/*.js', {read: false}).pipe(mocha({reporter: 'spec'}));
});
gulp.task('check', function(callback) {
runSequence('lint', 'test', callback);
});
gulp.task('default', ['check']);

I’ve initialized, gulp, gulp-mocha (mocha for gulp), runsequence, gulp-eslint(for javascript syntax validation). Note: Beginners can skip the lint (javascript syntax validation) since it will report errors even for space indents.

The lint task is to pull all javascripts from script and test folders and test their format and to throw error on validation failure.

The test task uses mocha to execute and test the scripts in “test” folder.

The check task is the runsequence in which the tasks needs to be executed.

I’ve made the sequence like lint task to execute first and then the test task.

the gulp default task will be executed at first. Here, I just called the check task. which executes tasks in following order,

  1. lint task
  2. test task

So, the tasks will be tested.
How to run,

$ npm install
$ nvm install --global gulp
$ gulp

`npm install` downloads all the required libraries and keep them in a directory called “node_modules”.

`nvm install –global gulp` installs gulp which we need.

gulp executes the tests and produces an output as follows.

Screenshot from 2015-10-09 15:18:25

We’ve done it folks.

The complete source can be found here.