TDD with Mocha/Chai to use Guardian API in creating your own news web app (part 1)

4 min readMar 23, 2018

The aim of this Node.js web application is to build a webpage which displays your preferred headlines using the guardian news api.

The development will be done in TDD and for this I will be using Mocha/Chai. This is my first blog where I aim to give instructions on how to build something from scratch so bear with me. I would love to hear from you on ways I can improve. You can find the code for this project on github link below . Don’t forget to follow me;

Linkedin . github . twitter .

Ok, lets begin…..

Install Node.js

Node.js is a simple to use http-server. If you haven’t used node before you will need to install it globally and you will be set to go. You can either use this link nodejs.org/en/download/package-manager or simply in your terminal window do;

$ brew install -g node

Next, install npm and mocha

First, lets create a directory and git init so we can push to github:

$ mkdir news-summary && cd news-summary
$ git init

Once you have created your news-summary directory you can initialize it with npm like so and this will create your package.json file:

$ npm init

Before the json package is created you will be asked a number of questions like ‘description’ etc. Complete these as required and press enter.

We’ll use Express.js framework for our app

Express.js in its simplest explanation is what Rails and Sinatra are to Ruby. A light-weight web application framework to achieve your MVC architecture.

$ npm install express --save

After you have completed the above step make sure you add your ‘node_modules’ file to your ‘.gitignore’ file.

This will be a good time to do a commit if you haven’t done so already. I am not going to tell you when you should commit but make it a regular habit that you commit your code and push to github as often as possible.

Create your app.js file

Create your app.js file in the root directory of your project. This will contain a simple HTTP server that serves our news-summary webpage. Basically it will handle the incoming requests from the client.

In your app.js file:

Fire up node

Lets see what the page looks like and ensure that all our dependencies have been installed properly.

$ node app.js

In your browser visit http://localhost:8080/ and see that all is well!

If you can see the text ‘This is a test page’ then you are well on your way.

I hope you had a nice little break. Now that you are refreshed lets set up our testing unit. This is the part that excites me……. TESTING!! (sad I know)

Mocha and Chai

In the world of Test Driven Development I have learnt that you, write a failing test, pass that test then refactor!

In order to write our tests we need to configure our testing unit. Ensure you are in your project directory and type the following in command line:

$ npm install mocha chai --save-dev

You might like to know that the ‘ — save-dev’ flag will ensure that the package appears in your devdependencies part of your package.json file.

Once you’ve done that you also need an additional package called ‘request’. This package is designed to simply make http calls.

$ npm install request --save-dev

→ Next we create a test directory ←

In your project root directory:

$ mkdir test

Lets add our first testing file and write a feature test:

$ touch test/homepageTest.js

In your ‘homepageTest.js’ file type the following:

I’ve put a screen shot so you don’t copy and paste and type in the code yourself

::::: To run your test simply type :::::

$ npm test

If your test doesn’t run and you get an error to do with the ‘require’ package, make sure your ‘package.json’ file is updated with the following:

"scripts": {
    "test": "mocha"
  },

If you are wondering why we are adding ‘done()’ at the end of each test, this is because mocha will have to wait for the promise to be resolved or rejected due the asynchronous nature of node.js. If you omit ‘done()’ your test will timeout.

Let’s add one more test, this checks for status 200:

So here, we are just testing to ensure that our page is displaying the right content and our test suite is working nicely.

I must admit that so far none of this has been TDD. I find it easier to get the scaffold in place first then move on to doing test driven development going forward.

In the next part I will be looking at starting test driven development for our functions that will be interacting with the Guardian API. This will consist of unit testing and I will introduce you to ‘Postman’.

I am currently going through interviews and on a job hunt so hopefully there won’t be a huge gap between part 1 and 2.

Thank you for reading and I hope you found this blog useful. Please don’t hesitate to comment with feedback as it means a lot to me.