Test driven development in Javascript

Hi Friends,

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.

A big thanks to Kyle Robinson who taught me the testing concept.

Let’s understand how to do this.

A complete code of this tutorial is here.

A video screencast of this tutorial:

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.

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.

(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.

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.

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

You would see a screen like this

Kazam_screenshot_00027

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.

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.

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

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.

Save your files and run npm test in your terminal.

You should see a screen as shown below

Kazam_screenshot_00028

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

Kazam_screenshot_00029

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.

Kazam_screenshot_00030

Then click on the repo settings button as shown below.

Kazam_screenshot_00031

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.

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

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.

Kazam_screenshot_00032

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.

Kazam_screenshot_00033

Now push your code into your github repo and watch Travis-ci (Your repo settings page).

As soon as the code is pushed travis will automatically start running tests on the latest build of your code. If everything is fine it will run successfully as shown below.

Kazam_screenshot_00034

And in the terminal window in the same page.

Kazam_screenshot_00035

Now whenever you write tests, code and push it into your repo all the tests will be automatically performed on your build. This is continuous integration.

Hope this helped you guys. Thanks for reading. Peace.