In order to illustrate the process of writing tests for our TDD approach, we will use a tool called Mocha (https://mochajs.org/), a very common and easy-to-use JavaScript test framework, and create a test.

We will install it locally on our system using the following npm, the node.js package, manager.command:

We will first initialize npm with the following command:

$ npm init --yes

This will create a new file called package.json. Next, we will install mocha and add it to our list of development dependencies as follows:

$ npm install [email protected] --save-dev

This will create a directory called node_modules and install Mocha in it.

In addition to Mocha, we will use a headless browser-testing module to render our Hello World application. The one we will use is called Zombie. We can install it with the same command as follows:

$ npm install [email protected] --save-dev 

In order to separate the tests from the rest of the project, we are now going to create a directory called test in the root location of our helloworld project. By default, Mocha will look for tests in that directory:

$ mkdir test

The last boilerplate will be to configure npm to use Mocha to run our tests. With your editor, open the package.json file and replace the test scripts with the following command:

 "scripts": {
   "test": "node_modules/mocha/bin/mocha"
 },

Inside the test directory, create and edit the file helloworld_test.js.

The first step consists of loading two modules that we are going to use and need in our test. The first one is zombie, our headline browser, and the second one is the assert module, which the standard module uses to create unit testing in Node.js applications:

var Browser = require('zombie') 
var assert = require('assert') 

Next, we need to load our application. This is done by calling the same require() function, but this time we will ask it to load the helloworld.js file that we will soon implement (for now it's an empty file):

var app = require('../helloworld')

We can now start creating the test. Mocha basic syntax tries to mimic what a specification document could require. Below the three required statements, add the following:

describe('main page', function() { 
  it('should say hello world')
})

We now need to add hooks into that test to interact with our web application.

The first step will be to point the test to our application endpoint. As you might remember from the previous chapters, the application is running on http://localhost:3000. We will use the hook called before() to set up a precondition. Above the call to it(), add the following to point our headless browser to the proper server:

describe('main page', function() { 
  before(function() {
    this.browser = new Browser({ site: 'http://localhost:3000' })
  })
 
  it('should say hello world') 
})

At that point, our headless browser will connect to our application, but it won't request any page. Let's add that in another before() hook as follows:

describe('main page', function() { 
  before(function() { 
    this.browser = new Browser({ site: 'http://localhost:3000' }) 
  })
 
  before(function(done) {
    this.browser.visit('/', done)
  })
 
  it('should say hello world') 
})

At that point, the home page is loaded, so we now need to implement the code in the it() function to validate our assertion. We will edit the line with the it() call to add a callback function as follows:

describe('main page', function() {
  before(function() {
    this.browser = new Browser({ site: 'http://localhost:3000' })
  })

 before(function(done) {
   this.browser.visit('/', done)
 })

 it('should say hello world', function() { 
   assert.ok(this.browser.success)
   assert.equal(this.browser.text(), "Hello World")
 })
})

Our test is ready. If everything went well, your code should look like this: http://bit.ly/2uYNYP6.

We can test it in our Terminal, by simply calling the mocha command as follows:

$ npm test

./node_modules/mocha/bin/mocha
  main page
    1) "before all" hook
  0 passing (48ms)
  1 failing
  1) main page "before all" hook:
     TypeError: connect ECONNREFUSED 127.0.0.1:3000  

Our test is failing. It can't connect to the web application. This is, of course, excepted since we haven't implemented the application code yet.