I’ve been developing a LOT of Angular applications lately. Some of them are hybrid projects (Angular w/ MVC); some of my projects have been completely separated (Angular for client-side, with a separate project for an API). Regardless, I always want to ensure that my code has been thoroughly tested with unit tests and acceptance (E2E) tests. When developing hybrid projects, my preferred IDE is Visual Studio. When developing a pure, client-side project, my preferred IDE is Visual Studio Code as it has a lot less remnants/artifacts tied to a solution (.vs, .xproj, .csproj, etc.) eliminating the need for a ridiculously large .gitignore file.  Additionally, I will use WebStorm depending on the need.

Jasmine is a great framework for providing both unit testing and end-to-end, acceptance testing.  Coupled with Karma, Jasmine can monitor file changes to our client-side code and execute tests on every file change in order to ensure that all tests are always passing.  In this blog post, I will demonstrate how to set up and use Karma and Jasmine in both development environments.

NOTE: This tutorial is for a Windows environment as PowerShell is required to fork a child process.   However, if you are using VS Code in a Linux environment (including Mac), the instructions can easily be adapted to using a bash script.

Installation

In order to run Karma and Jasmine, you’ll need to install a couple of things.

Node.js

Node.js is a lightweight JavaScript engine which Karma and Jasmine both require in order to run.  Node.js will be what our task runner uses under the hood to execute Karma (and Jasmine).

If you are using Visual Studio 2015 with ASP.NET 5, you can skip installing Node.js as it’s included in the Visual Studio installation.  You’ll simply need to right-click on your project and add the NPM Configuration File which creates a package.json file in your project’s main folder.

If you are using code, or would like a little more practice doing this manually, you’ll need to visit the Node.js website to download and install it.

After Node.js has been installed, you’ll need to initialize it within your project.  Head over to your project’s main directory and type the following:

npm init

“npm” is the command for Node.js’s package manager.  By issuing this command you will be adding the Node.js configuration file package.json to your project.

When you run the above command, you will be asked a couple of questions.  You can simply accept the defaults or answer to the best of your knowledge.  If you’ve added the configuration file via Visual Studio, then you can edit the file and set the properties manually.  The configuration file is nothing more than a json file.

Also, once you start adding dependencies in your project, Node.js will create a node_modules folder.  If you are using TFS, you’ll want to exclude this folder from source control.  If you are using GIT, you’ll need to add this folder to your .gitignore file.  The dependencies will be re-downloaded every time you check out a file.  If you want to update/re-install your dependencies, you can simply go to your project’s command line and type: npm install or, in Visual Studio 2015, you can right-click on your project and select “Restore Packages.”

Karma

Now that Node.js has been installed, it’s time to add Karma to your project.  You can do this in two ways (depending on which IDE you are using):

Visual Studio

  1. Open your package.json file in Visual Studio
  2. Inside of the “devDependencies” section, add the following:
    "devDependencies": {
        "karma": "0.3.15"
    }
  3. Save the file
  4. Visual Studio, at this point, should download the package automatically.  But, if necessary, right-click on your project and select “Restore Packages.

Visual Studio Code

  1. Open your package.json file in Visual Studio Code
  2. Inside the “devDependencies” object, add the above code
  3. Save the file
  4. In your command prompt at your project’s home directory, type the following:
    npm install

Visual Studio Code (alternative)

  1. Open your command prompt and go to your project’s home directory
  2. Type the following at the command prompt:
    npm install karma --save-dev
  3. This will install the Karma dependency and add it to the package.json file for you.

Jasmine + Additional Requirements

Now that you’ve got a little experience adding a Node.js dependency to your project, let’s add a couple more.  You can follow any one of the three ways covered in the previous section for Karma, but the dependencies you will need are the following (I’ve include current version numbers and descriptions of what they do)…

  • gulp (3.9.0) – our Task Runner.  Gulp is very simply to a batch file, but offers the ability to define specific tasks.  These tasks can run pre-build, post-build, or simultaneously while debugging our application.
  • gulp-shell (0.5.1) – allows Gulp to run shell commands
  • jasmine-core (2.4.1) – the core libraries for Jasmine, our unit testing framework
  • karma (0.13.15) – installed above.  Is executed by our task runner and is the execution environment for Jasmine and reporting
  • karma-jasmine (0.3.6) – the plugin for “hooking up” Karma and Jasmine
  • phantomjs (1.9.19) – a “headless” browser.  Unlike trying to use Chrome, Firefox, Safari or the like for running our tests, PhantomJS is a lightweight browser that is platform agnostic.  PhantomJS will be the browser that Jasmine uses to test our application.
  • karma-phantomjs-launcher (0.2.1) – the plugin for integrating Karma and PhantomJS
  • karma-html-detailed-reporter (1.1.8) – a plugin for Karma that is used by Jasmine to output test results to an html file creating a reporting dashboard.

Once you’ve added all of the dependencies, your package.json file, should look like the following:

  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-shell": "^0.5.1",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.15",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-html-detailed-reporter": "^1.1.8",
    "phantomjs": "^1.9.19"
  }

NOTE: If you used the 3rd, alternative, way for adding dependency modules, you may see a caret (“^”) prefacing the version number.  That’s okay, it’s simply a version helper for Node.js and you can keep the caret or remove it.

Finally, if you’ll need to ensure all modules have been downloaded successfully by restoring packages in Visual Studio, or issuing npm install at the command prompt in project’s home directory.  This will download all of the files (and versions) listed in the devDependencies section.

 

Like What You See?

Subscribe to receive new posts in your inbox.

Privacy Preference Center