Mocha Multiple Session Detailed Runner UI

A UI library for displaying multi-session test results from the mocha-multiple-sessions-detailed-runner.

✨ Features

• Display test session results with detailed reports
• Show combined reports across multiple test sessions
• Vanilla JavaScript implementation with no runtime dependencies
• Light and dark theme support
• Interactive test result exploration
• Compatible with mocha-detailed-json-reporter-ui

🚀 Installation

npm install mocha-multiple-session-detailed-runner-ui

📋 Usage

Basic Usage with CDN

<!-- Include the UI library and stylesheet -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/iife/multi-session-detailed-runner-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/multi-session-detailed-runner-ui.min.css">

<!-- Include the detailed reporter UI -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/mocha-report-ui.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/mocha-report.css">

<script>
  // Create a UI instance
  const ui = MultiSessionDetailedRunnerUI.createMultiSessionRunnerUI('container-id', {
    theme: 'light',
    expandFailures: true,
    showConsoleLogs: true
  });
  
  // Render a session report
  ui.renderReport(sessionReport);
  
  // Render combined report
  ui.renderCombinedReport(combinedReport);
</script>

Integration with Multi-Session Detailed Runner

// Create the runner
const runner = MultiSessionDetailedRunner.createMultiSessionDetailedRunner();

// Initialize the UI
const ui = createMultiSessionRunnerUI('container-id', {
  theme: 'light',
  expandFailures: true,
  showConsoleLogs: true,
  onSessionSelect: (sessionLabel) => {
    // When user selects a session, show its report
    const report = runner.getReport(sessionLabel);
    if (report) {
      ui.renderReport(report);
    }
  }
});

// Run a test session
const result = await runner.run('unit-tests');

// Update UI with current session states
ui.renderSessions(runner.getSessionStates());

// Render the test report
const report = runner.getReport('unit-tests');
ui.renderReport(report);

🔧 API Reference

createMultiSessionRunnerUI(containerId, options)

Creates a new UI instance for displaying test reports.

Parameters:

• containerId (string): The ID of the container element
• options (object): Configuration options
  • theme ('light' | 'dark'): UI theme
  • expandFailures (boolean): Auto-expand failed tests
  • showConsoleLogs (boolean): Show console logs in reports
  • renderSessionsView (boolean): Show sessions sidebar
  • onSessionSelect (function): Called when a session is selected

Returns:

• MultiSessionRunnerUI instance with the following methods:

  • renderSessions(sessionStates): Render the session list
  • renderReport(report): Render a detailed test report
  • renderCombinedReport(combinedReport): Render a combined report
  • showEmptyState(message): Show an empty state message
  • setTheme(theme): Set the UI theme ('light' | 'dark')

📝 License

MIT