@vizzly-testing/cli 0.20.1-beta.0 → 0.20.1-beta.1

package/dist/report-generator/core.js

@@ -1,315 +0,0 @@
-/**
- * Report Generator Core - Pure functions for report generation
- *
- * No I/O, no side effects - just data transformations.
- */
-
-import { join } from 'node:path';
-
-// ============================================================================
-// Constants
-// ============================================================================
-
-export const DEFAULT_REPORT_DIR_NAME = 'report';
-export const BUNDLE_FILENAME = 'reporter-bundle.js';
-export const CSS_FILENAME = 'reporter-bundle.css';
-export const INDEX_FILENAME = 'index.html';
-
-// ============================================================================
-// Path Building
-// ============================================================================
-
-/**
- * Build report directory path
- * @param {string} workingDir - Working directory
- * @returns {string} Report directory path
- */
-export function buildReportDir(workingDir) {
-  return join(workingDir, '.vizzly', DEFAULT_REPORT_DIR_NAME);
-}
-
-/**
- * Build report HTML path
- * @param {string} reportDir - Report directory
- * @returns {string} Report HTML path
- */
-export function buildReportPath(reportDir) {
-  return join(reportDir, INDEX_FILENAME);
-}
-
-/**
- * Build bundle source paths
- * @param {string} projectRoot - Project root directory
- * @returns {{ bundlePath: string, cssPath: string }}
- */
-export function buildBundleSourcePaths(projectRoot) {
-  return {
-    bundlePath: join(projectRoot, 'dist', 'reporter', 'reporter-bundle.iife.js'),
-    cssPath: join(projectRoot, 'dist', 'reporter', 'reporter-bundle.css')
-  };
-}
-
-/**
- * Build bundle destination paths
- * @param {string} reportDir - Report directory
- * @returns {{ bundleDest: string, cssDest: string }}
- */
-export function buildBundleDestPaths(reportDir) {
-  return {
-    bundleDest: join(reportDir, BUNDLE_FILENAME),
-    cssDest: join(reportDir, CSS_FILENAME)
-  };
-}
-
-// ============================================================================
-// Validation
-// ============================================================================
-
-/**
- * Validate report data
- * @param {any} reportData - Report data to validate
- * @returns {{ valid: boolean, error: string|null }}
- */
-export function validateReportData(reportData) {
-  if (!reportData || typeof reportData !== 'object') {
-    return {
-      valid: false,
-      error: 'Invalid report data provided'
-    };
-  }
-  return {
-    valid: true,
-    error: null
-  };
-}
-
-/**
- * Check if bundles exist
- * @param {boolean} bundleExists - Whether bundle JS exists
- * @param {boolean} cssExists - Whether bundle CSS exists
- * @returns {{ valid: boolean, error: string|null }}
- */
-export function validateBundlesExist(bundleExists, cssExists) {
-  if (!bundleExists || !cssExists) {
-    return {
-      valid: false,
-      error: 'Reporter bundles not found. Run "npm run build:reporter" first.'
-    };
-  }
-  return {
-    valid: true,
-    error: null
-  };
-}
-
-// ============================================================================
-// Data Serialization
-// ============================================================================
-
-/**
- * Safely serialize data for embedding in HTML script tag
- * Escapes characters that could break out of script context
- * @param {Object} data - Data to serialize
- * @returns {string} Safely serialized JSON string
- */
-export function serializeForHtml(data) {
-  return JSON.stringify(data).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
-}
-
-// ============================================================================
-// HTML Template Generation
-// ============================================================================
-
-/**
- * Generate the main HTML template with React reporter
- * @param {Object} options - Template options
- * @param {string} options.serializedData - Serialized report data
- * @param {string} options.timestamp - ISO timestamp string
- * @param {string} options.displayDate - Human-readable date string
- * @returns {string} HTML content
- */
-export function generateMainTemplate({
-  serializedData,
-  timestamp,
-  displayDate
-}) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vizzly Dev Report - ${displayDate}</title>
-    <link rel="stylesheet" href="./reporter-bundle.css">
-    <style>
-        /* Loading spinner styles */
-        .reporter-loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-height: 100vh;
-            background: #0f172a;
-            color: #f59e0b;
-        }
-        .spinner {
-            width: 48px;
-            height: 48px;
-            border: 4px solid rgba(245, 158, 11, 0.2);
-            border-top-color: #f59e0b;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-bottom: 1rem;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body>
-    <div id="vizzly-reporter-root">
-        <div class="reporter-loading">
-            <div style="text-align: center;">
-                <div class="spinner"></div>
-                <p>Loading Vizzly Report...</p>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // Embedded report data (static mode)
-        window.VIZZLY_REPORTER_DATA = ${serializedData};
-        window.VIZZLY_STATIC_MODE = true;
-
-        // Generate timestamp for "generated at" display
-        window.VIZZLY_REPORT_GENERATED_AT = "${timestamp}";
-
-        console.log('Vizzly Static Report loaded');
-        console.log('Report data:', window.VIZZLY_REPORTER_DATA?.summary);
-    </script>
-    <script src="./reporter-bundle.js"></script>
-</body>
-</html>`;
-}
-
-/**
- * Generate fallback HTML template (when bundles are missing)
- * @param {Object} options - Template options
- * @param {Object} options.summary - Report summary
- * @param {Array} options.comparisons - Comparison results
- * @param {string} options.displayDate - Human-readable date string
- * @returns {string} HTML content
- */
-export function generateFallbackTemplate({
-  summary,
-  comparisons,
-  displayDate
-}) {
-  let failed = comparisons.filter(c => c.status === 'failed');
-  let failedSection = failed.length > 0 ? `
-            <h2>Failed Comparisons</h2>
-            <ul>
-                ${failed.map(c => `<li>${c.name} - ${c.diffPercentage || 0}% difference</li>`).join('')}
-            </ul>
-        ` : '<p style="text-align: center; font-size: 1.5rem;">✅ All tests passed!</p>';
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vizzly Dev Report</title>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            background: #0f172a;
-            color: #e2e8f0;
-            padding: 2rem;
-        }
-        .container { max-width: 1200px; margin: 0 auto; }
-        .header { text-align: center; margin-bottom: 2rem; }
-        .summary {
-            display: flex;
-            gap: 2rem;
-            justify-content: center;
-            margin: 2rem 0;
-        }
-        .stat { text-align: center; }
-        .stat-number {
-            font-size: 3rem;
-            font-weight: bold;
-            display: block;
-        }
-        .warning {
-            background: #fef3c7;
-            color: #92400e;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            margin: 2rem 0;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>🐻 Vizzly Dev Report</h1>
-            <p>Generated: ${displayDate}</p>
-        </div>
-
-        <div class="summary">
-            <div class="stat">
-                <span class="stat-number">${summary.total || 0}</span>
-                <span>Total</span>
-            </div>
-            <div class="stat">
-                <span class="stat-number" style="color: #10b981;">${summary.passed || 0}</span>
-                <span>Passed</span>
-            </div>
-            <div class="stat">
-                <span class="stat-number" style="color: #ef4444;">${summary.failed || 0}</span>
-                <span>Failed</span>
-            </div>
-        </div>
-
-        <div class="warning">
-            <strong>⚠️ Limited Report</strong>
-            <p>This is a fallback report. For the full interactive experience, ensure the reporter bundle is built:</p>
-            <code>npm run build:reporter</code>
-        </div>
-
-        ${failedSection}
-    </div>
-</body>
-</html>`;
-}
-
-/**
- * Build HTML content for the report
- * @param {Object} reportData - Report data
- * @param {Date} date - Current date
- * @returns {string} HTML content
- */
-export function buildHtmlContent(reportData, date) {
-  let serializedData = serializeForHtml(reportData);
-  let timestamp = date.toISOString();
-  let displayDate = date.toLocaleString();
-  return generateMainTemplate({
-    serializedData,
-    timestamp,
-    displayDate
-  });
-}
-
-/**
- * Build fallback HTML content
- * @param {Object} reportData - Report data
- * @param {Date} date - Current date
- * @returns {string} HTML content
- */
-export function buildFallbackHtmlContent(reportData, date) {
-  let summary = reportData.summary || {};
-  let comparisons = reportData.comparisons || [];
-  let displayDate = date.toLocaleString();
-  return generateFallbackTemplate({
-    summary,
-    comparisons,
-    displayDate
-  });
-}

