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.
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:
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 (
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.
Notice that there are no
devDependencies yet, but that will soon change.
Installing the Testing Dependencies
While still at the command line execute the following:
npm i -D karma
Here is the break-down of that command:
npmcalls NPM to run a command
itells NPM to perform an install (which is an alias of
-D(an alias of
--save-dev) tells NPM to save it as a part of
karmais the name of the package for the Karma library which will run the test code
Once the install process completes, Karama and its dependencies will be installed into a local
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:
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 (
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
- Karma Jasmine: installs Jasmine and let’s Karma know that it is the testing framework to use
- Karma Chrome launcher: will launch Google Chrome to run the tests
For more details on what’s been set up or to get a better understanding, take a look at 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
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.
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.
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.
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.
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.