@supernal/interface 1.0.9 → 1.0.11

package/dist/esm/src/testing/graph-tester/modes/VisualRegressionMode.js

@@ -0,0 +1,162 @@
+/**
+ * Visual regression testing mode.
+ *
+ * Captures screenshots with element annotations for visual regression testing and AI analysis.
+ *
+ * @packageDocumentation
+ */
+import { TestFunction } from '../core/TestFunction.js';
+import { ScreenshotAnnotator, HTMLAnnotationRenderer, } from '../screenshot/index.js';
+import * as path from 'path';
+/**
+ * Visual regression testing mode.
+ *
+ * Captures full-page screenshots with element annotations, bounding boxes,
+ * and generates interactive HTML overlays for review.
+ *
+ * @example
+ * ```typescript
+ * const mode = new VisualRegressionMode({
+ *   outputDir: './screenshots',
+ *   annotate: true,
+ *   generateHTML: true
+ * });
+ *
+ * const tester = new GraphTester({
+ *   baseUrl: 'http://localhost:3000',
+ *   routes: [{ route: '/' }],
+ *   modes: []
+ * });
+ *
+ * tester.registerTestFunction(mode);
+ * const results = await tester.runTests();
+ * ```
+ */
+export class VisualRegressionMode extends TestFunction {
+    constructor(config) {
+        super();
+        this.mode = 'visual';
+        this.name = 'Visual Regression';
+        this.description = 'Captures screenshots with element annotations for visual regression testing';
+        this.annotator = null;
+        this.config = {
+            fullPage: true,
+            annotate: true,
+            generateHTML: true,
+            includeInvisible: false,
+            minElementSize: 5,
+            aiAnalyze: false,
+            ...config,
+        };
+    }
+    /**
+     * Setup: Initialize screenshot annotator.
+     */
+    async setup(page) {
+        if (this.config.annotate) {
+            this.annotator = new ScreenshotAnnotator({
+                outputDir: this.config.outputDir,
+                fullPage: this.config.fullPage,
+                includeInvisible: this.config.includeInvisible,
+                minElementSize: this.config.minElementSize,
+                ...this.config.annotatorConfig,
+            });
+        }
+    }
+    /**
+     * Execute: Capture screenshot and annotations.
+     */
+    async execute(page, context) {
+        const startTime = Date.now();
+        const errors = [];
+        const metadata = {};
+        try {
+            // Capture annotated screenshot
+            if (this.annotator) {
+                const viewportLabel = context.viewport ? ` [${context.viewport.name}]` : '';
+                console.log(`Capturing annotated screenshot for ${context.route}${viewportLabel}...`);
+                const annotatedScreenshot = await this.annotator.capture(page, context.route, context.viewport?.name);
+                metadata.screenshot = {
+                    path: annotatedScreenshot.screenshotPath,
+                    annotationCount: annotatedScreenshot.annotations.length,
+                    interactiveElementCount: annotatedScreenshot.annotations.filter((a) => a.isInteractive)
+                        .length,
+                    pageSize: annotatedScreenshot.pageMetadata.pageSize,
+                    viewport: annotatedScreenshot.pageMetadata.viewport,
+                };
+                // Generate HTML overlay
+                if (this.config.generateHTML) {
+                    const htmlPath = annotatedScreenshot.screenshotPath.replace('.png', '.html');
+                    const renderer = new HTMLAnnotationRenderer({
+                        outputPath: htmlPath,
+                        includeSidebar: true,
+                        enableHover: true,
+                        enableClickToHighlight: true,
+                        ...this.config.htmlRendererConfig,
+                    });
+                    const renderResult = await renderer.render(annotatedScreenshot);
+                    metadata.htmlOverlay = {
+                        path: renderResult.outputPath,
+                        fileSize: renderResult.fileSize,
+                        duration: renderResult.duration,
+                    };
+                    console.log(`Generated HTML overlay: ${renderResult.outputPath}`);
+                }
+                // AI analysis (enterprise only)
+                if (this.config.aiAnalyze) {
+                    errors.push({
+                        severity: 'info',
+                        message: 'AI analysis requires @supernalintelligence/interface-enterprise',
+                    });
+                }
+            }
+            else {
+                // Simple screenshot without annotations
+                const screenshotPath = path.join(this.config.outputDir, `${this.sanitizeRoute(context.route)}.png`);
+                await page.screenshot({
+                    path: screenshotPath,
+                    fullPage: this.config.fullPage,
+                });
+                metadata.screenshot = {
+                    path: screenshotPath,
+                };
+            }
+            return {
+                passed: true,
+                duration: Date.now() - startTime,
+                errors,
+                metadata,
+            };
+        }
+        catch (error) {
+            errors.push({
+                severity: 'critical',
+                message: `Visual regression failed: ${error instanceof Error ? error.message : String(error)}`,
+                stack: error instanceof Error ? error.stack : undefined,
+            });
+            return {
+                passed: false,
+                duration: Date.now() - startTime,
+                errors,
+                metadata,
+            };
+        }
+    }
+    /**
+     * Sanitize route for filename.
+     */
+    sanitizeRoute(route) {
+        return route.replace(/^\//, '').replace(/\//g, '-') || 'home';
+    }
+    /**
+     * Validate configuration.
+     */
+    validate() {
+        const errors = super.validate();
+        if (!this.config.outputDir) {
+            errors.push('outputDir is required');
+        }
+        return errors;
+    }
+}
+//# sourceMappingURL=VisualRegressionMode.js.map

package/dist/esm/src/testing/graph-tester/modes/VisualRegressionMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualRegressionMode.js","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/modes/VisualRegressionMode.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/testing/graph-tester/modes/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Test modes exports.
+ *
+ * @packageDocumentation
+ */
+export { VisualRegressionMode } from './VisualRegressionMode';
+export type { VisualRegressionConfig } from './VisualRegressionMode';
+export { PerformanceMode } from './PerformanceMode';
+export type { PerformanceConfig } from './PerformanceMode';
+export { AccessibilityMode } from './AccessibilityMode';
+export type { AccessibilityConfig } from './AccessibilityMode';
+export { SEOMode } from './SEOMode';
+export type { SEOConfig } from './SEOMode';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/src/testing/graph-tester/modes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/modes/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/esm/src/testing/graph-tester/modes/index.js

@@ -0,0 +1,10 @@
+/**
+ * Test modes exports.
+ *
+ * @packageDocumentation
+ */
+export { VisualRegressionMode } from './VisualRegressionMode.js';
+export { PerformanceMode } from './PerformanceMode.js';
+export { AccessibilityMode } from './AccessibilityMode.js';
+export { SEOMode } from './SEOMode.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/src/testing/graph-tester/modes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/modes/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/esm/src/testing/graph-tester/reporters/HTMLReporter.d.ts

@@ -0,0 +1,38 @@
+/**
+ * HTML reporter (stub - to be implemented in Phase 2).
+ *
+ * Will generate interactive dashboard with charts and drill-down.
+ *
+ * @packageDocumentation
+ */
+import type { AggregatedTestResults, Reporter } from '../core/types';
+/**
+ * Configuration for HTML reporter.
+ */
+export interface HTMLReporterConfig {
+    /** Output directory */
+    outputDir: string;
+    /** Output filename (default: 'index.html') */
+    filename?: string;
+    /** Whether to include charts (default: true) */
+    includeCharts?: boolean;
+}
+/**
+ * HTML reporter (stub).
+ */
+export declare class HTMLReporter implements Reporter {
+    readonly name = "HTML Reporter";
+    private config;
+    constructor(config: HTMLReporterConfig);
+    generate(results: AggregatedTestResults): Promise<void>;
+    private generateHTML;
+    private generateSummarySection;
+    private generateChartsSection;
+    private generateResultsTable;
+    private generateModeBreakdown;
+    private generateId;
+    private escapeHtml;
+    private ensureDirectory;
+    private writeFile;
+}
+//# sourceMappingURL=HTMLReporter.d.ts.map

package/dist/esm/src/testing/graph-tester/reporters/HTMLReporter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLReporter.d.ts","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/reporters/HTMLReporter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAElB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,qBAAa,YAAa,YAAW,QAAQ;IAC3C,QAAQ,CAAC,IAAI,mBAAmB;IAEhC,OAAO,CAAC,MAAM,CAAqB;gBAEvB,MAAM,EAAE,kBAAkB;IAIhC,QAAQ,CAAC,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC;IAU7D,OAAO,CAAC,YAAY;IAmMpB,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,qBAAqB;IAoC7B,OAAO,CAAC,oBAAoB;IAoD5B,OAAO,CAAC,qBAAqB;IAgC7B,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;YAWJ,eAAe;YAKf,SAAS;CAIxB"}

package/dist/esm/src/testing/graph-tester/reporters/HTMLReporter.js

@@ -0,0 +1,374 @@
+/**
+ * HTML reporter (stub - to be implemented in Phase 2).
+ *
+ * Will generate interactive dashboard with charts and drill-down.
+ *
+ * @packageDocumentation
+ */
+/**
+ * HTML reporter (stub).
+ */
+export class HTMLReporter {
+    constructor(config) {
+        this.name = 'HTML Reporter';
+        this.config = config;
+    }
+    async generate(results) {
+        const html = this.generateHTML(results);
+        const outputPath = `${this.config.outputDir}/${this.config.filename || 'index.html'}`;
+        await this.ensureDirectory(this.config.outputDir);
+        await this.writeFile(outputPath, html);
+        console.log(`📊 HTML report generated: ${outputPath}`);
+    }
+    generateHTML(results) {
+        const includeCharts = this.config.includeCharts !== false;
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Graph-Based Testing Report</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: #333;
+      background: #f5f5f5;
+      padding: 20px;
+    }
+    .container { max-width: 1400px; margin: 0 auto; }
+    header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 30px;
+      border-radius: 8px;
+      margin-bottom: 30px;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    h1 { font-size: 2em; margin-bottom: 10px; }
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+    .stat-card {
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: transform 0.2s;
+    }
+    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
+    .stat-card h3 { color: #666; font-size: 0.9em; text-transform: uppercase; margin-bottom: 10px; }
+    .stat-card .value { font-size: 2.5em; font-weight: bold; color: #667eea; }
+    .stat-card .label { color: #999; font-size: 0.9em; }
+    .pass-rate { color: #10b981 !important; }
+    .fail-rate { color: #ef4444 !important; }
+    .section {
+      background: white;
+      padding: 30px;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      margin-bottom: 30px;
+    }
+    .section h2 {
+      font-size: 1.5em;
+      margin-bottom: 20px;
+      color: #667eea;
+      border-bottom: 2px solid #f0f0f0;
+      padding-bottom: 10px;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 20px;
+    }
+    th, td {
+      text-align: left;
+      padding: 12px;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #666;
+      text-transform: uppercase;
+      font-size: 0.85em;
+    }
+    tr:hover { background: #f8f9fa; }
+    .badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 0.85em;
+      font-weight: 600;
+    }
+    .badge-success { background: #d1fae5; color: #065f46; }
+    .badge-error { background: #fee2e2; color: #991b1b; }
+    .badge-warning { background: #fef3c7; color: #92400e; }
+    .mode-visual { color: #8b5cf6; }
+    .mode-performance { color: #f59e0b; }
+    .mode-accessibility { color: #10b981; }
+    .mode-seo { color: #3b82f6; }
+    .chart-container {
+      width: 100%;
+      height: 300px;
+      margin: 20px 0;
+      position: relative;
+    }
+    .bar-chart {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-around;
+      height: 250px;
+      gap: 10px;
+      padding: 20px;
+      background: #f8f9fa;
+      border-radius: 8px;
+    }
+    .bar {
+      flex: 1;
+      background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+      border-radius: 4px 4px 0 0;
+      position: relative;
+      min-height: 20px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      color: white;
+      font-weight: bold;
+      padding-bottom: 5px;
+    }
+    .bar-label {
+      text-align: center;
+      margin-top: 10px;
+      font-size: 0.85em;
+      color: #666;
+    }
+    .details {
+      display: none;
+      padding: 15px;
+      background: #f8f9fa;
+      border-radius: 4px;
+      margin-top: 10px;
+    }
+    .details.show { display: block; }
+    .expand-btn {
+      background: none;
+      border: none;
+      color: #667eea;
+      cursor: pointer;
+      font-weight: 600;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: background 0.2s;
+    }
+    .expand-btn:hover { background: #f0f0f0; }
+    .error-list {
+      list-style: none;
+      padding: 0;
+    }
+    .error-list li {
+      padding: 8px;
+      background: #fee2e2;
+      border-left: 3px solid #ef4444;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      color: #991b1b;
+    }
+    footer {
+      text-align: center;
+      color: #999;
+      margin-top: 40px;
+      padding-top: 20px;
+      border-top: 1px solid #e0e0e0;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>📊 Graph-Based Testing Report</h1>
+      <p>Generated on ${new Date().toLocaleString()}</p>
+    </header>
+
+    ${this.generateSummarySection(results)}
+    ${includeCharts ? this.generateChartsSection(results) : ''}
+    ${this.generateResultsTable(results)}
+    ${this.generateModeBreakdown(results)}
+
+    <footer>
+      <p>Generated by Supernal Interface Graph-Based Testing Framework</p>
+    </footer>
+  </div>
+
+  <script>
+    function toggleDetails(id) {
+      const element = document.getElementById(id);
+      element.classList.toggle('show');
+    }
+  </script>
+</body>
+</html>`;
+    }
+    generateSummarySection(results) {
+        return `
+    <div class="summary">
+      <div class="stat-card">
+        <h3>Routes Tested</h3>
+        <div class="value">${results.routeCount}</div>
+      </div>
+      <div class="stat-card">
+        <h3>Total Tests</h3>
+        <div class="value">${results.testCount}</div>
+      </div>
+      <div class="stat-card">
+        <h3>Passed</h3>
+        <div class="value pass-rate">${results.passedCount}</div>
+      </div>
+      <div class="stat-card">
+        <h3>Failed</h3>
+        <div class="value fail-rate">${results.failedCount}</div>
+      </div>
+      <div class="stat-card">
+        <h3>Pass Rate</h3>
+        <div class="value ${results.passRate >= 90 ? 'pass-rate' : 'fail-rate'}">${results.passRate}%</div>
+      </div>
+      <div class="stat-card">
+        <h3>Duration</h3>
+        <div class="value">${(results.totalDuration / 1000).toFixed(1)}s</div>
+      </div>
+    </div>`;
+    }
+    generateChartsSection(results) {
+        const modeData = [];
+        for (const [mode, modeResults] of results.resultsByMode) {
+            const passed = modeResults.filter((r) => r.passed).length;
+            const failed = modeResults.filter((r) => !r.passed).length;
+            modeData.push({ mode, passed, failed });
+        }
+        const maxCount = Math.max(...modeData.map((d) => d.passed + d.failed));
+        return `
+    <div class="section">
+      <h2>Results by Test Mode</h2>
+      <div class="bar-chart">
+        ${modeData
+            .map((data) => {
+            const total = data.passed + data.failed;
+            const height = (total / maxCount) * 100;
+            return `
+              <div style="flex: 1;">
+                <div class="bar" style="height: ${height}%">
+                  ${total}
+                </div>
+                <div class="bar-label">
+                  <strong>${data.mode}</strong><br>
+                  ✓ ${data.passed} / ✗ ${data.failed}
+                </div>
+              </div>
+            `;
+        })
+            .join('')}
+      </div>
+    </div>`;
+    }
+    generateResultsTable(results) {
+        const rows = [];
+        for (const [route, routeResults] of results.resultsByRoute) {
+            for (const result of routeResults) {
+                rows.push(`
+          <tr>
+            <td><strong>${route}</strong></td>
+            <td><span class="mode-${result.mode}">${result.mode}</span></td>
+            <td><span class="badge ${result.passed ? 'badge-success' : 'badge-error'}">${result.passed ? 'PASS' : 'FAIL'}</span></td>
+            <td>${result.duration}ms</td>
+            <td>
+              ${result.errors.length > 0
+                    ? `
+                <button class="expand-btn" onclick="toggleDetails('errors-${this.generateId(route || 'unknown', result.mode || 'unknown')}')">
+                  View ${result.errors.length} error(s)
+                </button>
+                <div id="errors-${this.generateId(route || 'unknown', result.mode || 'unknown')}" class="details">
+                  <ul class="error-list">
+                    ${result.errors.map((err) => `<li>${this.escapeHtml(typeof err === 'string' ? err : err.message)}</li>`).join('')}
+                  </ul>
+                </div>
+              `
+                    : '<span class="badge badge-success">No errors</span>'}
+            </td>
+          </tr>
+        `);
+            }
+        }
+        return `
+    <div class="section">
+      <h2>Test Results by Route</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Route</th>
+            <th>Mode</th>
+            <th>Status</th>
+            <th>Duration</th>
+            <th>Errors</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.join('')}
+        </tbody>
+      </table>
+    </div>`;
+    }
+    generateModeBreakdown(results) {
+        const sections = [];
+        for (const [mode, modeResults] of results.resultsByMode) {
+            const passed = modeResults.filter((r) => r.passed).length;
+            const failed = modeResults.filter((r) => !r.passed).length;
+            const avgDuration = modeResults.reduce((sum, r) => sum + r.duration, 0) / modeResults.length;
+            sections.push(`
+        <div class="section">
+          <h2><span class="mode-${mode}">${mode.toUpperCase()}</span> Mode Results</h2>
+          <div class="summary" style="grid-template-columns: repeat(3, 1fr);">
+            <div class="stat-card">
+              <h3>Passed</h3>
+              <div class="value pass-rate">${passed}</div>
+            </div>
+            <div class="stat-card">
+              <h3>Failed</h3>
+              <div class="value fail-rate">${failed}</div>
+            </div>
+            <div class="stat-card">
+              <h3>Avg Duration</h3>
+              <div class="value">${avgDuration.toFixed(0)}ms</div>
+            </div>
+          </div>
+        </div>
+      `);
+        }
+        return sections.join('');
+    }
+    generateId(route, mode) {
+        return `${route.replace(/\//g, '-')}-${mode}`.replace(/[^a-z0-9-]/gi, '');
+    }
+    escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;',
+        };
+        return text.replace(/[&<>"']/g, (m) => map[m]);
+    }
+    async ensureDirectory(dir) {
+        const fs = await import('fs/promises');
+        await fs.mkdir(dir, { recursive: true });
+    }
+    async writeFile(path, content) {
+        const fs = await import('fs/promises');
+        await fs.writeFile(path, content, 'utf-8');
+    }
+}
+//# sourceMappingURL=HTMLReporter.js.map

package/dist/esm/src/testing/graph-tester/reporters/HTMLReporter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLReporter.js","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/reporters/HTMLReporter.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/testing/graph-tester/reporters/JSONReporter.d.ts

@@ -0,0 +1,50 @@
+/**
+ * JSON reporter for CI/CD integration.
+ *
+ * Generates machine-readable JSON output with complete test results.
+ *
+ * @packageDocumentation
+ */
+import type { AggregatedTestResults, Reporter } from '../core/types';
+/**
+ * Configuration for JSON reporter.
+ */
+export interface JSONReporterConfig {
+    /** Output directory */
+    outputDir: string;
+    /** Output filename (default: 'test-results.json') */
+    filename?: string;
+    /** Whether to pretty-print JSON (default: true) */
+    pretty?: boolean;
+    /** Whether to include detailed error stacks (default: true) */
+    includeErrorStacks?: boolean;
+}
+/**
+ * JSON reporter.
+ *
+ * Generates structured JSON output suitable for CI/CD pipelines and
+ * programmatic analysis.
+ *
+ * @example
+ * ```typescript
+ * const reporter = new JSONReporter({
+ *   outputDir: './test-results',
+ *   filename: 'results.json',
+ *   pretty: true
+ * });
+ *
+ * await reporter.generate(results);
+ * ```
+ */
+export declare class JSONReporter implements Reporter {
+    readonly name = "JSON Reporter";
+    private config;
+    constructor(config: JSONReporterConfig);
+    /**
+     * Generate JSON report.
+     *
+     * @param results - Aggregated test results
+     */
+    generate(results: AggregatedTestResults): Promise<void>;
+}
+//# sourceMappingURL=JSONReporter.d.ts.map