Test driven development in Javascript

Howdy Friends,
Hope you guys are doing well. I always had question on how to test JavaScript and wanted to learn about it, after learning how to do JS test successfully I created this small example on how to test your JavaScript. Hope you guys like it.
In simple terms it is nothing but writing tests first corresponding to what you need; then writing code to satisfy that test.
Let’s understand how to do this.
A complete code of this tutorial is here.
Create a folder and name it with anything you want to.
Open up your terminal, create a new directory, navigate into that directory and give the below command.
npm init
Fill up the questions as desired and then open up the project in your editor.
Let’s write the tests first
We will be using the mocha, chai framework to write our tests.
Go ahead and install it using the below command.
npm install mocha chai –save-dev
(I would strongly recommend if you install this globally. To install globally run this command
npm install -g mocha chai –save-dev
)
Now create a file test.js in the same directory and add the below code.
var Name = require(‘./index.js’);
var expect = require(‘chai’).expect;

describe(‘Firsttest’, function(){
it(‘It should return my name’, function(){
var name = new Name();
var result = name.sayname();
expect(result).to.equal(‘Adesh Shah);
})
})

If you had written tests before then this would look familiar. It’s nothing but a simple test case which expects the result to be equal to Adesh Shah. As you could see Adesh Shah is the string returned by sayname prototype.
Now let’s go ahead and create a new index.js file in your project directory and add the below code.
function myname() {

}
myname.prototype.sayname = function() {
return ‘Adesh Shah’;
}
module.exports = myname;

This does nothing but return a string. As you could see there is a function myname with a prototype sayname which returns the string. This would pass the tests which we wrote above in our test.js file.

Now open up ur terminal, navigate to this project directory and simply enter the below command

mocha

Horayy!! You will see screen like this

3

Congratulations!!! It simply says that our test has passed successfully.
To create a more easier way to run tests open up package.json and in the scripts, test: add mocha.
Your package.json should look as shown below.
{
“name”: “LearnTest”,
“version”: “1.0.0”,
“description”: “learn testing”,
“main”: “index.js”,
“scripts”: {
“test”: “mocha”
},
“author”: “Adesh”,
“license”: “”,
“devDependencies”: {
“chai”: “^3.5.0”,
“mocha”: “^2.4.5”
}
}
Now just run this command this will would get the tests to run
npm test
Command line is done, but we have to try this in browser too right so let’s begin with testing in browser.
For that we were going to use zuul. Zuul is a program that is used to gate the source code repository of a project so that changes are only merged if they pass tests. The main component of Zuul is the scheduler.
– Google.
To install zuul simply run the below command.
npm install zuul –save-dev
Then create a new file called .zuul.yml in your project directory and add the below code.
ui: mocha-bdd
browsers:
– name: chrome
version: latest
– name: firefox
version: latest
Now open up package.json and modify the test script as shown below.
“test”: “mocha && zuul –local 1991 –test.js”
So, now you package file will look like this.
{
“name”: “LearnTest”,
“version”: “1.0.0”,
“description”: “learn testing”,
“main”: “index.js”,
“scripts”: {
“test”: “mocha && zuul –local 1991 –test.js”
},
“author”: “Adesh”,
“license”: “”,
“devDependencies”: {
“chai”: “^3.5.0”,
“mocha”: “^2.4.5”
}
}
Save your files and now run this command in Terminal
npm test
You should screen as below

4

Copy the url and open it in browser :
You should screen like this on your browser

5
Whoooaa!! We did it. We have finished testing our application on the browser window as well.
Hope you guys liked it. Cheers!!

Author -Adesh shah

Leave a Reply

Your email address will not be published. Required fields are marked *