Debugging Karma problems

#grunt

#javascript

#karma

Karma is a powerful test runner for Javascript, but sometimes it can be tricky to get it working.

Classic usage

Typical Karma usage requires you to specify:

which files are to be included in the tests
which testing framework to use
which browsers should be used.

Additionally, Karma supports a singleRun mode which is perfect for build processes: it launch the browsers, starts the tests and close them.

When used together with the task runner Grunt, the best solution is to include a karma task inside the Gruntfile.js but specify an external configuration file.

The annoying error!

admin>grunt karma:unit
Running "karma:unit" (karma) task
DEBUG [config]: autoWatch set to false, because of singleRun
INFO [karma]: Karma v0.10.4 server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
DEBUG [launcher]: Creating temp dir at C:\Users\porcu\AppData\Local\Temp\karma-23532685
DEBUG [launcher]: C:\Users\porcu\AppData\Local\Google\Chrome\Application\chrome.exe --user-data-dir=C:\Users\porcu\AppData\Local\Temp\karma
-no-default-browser-check --no-first-run --disable-default-apps --start-maximized http://localhost:8080/?id=23532685
WARN [watcher]: Pattern "G:/GottwareWeb/tools/historical/admin/test/javascripts/*.coffee" does not match any file.
....
Chrome 30.0.1599 (Windows 7) ERROR
        Script error.
Chrome 30.0.1599 (Windows 7): Executed 0 of 0 ERROR (1.84 secs / 0 secs)
DEBUG [launcher]: Disconnecting all browsers
DEBUG [launcher]: Killing Chrome
DEBUG [web-server]: serving: C:\Users\porcu\AppData\Local\Temp/d80d1d267b834538d366f550a17020d04f7a7800.js
DEBUG [launcher]: Process Chrome exitted with code 0
DEBUG [launcher]: Cleaning temp dir C:\Users\porcu\AppData\Local\Temp\karma-23532685
Warning: Task "karma:unit" failed. Use --force to continue.

What the hell? Script Error? How am I supposed to fix this?No exception?No better message?Seriously???

singleRun = false to the rescue.

If in your configuration you set it to false, now the browser will stay open and will show you a nice Debug button. When you click on it, a new tab will be opened by the browser and you can then run your favourite browser add-in to see the console. Here the copy paste from my Chrome developer tools

Uncaught TypeError: Cannot read property 'prototype' of undefined jquery.wijmo-open.all.3.20132.9.js:1620
Uncaught TypeError: Cannot read property 'prototype' of undefined jquery.wijmo-pro.all.3.20132.9.js:1766
FAILED Service: ConstantsHelper should do something debug.html:28
Error: No module: ngGrid
    at Error (<anonymous>)
    at http://localhost:8080/base/bower_components/angular/angular.js:1211:17
    at ensure (http://localhost:8080/base/bower_components/angular/angular.js:1152:38)
    at module (http://localhost:8080/base/bower_components/angular/angular.js:1209:14)
    at http://localhost:8080/base/bower_components/angular/angular.js:2904:24
    at Array.forEach (native)
    at forEach (http://localhost:8080/base/bower_components/angular/angular.js:130:11)
    at loadModules (http://localhost:8080/base/bower_components/angular/angular.js:2900:5)
    at http://localhost:8080/base/bower_components/angular/angular.js:2905:38
    at Array.forEach (native) debug.html:31
FAILED Service: ConstantsHelper should return the values

So here I have two missing dependencies, and I was expecting Karma to report them to me so I could fix them:

jquery.wijmo.* is missing something
ConstantsHelper is missing ngGrid

But why doesn't this produce a clear exception on Karma console? It is so annoying I had to go into the browser to see what's happening!

Fixing library dependencies.

In your karma configuration, one of the node is the files, which should contain the required files (including the tests) in the correct order

// Karma configuration
module.exports = function(config) {
    config.set({

  frameworks: ["jasmine"],

  // base path, that will be used to resolve files and exclude
  basePath : '',

  // list of files / patterns to load in the browser
  files : [
     // Missing dependencies to be added here
    'app/javascripts/*.coffee',
    'app/javascripts/**/*.coffee',
    'test/javascripts/*.coffee',
    'test/javascripts/**/*.coffee'

  ],

Ok, now that I have added the missing library dependency. It was jquery-ui in my case, so I can try to run again my karma tests.

Running "karma:unit" (karma) task
## Removed some lines
Chrome 30.0.1599 (Windows 7) Service: ConstantsHelper should do something FAILED
        Error: No module: ngGrid
            at Error (<anonymous>)
            at G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:1211:17
            at ensure (G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:1152:38)
            at module (G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:1209:14)
            at G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:2904:24
            at Array.forEach (native)
            at forEach (G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:130:11)
            at loadModules (G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:2900:5)
            at G:/GottwareWeb/tools/historical/admin/bower_components/angular/angular.js:2905:38
            at Array.forEach (native)
### Removed some lines
Chrome 30.0.1599 (Windows 7): Executed 3 of 3 (3 FAILED) ERROR (4.127 secs / 0.038 secs)
DEBUG [launcher]: Disconnecting all browsers
DEBUG [launcher]: Killing Chrome
DEBUG [launcher]: Process Chrome exitted with code 0
DEBUG [launcher]: Cleaning temp dir C:\Users\porcu\AppData\Local\Temp\karma-78159896
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

Now I am happy, I can see what is going wrong!

Conclusions

Desactivating singleRun allows to debug what is going wrong with the framework and
Most important, missing dependencies of your library will not produce test errors but will cause the framework to fail.

#grunt

#javascript

#karma