Configuration

Now that the pre-requisites are installed, you will need to perform a little bit of configuration.

Karma

Open a command prompt and head over to your test project’s root folder.  This project/folder could be a separate test project if you have a much larger solution containing multiple projects; or, it could be the folder of the application itself.  Just get to the folder where you ran the npm init command.

Once you are there, type the following:

.\node_modules\.bin\karma init karma.conf.js

This command will create a karma configuration file in the current directory.  Upon executing this command, you will be prompted a series of questions that will create the base configuration. Here’s a quick rundown of those questions and how you should answer for the sample project at hand:

  1. Which testing framework do you want to use?  jasmine
  2. Do you want to use Require.js? no
  3. Do you want to capture a browser automatically? PhantomJS
    (You can also enter Chrome and/or Firefox if you have it installed on your system. But you’ll need to add the karma-chrome-launcher and/or karma-firefox-launcher, respectively, to your package.json file as you did on the previous page for the karma-phantomjs-launcher.)
  4. What is the location of your source and test files? You will need to enter all locations of your JavaScript files within your project.
    (NOTE: You can also do wildcard recursion on directories… i.e scripts/**/*.js will perform a search of all *.js file in the scripts folder and subfolders.)
  5. Should any of the files included by the previous patterns be excluded?  You can simply press Enter here and leave it blank.
  6. Do you want Karma to watch all the files and run the tests on change? Yes
    (Answering yes to this question is great for development environments as, once it’s started, Karma will run in the background and, upon and file changes, will automatically re-run your unit tests.  If you were generating this for an automated build script, you would answer no so that the unit tests run once and continues if all tests pass or stops if any of the tests should fail.)

After answering these questions, you will have a newly created karma.conf.js file in your project’s directory.  As you can probably guess, you may want to create a couple of different configurations depending on your needs.

Once you’ve created the configuration file, we’ll need to make a few more tweaks.  So, open the karma.conf.js file in Visual Studio or VS Code for editing.  We will need to modify/add 3 sections.

  1. We will need to tell Karma to use the PhantomJS launcher plugin (and/or Chrome/Firefox plugin, if you choose) and the Html-Detailed-Reporter plugin
  2. We need to tell Karma to use the Html-Detailed-Reporter plugin for reporting
  3. We need to configure the Html-Detailed-Reporter

Make sure you’ve added or modified the following 3 JSON object properties in the file:

// 'progress' is added by default
// add 'htmlDetailed'
reporters: ['progress', 'htmlDetailed'],


// notify karma of the available plugins
plugins: [			   
  'karma-jasmine',
  'karma-phantomjs-launcher',
  'karma-html-detailed-reporter'
],

// configure the HTML-Detailed-Reporter to put all results in one file    
htmlDetailed: {
    splitResults: false
}

You’ve now completed the Karma setup.  We still need to create the Gulp configuration that will actually run Karma for us.

Gulp

Create a file called gulpfile.js in the same folder as your karma.conf.js and node_modules assets.  This file will configure tasks for gulp to run.  Add the following lines to your gulpfile.js:

'use strict';

var gulp = require('gulp'),
    shell = require('gulp-shell');

gulp.task('server', ['node', 'karma']);

gulp.task('node', shell.task('node app.js'));
gulp.task('karma', shell.task('powershell -Command "./karma.ps1"'));

A brief discussion of what’s going on…

The ‘require’ directive tells node.js to import the objects from the listed libraries.  This is similar to an ‘include’ directive in C++.  We then define 3 gulp tasks: 1) server; 2) node; and, 3) karma.  For the “server” task, we’ve listed “node” and “karma” as dependencies, which means, the “node” and “karma” tasks will run prior to the “server” task running. (In case you were wondering, we’ve not actually configured anything for “server” to do except run these two tasks together.)

Why should I create three different tasks?  A couple of reasons:

  1. In the sample application at the end of this tutorial, I’ve quickly configured a simple web server using Node.js’s Express server.  The Express server is a long-running process, which means, once I start it in VS Code, I cannot start another task.  So, if I want to run my Express server and Karma tasks at the same time, I need a task that will execute both of them.  While I’m using Express in this tutorial, keep in mind that I could quite easily configure DNX’s Kestrel or any other web server to startup.
  2. If I don’t want to run my tests, but simply start my server (i.e. in a staging or production environment; or, not consume resources by running tests in the background), I can just run the “node” task.
  3. If I’m developing in multiple environments, say Visual Studio, VS Code, WebStorm, etc., then I need the flexibility of being able to choose my hosting environment – IIS or Express.
  4. Finally, what is executing this gulp file could be a CI build so a running web server is not necessary for executing unit tests on client-side code.  In this case, my CI build would simply run the “karma” task and output/save the results.

PowerShell (or bash)

You’ll notice that the ‘karma’ task executes a PowerShell script.  Here’s the contents of the karma.ps1 script (save the contents below into a file named karma.ps1 in your project’s main directory):

Start-Process "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe" -Argument "node_modules/.bin/karma start karma.conf.js"
Start-Process "chrome" -Argument ".\_reports\html-results.html"

Keep in mind that we are dealing with multiple processes here and we need non-blocking threads.  So, the above PowerShell script forks two child processes: 1) opening a new PowerShell window, runs karma with the configuration file we created above; and, 2) opens a window in the Chrome browser to view the test results. (NOTE: you could also specify firefox instead of chrome if you prefer the FireFox browser.)  The html-results.html file is set to auto refresh every second unless you disable the refresh on the page.

Visual Studio Code

Last, but not least we need to configure Visual Studio Code tasks.  You may have already configured your task runner in VS Code, but if not, let’s do it now.

  1. Within VS Code, type Ctrl+P.
  2. In the little dropdown that appears at the top of the page, simply type in the greater than sign: >
  3. This will display a set of commands.
  4. After the greater than sign (without a space in between), begin typing: tasks
  5. One of the options that appears is “Tasks: Configure Task Runner”
  6. Choose this option

VS Code will then add a new directory to your project .vscode with a new file tasks.json.  This file will then be automatically opened on your screen.  You will see a bunch of sample tasks listed (mostly commented out).  Feel free to comment out the remainder of the file or delete everything in the file.  Then add the following:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "server",
            "isBuildCommand": true,
            "showOutput": "always"
        },
        {
            "taskName": "karma",
            "isTestCommand": true,
            "showOutput": "always"
        }
    ]
}

This basically configures two types of tasks: 1) build task; and, 2) test task.  The build task runs the “server” task in your gulp file, while the test task runs your “karma” task in your gulp file.

 

Like What You See?

Subscribe to receive new posts in your inbox.

Privacy Preference Center