Setting up Visual Studio 2015 for AngularJS TDD

This blogpost is a collection of various resources on the web that I went through in order to successfully set up an AngularJS TDD project in Visual Studio 2015. It contains a list of libraries that I have used to make AngularJS TDD easier and more fun to do.

I would like to thank Bradley Braithwaite for sharing his Angular TDD knowledge through Pluralsight and his blog. Thanks to his course I was able to successfully introduce TDD on my client’s project and write about it here.

 

Setup your TDD project at the very start before you write your first line of application code. Unfortunately, I had to do it the other way around. This means that I had a fairly complex application in which I needed to add unit tests afterwards. I had to overcome a lot of hurdles and dig into unclear error messages.

Prerequisites

This blogpost assumes the following has been installed on your machine.

End result

The following will be in place at the end of this post:

  1. Node.js web application project in Visual Studio
  2. Gulp (Task runner)
  3. Bower (web package manager)
  4. Karma (JavaScript test runner by the AngularJS team)
  5. AngularJS (MVW JavaScript framework)
  6. ngMock (AngularJS module relating to unit testing)
  7. BardJS (library to avoid certain repetitive testing code)
  8. Mocha (JavaScript test framework)
  9. Chai (TDD/BDD assertion library)
  10. Karma coverage (the Karma code coverage framework)

Creating the project

So, let’s start creating the solution in Visual Studio by selecting the “Blank Node.js Web Application” template under the “JavaScript” Languages section.

Figure 1: Creating the solution.

For now, ignore the server.js and reference to it in the package.json file. Later, this will be replaced with gulp code.

We will add two folders to the solution called “src” and “tests”. This allows us to separate the test files from the actual application code and eases the setup for Karma at a later point.

Figure 2: Initial solution structure.

If you are using external libraries and your source code needs to rely on a specific version which should not change over time, it could be useful to add a “scripts” or “lib” folder to put these libraries in. You could then write a gulp task to package these libraries separately from your src package.

Installing npm packages

There are multiple options to install the required packages. We will use the windows command prompt, since this provides a good degree of flexibility.

Figure 3: Open command prompt.

Here are the commands to install the packages:

  • npm install -g gulp
  • npm install gulp –save-dev
  • npm install -g bower
  • npm install bower –save-dev

Another option would be to run these commands in the Node.js interactive window in Visual Studio, but this window only supports npm commands and we need to execute gulp and bower commands in the next sections.

Bower

Run “bower init”.
This will produce something similar to the following:

Figure 4: bower init results.

Run the following commands:

  1. bower install angular-mocks –save-dev
  2. bower install bardjs –save-dev
  3. bower install angular –save

Karma

Run the following commands:

  1. npm install karma –save-dev
  2. npm install mocha –save-dev
  3. npm install chai –save-dev
  4. npm install karma-mocha karma-chai karma-chrome-launcher karma-coverage –save-dev
  5. npm install -g karma-cli
  6. karma init

The last command will configure the test runner:

Figure 5: Generating the karma config file.

Now let’s open the karma.conf.js file and add some configurations manually.

Bower components

files: [

‘bower_components/angular/angular.min.js’,

‘bower_components/angular-mocks/angular-mocks.js’,

‘bower_components/bardjs/dist/bard.js’,

‘src/**/*.js’,

‘test/**/*.spec.js’

],

The bower components can also be added by the config generator, but for convenience of copy-paste I preferred doing this directly in the karma.conf.js file.

Chai

Code coverage

In order to indicate which files should be included for code coverage metrics, add the following to the preprocessors property.

Finally, add the following for code coverage reporting:

The code in the coverageReporter property allows us to provide the same coverage output folder regardless of the OS and browser version.

Integrating with Visual Studio

Now we can start the test runner by typing in “karma start” in the command window, but we could define this start command as a gulp task and run it in the task runner in Visual Studio.

We can do this by adding a new item to root of the project called “gulpfile.js” and specify it as follows (https://github.com/karma-runner/gulp-karma):

Figure 6: gulpfile Karma configuration.

Notice that here the singleRun property has been set to false, since we want to keep the server active. This allows us to create or modify unit tests and see the immediate effect of it in the task runner.

Now, if we open the task runner explorer in Visual Studio there is nothing yet.

We need to build the project and click on the refresh button in the task runner explorer. The result is shown below.

The nice thing about this is that we can click on run and stay in our Visual Studio environment. We will get an error, because no tests have been defined, but we will get to that in the next blogpost.

Ditching the command window completely

It is possible to specify gulp and bower commands within Visual Studio as part of scripts in the package.json file. In this way, you wouldn’t need to use the command window anymore. This would look as follows:

Figure 7: package.json file.

Within the scripts property, we can define our own scripts and these will run with the npm run-script command. (see: https://docs.npmjs.com/cli/run-script). The example above basically states that when the command “npm run-script installNpmPackages” is executed, the global and local packages are installed.
When the command “npm run-script installBowerPackages” is run, the bower packages will be installed.

Let’s look at the following:

We can’t use bower commands directly, but through our run-script command we are able to successfully run the bower install command. Nevertheless, I believe the command window is still needed, since it is more flexible and is able to generate the package names in the bower.json file.

Summary

In this blogpost, the basics of setting up an AngularJS TDD project in Visual Studio 2015 have been covered. It involved installing different packages and defining the solution structure.

Furthermore, we have seen how to integrate gulp tasks and bower commands into the task runner explorer and Node.js interactive windows in Visual Studio. This allows us to keep all the information about our TDD project in one place.

Resources

http://www.bradoncode.com

https://www.pluralsight.com/courses/angularjs-ngmock-unit-testing

http://karma-runner.github.io/0.12/intro/configuration.html

https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md

https://github.com/karma-runner/gulp-karma

https://docs.npmjs.com/misc/scripts

http://chaijs.com

 

Leave a Reply