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

package/dist/server/handlers/tdd-handler.js

@@ -1,17 +1,66 @@
-import { Buffer } from 'node:buffer';
-import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import { join, resolve } from 'node:path';
-import { getDimensionsSync } from '@vizzly-testing/honeydiff';
-import { TddService } from '../../services/tdd-service.js';
-import { detectImageInputType } from '../../utils/image-input-detector.js';
-import * as output from '../../utils/output.js';
-import { sanitizeScreenshotName, validateScreenshotProperties } from '../../utils/security.js';
+import { Buffer as defaultBuffer } from 'node:buffer';
+import { existsSync as defaultExistsSync, readFileSync as defaultReadFileSync, unlinkSync as defaultUnlinkSync, writeFileSync as defaultWriteFileSync } from 'node:fs';
+import { join as defaultJoin, resolve as defaultResolve } from 'node:path';
+import { getDimensionsSync as defaultGetDimensionsSync } from '@vizzly-testing/honeydiff';
+import { TddService as DefaultTddService } from '../../tdd/tdd-service.js';
+import { detectImageInputType as defaultDetectImageInputType } from '../../utils/image-input-detector.js';
+import * as defaultOutput from '../../utils/output.js';
+import { safePath as defaultSafePath, sanitizeScreenshotName as defaultSanitizeScreenshotName, validateScreenshotProperties as defaultValidateScreenshotProperties } from '../../utils/security.js';
+
+/**
+ * Unwrap double-nested properties if needed
+ * Client SDK wraps options in properties field, so we may get { properties: { properties: {...} } }
+ */
+export const unwrapProperties = properties => {
+  if (!properties) return {};
+  if (properties.properties && typeof properties.properties === 'object') {
+    // Merge top-level properties with nested properties
+    let unwrapped = {
+      ...properties,
+      ...properties.properties
+    };
+    // Remove the nested properties field to avoid confusion
+    delete unwrapped.properties;
+    return unwrapped;
+  }
+  return properties;
+};
+
+/**
+ * Extract properties to top-level format matching cloud API
+ * Normalizes viewport to viewport_width/height, ensures browser is set
+ */
+export const extractProperties = validatedProperties => {
+  if (!validatedProperties) return {};
+  return {
+    ...validatedProperties,
+    // Normalize viewport to top-level viewport_width/height (cloud format)
+    viewport_width: validatedProperties.viewport?.width ?? validatedProperties.viewport_width ?? null,
+    viewport_height: validatedProperties.viewport?.height ?? validatedProperties.viewport_height ?? null,
+    browser: validatedProperties.browser ?? null,
+    // Preserve nested structure in metadata for backward compatibility
+    metadata: validatedProperties
+  };
+};
+
+/**
+ * Convert absolute file paths to web-accessible URLs
+ */
+export const convertPathToUrl = (filePath, vizzlyDir) => {
+  if (!filePath) return null;
+  // Convert absolute path to relative path from .vizzly directory
+  if (filePath.startsWith(vizzlyDir)) {
+    let relativePath = filePath.substring(vizzlyDir.length + 1);
+    return `/images/${relativePath}`;
+  }
+  return filePath;
+};
 
 /**
  * Group comparisons by screenshot name with variant structure
  * Matches cloud product's grouping logic from comparison.js
  */
-const groupComparisons = comparisons => {
+export const groupComparisons = comparisons => {
   const groups = new Map();
 
   // Group by screenshot name
@@ -87,7 +136,24 @@ const groupComparisons = comparisons => {
     return a.name.localeCompare(b.name);
   });
 };