package/dist/report-generator/index.js

@@ -1,8 +0,0 @@
-/**
- * Report Generator module
- *
- * Pure functions in core.js, I/O operations in operations.js.
- */
-
-export * from './core.js';
-export * from './operations.js';

package/dist/report-generator/operations.js

@@ -1,196 +0,0 @@
-/**
- * Report Generator Operations - I/O operations with dependency injection
- *
- * Each operation takes its dependencies as parameters for testability.
- */
-
-import { buildBundleDestPaths, buildBundleSourcePaths, buildHtmlContent, buildReportDir, buildReportPath, validateBundlesExist, validateReportData } from './core.js';
-
-// ============================================================================
-// File Operations
-// ============================================================================
-
-/**
- * Ensure a directory exists
- * @param {Object} options - Options
- * @param {string} options.path - Directory path
- * @param {Object} options.deps - Dependencies
- * @param {Function} options.deps.mkdir - mkdir function
- * @returns {Promise<void>}
- */
-export async function ensureDirectory({
-  path,
-  deps
-}) {
-  let {
-    mkdir
-  } = deps;
-  await mkdir(path, {
-    recursive: true
-  });
-}
-
-/**
- * Check if bundles exist
- * @param {Object} options - Options
- * @param {string} options.projectRoot - Project root directory
- * @param {Object} options.deps - Dependencies
- * @param {Function} options.deps.existsSync - existsSync function
- * @returns {{ bundleExists: boolean, cssExists: boolean, bundlePath: string, cssPath: string }}
- */
-export function checkBundlesExist({
-  projectRoot,
-  deps
-}) {
-  let {
-    existsSync
-  } = deps;
-  let {
-    bundlePath,
-    cssPath
-  } = buildBundleSourcePaths(projectRoot);
-  return {
-    bundleExists: existsSync(bundlePath),
-    cssExists: existsSync(cssPath),
-    bundlePath,
-    cssPath
-  };
-}
-
-/**
- * Copy bundle files to report directory
- * @param {Object} options - Options
- * @param {string} options.bundlePath - Source bundle path
- * @param {string} options.cssPath - Source CSS path
- * @param {string} options.reportDir - Report directory
- * @param {Object} options.deps - Dependencies
- * @param {Function} options.deps.copyFile - copyFile function
- * @returns {Promise<void>}
- */
-export async function copyBundles({
-  bundlePath,
-  cssPath,
-  reportDir,
-  deps
-}) {
-  let {
-    copyFile
-  } = deps;
-  let {
-    bundleDest,
-    cssDest
-  } = buildBundleDestPaths(reportDir);
-  await copyFile(bundlePath, bundleDest);
-  await copyFile(cssPath, cssDest);
-}
-
-/**
- * Write HTML content to file
- * @param {Object} options - Options
- * @param {string} options.path - File path
- * @param {string} options.content - HTML content
- * @param {Object} options.deps - Dependencies
- * @param {Function} options.deps.writeFile - writeFile function
- * @returns {Promise<void>}
- */
-export async function writeHtmlFile({
-  path,
-  content,
-  deps
-}) {
-  let {
-    writeFile
-  } = deps;
-  await writeFile(path, content, 'utf8');
-}
-
-// ============================================================================
-// Main Report Generation
-// ============================================================================
-
-/**
- * Generate a static HTML report with React reporter
- * @param {Object} options - Options
- * @param {Object} options.reportData - Report data
- * @param {string} options.workingDir - Working directory
- * @param {string} options.projectRoot - Project root directory
- * @param {Object} options.deps - Dependencies
- * @param {Function} options.deps.mkdir - mkdir function
- * @param {Function} options.deps.existsSync - existsSync function
- * @param {Function} options.deps.copyFile - copyFile function
- * @param {Function} options.deps.writeFile - writeFile function
- * @param {Object} options.deps.output - Output utilities
- * @param {Function} options.deps.getDate - Function that returns current Date
- * @returns {Promise<string>} Path to generated report
- */
-export async function generateReport({
-  reportData,
-  workingDir,
-  projectRoot,
-  deps
-}) {
-  let {
-    mkdir,
-    existsSync,
-    copyFile,
-    writeFile,
-    output,
-    getDate
-  } = deps;
-
-  // Validate report data
-  let validation = validateReportData(reportData);
-  if (!validation.valid) {
-    throw new Error(validation.error);
-  }
-  let reportDir = buildReportDir(workingDir);
-  let reportPath = buildReportPath(reportDir);
-  try {
-    // Ensure report directory exists
-    await ensureDirectory({
-      path: reportDir,
-      deps: {
-        mkdir
-      }
-    });
-
-    // Check if bundles exist
-    let bundleCheck = checkBundlesExist({
-      projectRoot,
-      deps: {
-        existsSync
-      }
-    });
-    let bundleValidation = validateBundlesExist(bundleCheck.bundleExists, bundleCheck.cssExists);
-    if (!bundleValidation.valid) {
-      throw new Error(bundleValidation.error);
-    }
-
-    // Copy bundles to report directory
-    await copyBundles({
-      bundlePath: bundleCheck.bundlePath,
-      cssPath: bundleCheck.cssPath,
-      reportDir,
-      deps: {
-        copyFile
-      }
-    });
-
-    // Generate HTML content
-    let htmlContent = buildHtmlContent(reportData, getDate());
-
-    // Write HTML file
-    await writeHtmlFile({
-      path: reportPath,
-      content: htmlContent,
-      deps: {
-        writeFile
-      }
-    });
-    output.debug('report', 'generated static report');
-    return reportPath;
-  } catch (error) {
-    output.error(`Failed to generate static report: ${error.message}`);
-    throw new Error(`Report generation failed: ${error.message}`);
-  }
-}

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

