Monday, March 16, 2015

Automating client side testing with Karma

Google says "The main goal for Karma is to bring a productive testing environment to developers."
I recently found a nice answer on stackoverflow explaining how Karma is doing this.

This inspired me to create a visualization on this topic, here it is:

This is how it works:

1. The Karma HTTP server is launched. It serves a test framework specific html file (test.html) which references both application specific javascripts (app.js) and the tests (specs.js)

2. A browser is being launched which requests test.html

3. Karma HTTP server serves test.html and the referenced javascript files.

4. The tests are run within the client.

5. The results are submitted to the Karma HTTP server.

6. Based on the configured loggers, the results are being rendered to the console, a textfile or other output formats. The output can be checked manually or processed automatically.

Karma is highly configurable, the most important configurations are:

  1. The list of files to load in the browser (app.js)
  2. The testing framework which is used (e.g. jasmine) has to be configured and appropiate plugins have to be loaded - note that this also determines the html page (test.html) because it is framework specific
  3. The list of browsers (can be a headless one like phantom.js, too) to launch and run tests in
  4. The list of log appenders (console, textfile...) to be used
Note that 2., 3. and 4. support a plugin mechanism, i.e. Karma will load appropriate plugins. Such plugins are available for the most common scenarios, for more exotic scenarios you could write them on your own.