-export const createTddHandler = (config, workingDir, baselineBuild, baselineComparison, setBaseline = false) => {
+export const createTddHandler = (config, workingDir, baselineBuild, baselineComparison, setBaseline = false, deps = {}) => {
+  // Inject dependencies with defaults
+  let {
+    TddService = DefaultTddService,
+    existsSync = defaultExistsSync,
+    readFileSync = defaultReadFileSync,
+    unlinkSync = defaultUnlinkSync,
+    writeFileSync = defaultWriteFileSync,
+    join = defaultJoin,
+    resolve = defaultResolve,
+    Buffer = defaultBuffer,
+    getDimensionsSync = defaultGetDimensionsSync,
+    detectImageInputType = defaultDetectImageInputType,
+    safePath = defaultSafePath,
+    sanitizeScreenshotName = defaultSanitizeScreenshotName,
+    validateScreenshotProperties = defaultValidateScreenshotProperties,
+    output = defaultOutput
+  } = deps;
   const tddService = new TddService(config, workingDir, setBaseline);
   const reportPath = join(workingDir, '.vizzly', 'report-data.json');
   const readReportData = () => {
@@ -164,6 +230,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
         groups: reportData.groups.length,
         passed: reportData.comparisons.filter(c => c.status === 'passed' || c.status === 'baseline-created' || c.status === 'new').length,
         failed: reportData.comparisons.filter(c => c.status === 'failed').length,
+        rejected: reportData.comparisons.filter(c => c.status === 'rejected').length,
         errors: reportData.comparisons.filter(c => c.status === 'error').length
       };
       writeFileSync(reportPath, JSON.stringify(reportData, null, 2));
@@ -172,7 +239,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     }
   };
   const initialize = async () => {
-    output.debug('tdd', 'setting up local comparison');
+    output.debug('tdd', 'initializing local mode');
 
     // In baseline update mode, skip all baseline loading/downloading
     if (setBaseline) {
@@ -183,7 +250,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     // Check if we have baseline override flags that should force a fresh download
     const shouldForceDownload = (baselineBuild || baselineComparison) && config.apiKey;
     if (shouldForceDownload) {
-      output.debug('tdd', 'downloading baselines from cloud');
+      output.debug('tdd', 'downloading baselines');
       await tddService.downloadBaselines(config.build?.environment || 'test', config.build?.branch || null, baselineBuild, baselineComparison);
       return;
     }
@@ -191,13 +258,13 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     if (!baseline) {
       // Only download baselines if explicitly requested via baseline flags
       if ((baselineBuild || baselineComparison) && config.apiKey) {
-        output.debug('tdd', 'downloading baselines from cloud');
+        output.debug('tdd', 'downloading baselines');
         await tddService.downloadBaselines(config.build?.environment || 'test', config.build?.branch || null, baselineBuild, baselineComparison);
       } else {
-        output.debug('tdd', 'no baselines found, will create on first run');
+        output.debug('tdd', 'no baselines yet');
       }
     } else {
-      output.debug('tdd', `using baseline: ${baseline.buildName}`);
+      output.debug('tdd', `baseline: ${baseline.buildName}`);
     }
   };
   const handleScreenshot = async (_buildId, name, image, properties = {}) => {
@@ -217,18 +284,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     }
 
     // Unwrap double-nested properties if needed (client SDK wraps options in properties field)
-    // This happens when test helper passes { properties: {...}, threshold: 2.0 }
-    // and client SDK wraps it as { properties: options }
-    let unwrappedProperties = properties;
-    if (properties.properties && typeof properties.properties === 'object') {
-      // Merge top-level properties with nested properties
-      unwrappedProperties = {
-        ...properties,
-        ...properties.properties
-      };
-      // Remove the nested properties field to avoid confusion
-      delete unwrappedProperties.properties;
-    }
+    let unwrappedProperties = unwrapProperties(properties);
 
     // Validate and sanitize properties
     let validatedProperties;
@@ -246,19 +302,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     }
 
     // Extract ALL properties to top-level (matching cloud API behavior)
-    // This ensures signature generation works correctly for custom properties like theme, device, etc.
-    // Spread all validated properties first, then normalize viewport/browser for cloud format
-    const extractedProperties = {
-      ...validatedProperties,
-      // Normalize viewport to top-level viewport_width/height (cloud format)
-      // Use nullish coalescing to preserve any existing top-level values
-      viewport_width: validatedProperties.viewport?.width ?? validatedProperties.viewport_width ?? null,
-      viewport_height: validatedProperties.viewport?.height ?? validatedProperties.viewport_height ?? null,
-      browser: validatedProperties.browser ?? null,
-      // Preserve nested structure in metadata for backward compatibility
-      // Signature generation checks multiple locations: top-level, metadata.*, metadata.properties.*
-      metadata: validatedProperties
-    };
+    const extractedProperties = extractProperties(validatedProperties);
 
     // Support both base64 encoded images and file paths
     // Vitest browser mode returns file paths, so we need to handle both
