npm - @vizzly-testing/cli - Versions diffs - 0.21.1 → 0.22.0 - Mend

@vizzly-testing/cli 0.21.1 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/cli.js +43 -13
package/dist/commands/run.js +1 -0
package/dist/commands/tdd-daemon.js +3 -2
package/dist/reporter/reporter-bundle.css +1 -1
package/dist/reporter/reporter-bundle.iife.js +13 -13
package/dist/reporter-ssr/ssr-entry.js +558 -0
package/dist/server/handlers/tdd-handler.js +22 -26
package/dist/services/config-service.js +16 -1
package/dist/services/static-report-generator.js +205 -0
package/dist/tdd/tdd-service.js +20 -6
package/dist/utils/browser.js +24 -4
package/package.json +3 -2

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

@@ -0,0 +1,205 @@
+/**
+ * Static Report Generator
+ *
+ * Generates a self-contained HTML report from TDD test results using SSR.
+ * The report is pre-rendered HTML with inlined CSS - no JavaScript required.
+ */
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+let __dirname = dirname(fileURLToPath(import.meta.url));
+/**
+ * Get the path to the dist/reporter directory (for CSS)
+ */
+function getReporterDistPath() {
+  // Try production path first (when running from dist/)
+  let distPath = join(__dirname, '..', 'reporter');
+  if (existsSync(join(distPath, 'reporter-bundle.css'))) {
+    return distPath;
+  }
+  // Fall back to development path (when running from src/)
+  distPath = join(__dirname, '..', '..', 'dist', 'reporter');
+  if (existsSync(join(distPath, 'reporter-bundle.css'))) {
+    return distPath;
+  }
+  throw new Error('Reporter bundle not found. Run "npm run build:reporter" first.');
+}
+/**
+ * Get the path to the SSR module
+ */
+function getSSRModulePath() {
+  // Try production path first (when running from dist/)
+  let ssrPath = join(__dirname, '..', 'reporter-ssr', 'ssr-entry.js');
+  if (existsSync(ssrPath)) {
+    return ssrPath;
+  }
+  // Fall back to development path (when running from src/)
+  ssrPath = join(__dirname, '..', '..', 'dist', 'reporter-ssr', 'ssr-entry.js');
+  if (existsSync(ssrPath)) {
+    return ssrPath;
+  }
+  throw new Error('SSR module not found. Run "npm run build:reporter-ssr" first.');
+}
+/**
+ * Recursively copy a directory
+ */
+function copyDirectory(src, dest) {
+  if (!existsSync(src)) return;
+  mkdirSync(dest, {
+    recursive: true
+  });
+  let entries = readdirSync(src);
+  for (let entry of entries) {
+    let srcPath = join(src, entry);
+    let destPath = join(dest, entry);
+    let stat = statSync(srcPath);
+    if (stat.isDirectory()) {
+      copyDirectory(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+/**
+ * Transform image URLs from server paths to relative file paths
+ * /images/baselines/foo.png -> ./images/baselines/foo.png
+ */
+function transformImageUrls(reportData) {
+  let transformed = JSON.parse(JSON.stringify(reportData));
+  function transformUrl(url) {
+    if (!url || typeof url !== 'string') return url;
+    if (url.startsWith('/images/')) {
+      return `.${url}`;
+    }
+    return url;
+  }
+  function transformComparison(comparison) {
+    return {
+      ...comparison,
+      baseline: transformUrl(comparison.baseline),
+      current: transformUrl(comparison.current),
+      diff: transformUrl(comparison.diff)
+    };
+  }
+  if (transformed.comparisons) {
+    transformed.comparisons = transformed.comparisons.map(transformComparison);
+  }
+  if (transformed.groups) {
+    transformed.groups = transformed.groups.map(group => ({
+      ...group,
+      comparisons: group.comparisons?.map(transformComparison) || []
+    }));
+  }
+  return transformed;
+}
+/**
+ * Generate the static HTML document with SSR-rendered content
+ */
+function generateHtml(renderedContent, css) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vizzly Visual Test Report</title>
+    <style>
+${css}
+    </style>
+</head>
+<body>
+    ${renderedContent}
+</body>
+</html>`;
+}
+/**
+ * Generate a static report from the current TDD results
+ *
+ * @param {string} workingDir - The project working directory
+ * @param {Object} options - Generation options
+ * @param {string} [options.outputDir] - Output directory (default: .vizzly/report)
+ * @returns {Promise<{success: boolean, reportPath: string, error?: string}>}
+ */
+export async function generateStaticReport(workingDir, options = {}) {
+  let outputDir = options.outputDir || join(workingDir, '.vizzly', 'report');
+  let vizzlyDir = join(workingDir, '.vizzly');
+  try {
+    // Read report data
+    let reportDataPath = join(vizzlyDir, 'report-data.json');
+    if (!existsSync(reportDataPath)) {
+      return {
+        success: false,
+        reportPath: null,
+        error: 'No report data found. Run tests first.'
+      };
+    }
+    let reportData = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+    // Read baseline metadata if available
+    let metadataPath = join(vizzlyDir, 'baselines', 'metadata.json');
+    if (existsSync(metadataPath)) {
+      try {
+        reportData.baseline = JSON.parse(readFileSync(metadataPath, 'utf8'));
+      } catch {
+        // Ignore metadata read errors
+      }
+    }
+    // Transform image URLs to relative paths
+    let transformedData = transformImageUrls(reportData);
+    // Load and use the SSR module
+    let ssrModulePath = getSSRModulePath();
+    let {
+      renderStaticReport
+    } = await import(ssrModulePath);
+    let renderedContent = renderStaticReport(transformedData);
+    // Get CSS
+    let reporterDistPath = getReporterDistPath();
+    let css = readFileSync(join(reporterDistPath, 'reporter-bundle.css'), 'utf8');
+    // Create output directory
+    mkdirSync(outputDir, {
+      recursive: true
+    });
+    // Copy image directories
+    let imageDirs = ['baselines', 'current', 'diffs'];
+    for (let dir of imageDirs) {
+      let srcDir = join(vizzlyDir, dir);
+      let destDir = join(outputDir, 'images', dir);
+      copyDirectory(srcDir, destDir);
+    }
+    // Generate and write HTML
+    let html = generateHtml(renderedContent, css);
+    let htmlPath = join(outputDir, 'index.html');
+    writeFileSync(htmlPath, html, 'utf8');
+    return {
+      success: true,
+      reportPath: htmlPath
+    };
+  } catch (error) {
+    return {
+      success: false,
+      reportPath: null,
+      error: error.message
+    };
+  }
+}
+/**
+ * Get the file:// URL for a report path
+ */
+export function getReportFileUrl(reportPath) {
+  return `file://${reportPath}`;
+}

package/dist/tdd/tdd-service.js CHANGED Viewed

@@ -863,6 +863,20 @@ export class TddService {
     return metadata;
   }
+  /**
+   * Upsert a comparison result - replaces existing if same ID, otherwise appends.
+   * This prevents stale results from accumulating in daemon mode.
+   * @private
+   */
+  _upsertComparison(result) {
+    let existingIndex = this.comparisons.findIndex(c => c.id === result.id);
+    if (existingIndex >= 0) {
+      this.comparisons[existingIndex] = result;
+    } else {
+      this.comparisons.push(result);
+    }
+  }
   /**
    * Compare a screenshot against baseline
    */
@@ -959,7 +973,7 @@ export class TddService {
         currentPath: currentImagePath,
         properties: validatedProperties
       });
-      this.comparisons.push(result);
+      this._upsertComparison(result);
       return result;
     }
@@ -982,7 +996,7 @@ export class TddService {
           minClusterSize: effectiveMinClusterSize,
           honeydiffResult
         });
