@vizzly-testing/cli 0.5.0 → 0.7.0

package/dist/services/html-report-generator.js

@@ -0,0 +1,377 @@
+/**
+ * HTML Report Generator for TDD visual comparison results
+ * Creates an interactive report with overlay, toggle, and onion skin modes
+ */
+
+import { writeFile, mkdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join, relative, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createServiceLogger } from '../utils/logger-factory.js';
+const logger = createServiceLogger('HTML-REPORT');
+export class HtmlReportGenerator {
+  constructor(workingDir, config) {
+    this.workingDir = workingDir;
+    this.config = config;
+    this.reportDir = join(workingDir, '.vizzly', 'report');
+    this.reportPath = join(this.reportDir, 'index.html');
+
+    // Get path to the CSS file that ships with the package
+    let __filename = fileURLToPath(import.meta.url);
+    let __dirname = dirname(__filename);
+    this.cssPath = join(__dirname, 'report-generator', 'report.css');
+  }
+
+  /**
+   * Sanitize HTML content to prevent XSS attacks
+   * @param {string} text - Text to sanitize
+   * @returns {string} Sanitized text
+   */
+  sanitizeHtml(text) {
+    if (typeof text !== 'string') return '';
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
+
+  /**
+   * Sanitize build info object
+   * @param {Object} buildInfo - Build information to sanitize
+   * @returns {Object} Sanitized build info
+   */
+  sanitizeBuildInfo(buildInfo = {}) {
+    let sanitized = {};
+    if (buildInfo.baseline && typeof buildInfo.baseline === 'object') {
+      sanitized.baseline = {
+        buildId: this.sanitizeHtml(buildInfo.baseline.buildId || ''),
+        buildName: this.sanitizeHtml(buildInfo.baseline.buildName || ''),
+        environment: this.sanitizeHtml(buildInfo.baseline.environment || ''),
+        branch: this.sanitizeHtml(buildInfo.baseline.branch || '')
+      };
+    }
+    if (typeof buildInfo.threshold === 'number') {
+      sanitized.threshold = Math.max(0, Math.min(1, buildInfo.threshold));
+    }
+    return sanitized;
+  }
+
+  /**
+   * Generate HTML report from TDD results
+   * @param {Object} results - TDD comparison results
+   * @param {Object} buildInfo - Build information
+   * @returns {string} Path to generated report
+   */
+  async generateReport(results, buildInfo = {}) {
+    // Validate inputs
+    if (!results || typeof results !== 'object') {
+      throw new Error('Invalid results object provided');
+    }
+    const {
+      comparisons = [],
+      passed = 0,
+      failed = 0,
+      total = 0
+    } = results;
+
+    // Filter only failed comparisons for the report
+    const failedComparisons = comparisons.filter(comp => comp && comp.status === 'failed');
+    const reportData = {
+      buildInfo: {
+        timestamp: new Date().toISOString(),
+        ...this.sanitizeBuildInfo(buildInfo)
+      },
+      summary: {
+        total,
+        passed,
+        failed,
+        passRate: total > 0 ? (passed / total * 100).toFixed(1) : '0.0'
+      },
+      comparisons: failedComparisons.map(comp => this.processComparison(comp)).filter(Boolean)
+    };
+    const htmlContent = this.generateHtmlTemplate(reportData);
+    try {
+      // Ensure report directory exists
+      await mkdir(this.reportDir, {
+        recursive: true
+      });
+      await writeFile(this.reportPath, htmlContent, 'utf8');
+      logger.debug(`HTML report generated: ${this.reportPath}`);
+      return this.reportPath;
+    } catch (error) {
+      logger.error(`Failed to generate HTML report: ${error.message}`);
+      throw new Error(`Report generation failed: ${error.message}`);
+    }
+  }
+
+  /**
+   * Process comparison data for HTML report
+   * @param {Object} comparison - Comparison object
+   * @returns {Object} Processed comparison data
+   */
+  processComparison(comparison) {
+    if (!comparison || typeof comparison !== 'object') {
+      logger.warn('Invalid comparison object provided');
+      return null;
+    }
+    return {
+      name: comparison.name || 'unnamed',
+      status: comparison.status,
+      baseline: this.getRelativePath(comparison.baseline, this.reportDir),
+      current: this.getRelativePath(comparison.current, this.reportDir),
+      diff: this.getRelativePath(comparison.diff, this.reportDir),
+      threshold: comparison.threshold || 0,
+      diffPercentage: comparison.diffPercentage || 0
+    };
+  }
+
+  /**
+   * Get relative path from report directory to image file
+   * @param {string} imagePath - Absolute path to image
+   * @param {string} reportDir - Report directory path
+   * @returns {string|null} Relative path or null if invalid
+   */
+  getRelativePath(imagePath, reportDir) {
+    if (!imagePath || !existsSync(imagePath)) {
+      return null;
+    }
+    return relative(reportDir, imagePath);
+  }
+
+  /**
+   * Generate the complete HTML template
+   * @param {Object} data - Report data
+   * @returns {string} HTML content
+   */
+  generateHtmlTemplate(data) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vizzly TDD Report</title>
+    <link rel="stylesheet" href="file://${this.cssPath}">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>🐻 Vizzly Visual Testing Report</h1>
+            <div class="summary">
+                <div class="stat">
+                    <span class="stat-number">${data.summary.total}</span>
+                    <span class="stat-label">Total</span>
+                </div>
+                <div class="stat passed">
+                    <span class="stat-number">${data.summary.passed}</span>
+                    <span class="stat-label">Passed</span>
+                </div>
+                <div class="stat failed">
+                    <span class="stat-number">${data.summary.failed}</span>
+                    <span class="stat-label">Failed</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-number">${data.summary.passRate}%</span>
+                    <span class="stat-label">Pass Rate</span>
+                </div>
+            </div>
+            <div class="build-info">
+                <span>Generated: ${new Date(data.buildInfo.timestamp).toLocaleString()}</span>
+            </div>
+        </header>
+
+        ${data.comparisons.length === 0 ? '<div class="no-failures">🎉 All tests passed! No visual differences detected.</div>' : `<main class="comparisons">
+            ${data.comparisons.map(comp => this.generateComparisonHtml(comp)).join('')}
+          </main>`}
+    </div>
+
+    <script>
+document.addEventListener('DOMContentLoaded', function () {
+  // Handle view mode switching
+  document.querySelectorAll('.view-mode-btn').forEach(btn => {
+    btn.addEventListener('click', function () {
+      let comparison = this.closest('.comparison');
+      let mode = this.dataset.mode;
+
+      // Update active button
+      comparison
+        .querySelectorAll('.view-mode-btn')
+        .forEach(b => b.classList.remove('active'));
+      this.classList.add('active');
+
+      // Update viewer mode
+      let viewer = comparison.querySelector('.comparison-viewer');
+      viewer.dataset.mode = mode;
+
+      // Hide all mode containers
+      viewer.querySelectorAll('.mode-container').forEach(container => {
+        container.style.display = 'none';
+      });
+
+      // Show appropriate mode container
+      let activeContainer = viewer.querySelector('.' + mode + '-mode');
+      if (activeContainer) {
+        activeContainer.style.display = 'block';
+      }
+    });
+  });
+
+  // Handle onion skin drag-to-reveal
+  document.querySelectorAll('.onion-container').forEach(container => {
+    let isDragging = false;
+
+    function updateOnionSkin(x) {
+      let rect = container.getBoundingClientRect();
+      let percentage = Math.max(
+        0,
+        Math.min(100, ((x - rect.left) / rect.width) * 100)
+      );
+
+      let currentImg = container.querySelector('.onion-current');
+      let divider = container.querySelector('.onion-divider');
+
+      if (currentImg && divider) {
+        currentImg.style.clipPath = 'inset(0 ' + (100 - percentage) + '% 0 0)';
+        divider.style.left = percentage + '%';
+      }
+    }
+
+    container.addEventListener('mousedown', function (e) {
+      isDragging = true;
+      updateOnionSkin(e.clientX);
+      e.preventDefault();
+    });
+
+    container.addEventListener('mousemove', function (e) {
+      if (isDragging) {
+        updateOnionSkin(e.clientX);
+      }
+    });
+
+    document.addEventListener('mouseup', function () {
+      isDragging = false;
+    });
+
+    // Touch events for mobile
+    container.addEventListener('touchstart', function (e) {
+      isDragging = true;
+      updateOnionSkin(e.touches[0].clientX);
+      e.preventDefault();
+    });
+
+    container.addEventListener('touchmove', function (e) {
+      if (isDragging) {
+        updateOnionSkin(e.touches[0].clientX);
+        e.preventDefault();
+      }
+    });
+
+    document.addEventListener('touchend', function () {
+      isDragging = false;
+    });
+  });
+
+  // Handle overlay mode clicking
+  document.querySelectorAll('.overlay-container').forEach(container => {
+    container.addEventListener('click', function () {
+      let diffImage = this.querySelector('.diff-image');
+      if (diffImage) {
+        // Toggle diff visibility
+        let isVisible = diffImage.style.opacity === '1';
+        diffImage.style.opacity = isVisible ? '0' : '1';
+      }
+    });
+  });
+
+  // Handle toggle mode clicking
+  document.querySelectorAll('.toggle-container img').forEach(img => {
+    let isBaseline = true;
+    let comparison = img.closest('.comparison');
+    let baselineSrc = comparison.querySelector('.baseline-image').src;
+    let currentSrc = comparison.querySelector('.current-image').src;
+
+    img.addEventListener('click', function () {
+      isBaseline = !isBaseline;
+      this.src = isBaseline ? baselineSrc : currentSrc;
+
+      // Update cursor style to indicate interactivity
+      this.style.cursor = 'pointer';
+    });
+  });
+
+  console.log('Vizzly TDD Report loaded successfully');
+});
+    </script>
+</body>
+</html>`;
+  }
+
+  /**
+   * Generate HTML for a single comparison
+   * @param {Object} comparison - Comparison data
+   * @returns {string} HTML content
+   */
+  generateComparisonHtml(comparison) {
+    if (!comparison || !comparison.baseline || !comparison.current || !comparison.diff) {
+      return `<div class="comparison error">
+        <h3>${this.sanitizeHtml(comparison?.name || 'Unknown')}</h3>
+        <p>Missing comparison images</p>
+      </div>`;
+    }
+    let safeName = this.sanitizeHtml(comparison.name);
+    return `
+    <div class="comparison" data-comparison="${safeName}">
+        <div class="comparison-header">
+            <h3>${safeName}</h3>
+            <div class="comparison-meta">
+                <span class="diff-status">Visual differences detected</span>
+            </div>
+        </div>
+        
+        <div class="comparison-controls">
+            <button class="view-mode-btn active" data-mode="overlay">Overlay</button>
+            <button class="view-mode-btn" data-mode="toggle">Toggle</button>
+            <button class="view-mode-btn" data-mode="onion">Onion Skin</button>
+            <button class="view-mode-btn" data-mode="side-by-side">Side by Side</button>
+        </div>
+
+        <div class="comparison-viewer">
+            <!-- Overlay Mode -->
+            <div class="mode-container overlay-mode" data-mode="overlay">
+                <div class="overlay-container">
+                    <img class="current-image" src="${comparison.current}" alt="Current" />
+                    <img class="baseline-image" src="${comparison.baseline}" alt="Baseline" />
+                    <img class="diff-image" src="${comparison.diff}" alt="Diff" />
+                </div>
+            </div>
+            
+            <!-- Toggle Mode -->
+            <div class="mode-container toggle-mode" data-mode="toggle" style="display: none;">
+                <div class="toggle-container">
+                    <img class="toggle-image" src="${comparison.baseline}" alt="Baseline" />
+                </div>
+            </div>
+            
+            <!-- Onion Skin Mode -->
+            <div class="mode-container onion-mode" data-mode="onion" style="display: none;">
+                <div class="onion-container">
+                    <img class="onion-baseline" src="${comparison.baseline}" alt="Baseline" />
+                    <img class="onion-current" src="${comparison.current}" alt="Current" />
+                    <div class="onion-divider"></div>
+                </div>
+            </div>
+            
+            <!-- Side by Side Mode -->
+            <div class="mode-container side-by-side-mode" data-mode="side-by-side" style="display: none;">
+                <div class="side-by-side-container">
+                    <div class="side-by-side-image">
+                        <img src="${comparison.baseline}" alt="Baseline" />
+                        <label>Baseline</label>
+                    </div>
+                    <div class="side-by-side-image">
+                        <img src="${comparison.current}" alt="Current" />
+                        <label>Current</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>`;
+  }
+}