@@ -336,16 +380,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     // Comparison tracked by tdd.js event handler
 
     // Convert absolute file paths to web-accessible URLs
-    const convertPathToUrl = filePath => {
-      if (!filePath) return null;
-      // Convert absolute path to relative path from .vizzly directory
-      const vizzlyDir = join(workingDir, '.vizzly');
-      if (filePath.startsWith(vizzlyDir)) {
-        const relativePath = filePath.substring(vizzlyDir.length + 1);
-        return `/images/${relativePath}`;
-      }
-      return filePath;
-    };
+    const vizzlyDir = join(workingDir, '.vizzly');
 
     // Record the comparison for the dashboard
     const newComparison = {
@@ -354,9 +389,9 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       name: comparison.name,
       originalName: name,
       status: comparison.status,
-      baseline: convertPathToUrl(comparison.baseline),
-      current: convertPathToUrl(comparison.current),
-      diff: convertPathToUrl(comparison.diff),
+      baseline: convertPathToUrl(comparison.baseline, vizzlyDir),
+      current: convertPathToUrl(comparison.current, vizzlyDir),
+      diff: convertPathToUrl(comparison.diff, vizzlyDir),
       diffPercentage: comparison.diffPercentage,
       threshold: comparison.threshold,
       properties: extractedProperties,
@@ -456,6 +491,33 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       throw error;
     }
   };
+  const rejectBaseline = async comparisonId => {
+    try {
+      // Read current report data to get the comparison
+      const reportData = readReportData();
+      const comparison = reportData.comparisons.find(c => c.id === comparisonId);
+      if (!comparison) {
+        throw new Error(`Comparison not found with ID: ${comparisonId}`);
+      }
+
+      // Rejecting means: keep the current baseline, mark comparison as rejected
+      // The user is saying "I don't want this change, the baseline is correct"
+      // We update the status to 'rejected' so the UI shows the decision was made
+      const updatedComparison = {
+        ...comparison,
+        status: 'rejected'
+      };
+      updateComparison(updatedComparison);
+      output.info(`Changes rejected for comparison ${comparisonId}`);
+      return {
+        success: true,
+        id: comparisonId
+      };
+    } catch (error) {
+      output.error(`Failed to reject baseline for ${comparisonId}:`, error);
+      throw error;
+    }
+  };
   const acceptAllBaselines = async () => {
     try {
       output.debug('tdd', 'accepting all baselines');
@@ -590,6 +652,80 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       throw error;
     }
   };
