@arcadialdev/arcality 2.2.0

package/tests/_helpers/ArcalityReporter.ts

@@ -0,0 +1,490 @@
+import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult, TestStep } from '@playwright/test/reporter';
+import fs from 'fs';
+import path from 'path';
+
+interface EnhancedResult {
+    test: TestCase;
+    result: TestResult;
+    stepsHtml: string;
+    attachments: { name: string, path?: string, contentType: string, body?: Buffer }[];
+}
+
+class ArcalityReporter implements Reporter {
+    private outputDir: string;
+    private results: EnhancedResult[] = [];
+    private totalDuration: number = 0;
+    private startTime: Date = new Date();
+
+    constructor(options: { outputDir?: string } = {}) {
+        this.outputDir = options.outputDir || 'arcality-report';
+    }
+
+    onBegin(config: FullConfig, suite: Suite) {
+        // Clean output directory to avoid stale reports/attachments
+        if (fs.existsSync(this.outputDir)) {
+            try {
+                fs.rmSync(this.outputDir, { recursive: true, force: true });
+                console.log(`🧹 Cleaned old report data at: ${this.outputDir}`);
+            } catch (err: any) {
+                console.warn(`⚠️ Could not fully clean report dir: ${err.message}`);
+            }
+        }
+        
+        if (!fs.existsSync(this.outputDir)) {
+            fs.mkdirSync(this.outputDir, { recursive: true });
+        }
+        this.startTime = new Date();
+        console.log(`🚀 Arcality Mission started at ${this.startTime.toLocaleTimeString()}`);
+    }
+
+    onTestEnd(test: TestCase, result: TestResult) {
+        // Collect steps with recursion
+        const stepsHtml = result.steps.map(step => this.renderStep(step, 0)).join('');
+
+        // Handle attachments: copy to report dir
+        const processedAttachments = result.attachments.map(att => {
+            const fileName = att.path ? path.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}.png`;
+            const attachmentsDir = path.join(this.outputDir, 'attachments');
+            const destPath = path.join(attachmentsDir, fileName);
+
+            if (!fs.existsSync(attachmentsDir)) {
+                fs.mkdirSync(attachmentsDir, { recursive: true });
+            }
+
+            try {
+                if (att.path && fs.existsSync(att.path)) {
+                    // Si ya existe el archivo físico, lo copiamos
+                    fs.copyFileSync(att.path, destPath);
+                } else if (att.body) {
+                    // Si viene como Buffer (evidencia del agente), lo guardamos
+                    fs.writeFileSync(destPath, att.body);
+                }
+                return { ...att, path: `attachments/${fileName}` };
+            } catch (e) {
+                console.error(`Failed to process attachment ${att.name}:`, e);
+                return att;
+            }
+        });
+
+        this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
+    }
+
+    async onEnd(result: FullResult) {
+        this.totalDuration = result.duration;
+        const htmlContent = this.generateHtml();
+        const reportPath = path.join(this.outputDir, 'index.html');
+        fs.writeFileSync(reportPath, htmlContent);
+        console.log(`✨ Arcality Mission Report generated at: ${reportPath}`);
+    }
+
+    private renderStep(step: TestStep, depth: number): string {
+        // Humanize: Hide internal Playwright hooks to only show Agent decisions
+        if (step.category === 'hook' || step.category === 'fixture') return '';
+
+        const padding = depth * 16;
+        const statusClass = step.error ? 'step-error' : 'step-passed';
+        const icon = step.error ? '✕' : '✓';
+        const duration = step.duration >= 0 ? `<span class="step-duration">${step.duration}ms</span>` : '';
+
+        let title = this.escapeHtml(step.title);
+        // Highlight common playwright actions
+        title = title.replace(/^(click|fill|navigate|wait|expect|goto|press)/i, '<span class="step-action">$1</span>');
+
+        let children = '';
+        if (step.steps && step.steps.length > 0) {
+            children = `<div class="step-children">${step.steps.map(s => this.renderStep(s, depth + 1)).join('')}</div>`;
+        }
+
+        const isExpandable = step.steps && step.steps.length > 0;
+        const expandableAttr = isExpandable ? 'data-expandable="true"' : '';
+
+        return `
+            <div class="step-wrapper ${statusClass}" style="margin-left: ${padding}px" ${expandableAttr}>
+                <div class="step-header">
+                    <span class="step-icon">${icon}</span>
+                    <span class="step-title">${title}</span>
+                    ${duration}
+                </div>
+                ${children}
+            </div>
+        `;
+    }
+
+    private getEngineVersion(): string {
+        try {
+            const packageJsonPath = path.join(process.cwd(), 'package.json');
+            if (fs.existsSync(packageJsonPath)) {
+                const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+                return pkg.version || '2.2.0';
+            }
+        } catch (e) {
+            console.error('Error reading package.json version:', e);
+        }
+        return '2.2.0';
+    }
+
+    private generateHtml(): string {
+        const stats = {
+            total: this.results.length,
+            passed: this.results.filter(r => r.result.status === 'passed').length,
+            failed: this.results.filter(r => r.result.status === 'failed' || r.result.status === 'timedOut').length,
+            skipped: this.results.filter(r => r.result.status === 'skipped').length,
+            flaky: this.results.filter(r => r.result.status === 'passed' && r.result.retry > 0).length
+        };
+
+        return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Arcality Mission Report</title>
+    <link rel="shortcut icon" href="https://raw.githubusercontent.com/microsoft/playwright/main/packages/playwright-core/src/server/chromium/test-results/favicon.ico">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+        
+        :root {
+            --bg-deep: #020617;
+            --bg-card: #0f172a;
+            --bg-hover: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --primary: #6366f1;
+            --success: #10b981;
+            --error: #f43f5e;
+            --warning: #f59e0b;
+            --border: #1e293b;
+            --accent: #c084fc;
+        }
+
+        * { box-sizing: border-box; }
+        body {
+            font-family: 'Plus Jakarta Sans', sans-serif;
+            background-color: var(--bg-deep);
+            color: var(--text-main);
+            margin: 0;
+            line-height: 1.6;
+        }
+
+        .container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
+
+        /* HEADER */
+        .main-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 3rem;
+            padding-bottom: 2rem;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .brand-section h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            margin: 0;
+            background: linear-gradient(to right, #818cf8, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .mission-id {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 3px;
+        }
+
+        /* DASHBOARD STATS */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 3rem;
+        }
+        .stat-card {
+            background: var(--bg-card);
+            padding: 1.5rem;
+            border-radius: 16px;
+            border: 1px solid var(--border);
+            text-align: center;
+        }
+        .stat-value { font-size: 2rem; font-weight: 800; display: block; }
+        .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
+        
+        .val-total { color: var(--text-main); }
+        .val-passed { color: var(--success); }
+        .val-failed { color: var(--error); }
+        .val-skipped { color: var(--text-muted); }
+        .val-flaky { color: var(--warning); }
+
+        /* TEST LIST */
+        .test-entry {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            margin-bottom: 2rem;
+            overflow: hidden;
+            transition: transform 0.2s;
+        }
+        .test-entry:hover { border-color: var(--primary); }
+
+        .test-header {
+            padding: 1.5rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            background: rgba(255,255,255,0.02);
+        }
+        .test-info { display: flex; align-items: center; gap: 1rem; }
+        .status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
+        .status-passed .status-dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
+        .status-failed .status-dot { background: var(--error); box-shadow: 0 0 10px var(--error); }
+        .status-skipped .status-dot { background: var(--text-muted); }
+
+        .test-name { font-weight: 700; font-size: 1.1rem; }
+        .test-meta { font-size: 0.8rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
+
+        .test-details { padding: 0 2rem 2rem; }
+
+        /* ERROR BLOCK */
+        .error-block {
+            background: rgba(244, 63, 94, 0.1);
+            border-left: 4px solid var(--error);
+            padding: 1.5rem;
+            border-radius: 8px;
+            margin: 1rem 0;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            color: #fda4af;
+            white-space: pre-wrap;
+        }
+
+        /* SUCCESS BLOCK */
+        .success-block {
+            background: rgba(16, 185, 129, 0.1);
+            border-left: 4px solid var(--success);
+            padding: 1.2rem;
+            border-radius: 12px;
+            margin: 1rem 0;
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #6ee7b7;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .success-block::before {
+            content: "✨";
+            font-size: 1.4rem;
+        }
+
+        /* STEPS UI */
+        .steps-section { margin-top: 2rem; }
+        .section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 1rem; display: block; }
+        
+        .step-wrapper {
+            border-left: 1px solid var(--border);
+            padding: 8px 16px;
+            position: relative;
+        }
+        .step-header { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; }
+        .step-icon { width: 16px; font-size: 0.8rem; opacity: 0.7; }
+        .step-action { color: var(--primary); font-weight: 700; }
+        .step-duration { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
+        .step-error { border-left-color: var(--error); color: #fb7185; }
+        .step-error .step-icon { color: var(--error); }
+
+        /* ATTACHMENTS (Screenshots, Videos) */
+        .attachments-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+        .attachment-item {
+            background: var(--bg-deep);
+            border-radius: 12px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+        }
+        .attachment-item img, .attachment-item video {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            display: block;
+            cursor: zoom-in;
+        }
+        .att-label {
+            padding: 0.75rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-align: center;
+            background: rgba(255,255,255,0.05);
+            display: block;
+            text-decoration: none;
+            color: var(--text-muted);
+        }
+        .att-label:hover { color: var(--text-main); }
+        
+        .btn-trace {
+            background: var(--primary);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 0.7rem;
+            font-weight: 700;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        footer {
+            margin-top: 5rem;
+            text-align: center;
+            padding: 2rem;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            border-top: 1px solid var(--border);
+        }
+
+        /* UTILS */
+        .tag { padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
+        .tag-project { background: rgba(192, 132, 252, 0.2); color: var(--accent); }
+        .tag-retry { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="main-header">
+            <div class="brand-section">
+                <span class="mission-id">Mission Alpha System</span>
+                <h1>Arcality Mission Report</h1>
+                <p style="color: var(--text-muted)">Testing Intelligence & Diagnostics Console</p>
+            </div>
+            <div style="text-align: right">
+                <div class="meta-item" style="color: var(--accent); font-weight: 700;">${this.startTime.toLocaleDateString()}</div>
+                <div class="meta-item" style="font-family: 'JetBrains Mono'; font-size: 0.8rem;">ENGINE VERSION ${this.getEngineVersion()}</div>
+            </div>
+        </div>
+
+        <div class="stats-grid">
+            <div class="stat-card"><span class="stat-value val-total">${stats.total}</span><span class="stat-label">Total Missions</span></div>
+            <div class="stat-card"><span class="stat-value val-passed">${stats.passed}</span><span class="stat-label">Successful</span></div>
+            <div class="stat-card"><span class="stat-value val-failed">${stats.failed}</span><span class="stat-label">Fatal Errors</span></div>
+            <div class="stat-card"><span class="stat-value val-flaky">${stats.flaky}</span><span class="stat-label">Flaky Tests</span></div>
+            <div class="stat-card"><span class="stat-value val-total">${(this.totalDuration / 1000).toFixed(2)}s</span><span class="stat-label">Total Duration</span></div>
+        </div>
+
+        <div class="test-list">
+            ${this.results.map((r, i) => {
+            const statusClass = `status-${r.result.status}`;
+            const projectName = r.test.parent.project()?.name || 'default';
+            const hasTrace = r.attachments.some(a => a.name === 'trace');
+            const traceFile = r.attachments.find(a => a.name === 'trace')?.path;
+
+            return `
+                <div class="test-entry ${statusClass}">
+                    <div class="test-header" onclick="toggleDetails(${i})">
+                        <div class="test-info">
+                            <span class="status-dot"></span>
+                            <div>
+                                <div class="test-name">${this.escapeHtml(r.test.title)}</div>
+                                <div class="test-meta">
+                                    <span class="tag tag-project">${projectName}</span>
+                                    ${r.result.retry > 0 ? `<span class="tag tag-retry">Retry #${r.result.retry}</span>` : ''}
+                                    <span>${(r.result.duration / 1000).toFixed(2)}s</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div style="display:flex; gap: 10px; align-items: center;">
+                            <span style="opacity:0.5; font-size: 1.2rem">▼</span>
+                        </div>
+                    </div>
+                    
+                    <div class="test-details" id="details-${i}">
+                        ${r.result.status === 'passed' ? (() => {
+                    const successSummary = r.attachments.find(a => a.name === 'success_summary');
+                    if (successSummary && successSummary.body) {
+                        return `<div class="success-block">${this.escapeHtml(successSummary.body.toString())}</div>`;
+                    }
+                    return '';
+                })() : ''}
+
+                        ${r.result.error ? `
+                            <div class="steps-section">
+                                <span class="section-title">Analysis of the Obstacle</span>
+                                <div class="error-block">${this.escapeHtml(r.result.error.message || 'Unknown Failure')}</div>
+                            </div>
+                        ` : ''}
+
+                        <div class="steps-section">
+                            <span class="section-title">🧠 Agent Cognitive Process</span>
+                            <div class="steps-container">
+                                ${r.stepsHtml || '<p style="opacity:0.5">No steps recorded.</p>'}
+                            </div>
+                        </div>
+
+                        ${r.attachments.length > 0 ? `
+                        <div class="steps-section">
+                            <span class="section-title">Visual Evidence</span>
+                            <div class="attachments-grid">
+                                ${r.attachments.map(att => {
+                    if (att.contentType.startsWith('image/')) {
+                        return `
+                                            <div class="attachment-item">
+                                                <img src="${att.path}" alt="${att.name}" onclick="window.open('${att.path}')">
+                                                <a href="${att.path}" target="_blank" class="att-label">${att.name}</a>
+                                            </div>
+                                        `;
+                    }
+                    if (att.contentType.startsWith('video/')) {
+                        return `
+                                            <div class="attachment-item">
+                                                <video controls src="${att.path}"></video>
+                                                <a href="${att.path}" target="_blank" class="att-label">${att.name}</a>
+                                            </div>
+                                        `;
+                    }
+                    return '';
+                }).join('')}
+                            </div>
+                        </div>
+                        ` : ''}
+                    </div>
+                </div>
+                `;
+        }).join('')}
+        </div>
+
+        <footer>
+            ARCALITY ENGINE v${this.getEngineVersion()} • SYSTEM TIME [${new Date().toISOString()}] • GENERATED FOR ARCADIAL
+        </footer>
+    </div>
+
+    <script>
+        function toggleDetails(id) {
+            const el = document.getElementById('details-' + id);
+            el.style.display = (el.style.display === 'none' || el.style.display === '') ? 'block' : 'none';
+        }
+        // Collapse all by default
+        document.querySelectorAll('.test-details').forEach(d => d.style.display = 'none');
+    </script>
+</body>
+</html>
+        `;
+    }
+
+    private escapeHtml(unsafe: string | undefined): string {
+        if (!unsafe) return '';
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+}
+
+export default ArcalityReporter;