Karma - JS Test Runner

Talk given at MelbJS - August 2013

Transcript

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

   View Slide

2. Karma
   JS Test Runner
   Sebastiano Armeli
   @sebarmeli
   

   View Slide

3. Karma
   JS Test Runner
   Sebastiano Armeli
   @sebarmeli
   

   View Slide

4. Test Framework
   How you write your tests
   

   View Slide

5. Test Environment
   Where you execute your tests
   

   View Slide

6. Test Runner
   How you run your test
   

   View Slide

7. What do we need from a Test Runner?
   

   View Slide

8. it (‘should be fast’)
   

   View Slide

9. it (‘should use real browsers’)
   

   View Slide

10. it (‘should be reliable’)
    

    View Slide

11. it (‘should be reliable’)
    

    View Slide

12. Karma
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Plugins
    Browser Launchers
    Test Framework
    Reporters
    Preprocessors
    

    View Slide

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

    View Slide

22. Plugins
    Browser Launchers
    Test Framework
    Reporters
    Preprocessors
    

    View Slide

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

    View Slide

24. Plugins
    Browser Launchers
    Test Framework
    Reporters
    Preprocessors
    

    View Slide

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

    View Slide

26. Plugins
    Browser Launchers
    Test Framework
    Reporters
    Preprocessors
    

    View Slide

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

    View Slide

28. Running just one
    spec?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Running on CI?
    

    View Slide

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

    View Slide

34. Karma!
    

    View Slide