The Techies' pub

Test driven development in Javascript

Hope you are all well. Today let’s see what test driven development actually looks like in practice with a small example.

Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle: first the developer writes an (initially failing) automated test case that defines a desired improvement or new function, then produces the minimum amount of code to pass that test, and finally refactors the new code to acceptable standards.

– From wikipedia

In simple terms it is nothing but writing tests first corresponding to what you need; then writing code to satisfy that test.

To illustrate this methodology let’s consider a simple node.js application.

Open up your terminal, create a new directory, navigate into that directory and give the below command.

1

npm init

Fill up the questions as desired and then open up the project in your favorite 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.

1

npm install mocha chai--save-dev

(It is recommended to install mocha globally; just add -g to install it globally in your machine).

Now create a file test.js in the same directory and add the below code.

1

2

3

4

5

6

7

8

9

10

varName=require('./index.js');

varexpect=require('chai').expect;

describe('Firsttest',function(){

it('It should return my name',function(){

varname=newName();

varresult=name.sayname();

expect(result).to.equal('Raja Yogan');

})

})

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 Raja Yogan. As you could see Raja Yogan is the string returned by sayname prototype.

Create a new index.js file in your project directory and add the below code.

1

2

3

4

5

6

7

functionmyname(){

}

myname.prototype.sayname=function(){

return'Raja Yogan';

}

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

1

mocha

You would see a screen like this

It simply denotes 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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

{

"name":"learningtesting",

"version":"1.0.0",

"description":"An app to learn testing",

"main":"index.js",

"scripts":{

"test":"mocha"

},

"author":"rajayogan",

"license":"MIT",

"devDependencies":{

"chai":"^3.5.0",

"mocha":"^2.4.5"

}

}

Now just running npm test would get the tests to run.

Okay, now we need to try this out in a browser right. To do that let’s make use of another library called zuul.

To install zuul simply run the below command.

1

npm install zuul--save-dev

Then create a new file called .zuul.yml in your project directory and add the below code.

1

2

3

4

5

6

ui:mocha-bdd

browsers:

-name:chrome

version:latest

-name:firefox

version:latest

If you use some other test framework make sure to add that in the ui field.

Now open up package.json and modify the test script as shown below.

1

"test":"mocha && zuul --local 1991 -- test.js"

Save your files and run npm test in your terminal.

You should see a screen as shown below

open up the url in a browser window. You would see that the tests have passed successfully as shown below.

Whoa, we have finished testing our application on the browser window as well.

Now it would be much better if we could automate this entire process right ?. In order to do that we could use of certain tools called continuous integration tools. There are a lot of them available for our use like Jenkins, Travis-CI, Circle CI etc.,

For this demo we would be using Travis-CI. Go ahead and create an account with Travis-CI by clicking here and syncing up your github profiles(usually done automatically).

Create a new github repo and sync it up with Travis-CI as shown below.

Then click on the repo settings button as shown below.

here learningci is the name of the repo I have created.

Now in the project create a .travis.yml file and add the below code in it.

1

2

3

4

5

language:node_js

node_js:

-'0.12'

script:npm run ci

Open up the package.json and modify it to include ci as well.

1

2

3

4

"scripts":{

"test":"mocha && zuul --local 1991 -- test.js",

"ci":"mocha && zuul -- test.js"

},

Travis-CI is simply a linux machine that would run your tests to see if they go fine as you commit your code to github by pulling up a build from it. So to perform browser testing you would need to use the services of another tool called saucelabs. Though saucelabs is a paid tool, there is a free trial as well.

Go to saucelabs.com and signup for a trial account. Then navigate here.

In the window that opens.

enter your repo name in the input field and click on submit as shown below.

copy the code block into .travis.yml in your project.

Then you need to add the saucelabs addon as well. The final .travis.yml will look as shown below.