Setting up TDD with Visual Studio Code, Karma and AngularJS

Posted on 7/15/2015 @ 2:04 AM in #Vanilla .NET by | Feedback | 9215 views

In my last two blogposts,

Debugging websites with Visual Studio code

Setting up TypeScript with Visual Studio Code

I talked about how to setup Visual Studio code for simple website debugging/development. I also talked about how to hook typeScript into it.

In this blogpost, I will talk about how to tie in TDD with Jasmine/Karma when using AngularJS.

Well, the first thing to do is, actually install karma,

$ npm install karma --save-dev

and the plugin that you need (karma lets you test against real browsers, the below will test against chrome)

$ npm install karma-jasmine karma-chrome-launcher --save-dev

Then write your tests, and author a karma.conf.js file in the root of your application as shown below,

   1:  module.exports = function (config) {
   2:      config.set({
   3:          basePath: '',
   4:          frameworks: ['jasmine'],
   5:          files: [
   6:              'lib/ionic/js/ionic.bundle.js',
   7:              'lib/angular-mocks/angular-mocks.js',
   8:              'lib/ionic/js/angular/angular-local-storage.min.js',
   9:              'ng-cordova.min.js',
  10:              'built/tsoutput.js',
  11:              '/js/**/*.js',
  12:          ],
  13:          exclude: [
  14:          ],
  15:          preprocessors: {},
  16:          reporters: ['progress'],
  17:          port: 9876,
  18:          colors: true,
  19:          logLevel: config.LOG_INFO,
  20:          autoWatch: true,
  21:          browsers: ['Chrome'],
  22:          singleRun: false
  23:      })
  24:  }

 

The above file is providing certain input files in a particular order. The order is important! Or all you will get is errors. Managing dependencies is hella important!

It is then running the test on a real instance of the chrome browser, so ensure that you have chrome installed and you have the karma-chrome-launcher plugin installed (shown above).

Anyway, at this point, you should be able to go to terminal or command prompt and type

karma start karma.conf.js

.. and this will hopefully :-) run your tests successfully, in watch mode. watch mode means, as you change your code, the tests will rerun everytime you change your code. So you get instant feedback.

The question is, can we integrate this inside Visual Studio code? The answer is, YES – using gulp.

Simply add a task to your gulpfile.js as shown below,

   1:  var karma = require('gulp-karma');
   2:  gulp.task('test', function () {
   3:      var testFiles = [
   4:             ..
   5:          ];    
   6:      // Be sure to return the stream 
   7:      return gulp.src(testFiles)
   8:          .pipe(karma({
   9:              configFile: 'karma.conf.js',
  10:              action: 'watch'
  11:          }))
  12:          .on('error', function (err) {
  13:              // Make sure failed tests cause gulp to exit non-zero 
  14:              throw err;
  15:          });
  16:  });

 

Well that’s it!

Now to run the tests press, ⇧⌘T, and you should see a beautiful output as shown below,

   1:  [02:01:10] Using gulpfile ~/Documents/Developer/app/www/gulpfile.js
   2:  [02:01:10] Starting 'test'...
   3:  [02:01:11] Starting Karma server...
   4:  INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
   5:  INFO [launcher]: Starting browser Chrome
   6:  INFO [Chrome 43.0.2357 (Mac OS X 10.10.4)]: Connected on socket IcRQsu9iUsr5KxJJTXHP with id 71849583
   7:  Chrome 43.0.2357 (Mac OS X 10.10.4): Executed 0 of 9 SUCCESS (0 secs / 0 secs)
   8:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 1 of 9 SUCCESS (0 secs / 0.026 secs)
   9:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 2 of 9 SUCCESS (0 secs / 0.034 secs)
  10:  Chrome 43.0.2357 (Mac OS X 10.10.4): Executed 2 of 9 SUCCESS (0 secs / 0.034 secs)
  11:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 3 of 9 SUCCESS (0 secs / 0.039 secs)
  12:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 4 of 9 SUCCESS (0 secs / 0.041 secs)
  13:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 5 of 9 SUCCESS (0 secs / 0.043 secs)
  14:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 6 of 9 SUCCESS (0 secs / 0.047 secs)
  15:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 7 of 9 SUCCESS (0 secs / 0.052 secs)
  16:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 8 of 9 SUCCESS (0 secs / 0.054 secs)
  17:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 9 of 9 SUCCESS (0 secs / 0.059 secs)
  18:  [1AChrome 43.0.2357 (Mac OS X 10.10.4): Executed 9 of 9 SUCCESS (0.063 secs / 0.059 secs)

.. and if you accidentally break your code, you will instantly know about it.

Now, Karma can also be integrated in continuous integration servers, Check out the docs for Jenkins, Travis or Semaphore.

So USUALLY, I don’t like to have a separate task running on my dev machine ALL the time. But its nice to know that I can do a sanity check on my code, at any time by pressing ⇧⌘T.

And that’s how you do TDD in Visual Studio code

Sound off but keep it civil:

Older comments..