Talk given at MelbJS - August 2013

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!