Connect Karma Runner to Jenkins CI

Question

Help me understand how to connect my Angular-Jasmine-Karma stack to Jenkins. I have an Angular.js web app that I test with Karma (né Testacular) and Jasmine. It looks just like the Angular Tutorial. I want to test it using Jenkins Continuous Integration.

So far I have installed Angular, Jasmine and Karma according to the tutorial. I have installed Jenkins. I can get each working independently. From what I've gleamed, it seems as though Karma should output an XML file that Jenkins ingests, but Karma is not consistently outputting a file, and I do not understand this conceptually. At what point does Jenkins call Karma?

A good answer would outline the pieces needed to do Karma testing in Jenkins.

Just in case, here is my Karma config. It has been mutilated in the name of debugging.

module.exports = function(config){
  config.set({
    basePath : '../',

    files : [
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'app/js/**/*.js',
      'test/unit/**/*.js'
    ],

    exclude : [
      'app/lib/angular/angular-loader.js',
      'app/lib/angular/*.min.js',
      'app/lib/angular/angular-scenario.js'
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['Chrome'],

    plugins : [
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-script-launcher',
            'karma-jasmine'
            ],

    reporters : ['dots', 'junit', 'coverage'],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

    coverageReporter : {
      type: 'cobertura',
      dir: 'coverage/',
      file: 'coverage.xml'
    }

  });
};

Answer 1

First, you need a karma.conf.js file that lists the following:

reporters: ['progress', 'coverage', 'dots', 'junit'],

junitReporter: {
    outputDir: 'karma-results',
    outputFile: 'karma-results.xml'
},

browsers: ['PhantomJS'],

singleRun: true

The most important item under the reporters key is junit. This is the add-on that will translate your Karma outputs into an XML file. Your test outputs must be in a specific XML format for Jenkins to parse it. You configure the output location of this XML file using the junitReporter key. In the browsers key, make sure you are specifying PhantomJS since it is most likely your Jenkins server will not have an instance of Chrome or Firefox. The singleRun key makes sure the Karma server is launched before tests are run and shut down when tests are finished.

Next, make sure all of the following node modules are installed on your server by running these commands:

npm install -g karma-cli
npm install -g karma --save-dev
npm install -g phantomjs 
npm install -g karma-jasmine --save-dev 
npm install -g karma-phantomjs-launcher --save-dev
npm install -g karma-coverage

Visit your Jenkins server through a browser. You can reach your Jenkins server at

http://server-ip-address:8080

Before moving forward, make sure you have the " Environment Injector Plugin" and "Junit Plugin" installed. Once that is there, click on New Item on the left-hand side of the Jenkins homepage. Have the following parameters set for your job:

The "Properties Content" allows you to assign Jenkins a PATH on your server and allows you to use the karma keyword in the "Command" section below it. The "Command" section tells Jenkins to cd to the folder where your karma.conf.js file resides and start Karma.

If you use the outputDir and outputFile values in my karma.conf.js example above, then you can keep the "Test report XMLs" input value. Otherwise, change that to reflect the new path to where your XML results file will be generated.

Now, whenever you run this job in Jenkins, you'll be able to see whether or not it passed and also the line item results from your tests.

Answer 2

Do you use maven as a build tool? If so, take a look at: https://github.com/eirslett/frontend-maven-plugin. It runs the tests, so Jenkins can show the results.