@zohodesk/unit-testing-framework 0.0.24-experimental → 0.0.25-experimental

package/build/src/reporters/default-reporter.js

@@ -5,26 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _logger = require("../utils/logger");
+var _reporterUtils = require("./reporter-utils.js");
 /**
  * default-reporter.js
  *
- * A lightweight custom Jest reporter that can be bundled with the framework.
- * Consumer projects can use this as-is or supply their own reporters.
- *
- * Jest Reporter interface (class-based):
- *   - onRunStart(results, options)
- *   - onTestStart(test)
- *   - onTestResult(test, testResult, results)
- *   - onRunComplete(contexts, results)
+ * A lightweight custom Jest reporter bundled with the framework.
+ * Outputs a formatted summary to the console after each test run.
  */
 
 class DefaultReporter {
   constructor(globalConfig, _reporterOptions) {
     this.globalConfig = globalConfig;
-    this._startTime = 0;
+    this._timer = (0, _reporterUtils.createTimer)();
   }
   onRunStart(_results, _options) {
-    this._startTime = Date.now();
+    this._timer.start();
     _logger.Logger.log(_logger.Logger.INFO_TYPE, '\n╔══════════════════════════════════════════╗');
     _logger.Logger.log(_logger.Logger.INFO_TYPE, '║   Unit Testing Framework – Test Run      ║');
     _logger.Logger.log(_logger.Logger.INFO_TYPE, '╚══════════════════════════════════════════╝\n');
@@ -42,7 +37,7 @@ class DefaultReporter {
     _logger.Logger.log(_logger.Logger.INFO_TYPE, `  ${icon}  Passed: ${numPassingTests}  Failed: ${numFailingTests}  Skipped: ${numPendingTests}`);
   }
   onRunComplete(_contexts, results) {
-    const elapsed = ((Date.now() - this._startTime) / 1000).toFixed(2);
+    const elapsed = this._timer.elapsed();
     const {
       numPassedTests,
       numFailedTests,

package/build/src/reporters/html-reporter.js

@@ -6,20 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
+var _reporterUtils = require("./reporter-utils.js");
+var _htmlTemplate = require("./html-template.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * html-reporter.js
  *
- * A zero-dependency custom Jest reporter that generates a self-contained
- * HTML report after each test run. The report includes:
- *   - Summary (total / passed / failed / skipped / duration)
- *   - Per-suite breakdown with expandable test cases
- *   - Failure messages and stack traces
- *   - Filtering controls (All / Passed / Failed / Skipped)
- *
- * Usage in reporters config:
- *   ['html-report']                          → defaults to <projectRoot>/unit_reports/report.html
- *   ['html-report', { outputPath: '...' }]   → custom output path
+ * Jest reporter that generates a self-contained HTML report.
+ * This class handles only the Jest lifecycle hooks.
+ * HTML generation is delegated to html-template.js.
  */
 
 class HtmlReporter {
@@ -34,322 +29,33 @@ class HtmlReporter {
     this.globalConfig = globalConfig;
     this.options = reporterOptions;
     this._suites = [];
-    this._startTime = 0;
+    this._timer = (0, _reporterUtils.createTimer)();
   }
   onRunStart() {
-    this._startTime = Date.now();
+    this._timer.start();
     this._suites = [];
   }
   onTestResult(_test, testResult) {
     this._suites.push(testResult);
   }
   onRunComplete(_contexts, aggregatedResults) {
-    const elapsed = ((Date.now() - this._startTime) / 1000).toFixed(2);
     const rootDir = this.globalConfig.rootDir || process.cwd();
     const outputDir = this.options.outputDir ? _path.default.resolve(rootDir, this.options.outputDir) : _path.default.resolve(rootDir, 'test-slices', 'unit-test', 'unit_reports');
     const fileName = this.options.fileName || 'report.html';
     const title = this.options.title || 'Unit Test Report';
     const outputPath = _path.default.join(outputDir, fileName);
-
-    // Ensure output directory exists
     _fs.default.mkdirSync(outputDir, {
       recursive: true
     });
-    const html = this._generateHtml(aggregatedResults, elapsed, title);
+    const html = (0, _htmlTemplate.generateHtml)({
+      aggregatedResults,
+      suites: this._suites,
+      rootDir,
+      elapsed: this._timer.elapsed(),
+      title
+    });
     _fs.default.writeFileSync(outputPath, html, 'utf-8');
     console.log(`\n  📄 HTML report written to: ${outputPath}\n`);
   }
-
-  // ── Private ────────────────────────────────────────────────
-
-  _generateHtml(results, elapsed, title) {
-    const {
-      numPassedTests,
-      numFailedTests,
-      numPendingTests,
-      numTotalTests,
-      numPassedTestSuites,
-      numFailedTestSuites,
-      numTotalTestSuites
-    } = results;
-    const suitesHtml = this._suites.map(suite => this._renderSuite(suite)).join('\n');
-    const timestamp = new Date().toLocaleString();
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${title}</title>
-  <style>
-    :root {
-      --pass: #2ecc71;
-      --fail: #e74c3c;
-      --skip: #f39c12;
-      --bg: #1a1a2e;
-      --card: #16213e;
-      --text: #eaeaea;
-      --muted: #8892a4;
-      --border: #2a2a4a;
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      padding: 24px;
-      line-height: 1.5;
-    }
-    .header {
-      text-align: center;
-      margin-bottom: 32px;
-    }
-    .header h1 { font-size: 1.8rem; margin-bottom: 4px; }
-    .header .meta { color: var(--muted); font-size: 0.85rem; }
-
-    /* ── Summary Cards ─── */
-    .summary {
-      display: flex;
-      gap: 16px;
-      justify-content: center;
-      flex-wrap: wrap;
-      margin-bottom: 28px;
-    }
-    .card {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 18px 28px;
-      min-width: 140px;
-      text-align: center;
-    }
-    .card .value { font-size: 2rem; font-weight: 700; }
-    .card .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
-    .card.pass .value { color: var(--pass); }
-    .card.fail .value { color: var(--fail); }
-    .card.skip .value { color: var(--skip); }
-    .card.total .value { color: #58a6ff; }
-
-    /* ── Filters ─── */
-    .filters {
-      display: flex;
-      gap: 8px;
-      justify-content: center;
-      margin-bottom: 24px;
-      flex-wrap: wrap;
-    }
-    .filters button {
-      background: var(--card);
-      color: var(--text);
-      border: 1px solid var(--border);
-      padding: 6px 18px;
-      border-radius: 20px;
-      cursor: pointer;
-      font-size: 0.85rem;
-      transition: all 0.2s;
-    }
-    .filters button:hover,
-    .filters button.active { background: #58a6ff; color: #000; border-color: #58a6ff; }
-
-    /* ── Suites ─── */
-    .suite {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      margin-bottom: 16px;
-      overflow: hidden;
-    }
-    .suite-header {
-      display: flex;
-      align-items: center;
-      padding: 14px 18px;
-      cursor: pointer;
-      user-select: none;
-      gap: 10px;
-    }
-    .suite-header:hover { background: rgba(255,255,255,0.03); }
-    .suite-header .icon { font-size: 1.1rem; }
-    .suite-header .name {
-      flex: 1;
-      font-weight: 600;
-      font-size: 0.95rem;
-      word-break: break-all;
-    }
-    .suite-header .counts { font-size: 0.8rem; color: var(--muted); }
-    .suite-header .arrow {
-      transition: transform 0.2s;
-      color: var(--muted);
-    }
-    .suite.open .suite-header .arrow { transform: rotate(90deg); }
-
-    .suite-body { display: none; border-top: 1px solid var(--border); }
-    .suite.open .suite-body { display: block; }
-
-    .test-row {
-      display: flex;
-      align-items: flex-start;
-      padding: 10px 18px 10px 36px;
-      gap: 10px;
-      border-bottom: 1px solid var(--border);
-      font-size: 0.9rem;
-    }
-    .test-row:last-child { border-bottom: none; }
-    .test-row .status {
-      flex-shrink: 0;
-      width: 20px;
-      text-align: center;
-    }
-    .test-row .test-title { flex: 1; }
-    .test-row .duration { color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
-    .test-row.passed .status { color: var(--pass); }
-    .test-row.failed .status { color: var(--fail); }
-    .test-row.pending .status { color: var(--skip); }
-
-    .failure-msg {
-      background: rgba(231, 76, 60, 0.1);
-      border-left: 3px solid var(--fail);
-      margin: 6px 0 4px 30px;
-      padding: 10px 14px;
-      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-      font-size: 0.8rem;
-      white-space: pre-wrap;
-      word-break: break-word;
-      color: #f5a5a5;
-      border-radius: 4px;
-    }
-
-    .footer {
-      text-align: center;
-      color: var(--muted);
-      font-size: 0.75rem;
-      margin-top: 32px;
-      padding-top: 16px;
-      border-top: 1px solid var(--border);
-    }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>${title}</h1>
-    <div class="meta">${timestamp} &nbsp;·&nbsp; Duration: ${elapsed}s</div>
-  </div>
-
-  <div class="summary">
-    <div class="card total"><div class="value">${numTotalTests}</div><div class="label">Total</div></div>
-    <div class="card pass"><div class="value">${numPassedTests}</div><div class="label">Passed</div></div>
-    <div class="card fail"><div class="value">${numFailedTests}</div><div class="label">Failed</div></div>
-    <div class="card skip"><div class="value">${numPendingTests}</div><div class="label">Skipped</div></div>
-    <div class="card"><div class="value">${numTotalTestSuites}</div><div class="label">Suites</div></div>
-  </div>
-
-  <div class="filters">
-    <button class="active" data-filter="all">All</button>
-    <button data-filter="passed">Passed</button>
-    <button data-filter="failed">Failed</button>
-    <button data-filter="pending">Skipped</button>
-  </div>
-
-  <div id="suites">
-    ${suitesHtml}
-  </div>
-
-  <div class="footer">
-    Generated by @zohodesk/unit-testing-framework
-  </div>
-
-  <script>
-    // Toggle suite expand/collapse
-    document.querySelectorAll('.suite-header').forEach(header => {
-      header.addEventListener('click', () => {
-        header.parentElement.classList.toggle('open');
-      });
-    });
-
-    // Filter buttons
-    document.querySelectorAll('.filters button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('.filters button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        const filter = btn.dataset.filter;
-        document.querySelectorAll('.suite').forEach(suite => {
-          if (filter === 'all') {
-            suite.style.display = '';
-            suite.querySelectorAll('.test-row').forEach(r => r.style.display = '');
-          } else {
-            const rows = suite.querySelectorAll('.test-row');
-            let visible = 0;
-            rows.forEach(r => {
-              if (r.classList.contains(filter)) {
-                r.style.display = '';
-                visible++;
-              } else {
-                r.style.display = 'none';
-              }
-            });
-            suite.style.display = visible > 0 ? '' : 'none';
-          }
-        });
-      });
-    });
-
-    // Auto-expand suites with failures
-    document.querySelectorAll('.suite').forEach(suite => {
-      if (suite.querySelector('.test-row.failed')) {
-        suite.classList.add('open');
-      }
-    });
-  </script>
-</body>
-</html>`;
-  }
-  _renderSuite(suite) {
-    const suitePath = suite.testFilePath || 'Unknown suite';
-    // Show path relative to rootDir for readability
-    const rootDir = this.globalConfig.rootDir || process.cwd();
-    const relativePath = _path.default.relative(rootDir, suitePath);
-    const passed = suite.numPassingTests || 0;
-    const failed = suite.numFailingTests || 0;
-    const pending = suite.numPendingTests || 0;
-    const suiteIcon = failed > 0 ? '✖' : pending > 0 && passed === 0 ? '○' : '✔';
-    const suiteIconColor = failed > 0 ? 'var(--fail)' : 'var(--pass)';
-    const testsHtml = (suite.testResults || []).map(t => this._renderTest(t)).join('\n');
-    return `
-    <div class="suite">
-      <div class="suite-header">
-        <span class="icon" style="color:${suiteIconColor}">${suiteIcon}</span>
-        <span class="name">${this._escape(relativePath)}</span>
-        <span class="counts">${passed} passed · ${failed} failed · ${pending} skipped</span>
-        <span class="arrow">▶</span>
-      </div>
-      <div class="suite-body">
-        ${testsHtml}
-      </div>
-    </div>`;
-  }
-  _renderTest(testResult) {
-    const status = testResult.status; // 'passed' | 'failed' | 'pending'
-    const icon = status === 'passed' ? '✔' : status === 'failed' ? '✖' : '○';
-    const duration = testResult.duration != null ? `${testResult.duration}ms` : '';
-    const title = testResult.ancestorTitles ? [...testResult.ancestorTitles, testResult.title].join(' › ') : testResult.title;
-    let failureHtml = '';
-    if (status === 'failed' && testResult.failureMessages?.length) {
-      failureHtml = testResult.failureMessages.map(msg => `<div class="failure-msg">${this._escape(this._stripAnsi(msg))}</div>`).join('\n');
-    }
-    return `
-      <div class="test-row ${status}">
-        <span class="status">${icon}</span>
-        <div class="test-title">
-          ${this._escape(title)}
-          ${failureHtml}
-        </div>
-        <span class="duration">${duration}</span>
-      </div>`;
-  }
-  _escape(str) {
-    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-  }
-  _stripAnsi(str) {
-    // eslint-disable-next-line no-control-regex
-    return String(str).replace(/\x1B\[[0-9;]*m/g, '');
-  }
 }
 exports.default = HtmlReporter;

package/build/src/reporters/html-template.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateHtml = generateHtml;
+exports.renderSuite = renderSuite;
+exports.renderTest = renderTest;
+var _fs = _interopRequireDefault(require("fs"));
+var _path = _interopRequireDefault(require("path"));
+var _reporterUtils = require("./reporter-utils.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * html-template.js
+ *
+ * Pure functions that generate the HTML report string.
+ * No file I/O, no Jest API — just data in, HTML string out.
+ *
+ * CSS and client-side JS are read from separate files under
+ * templates/ and inlined at report-generation time so the
+ * output remains a single self-contained HTML file.
+ */
+
+// NOTE: __dirname is available after Babel transpiles ESM → CJS.
+
+const CSS_PATH = _path.default.resolve(__dirname, 'templates', 'report.css');
+const SCRIPT_PATH = _path.default.resolve(__dirname, 'templates', 'report-script.js');
+
+/**
+ * Read template assets once and cache them in memory.
+ * Lazy-loaded on first call to avoid reading files at import time.
+ */
+let _cssCache = null;
+let _scriptCache = null;
+function getCSS() {
+  if (!_cssCache) {
+    _cssCache = _fs.default.readFileSync(CSS_PATH, 'utf-8');
+  }
+  return _cssCache;
+}
+function getScript() {
+  if (!_scriptCache) {
+    _scriptCache = _fs.default.readFileSync(SCRIPT_PATH, 'utf-8');
+  }
+  return _scriptCache;
+}
+
+/**
+ * Generate the full HTML report string.
+ *
+ * @param {object} params
+ * @param {object} params.aggregatedResults - Jest aggregated results.
+ * @param {object[]} params.suites          - Collected test suite results.
+ * @param {string} params.rootDir           - Project root for relative paths.
+ * @param {string} params.elapsed           - Elapsed time string (e.g. "1.23").
+ * @param {string} params.title             - Report page title.
+ * @returns {string} Self-contained HTML string.
+ */
+function generateHtml({
+  aggregatedResults,
+  suites,
+  rootDir,
+  elapsed,
+  title
+}) {
+  const {
+    numPassedTests,
+    numFailedTests,
+    numPendingTests,
+    numTotalTests,
+    numTotalTestSuites
+  } = aggregatedResults;
+  const suitesHtml = suites.map(suite => renderSuite(suite, rootDir)).join('\n');
+  const timestamp = new Date().toLocaleString();
+  const css = getCSS();
+  const script = getScript();
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${(0, _reporterUtils.escapeHtml)(title)}</title>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>${(0, _reporterUtils.escapeHtml)(title)}</h1>
+    <div class="meta">${timestamp} &nbsp;·&nbsp; Duration: ${elapsed}s</div>
+  </div>
+
+  <div class="summary">
+    <div class="card total"><div class="value">${numTotalTests}</div><div class="label">Total</div></div>
+    <div class="card pass"><div class="value">${numPassedTests}</div><div class="label">Passed</div></div>
+    <div class="card fail"><div class="value">${numFailedTests}</div><div class="label">Failed</div></div>
+    <div class="card skip"><div class="value">${numPendingTests}</div><div class="label">Skipped</div></div>
+    <div class="card"><div class="value">${numTotalTestSuites}</div><div class="label">Suites</div></div>
+  </div>
+
+  <div class="filters">
+    <button class="active" data-filter="all">All</button>
+    <button data-filter="passed">Passed</button>
+    <button data-filter="failed">Failed</button>
+    <button data-filter="pending">Skipped</button>
+  </div>
+
+  <div id="suites">
+    ${suitesHtml}
+  </div>
+
+  <div class="footer">
+    Generated by @zohodesk/unit-testing-framework
+  </div>
+
+  <script>
+${script}
+  </script>
+</body>
+</html>`;
+}
+
+/**
+ * Render a single test suite section.
+ *
+ * @param {object} suite    - Jest test suite result.
+ * @param {string} rootDir  - Project root for computing relative paths.
+ * @returns {string} HTML string for the suite.
+ */
+function renderSuite(suite, rootDir) {
+  const suitePath = suite.testFilePath || 'Unknown suite';
+  const relativePath = _path.default.relative(rootDir, suitePath);
+  const passed = suite.numPassingTests || 0;
+  const failed = suite.numFailingTests || 0;
+  const pending = suite.numPendingTests || 0;
+  const suiteIcon = failed > 0 ? '✖' : pending > 0 && passed === 0 ? '○' : '✔';
+  const suiteIconColor = failed > 0 ? 'var(--fail)' : 'var(--pass)';
+  const testsHtml = (suite.testResults || []).map(t => renderTest(t)).join('\n');
+  return `
+    <div class="suite">
+      <div class="suite-header">
+        <span class="icon" style="color:${suiteIconColor}">${suiteIcon}</span>
+        <span class="name">${(0, _reporterUtils.escapeHtml)(relativePath)}</span>
+        <span class="counts">${passed} passed · ${failed} failed · ${pending} skipped</span>
+        <span class="arrow">▶</span>
+      </div>
+      <div class="suite-body">
+        ${testsHtml}
+      </div>
+    </div>`;
+}
+
+/**
+ * Render a single test row.
+ *
+ * @param {object} testResult - Individual test result from Jest.
+ * @returns {string} HTML string for the test row.
+ */
+function renderTest(testResult) {
+  const status = testResult.status; // 'passed' | 'failed' | 'pending'
+  const icon = status === 'passed' ? '✔' : status === 'failed' ? '✖' : '○';
+  const duration = testResult.duration != null ? `${testResult.duration}ms` : '';
+  const title = testResult.ancestorTitles ? [...testResult.ancestorTitles, testResult.title].join(' › ') : testResult.title;
+  let failureHtml = '';
+  if (status === 'failed' && testResult.failureMessages?.length) {
+    failureHtml = testResult.failureMessages.map(msg => `<div class="failure-msg">${(0, _reporterUtils.escapeHtml)((0, _reporterUtils.stripAnsi)(msg))}</div>`).join('\n');
+  }
+  return `
+      <div class="test-row ${status}">
+        <span class="status">${icon}</span>
+        <div class="test-title">
+          ${(0, _reporterUtils.escapeHtml)(title)}
+          ${failureHtml}
+        </div>
+        <span class="duration">${duration}</span>
+      </div>`;
+}

package/build/src/reporters/reporter-utils.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTimer = createTimer;
+exports.escapeHtml = escapeHtml;
+exports.stripAnsi = stripAnsi;
+/**
+ * reporter-utils.js
+ *
+ * Shared utilities used by both the HTML and default reporters.
+ */
+
+/**
+ * Create a simple timer that tracks elapsed seconds.
+ *
+ * @returns {{ start(): void, elapsed(): string }}
+ */
+function createTimer() {
+  let startTime = 0;
+  return {
+    start() {
+      startTime = Date.now();
+    },
+    elapsed() {
+      return ((Date.now() - startTime) / 1000).toFixed(2);
+    }
+  };
+}
+
+/**
+ * Escape HTML special characters to prevent injection.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeHtml(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * Strip ANSI escape codes from a string.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+function stripAnsi(str) {
+  // eslint-disable-next-line no-control-regex
+  return String(str).replace(/\x1B\[[0-9;]*m/g, '');
+}

package/build/src/reporters/templates/report-script.js

@@ -0,0 +1,44 @@
+// Toggle suite expand/collapse
+document.querySelectorAll('.suite-header').forEach(function (header) {
+  header.addEventListener('click', function () {
+    header.parentElement.classList.toggle('open');
+  });
+});
+
+// Filter buttons
+document.querySelectorAll('.filters button').forEach(function (btn) {
+  btn.addEventListener('click', function () {
+    document.querySelectorAll('.filters button').forEach(function (b) {
+      b.classList.remove('active');
+    });
+    btn.classList.add('active');
+    var filter = btn.dataset.filter;
+    document.querySelectorAll('.suite').forEach(function (suite) {
+      if (filter === 'all') {
+        suite.style.display = '';
+        suite.querySelectorAll('.test-row').forEach(function (r) {
+          r.style.display = '';
+        });
+      } else {
+        var rows = suite.querySelectorAll('.test-row');
+        var visible = 0;
+        rows.forEach(function (r) {
+          if (r.classList.contains(filter)) {
+            r.style.display = '';
+            visible++;
+          } else {
+            r.style.display = 'none';
+          }
+        });
+        suite.style.display = visible > 0 ? '' : 'none';
+      }
+    });
+  });
+});
+
+// Auto-expand suites with failures
+document.querySelectorAll('.suite').forEach(function (suite) {
+  if (suite.querySelector('.test-row.failed')) {
+    suite.classList.add('open');
+  }
+});

package/build/src/reporters/templates/report.css

@@ -0,0 +1,144 @@
+:root {
+  --pass: #2ecc71;
+  --fail: #e74c3c;
+  --skip: #f39c12;
+  --bg: #1a1a2e;
+  --card: #16213e;
+  --text: #eaeaea;
+  --muted: #8892a4;
+  --border: #2a2a4a;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  padding: 24px;
+  line-height: 1.5;
+}
+.header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+.header h1 { font-size: 1.8rem; margin-bottom: 4px; }
+.header .meta { color: var(--muted); font-size: 0.85rem; }
+
+/* ── Summary Cards ─── */
+.summary {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 28px;
+}
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 18px 28px;
+  min-width: 140px;
+  text-align: center;
+}
+.card .value { font-size: 2rem; font-weight: 700; }
+.card .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
+.card.pass .value { color: var(--pass); }
+.card.fail .value { color: var(--fail); }
+.card.skip .value { color: var(--skip); }
+.card.total .value { color: #58a6ff; }
+
+/* ── Filters ─── */
+.filters {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.filters button {
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 6px 18px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: all 0.2s;
+}
+.filters button:hover,
+.filters button.active { background: #58a6ff; color: #000; border-color: #58a6ff; }
+
+/* ── Suites ─── */
+.suite {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+.suite-header {
+  display: flex;
+  align-items: center;
+  padding: 14px 18px;
+  cursor: pointer;
+  user-select: none;
+  gap: 10px;
+}
+.suite-header:hover { background: rgba(255,255,255,0.03); }
+.suite-header .icon { font-size: 1.1rem; }
+.suite-header .name {
+  flex: 1;
+  font-weight: 600;
+  font-size: 0.95rem;
+  word-break: break-all;
+}
+.suite-header .counts { font-size: 0.8rem; color: var(--muted); }
+.suite-header .arrow {
+  transition: transform 0.2s;
+  color: var(--muted);
+}
+.suite.open .suite-header .arrow { transform: rotate(90deg); }
+
+.suite-body { display: none; border-top: 1px solid var(--border); }
+.suite.open .suite-body { display: block; }
+
+.test-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px 18px 10px 36px;
+  gap: 10px;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.9rem;
+}
+.test-row:last-child { border-bottom: none; }
+.test-row .status {
+  flex-shrink: 0;
+  width: 20px;
+  text-align: center;
+}
+.test-row .test-title { flex: 1; }
+.test-row .duration { color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
+.test-row.passed .status { color: var(--pass); }
+.test-row.failed .status { color: var(--fail); }
+.test-row.pending .status { color: var(--skip); }
+
+.failure-msg {
+  background: rgba(231, 76, 60, 0.1);
+  border-left: 3px solid var(--fail);
+  margin: 6px 0 4px 30px;
+  padding: 10px 14px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #f5a5a5;
+  border-radius: 4px;
+}
+
+.footer {
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.75rem;
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/unit-testing-framework",
-  "version": "0.0.24-experimental",
+  "version": "0.0.25-experimental",
   "description": "A modular Jest-based unit testing framework",
   "main": "./build/index.js",
   "exports": {
@@ -12,23 +12,20 @@
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/.bin/jest",
     "lint": "eslint src/ index.js",
-    "build": "babel src -d build/src && babel index.js --out-file build/index.js",
+    "build": "babel src -d build/src --copy-files && babel index.js --out-file build/index.js",
     "prepublishOnly": "npm run build",
     "clean": "rm -rf build && npm run build"
   },
   "keywords": [],
   "author": "",
-  "license": "MIT",
+  "license": "UNLICENSED",
   "dependencies": {
     "@babel/core": "7.29.0",
     "@babel/preset-env": "7.29.0",
     "@jest/core": "30.2.0",
     "@jest/types": "30.2.0",
     "babel-jest": "30.2.0",
-    "jest-environment-node": "30.2.0"
-  },
-  "peerDependencies": {
-    "jest": "30.2.0"
+    "jest-environment-jsdom": "30.2.0"
   },
   "devDependencies": {
     "@babel/cli": "7.28.6",

package/build/src/reporters/reporter-handler.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolveReporters = resolveReporters;
-var _path = _interopRequireDefault(require("path"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * reporter-handler.js
- *
- * Resolves the final reporters array for Jest configuration.
- * All reporters are framework-controlled — consumers cannot supply custom reporters.
- *
- * Built-in aliases:
- *  - 'default'           → Jest built-in default reporter
- *  - 'framework-default' → This package's DefaultReporter
- *  - 'html-report'       → This package's HTML reporter
- */
-
-// NOTE: __dirname is available after Babel transpiles ESM → CJS.
-
-const BUILTIN_ALIASES = {
-  'framework-default': _path.default.resolve(__dirname, 'default-reporter.js'),
-  'html-report': _path.default.resolve(__dirname, 'html-reporter.js')
-};
-
-/**
- * Resolve a single reporter entry.
- *
- * @param {string | [string, object]} entry
- * @returns {string | [string, object]}
- */
-function resolveEntry(entry) {
-  const isArray = Array.isArray(entry);
-  const name = isArray ? entry[0] : entry;
-  const opts = isArray ? entry[1] : undefined;
-
-  // Check built-in aliases
-  if (BUILTIN_ALIASES[name]) {
-    const resolved = BUILTIN_ALIASES[name];
-    return opts ? [resolved, opts] : resolved;
-  }
-
-  // 'default' and any other entries pass through as-is
-  return entry;
-}
-
-/**
- * Resolve the reporters array for final Jest config.
- *
- * @param {Array<string | [string, object]>} reporters - Raw reporters from config.
- * @param {string} [projectRoot] - Consumer project root (unused, kept for API compatibility).
- * @returns {Array<string | [string, object]>}
- */
-function resolveReporters(reporters = ['default'], projectRoot) {
-  return reporters.map(entry => resolveEntry(entry));
-}