Testing your JavaScript with Karma runner

Karma runner easily enables you to run your javascript tests fast.

After setting up this environment, you will be able to test your javascript functions/classes and also DOM changes, made by jQuery.

Because whole setup was not well covered in project's README I will write about my setup so maybe it can also help you.

You will need 3 things installed before you proceed

• first is node.js
• second is karma runner itself, which can be installed with npm install -g karma (I needed to add sudo)
• third is Phantom.JS (at least for me, because I run everything on Vagrant virtual machines)

When you are don you can run karma from your terminal. You are now ready to generate karma config file. Do this inside the project's root directory or even better, project's root directory for tests:

karma init

This will generate karma.conf.js file with default settings. I will write only about settings I needed to change:

Configuration below was done with Karma version 0.8.x. Now with 0.10.x config file was changed and is slightly different. For an example, please take a look at this one.

• basePath = '..'; because I put my config file in spec directory and didn't want to put it in project root. With this config you can specify all other paths, starting from project root, which is good for me, because most of my js files are in app/assets/javascripts/ directory.

• files = [

  JASMINE,
  JASMINE_ADAPTER,
  {pattern: 'spec/javascripts/fixtures/*.html', watched: true, included: false, served: true},
  'http://code.jquery.com/jquery-1.9.1.min.js',
  'spec/javascripts/helpers/jasmine-jquery.js',
  'spec/javascripts/helpers/fixtures.js',
  // code I want to test
  'app/assets/javascripts/*.coffee',
  // specs
  'spec/javascripts/*_spec.*']

  • I choose to use jasmine testing framework, but you have more to choose from.
  • Because I still do lots of DOM manipulation I wanted to use HTML fixtures to test jQuery selection and manipulation too. For HTML fixtures you need to tell karma how to load them. You can see this in third line of files setting.
  • I included jquery from CDN because I'm working on a Rails project which loads jQuery from ruby gem, which is stored somewhere else on file system.

  • then I added jasmine-jquery.js library (this file) so I can load and use HTML fixtures. Karma doesn't provide you with loading these (yet).

    fixtures.js is holding global config objects which are otherwise loaded from server. In this file I fake/mock them.

  • browsers = ['PhantomJS']; as I said, I run everything on Vagrant, so I prefer running tests with PhantomJS. It's fast! But you can choose between other non-headless browsers too.

To load HTML fixtures in your tests, you can look at this example of spec/javascripts/first_spec.coffee file. It is important to set jasmine.getFixtures().fixturesPath correctly. If you do it right, you can simply get HTML fixtures with one line of code loadFixtures('test_html_mocks.html')

jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures/'

describe "HTML sanitization with peristance manager", ->
  it "should be able to sanitize html and get raw content", ->
    loadFixtures('test_html_mocks.html')
    pm = new PersistenceManager(config.action_btns)
    sanitized = pm.sanitize($('h1'))
    expect(sanitized).toBe('Test content')

If you've managed to set everything up correctly, you will be able to run your tests with karma start command from the terminal. All the tests will automatically run every time you make a change on the files that gets matched with files in karma.conf.js file.

With setup like that, tests are executed really fast. Neat!