or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-karma-jasmine-html-reporter

A Karma plugin that dynamically displays Jasmine test results at debug.html page

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/karma-jasmine-html-reporter@2.1.x

To install, run

npx @tessl/cli install tessl/npm-karma-jasmine-html-reporter@2.1.0

index.mddocs/

Karma Jasmine HTML Reporter

Karma Jasmine HTML Reporter is a Karma plugin that provides a dynamic HTML interface for viewing Jasmine test results. It displays test results at the debug.html page during test execution, allowing developers to run individual tests or entire test suites interactively.

Package Information

  • Package Name: karma-jasmine-html-reporter
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install karma-jasmine-html-reporter --save-dev

Core Imports

This package is a Karma plugin and is not imported directly into code. Instead, it's loaded via Karma configuration:

// karma.conf.js - require in plugins array
module.exports = function(config) {
  config.set({
    plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter')
    ],
    reporters: ['kjhtml']
  });
};

Basic Usage

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    plugins: [
        require('karma-jasmine'),
        require('karma-jasmine-html-reporter')
    ],
    reporters: ['kjhtml']
  });
};

Architecture

The plugin consists of two main components:

  • Karma Plugin Registration: Exports a Karma plugin factory that registers the 'kjhtml' reporter
  • HTML Boot Script: A Jasmine-based HTML UI initialization script that sets up the interactive test interface
  • File Injection System: Dynamically injects Jasmine core CSS/JS files and boot scripts into the Karma file array

Capabilities

Plugin Registration

Main Karma plugin export that provides the 'kjhtml' reporter.

/**
 * Main plugin export - Karma plugin registration
 * Registers the 'kjhtml' reporter with Karma
 */
module.exports = {
  'reporter:kjhtml': ['type', initReporter]
};

Reporter Initialization

Core function that initializes the HTML reporter and configures file injection.

/**
 * Initializes the HTML reporter and sets up file injection
 * @param {Object} karmaConfig - Karma configuration object
 * @param {Function} baseReporterDecorator - Base reporter decorator from Karma
 */
function initReporter(karmaConfig, baseReporterDecorator) {
  // Implementation handles:
  // - Base reporter decoration  
  // - Configuration option processing
  // - Jasmine core file injection
  // - Boot script injection
}

// Dependency injection specification
initReporter.$inject = ['config', 'baseReporterDecorator'];

File Pattern Creation

Internal utility function used by the reporter to create Karma file pattern objects.

/**
 * Creates a Karma file pattern object for injecting files
 * @param {string} path - The file path to include
 * @returns {Object} Karma file pattern object
 */
function createPattern(path) {
  return { 
    pattern: path, 
    included: true, 
    served: true, 
    watched: false 
  };
}

Configuration Options

Optional configuration to suppress console output when using multiple reporters.

/**
 * Optional configuration object for the HTML reporter
 * Set in karma.conf.js under jasmineHtmlReporter key
 */
interface JasmineHtmlReporterConfig {
  /** Suppress all console output (overrides other suppress settings) */
  suppressAll?: boolean;
  /** Suppress failed test console output only */
  suppressFailed?: boolean;
}

Usage Example:

// karma.conf.js
module.exports = function(config) {
  config.set({
    reporters: ['kjhtml', 'mocha'], // Multiple reporters

    jasmineHtmlReporter: {
      suppressAll: true,      // Suppress all messages
      suppressFailed: true    // Suppress failed messages only
    }
  });
};

Boot Script Functionality

The boot.js script provides the HTML interface initialization:

/**
 * Jasmine HTML interface configuration from URL query parameters
 */
interface RuntimeConfig {
  /** Stop execution on first spec failure */
  stopOnSpecFailure?: boolean;
  /** Stop spec on first expectation failure */
  stopSpecOnExpectationFailure?: boolean;
  /** Hide disabled specs in the UI */
  hideDisabled?: boolean;
  /** Random execution seed */
  random?: string;
  /** Specific seed for random execution */
  seed?: string;
}

/**
 * Jasmine Environment interface (from jasmine-core)
 */
interface JasmineEnv {
  configure(config: any): void;
  addReporter(reporter: any): void;
}

/**
 * Jasmine Timer interface (from jasmine-core)
 */
interface JasmineTimer {
  start(): void;
  elapsed(): number;
}

/**
 * HTML Reporter instance configuration
 */
interface HtmlReporterOptions {
  /** Jasmine environment instance */
  env: JasmineEnv;
  /** Navigation function for URL parameter changes */
  navigateWithNewParam: (key: string, value: string) => void;
  /** Query string manipulation function */
  addToExistingQueryString: (key: string, value: string) => string;
  /** Container element provider */
  getContainer: () => HTMLElement;
  /** DOM element creation function */
  createElement: (...args: any[]) => HTMLElement;
  /** Text node creation function */
  createTextNode: (...args: any[]) => Text;
  /** Timer instance for test execution timing */
  timer: JasmineTimer;
  /** Whether to enable spec filtering */
  filterSpecs: boolean;
}

Dependencies

Peer Dependencies

These packages must be installed in the project using karma-jasmine-html-reporter:

{
  "jasmine-core": "^4.0.0 || ^5.0.0",
  "karma": "^6.0.0", 
  "karma-jasmine": "^5.0.0"
}

File Dependencies

The plugin automatically injects these files from jasmine-core:

  • CSS Files: All CSS files from jasmine-core for styling the HTML interface
  • JavaScript Files: Core Jasmine JavaScript files (excluding jasmine.js which is provided by karma-jasmine)
  • Boot Scripts: boot0.js from jasmine-core and the custom boot.js from the plugin

Query Parameters

The HTML interface supports URL query parameters for test execution control:

  • spec: Filter tests by name pattern
  • stopOnSpecFailure: Stop on first test failure
  • stopSpecOnExpectationFailure: Stop on first assertion failure
  • hideDisabled: Hide disabled tests in the UI
  • random: Enable random test execution
  • seed: Set specific seed for random execution

Error Handling

The plugin integrates with Karma's reporter system and inherits standard Karma error handling. Configuration errors are handled through Karma's configuration validation system.

Platform Compatibility

  • Environment: Node.js (via Karma)
  • Browsers: All browsers supported by Karma and Jasmine
  • Jasmine Version: Compatible with Jasmine 4.x and 5.x as specified in peer dependencies