Learning JavaScript TDD with AVA, Glitch, and freeCodeCamp

To both level up and practice some fundamentals, I’ve been going through the “APIs and Microservices” certification program at freeCodeCamp. I’ve completed the tutorials and am now building the projects required to complete the certification using the recommended platform for sharing these projects Glitch.

And if that wasn’t tough enough, I decided to force myself to learn test driven development (TDD) with AVA as I coded them. And since the best way for me to cement skills is to explain them, I’m blogging it. This will be six posts over a few weeks, starting with how to set up the whole Glitch and AVA testing environment.

That’s a word salad. What are TDD, AVA, and Glitch?

Know these already? Skip the explanations…

What is TDD?

With test driven development (TDD), you write tests to verify your software works the way it should before you write your software. Then you write code to make the tests pass.

Test: Result of myFunction() should be true.

Code: const myFunction = () => { return true; }

TEST PASSES!

That sounds sort of odd, but planning the tests creates an efficient road map for writing your code. The collection of tests also helps ensure the quality of your code over time.

It’s been adopted by more and more companies and if you want to submit to a number of open source projects, you not only need to submit your code, but tests that go with it.

What is AVA?

AVA is a test runner for node.js JavaScript applications. It has a structure that helps guide how you write your tests, then it runs them and reports back the results.

What is Glitch?

Glitch is a service where you build and share websites and web apps. You get a small containerized web server, a web-based interface to manage and edit the files, and a URL to share the resulting web goodness. Rather than having to set up and run a server for your projects for freeCodeCamp, you can build and run them on Glitch.

Getting Started with AVA on Glitch

This post will cover configuration and a basic test. I’ll walk through creating the initial Timestamp Microservice project in a future post.

Step 1: Clone the Timestamp Microservice template on Glitch

Launch the project on Glitch.

The cloned project will be a working node.js web application that serves a homepage with the details of the project at https://[project-name].glitch.me, and a simple API that returns a greeting when you tack /api/hello at the end of the URL.

Step 2: Add testing resources to package.json

Update the package.json file to add the necessary configuration changes. Add AVA and SuperTest to the dependencies section, and a test-running command to the scripts section. The two sections should look like this.

"scripts": 
  { "start": "node index.js", 
    "test": "node\_modules/.bin/ava tests/\*\*/\*.test.js --verbose"},
"dependencies": 
  { "express": "^4.12.4", 
    "cors": "^2.8.0", 
    "ava": "^1.4.1", 
    "supertest": "^4.0.2"},

3: Create your first test

We’ll cheat a little for the sake of brevity and test the “hello” API. But to simulate the process, we’ll write the test first, watch it fail, then write/edit code until it passes.

Click the “+ New File” button and enter tests/index.test.js. That will create your tests folder and an index.test.js file within it. Add the following code to the empty file.

import test from 'ava';
const request = require('supertest');
const app = require('./../server.js');

test('hello API', async t => { 
  const response = await request(app) 
  .get('/api/hello'); 
  t.is(response.body.greeting, 'hello API');
})

Click the Tools button and open the console. It will open in another tab. Run npm test.

The test failed with a “rejected promise returned by test.” That’s because the app needs two things.

4: Edit server.js

Take out the last code block in server.js.

// listen for requests :)
var listener = app.listen(process.env.PORT, function () { 
  console.log('Your app is listening on port ' + listener.address().port);
});

Replace it with a line that will export the app as a module.

module.exports = app;

We need to do this so the SuperTest library we added can instantiate the app in isolation and help AVA run the test against it, rather than running it against a live public app. It also makes it possible to instantiate a clean copy of the app as needed instead of running tests against an increasingly mutated app state as the tests progress.

4: Add index.js

Click the “+ New File” button and add a file named index.js. Add to it the code you removed from server.js

const app = require('./server.js');
// listen for requests :)
var listener = app.listen(process.env.PORT, function () { 
  console.log('Your app is listening on port ' + listener.address().port);
});

This is actually so the app will run for your visitors and so you can manually test it in a browser. Modularizing it lets SuperTest instantiate it and provide it to AVA for testing, but the public facing application needs to instantiate the module too.

5: Test again

Return to the console. Run npm test.

And now you have a successful test.

You’re ready to create your first freeCodeCamp microservice project using TDD, AVA, and Glitch. And that’s my next post. Follow me on Twitter to keep up with the latest posts.