Write Your Test Code First – Part 2: Running Tests

The previous post in this series showed how to write code by doing unit tests first. But that same article provided no way of running the tests. This article is going to show how to run those tests using Karma and Jasmine through Node.

Some very basic steps will be touched on, so if any step is familiar, feel free to skip ahead.

Setting Up the Project

Here’s a disclaimer: in modern development nothing comes quick. There are seed/starter packs galore and there’s Yeoman which are ways to get a project started quickly, but the aim of these posts is to explain the how as much as the why in a concise manner.

Install Node

The first step in any Node-driven development is to install Node. Simply pick the operating system and LTS. A post on Stack Overflow explains the difference between LTS and Stable, but for this tutorial use the LTS version, as it works more seamlessly with Karma. There are some nuances for using Node on Windows that may be encountered that won’t be discussed in this article, so be aware issues may happen that will require Googling to remedy.

A final warning, if at any point things seem to get wonky, history has taught that removing the node_modules folder and re-running npm i can remedy many issues.

Create the Application Directory

Almost all of the commands here will be run from a command line, so go ahead fire up a console (the screenshots here will be iTerm on OSX). Create a folder for the project (it doesn’t really matter what it’s called) and move into that directory:

Creating the project directory
Creating the project directory

Setup a Node Project

When Node is installed it comes with the Node Package Manager (commonly referred to as NPM) which allows easy installation of third-party libraries for development. When projects utilize NPM they require a package.json file. This file will describe the project and, most importantly, the dependencies for the project. Dependencies are separated into development dependencies (devDependencies) and application dependencies (dependencies).

NPM has an initialization command that will set up the package.json file. This command will ask all of the details of the project (name, version, repository, etc.) through a series of prompts. For the purposes of this exercise setting up package.json can be done by running npm init -f or npm init --force instead because it’ll create a bare-bones file.

Run npm init
Run npm init

Notice that there are no dependencies or devDependencies yet, but that will soon change.

Installing the Testing Dependencies

While still at the command line execute the following:

Here is the break-down of that command:

  • npm calls NPM to run a command
  • tells NPM to perform an install (which is an alias of install)
  • -D  (an alias of --save-dev) tells NPM to save it as a part of devDependecies
  • karma  is the name of the package for the Karma library which will run the test code
Installing Karma via NPM
Installing Karma via NPM

Once the install process completes, Karama and its dependencies will be installed into a local node_modules folder.

Setting Up Karma’s Configuration

Karma requires that there is a configuration file that will point it to the application and test files and let it know of any plugins that need to be used. Karma, luckily, also provides its own initialization method to get this set up.

To do so, return to the command line and run ./node_modules/.bin/karma init which will, through a series of prompts, help set up the Karma configuration file. The answer to the prompts will be:

Setting up Karma
Setting up Karma

The above answers will create a file in the project folder named karma.conf.js that will let Karma know where the application (app/scripts/**/*.js) and test (test/scripts/**/*.js) JavaScript files live so that it can load them when tests are run. Answering the last prompt with yes tells Karma to re-run the tests whenever any of the application or test files change–this means that tests will re-run as code is developed.

Additionally, the first and third prompts will add the following plugins to package.json:

For more details on what’s been set up or to get a better understanding, take a look at the karma.conf.js file.

The ./node_modules/.bin/karma init command added the above plugins as devDependencies to the package.json file which will need to be installed. To do so run npm i which will look at the package.json and install anything listed under the dependencies and devDependencies.

Finally, Running the Tests!

As was said at the beginning of the post, it takes a lot in modern development to get set up but it’s also good when learning to know the tool chain that’s being used instead of just taking a prepackaged setup and going. When problems arise (and they will), it’s easier to find answers with some understanding of the technologies being utilized.

Add the two files (and the supporting directories) developed in the previous post:

  • app/scripts/services/add-field.js (the application code)
  • test/spec/services/add-field.spec.js (the test code)

Fire up a text editor (the screenshots will be of Visual Studio Code on OSX) and add the code to the respective files.

The application and test code for the addFieldService
The application and test code for the addFieldService

To actually run the tests, just use the Karma library again but run: ./node_modules/.bin/karma start. This will output messages to the console that Karma has started and is launching Chrome (note that Chrome may pop up in the background and runs as a separate instance from the regular Chrome browser). Additionally, the console should produce a message that the tests passed successfully.

Console output from Karma
Console output from Karma

To see the tests working in Chrome, switch to the Chrome window running the tests and click the “DEBUG” button, which will open a new tab with a blank screen.

Chrome via Karma
Chrome via Karma

From the blank tab open up the Chrome Developer Tools, switch to the “Console” tab and you will see output similar to the command-line output.

Test Output in Chrome
Test Output in Chrome

And that’s it! The first test has successfully been run. To close out the tests, return to the command line and press Ctrl-C to stop Karma (this will also close the Chrome instance running the tests).

Until Next Time

So, while getting set up to run tests is no trivial matter, once it’s set up, executing tests moving forward will be painless. The next article is going to delve deeper into testing in terms of more complex code.

Leave a Comment

Your email address will not be published. Required fields are marked *