Generate jasmine report using Karma Runner

Question

I want to obtain a report of all successful jasmine specs runned with karma, something like you obtain when using jasmine alone.

Is there anyway to achieve this?

Answer 1

Try this quick plugin I wrote:

https://github.com/dtabuenc/karma-html-reporter

Answer 2

tl;dr

Yes, but it's non-trivial, and even more so if you want --auto-watch. So, basically, no :-( Blame it on lib/reporters/Progress.js, which swallows successful test results and spits out a summary line for each browser.

If you're determined, though, you have (at least) two non-trivial ways (in v0.9.2) of getting a "good enough" result (one of which, if you do it, you should polish up and submit as a pull request :-))

Option 1: jUnit scraping

As with most test frameworks, you can get Karma to output results in the jUnit XML format, which you can then post-process...

By default, karma start --reporters=junit will write a jUnit report to ${basePath}/test-results.xml, but you can override this with the junitReporter.outputFile config item.

Keep in mind that you can combine the jUnit output with other reporters (growl, etc.) on the command-line: e.g., karma start --reporters=junit,growl

Post-processing with ant

• how can i create a html report for the junit xml report manually? (ant mojo)
• How can I generate an HTML report for Junit results?

Post-processing with XSLT

• What XSLT converts JUnit Xml format to JUnit Plain format (with stylesheet!)

Post-processing with xmlstarlet

I've always ended up rolling my own stupid grep/sed/perl/etc. pipeline in cases like this, but xmlstarlet is perfect for this job. E.g.,

$ cat test-runner.xml \
    | xml sel -t -m "//testcase" -v @classname -o " " -v @name -nl

yields (for one of my projects):

Chrome 27.0 (Linux).Globalization API: _g11n exists
Chrome 27.0 (Linux).Globalization API: _g11n has been initialized
Chrome 27.0 (Linux).Globalization API: _g11n _locales exists
Chrome 27.0 (Linux).Globalization API: _g11n _locales has been initialized
Chrome 27.0 (Linux).Globalization API: _g11n _locales has a current locale (matching the default)
Chrome 27.0 (Linux).Globalization API: _g11n _locales registry allows lookup by full code
Chrome 27.0 (Linux).Globalization API: _g11n _locales registry allows lookup by locale object
Chrome 27.0 (Linux).Globalization API: _g11n _locales registry fails
Chrome 27.0 (Linux).Globalization controllers hkmLocaleCtrl should have the locales database

Option 2: Write a Custom Reporter

If you're up for it, subclass an existing reporter (e.g., lib/reporters/Progress.js, lib/reporters/Base.js), overriding the .specSuccess and .onBrowserComplete methods to report more details from each test. Getting karma to use the reporter is left as an exercise for the reader :-)

BTW: If you choose option 2, be sure to open a pull-request to get it into karma :-)

Answer 3

To show the individual test case I use the following (starting from scratch for a basic unit test project):

npm install karma karma-jasmine karma-phantomjs-launcher karma-spec-reporter

touch main.js main.spec.js

karma init

then to the following questions select:

Which testing framework do you want to use ?
> jasmine

Do you want to capture any browsers automatically ?
> PhantomJS
> 

What is the location of your source and test files ?
> *.js

Do you want Karma to watch all the files and run the tests on change ?
> yes

edit the karma.conf.js in your project folder and

replace:

reporters: ['progress']

with:

reporters: ['spec']

run

karma start

and you are ready to write your unit test in the main.spec.js

describe('suite', function () {
    it('expectation', function () {
        expect(true).toBeTruthy();
    });
});

save... and in the terminal you should see something like:

INFO [watcher]: Changed file"/main.spec.js".
true
  ✓ should be true

PhantomJS 1.9.8 (Mac OS X): Executed 1 of 1 SUCCESS (0.001 secs / 0 secs)

Answer 4

There's karma-coverage which creates .html code coverage reports. It's straight-forward to integrate it into your karma config.

https://github.com/karma-runner/karma-coverage

npm install karma-coverage --save-dev

add to karma.conf.js:

// karma.conf.js
module.exports = function(config) {
  config.set({
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],

    // coverage reporter generates the coverage
    reporters: ['progress', 'coverage'],

    preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      'src/*.js': ['coverage']
    },

    // optionally, configure the reporter
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    }
  });
};