CODEWITHSUNDEEP
karma-runner
blaster
blaster

Reputation: 8937

View Karma Test Output in a Browser?

I'm new to Karma, but I'm wondering how to view its output in a browser (much like the way one interacts with Jasmine, when a runner.html file is present).

I watched the introductory screencast and I understand how to view test outputs in a console window, but in my browser, I get almost no content for Karma except

Karma - connected

Please advise! I would like to avoid having to maintain a separate runner.html file, since the Karma configuration file already requires me to include all necessary script links.

Upvotes: 76

Views: 41148

Answers (5)

Rupesh Kumar Tiwari
Rupesh Kumar Tiwari

Reputation: 967

Hi In my case I solved this problem by installing karma-jasmine-html-reporter and putting it in reporters array.

  • Install npm i -D karma-jasmine-html-reporter
  • add 'kjhtml' in your reporter.
  • add client:{clearContext:false}

var gulpConfig = require('./build/build.conf')();
module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        basePath: './',
        plugins: [
          // all other plugins
          'karma-jasmine-html-reporter'
        ],
        colors: true,
        client: {
            clearContext: false    // will show the results in browser once all the testcases are loaded
        },
        frameworks: ['jasmine', 'jasmine-sinon', 'sinon'],
        files: [].concat(
            gulpConfig.deps.lib,
            'js/**/*mother*.js',
            'js/**/*mother.*.js',
            'js/**/*.tests.js'
        ),
        logLevel: config.LOG_INFO,
        reporters: ['kjhtml', 'progress', 'coverage'],
    });
};

Upvotes: 8

Dan-Nolan
Dan-Nolan

Reputation: 6657

I wanted to display HTML5 Web Notifications with Karma so I wrote something quick to get it to work with Karma version 0.11. Might behave slightly different with other versions. I load this script in with the rest of my application scripts, it will store the karma test results and after completion it will determine the success of the test and then reset to the original karma functions so they're not changed when this script gets run again.

// store all my test results
var results = [];
// Wrap the karma result function
var resultFunc = window.__karma__.result;
window.__karma__.result = function(result){
    // run the original function
    resultFunc(result);
    // push each result on my storage array
    results.push(result);
}

// wrap the karma complete function
var completeFunc = window.__karma__.complete;
window.__karma__.complete = function(result){
    // run the original function
    completeFunc(result);
    // determine success
    var success = results.every(function(r){ return r.success });

    if (success) {
        // display a success notification
    }
    else {
        // display a test failure notification
    }

    // reset the result function
    window.__karma__.result = resultFunc;
    // reset the complete function
    window.__karma__.complete = completeFunc;
}

Upvotes: 2

stolli
stolli

Reputation: 5956

AFAIK, the previous two answers are correct in that you'll want to run the tests in a browser; click DEBUG and view the output in the console.

Politely contradicting the previous answer, I regularly do this and step-through debug with full variable interaction using Karma.

The proper answer to your question, because what you want is pretty HTML based output, is "no." However, this plugin for karma may give you the results you desire.

https://npmjs.org/package/karma-html-reporter

Upvotes: 28

Chris Nicola
Chris Nicola

Reputation: 14574

You need to run it with singleRun = false in karma.conf.js and then click the button on the top corner that says "DEBUG". Then you should see the output and it won't disappear or close. You will also be able to use the console to debug.

Worth noting that debugging e2e tests isn't that easy because they are "future" based so you won't be able to intercept values (afaik).

Upvotes: 11

Jared Stark
Jared Stark

Reputation: 31

One option is to open the Javascript console in your browser. Karma creates a log entry for each test, including the result.

Upvotes: 2

Related Questions