-        this.comparisons.push(result);
+        this._upsertComparison(result);
         return result;
       } else {
         let hotspotAnalysis = this.getHotspotForScreenshot(name);
@@ -1007,7 +1021,7 @@ export class TddService {
         output.debug('comparison', `${sanitizedName}: ${result.status}`, {
           diff: diffInfo
         });
-        this.comparisons.push(result);
+        this._upsertComparison(result);
         return result;
       }
     } catch (error) {
@@ -1035,7 +1049,7 @@ export class TddService {
           currentPath: currentImagePath,
           properties: validatedProperties
         });
-        this.comparisons.push(result);
+        this._upsertComparison(result);
         return result;
       }
       output.debug('comparison', `${sanitizedName}: error - ${error.message}`);
@@ -1047,7 +1061,7 @@ export class TddService {
         properties: validatedProperties,
         errorMessage: error.message
       });
-      this.comparisons.push(result);
+      this._upsertComparison(result);
       return result;
     }
   }
@@ -1389,7 +1403,7 @@ export class TddService {
       properties,
       signature
     };
-    this.comparisons.push(result);
+    this._upsertComparison(result);
     output.info(`Baseline created for ${name}`);
     return result;
   }

package/dist/utils/browser.js CHANGED Viewed

@@ -5,24 +5,44 @@
 import { execFile } from 'node:child_process';
 import { platform } from 'node:os';
+/**
+ * Validate URL is safe to open (prevent command injection)
+ * Only allows http://, https://, and file:// URLs
+ * @param {string} url - URL to validate
+ * @returns {boolean} True if safe
+ */
+function isValidUrl(url) {
+  if (typeof url !== 'string' || url.length === 0) {
+    return false;
+  }
+  // Only allow safe URL schemes
+  let validSchemes = ['http://', 'https://', 'file://'];
+  return validSchemes.some(scheme => url.startsWith(scheme));
+}
 /**
  * Open a URL in the default browser
- * @param {string} url - URL to open
+ * @param {string} url - URL to open (must be http://, https://, or file://)
  * @returns {Promise<boolean>} True if successful
  */
 export async function openBrowser(url) {
+  // Validate URL to prevent command injection
+  if (!isValidUrl(url)) {
+    return false;
+  }
   return new Promise(resolve => {
     let command;
     let args;
-    const os = platform();
-    switch (os) {
+    let currentPlatform = platform();
+    switch (currentPlatform) {
       case 'darwin':
         // macOS
         command = 'open';
         args = [url];
         break;
       case 'win32':
-        // Windows
+        // Windows - use start command with validated URL
         command = 'cmd.exe';
         args = ['/c', 'start', '""', url];
         break;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -58,11 +58,12 @@
   ],
   "scripts": {
     "start": "node src/index.js",
-    "build": "npm run clean && npm run compile && npm run build:reporter && npm run copy-types",
+    "build": "npm run clean && npm run compile && npm run build:reporter && npm run build:reporter-ssr && npm run copy-types",
     "clean": "rimraf dist",
     "compile": "babel src --out-dir dist --ignore '**/*.test.js'",
     "copy-types": "mkdir -p dist/types && cp src/types/*.d.ts dist/types/",
     "build:reporter": "cd src/reporter && vite build",
+    "build:reporter-ssr": "cd src/reporter && vite build --config vite.ssr.config.js",
     "dev:reporter": "cd src/reporter && vite --config vite.dev.config.js",
     "test:types": "tsd",
     "prepublishOnly": "npm run build",