Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Karma - JS Test Runner

Karma - JS Test Runner

Talk given at MelbJS - August 2013

Sebastiano Armeli

August 14, 2013
Tweet

More Decks by Sebastiano Armeli

Other Decks in Programming

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