+
+  /**
+   * Safely delete a file within the .vizzly directory
+   * @param {string} imagePath - Path like "/images/baselines/foo.png"
+   * @param {string} label - Label for logging (e.g., "baseline", "current", "diff")
+   * @param {string} name - Screenshot name for logging
+   */
+  const safeDeleteFile = (imagePath, label, name) => {
+    if (!imagePath) return;
+    try {
+      // Use safePath to validate the path stays within workingDir
+      const filePath = safePath(workingDir, '.vizzly', imagePath.replace('/images/', ''));
+      if (existsSync(filePath)) {
+        unlinkSync(filePath);
+        output.debug(`Deleted ${label} for ${name}`);
+      }
+    } catch (error) {
+      // safePath throws if path traversal is attempted
+      output.warn(`Failed to delete ${label} for ${name}: ${error.message}`);
+    }
+  };
+  const deleteComparison = async comparisonId => {
+    const reportData = readReportData();
+    const comparison = reportData.comparisons.find(c => c.id === comparisonId);
+    if (!comparison) {
+      const error = new Error(`Comparison not found with ID: ${comparisonId}`);
+      error.code = 'NOT_FOUND';
+      throw error;
+    }
+
+    // Delete image files (safePath validates paths stay within workingDir)
+    safeDeleteFile(comparison.baseline, 'baseline', comparison.name);
+    safeDeleteFile(comparison.current, 'current', comparison.name);
+    safeDeleteFile(comparison.diff, 'diff', comparison.name);
+
+    // Remove from baseline metadata if it exists
+    try {
+      const metadataPath = safePath(workingDir, '.vizzly', 'baselines', 'metadata.json');
+      if (existsSync(metadataPath) && comparison.signature) {
+        const metadata = JSON.parse(readFileSync(metadataPath, 'utf8'));
+        if (metadata.screenshots) {
+          const originalLength = metadata.screenshots.length;
+          metadata.screenshots = metadata.screenshots.filter(s => s.signature !== comparison.signature);
+          if (metadata.screenshots.length < originalLength) {
+            writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+            output.debug(`Removed ${comparison.signature} from baseline metadata`);
+          }
+        }
+      }
+    } catch (error) {
+      output.warn(`Failed to update baseline metadata: ${error.message}`);
+    }
+
+    // Remove comparison from report data
+    reportData.comparisons = reportData.comparisons.filter(c => c.id !== comparisonId);
+
+    // Regenerate groups and summary
+    reportData.groups = groupComparisons(reportData.comparisons);
+    reportData.timestamp = Date.now();
+    reportData.summary = {
+      total: reportData.comparisons.length,
+      groups: reportData.groups.length,
+      passed: reportData.comparisons.filter(c => c.status === 'passed' || c.status === 'baseline-created' || c.status === 'new').length,
+      failed: reportData.comparisons.filter(c => c.status === 'failed').length,
+      rejected: reportData.comparisons.filter(c => c.status === 'rejected').length,
+      errors: reportData.comparisons.filter(c => c.status === 'error').length
+    };
+    writeFileSync(reportPath, JSON.stringify(reportData, null, 2));
+    output.info(`Deleted comparison ${comparisonId} (${comparison.name})`);
+    return {
+      success: true,
+      id: comparisonId
+    };
+  };
   const cleanup = () => {
     // Report data is persisted to file, no in-memory cleanup needed
   };
@@ -598,8 +734,10 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     handleScreenshot,
     getResults,
     acceptBaseline,
+    rejectBaseline,
     acceptAllBaselines,
     resetBaselines,
+    deleteComparison,
     cleanup,
     // Expose tddService for baseline download operations
     tddService

package/dist/server/http-server.js

@@ -28,7 +28,8 @@ export const createHttpServer = (port, screenshotHandler, services = {}) => {
     configService,
     authService,
     projectService,
-    tddService
+    tddService,
+    workingDir
   } = services;
 
   // Create router context
@@ -40,6 +41,7 @@ export const createHttpServer = (port, screenshotHandler, services = {}) => {
     authService,
     projectService,
     tddService,
+    workingDir: workingDir || process.cwd(),
     apiUrl: 'https://app.vizzly.dev'
   };
 
@@ -98,7 +100,8 @@ export const createHttpServer = (port, screenshotHandler, services = {}) => {
         if (error) {
           reject(error);
         } else {
-          output.debug('server', `listening on :${port}`);
+          // Don't log here - let the caller handle success logging via onServerReady callback
+          // This prevents duplicate "listening on" messages
           resolve();
         }
       });
