Creative Coding

A Creative Writer's Guide to Code

Create a Quick TDD Environment for Javascript

Getting started

Our goal is to get a project up and running quickly. If you haven’t done this before, first we want to create a project directory, create a github repository, and then link the two. Here are the basic steps:

  1. Navigate to your development folder in Terminal.
  2. Type mkdir "project-name" in terminal to create a project folder.
  3. Type cd "project-name" in Terminal to navigate into your project directory.
  4. Type git init in Terminal to set up your directory as a git repository.
  5. Create a readme file by typing touch README.md in Terminal.
  6. Add and commit your new repository by typing git add . and git commit -m "first commit".
  7. To create a github repository, login to github in your browser and navigate to github/new to create a new repository.
  8. Once there, give your repository a name, use the same one as your project directory, and leave the “Initialize this repository with a README” option unchecked.
  9. Click “Create Repository”.
  10. Back in Terminal, type git remote add origin git@github.com:your-git-username/your-repository-name.git to set up the connection between the folder on your computer, and the repository in github.
  11. Then type git push -u origin master to push the files, ie. your readme, from your project folder to github.

Now that your project is up and running, it’s time to create a testing environment.

Jasmine versus Mocha

There are two very popular testing libraries for Javascript, Jasmine and Mocha. Both are great, and weighing the pros and cons of each is enough for another blog post. Some people have already written great articles on the topic here:

  1. Kevin Groat
  2. Marco Franssen

I’m more familiar with Mocha, so we’re going to go with that.

Setting up Mocha

First we need to create our NPM dependencies, with a package.json file. There is a great walkthrough built in for us by typing npm init in Terminal. Just follow the promts and include a name, repo, and some other metadata in the form. That will create a package.json file in your project folder. Don’t forget to add/commit your changes frequently.

Create a mocha dependency in your project package.json file by typing npm install --save mocha in Terminal. Create a test file with atom test/test.js. I’m using Atom, but you can replace that with your editor of choice.

This is where it can get pretty hairy. There is a lot to install to get up and running. I would advise starting off with a simple test and some simple code just to have something to test against. We also need to require the files with our code and assign it to a variable, as well as require any other mocha assertion libraries you want to use. My basic test.js setup looks like this:

In test.js:

1
2
3
4
5
6
7
8
9
10
var expect = require('expect.js');
var myCode = require('../index.js')

describe ('test', function() {
  it('returns "Hello, world!" as a string', function() {
    expect(myCode.test()).to.be("Hello, world!")
  })
})

## All other tests below

In terminal: npm install --save expect.js

Now we’re ready to start writing our functions. If you want to build out this application, you can move all your inclusions and exporting responsibilities to a root.js file in your test folder. That will allow you to write your functions normally and branch out to other .js files without things getting to messy. But more on that in another blog.

to pass our first test, add the following code to index.js:

1
2
3
var test = function() {
  return "Hello, world!"
}

But we’re still not passing our test yet. With mocha, it’s not enough to just include it in the test.js file, we need to export them from our index.js file as well. We do this with some general code at the bottom of our file that we update with each additional function. Here’s what we need at the bottom of index.js to export our first test:

1
2
3
if(typeof exports !== 'undefined') {
    exports.test = test
}

Now you should be passing your first test. Hurray! Now that you’re up and running. The mocha documentation on how to write more complex tests is a great resource.

Bonus

You don’t need to export every function in your index.js file. You only need to export the functions that your tests will call on. So if you have a function called testTwo that should accept two arguments, multiply them, and return the result, you can export it in your exports like exports.testTwo = testTwo. However, if that function just returns a helper function, called multiplier(num1, num2), you would not need to export that function as well.

Here’s what this test looks like in test.js:

1
2
3
4
5
describe ('test2', function() {
  it('multiplies two numbers together', function() {
    expect(myCode.testTwo(3, 5)).to.be(15)
  })
})

And here is how you would pass it in index.js. Note that you do not need to export multiplier.

1
2
3
4
5
6
7
8
9
10
11
12
var testTwo = function(num1, num2) {
  return mulitplier(num1, num2)
}

var mulitplier = function(a, b) {
  return a * b
}

if(typeof exports !== 'undefined') {
    exports.test = test;
    exports.testTwo = testTwo
}

Special thanks to JJ for guiding me through this process!