This document discusses Karma, an open source JavaScript test runner. It can run tests from any JavaScript test framework and supports real browsers via socket.io. Karma is easy to set up - you can install it globally via npm, then use karma init to generate a config file and karma start to begin running tests. It supports plugins for browser launchers, test frameworks, reporters and preprocessors. The document provides examples of configuring Karma to run different types of tests and on continuous integration systems.

1. Karma
JS Test Runner
Sebastiano Armeli
@sebarmeli14/8/2013 - MelbJS

2. Karma
JS Test Runner
Sebastiano Armeli
@sebarmeli

3. Karma
JS Test Runner
Sebastiano Armeli
@sebarmeli

4. Test Framework
How you write your tests

5. Test Environment
Where you execute your tests

6. Test Runner
How you run your test

7. What do we need from a Test Runner?

8. it (‘should be fast’)

9. it (‘should use real browsers’)

10. it (‘should be reliable’)

11. it (‘should be reliable’)

12. Karma

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

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

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

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

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

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

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

20. Plugins
Browser Launchers
Test Framework
Reporters
Preprocessors

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

22. Plugins
Browser Launchers
Test Framework
Reporters
Preprocessors

23. karma-jasmine
karma-mocha
karma-qunit
karma-requirejs

24. Plugins
Browser Launchers
Test Framework
Reporters
Preprocessors

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

26. Plugins
Browser Launchers
Test Framework
Reporters
Preprocessors

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

28. Running just one
spec?

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

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

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

32. Running on CI?

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

34. Karma!