Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Karma JS Test Runner Sebastiano Armeli @sebarmeli

Slide 3

Slide 3 text

Karma JS Test Runner Sebastiano Armeli @sebarmeli

Slide 4

Slide 4 text

Test Framework How you write your tests

Slide 5

Slide 5 text

Test Environment Where you execute your tests

Slide 6

Slide 6 text

Test Runner How you run your test

Slide 7

Slide 7 text

What do we need from a Test Runner?

Slide 8

Slide 8 text

it (‘should be fast’)

Slide 9

Slide 9 text

it (‘should use real browsers’)

Slide 10

Slide 10 text

it (‘should be reliable’)

Slide 11

Slide 11 text

it (‘should be reliable’)

Slide 12

Slide 12 text

Karma

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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 }); }

Slide 20

Slide 20 text

Plugins Browser Launchers Test Framework Reporters Preprocessors

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Plugins Browser Launchers Test Framework Reporters Preprocessors

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Plugins Browser Launchers Test Framework Reporters Preprocessors

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Plugins Browser Launchers Test Framework Reporters Preprocessors

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Running just one spec?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Running on CI?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Karma!