@@ -114,9 +117,12 @@ export const createHttpServer = (port, screenshotHandler, services = {}) => {
   const stop = () => {
     if (server) {
       return new Promise(resolve => {
+        // Close all keep-alive connections immediately (Node 18.2+)
+        if (server.closeAllConnections) {
+          server.closeAllConnections();
+        }
         server.close(() => {
           server = null;
-          output.debug('server', 'stopped');
           resolve();
         });
       });

package/dist/server/routers/baseline.js

@@ -67,6 +67,64 @@ export function createBaselineRouter({
       }
     }
 
+    // Reject a single comparison (keep current baseline, discard changes)
+    if (req.method === 'POST' && pathname === '/api/baseline/reject') {
+      if (!screenshotHandler?.rejectBaseline) {
+        sendError(res, 400, 'Baseline management not available');
+        return true;
+      }
+      try {
+        const {
+          id
+        } = await parseJsonBody(req);
+        if (!id) {
+          sendError(res, 400, 'Comparison ID required');
+          return true;
+        }
+        await screenshotHandler.rejectBaseline(id);
+        sendSuccess(res, {
+          success: true,
+          message: `Changes rejected for comparison ${id}`
+        });
+        return true;
+      } catch (error) {
+        output.error('Error rejecting baseline:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Delete a comparison entirely (removes from report and deletes files)
+    if (req.method === 'POST' && pathname === '/api/baseline/delete') {
+      if (!screenshotHandler?.deleteComparison) {
+        sendError(res, 400, 'Baseline management not available');
+        return true;
+      }
+      try {
+        const {
+          id
+        } = await parseJsonBody(req);
+        if (!id) {
+          sendError(res, 400, 'Comparison ID required');
+          return true;
+        }
+        await screenshotHandler.deleteComparison(id);
+        sendSuccess(res, {
+          success: true,
+          message: `Comparison ${id} deleted`
+        });
+        return true;
+      } catch (error) {
+        if (error.code === 'NOT_FOUND') {
+          sendError(res, 404, error.message);
+        } else {
+          output.error('Error deleting comparison:', error);
+          sendError(res, 500, error.message);
+        }
+        return true;
+      }
+    }
+
     // Reset baselines to previous state
     if (req.method === 'POST' && pathname === '/api/baseline/reset') {
       if (!screenshotHandler?.resetBaselines) {

package/dist/server/routers/dashboard.js

@@ -9,14 +9,18 @@ import * as output from '../../utils/output.js';
 import { sendHtml, sendSuccess } from '../middleware/response.js';
 
 // SPA routes that should serve the dashboard HTML
-const SPA_ROUTES = ['/', '/dashboard', '/stats', '/settings', '/projects', '/builds'];
+const SPA_ROUTES = ['/', '/stats', '/settings', '/projects', '/builds'];
 
 /**
  * Create dashboard router
  * @param {Object} context - Router context
+ * @param {string} context.workingDir - Working directory for report data
  * @returns {Function} Route handler
  */
-export function createDashboardRouter() {
+export function createDashboardRouter(context) {
+  const {
+    workingDir = process.cwd()
+  } = context || {};
   return async function handleDashboardRoute(req, res, pathname) {
     if (req.method !== 'GET') {
       return false;
@@ -24,7 +28,7 @@ export function createDashboardRouter() {
 
     // API endpoint for fetching report data
     if (pathname === '/api/report-data') {
-      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
       if (existsSync(reportDataPath)) {
         try {
           const data = readFileSync(reportDataPath, 'utf8');
@@ -50,8 +54,8 @@ export function createDashboardRouter() {
 
     // API endpoint for real-time status
     if (pathname === '/api/status') {
-      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
-      const baselineMetadataPath = join(process.cwd(), '.vizzly', 'baselines', 'metadata.json');
+      const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
+      const baselineMetadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
       let reportData = null;
       let baselineInfo = null;
       if (existsSync(reportDataPath)) {
@@ -84,7 +88,7 @@ export function createDashboardRouter() {
 
     // Serve React SPA for dashboard routes
     if (SPA_ROUTES.includes(pathname) || pathname.startsWith('/comparison/')) {
-      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
       let reportData = null;
       if (existsSync(reportDataPath)) {
         try {

package/dist/server/routers/screenshot.js

@@ -52,6 +52,38 @@ export function createScreenshotRouter({
       }
     }
 
+    // Flush endpoint - signals test completion and prints summary
+    if (pathname === '/flush') {
+      try {
+        if (screenshotHandler.getResults) {
+          // This triggers printResults() which outputs the summary
+          const results = await screenshotHandler.getResults();
+          sendJson(res, 200, {
+            success: true,
+            summary: {
+              total: results.total || 0,
+              passed: results.passed || 0,
+              failed: results.failed || 0,
+              new: results.new || 0,
+              errors: results.errors || 0
+            }
+          });
+        } else {
+          sendJson(res, 200, {
+            success: true,
+            message: 'No TDD results'
+          });
+        }
+        return true;
+      } catch (error) {
+        output.debug('Flush error:', {
+          error: error.message
+        });
+        sendError(res, 500, 'Failed to flush');
+        return true;
+      }
+    }
+
     // Legacy accept-baseline endpoint
     if (pathname === '/accept-baseline') {
       try {