@@ -1,65 +0,0 @@
-/**
- * Static Report Generator using React Reporter
- * Generates a self-contained HTML file with the React dashboard and embedded data
- *
- * This class is a thin wrapper around the functional report-generator module.
- * For new code, consider using the functions directly from '../report-generator/'.
- */
-
-import { existsSync } from 'node:fs';
-import { copyFile, mkdir, writeFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { buildFallbackHtmlContent, buildHtmlContent, buildReportDir, buildReportPath, generateReport } from '../report-generator/index.js';
-import * as output from '../utils/output.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const PROJECT_ROOT = join(__dirname, '..', '..');
-export class StaticReportGenerator {
-  constructor(workingDir, config) {
-    this.workingDir = workingDir;
-    this.config = config;
-    this.reportDir = buildReportDir(workingDir);
-    this.reportPath = buildReportPath(this.reportDir);
-  }
-
-  /**
-   * Generate static HTML report with React reporter bundle
-   * @param {Object} reportData - Complete report data (same format as live dashboard)
-   * @returns {Promise<string>} Path to generated report
-   */
-  async generateReport(reportData) {
-    return generateReport({
-      reportData,
-      workingDir: this.workingDir,
-      projectRoot: PROJECT_ROOT,
-      deps: {
-        mkdir,
-        existsSync,
-        copyFile,
-        writeFile,
-        output,
-        getDate: () => new Date()
-      }
-    });
-  }
-
-  /**
-   * Generate HTML template with embedded React app
-   * @param {Object} reportData - Report data to embed
-   * @returns {string} HTML content
-   * @deprecated Use buildHtmlContent from report-generator/core.js
-   */
-  generateHtmlTemplate(reportData) {
-    return buildHtmlContent(reportData, new Date());
-  }
-
-  /**
-   * Generate a minimal HTML report when bundles are missing (fallback)
-   * @param {Object} reportData - Report data
-   * @returns {string} Minimal HTML content
-   */
-  generateFallbackHtml(reportData) {
-    return buildFallbackHtmlContent(reportData, new Date());
-  }
-}