Learning JavaScript TDD with AVA, Glitch, and freeCodeCamp
Tags: javascript, tdd, glitch, ava
Published: 2019-05-14 05:51:41

---
title: Learning JavaScript TDD with AVA, Glitch, and freeCodeCamp
published: true
tags: JavaScript, TDD, Glitch, AVA
canonical_url: https://yiddish.ninja/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](https://www.freecodecamp.com). 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](https://glitch.com).

And if that wasn’t tough enough, I decided to force myself to learn test driven development (TDD) with [AVA](https://github.com/avajs/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](https://github.com/avajs/ava)?**

[AVA](https://github.com/avajs/ava) is a test runner for [node.js](https://nodejs.org) JavaScript applications. It has a structure that helps guide how you write your tests, then it runs them and reports back the results.

![screen cap of good result](http://yiddish.ninja/wp-content/uploads/2019/04/goodresult.jpg)<figcaption id="caption-attachment-1173"><small>This is what we’ll be aiming for in this post.</small></figcaption>

### What is [Glitch](https://glitch.com)?

[Glitch](https://glitch.com) 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](https://www.freecodecamp.com), you can build and run them on [Glitch](https://glitch.com).

![Screencap of Glitch](http://yiddish.ninja/wp-content/uploads/2019/04/glitch.jpg)

## **Getting Started with AVA on Glitch**

This post will cover configuration and a basic test. I’ll walk through creating the initial [Timestamp Microservice](https://learn.freecodecamp.org/apis-and-microservices/apis-and-microservices-projects/timestamp-microservice) project in a future post.

### **Step 1: Clone the Timestamp Microservice template on Glitch**

[Launch the project on Glitch.](https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-timestamp/)

The cloned project will be a working node.js web application that serves a homepage with the details of the project at <emphasis>https://[project-name].glitch.me</emphasis>, and a simple API that returns a greeting when you tack <emphasis>/api/hello</emphasis> 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`.

![first test results](http://yiddish.ninja/wp-content/uploads/2019/04/test1.jpg)

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

![successful test](http://yiddish.ninja/wp-content/uploads/2019/04/test2.jps_.jpg)

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](https://twitter.com/YiddishNinja) to keep up with the latest posts.