Karma JS Test Runner Sebastiano Armeli @sebarmeli 14/8/2013 - MelbJS

Karma JS Test Runner Sebastiano Armeli @sebarmeli

Karma JS Test Runner Sebastiano Armeli @sebarmeli

Test Framework How you write your tests

Test Environment Where you execute your tests

Test Runner How you run your test

What do we need from a Test Runner?

it (‘should be fast’)

it (‘should use real browsers’)

it (‘should be reliable’)

it (‘should be reliable’)

Karma

Client socket.io Client Client socket.io socket.io watcher reporter manager web server preprocessor Server

Client socket.io Client Client socket.io socket.io watcher reporter manager web server http http http preprocessor Server

Domain Specific Language (DSL) for defining tests npm install -g karma // Ready to use

Domain Specific Language (DSL) for defining tests npm install -g karma karma init // Create config file

Domain Specific Language (DSL) for defining tests npm install -g karma karma init karma start // Karma starts listening

Domain Specific Language (DSL) for defining tests npm install -g karma karma init karma start karma run // Karma runs the tests

module.exports = function(config) { config.set({ basePath: './../..', frameworks: ['jasmine', ‘requirejs’], files: [ ‘spec/javascripts/test-main.js’, {pattern: 'spec/javascripts/fixtures/**/*.html', watched: false}, {pattern: 'app/assets/javascripts/**/*.js'}, {pattern: 'spec/javascripts/**/*.js'} ], port: 9876, //default browsers: ['Chrome’, ‘ChromeCanary’], singleRun: false, autoWatch: true }); }

Plugins Browser Launchers Test Framework Reporters Preprocessors

karma-!refox-launcher karma-safari-launcher karma-opera-launcher karma-ie-launcher

Plugins Browser Launchers Test Framework Reporters Preprocessors

karma-jasmine karma-mocha karma-qunit karma-requirejs

Plugins Browser Launchers Test Framework Reporters Preprocessors

karma-junit-reporter karma-coverage reporters: [‘junit’], junitReporter : { outputFile: 'test-reports.xml', suite: 'My Suite' } reporters: [‘coverage’], coverageReporter: { type : 'html', dir : 'coverage/' }

Plugins Browser Launchers Test Framework Reporters Preprocessors

karma-coverage preprocessors: { './app/assets/javascripts/**/*.js': 'coverage' } preprocessors: { '**/*.handlebars': 'ember' } karma-ember-preprocessor

Running just one spec?

Running just one spec? iit(“should do something”, function(){}); ddescribe(“component”, function(){});

Debug http://localhost:9876/debug.html

Grunt-Karma karma: { ci: { configFile: 'karma.conf.js', singleRun: true, browsers: ['PhantomJS'] } }

Running on CI?

Running on CI? karma start --singleRun=true --browsers PhantomJS --reporters junit

Karma!