@vizzly-testing/cli 0.7.2 → 0.9.0

package/dist/sdk/index.js

@@ -30,7 +30,7 @@ import { VizzlyError } from '../errors/vizzly-error.js';
  *
  * const vizzly = await createVizzly({
  *   apiKey: process.env.VIZZLY_TOKEN,
- *   apiUrl: 'https://vizzly.dev',
+ *   apiUrl: 'https://app.vizzly.dev',
  *   server: {
  *     port: 3003,
  *     enabled: true

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

@@ -1,9 +1,41 @@
 import { Buffer } from 'buffer';
 import { createServiceLogger } from '../../utils/logger-factory.js';
 const logger = createServiceLogger('API-HANDLER');
+
+/**
+ * API Handler - Non-blocking screenshot upload
+ *
+ * Flow:
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ Test Suite                                                  │
+ * │   ↓ vizzlyScreenshot()                                      │
+ * │   ↓ HTTP POST to localhost                                 │
+ * │   ↓                                                         │
+ * │ Screenshot Server                                           │
+ * │   ↓ handleScreenshot()                                      │
+ * │   ├─→ Convert base64 to Buffer                             │
+ * │   ├─→ Fire upload promise (NO AWAIT) ─────┐                │
+ * │   └─→ Return 200 immediately              │                │
+ * │                                             │                │
+ * │ Test continues (NO BLOCKING) ✓             │                │
+ * │                                             ↓                │
+ * │                                   Background Upload         │
+ * │                                   (to Vizzly API)           │
+ * │                                             ↓                │
+ * │                                   Promise resolves/rejects  │
+ * │                                                             │
+ * │ Build Finalization                                          │
+ * │   ↓ flush()                                                 │
+ * │   └─→ await Promise.allSettled(uploadPromises)             │
+ * │        ↓                                                    │
+ * │      All uploads complete ✓                                │
+ * └─────────────────────────────────────────────────────────────┘
+ */
+
 export const createApiHandler = apiService => {
   let vizzlyDisabled = false;
   let screenshotCount = 0;
+  let uploadPromises = [];
   const handleScreenshot = async (buildId, name, image, properties = {}) => {
     if (vizzlyDisabled) {
       logger.debug(`Screenshot captured (Vizzly disabled): ${name}`);
@@ -17,14 +49,9 @@ export const createApiHandler = apiService => {
         }
       };
     }
-    if (!buildId) {
-      return {
-        statusCode: 400,
-        body: {
-          error: 'Build ID is required for screenshot upload'
-        }
-      };
-    }
+
+    // buildId is optional - API service will handle it appropriately
+
     if (!apiService) {
       return {
         statusCode: 500,
@@ -33,51 +60,92 @@ export const createApiHandler = apiService => {
         }
       };
     }
-    try {
-      const imageBuffer = Buffer.from(image, 'base64');
-      const result = await apiService.uploadScreenshot(buildId, name, imageBuffer, properties ?? {});
+    const imageBuffer = Buffer.from(image, 'base64');
+    screenshotCount++;
+
+    // Fire upload in background - DON'T AWAIT!
+    const uploadPromise = apiService.uploadScreenshot(buildId, name, imageBuffer, properties ?? {}).then(result => {
       if (result.skipped) {
         logger.debug(`Screenshot already exists, skipped: ${name}`);
       } else {
         logger.debug(`Screenshot uploaded: ${name}`);
       }
-      if (!result.skipped) {
-        screenshotCount++;
-      }
       return {
-        statusCode: 200,
-        body: {
-          success: true,
-          name,
-          skipped: result.skipped,
-          count: screenshotCount
-        }
+        success: true,
+        name,
+        result
       };
-    } catch (uploadError) {
+    }).catch(uploadError => {
       logger.error(`❌ Failed to upload screenshot ${name}:`, uploadError.message);
       vizzlyDisabled = true;
       const disabledMessage = '⚠️  Vizzly disabled due to upload error - continuing tests without visual testing';
       logger.warn(disabledMessage);
       return {
-        statusCode: 200,
-        body: {
-          success: true,
-          name,
-          disabled: true,
-          message: disabledMessage
-        }
+        success: false,
+        name,
+        error: uploadError
       };
-    }
+    });
+
+    // Collect promise for later flushing
+    uploadPromises.push(uploadPromise);
+
+    // Return immediately - test continues without waiting!
+    return {
+      statusCode: 200,
+      body: {
+        success: true,
+        name,
+        count: screenshotCount
+      }
+    };
   };
   const getScreenshotCount = () => screenshotCount;
+
+  /**
+   * Wait for all background uploads to complete
+   * Call this before build finalization to ensure all uploads finish
+   */
+  const flush = async () => {
+    if (uploadPromises.length === 0) {
+      logger.debug('No uploads to flush');
+      return {
+        uploaded: 0,
+        failed: 0,
+        total: 0
+      };
+    }
+    logger.debug(`Flushing ${uploadPromises.length} background uploads...`);
+    const results = await Promise.allSettled(uploadPromises);
+    let uploaded = 0;
+    let failed = 0;
+    results.forEach(result => {
+      if (result.status === 'fulfilled' && result.value.success) {
+        uploaded++;
+      } else {
+        failed++;
+      }
+    });
+    logger.debug(`Upload flush complete: ${uploaded} uploaded, ${failed} failed`);
+
+    // Clear promises array
+    uploadPromises = [];
+    return {
+      uploaded,
+      failed,
+      total: results.length
+    };
+  };
   const cleanup = () => {
     vizzlyDisabled = false;
     screenshotCount = 0;
+    uploadPromises = [];
     logger.debug('API handler cleanup completed');
   };
   return {
     handleScreenshot,
     getScreenshotCount,
+    flush,
     cleanup
   };
 };

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

@@ -1,57 +1,101 @@
 import { Buffer } from 'buffer';
+import { writeFileSync, readFileSync, existsSync } from 'fs';
+import { join } from 'path';
 import { createServiceLogger } from '../../utils/logger-factory.js';
 import { TddService } from '../../services/tdd-service.js';
-import { colors } from '../../utils/colors.js';
 import { sanitizeScreenshotName, validateScreenshotProperties } from '../../utils/security.js';
 const logger = createServiceLogger('TDD-HANDLER');
 export const createTddHandler = (config, workingDir, baselineBuild, baselineComparison, setBaseline = false) => {
   const tddService = new TddService(config, workingDir, setBaseline);
-  const builds = new Map();
+  const reportPath = join(workingDir, '.vizzly', 'report-data.json');
+  const readReportData = () => {
+    try {
+      if (!existsSync(reportPath)) {
+        return {
+          timestamp: Date.now(),
+          comparisons: [],
+          summary: {
+            total: 0,
+            passed: 0,
+            failed: 0,
+            errors: 0
+          }
+        };
+      }
+      const data = readFileSync(reportPath, 'utf8');
+      return JSON.parse(data);
+    } catch (error) {
+      logger.error('Failed to read report data:', error);
+      return {
+        timestamp: Date.now(),
+        comparisons: [],
+        summary: {
+          total: 0,
+          passed: 0,
+          failed: 0,
+          errors: 0
+        }
+      };
+    }
+  };
+  const updateComparison = newComparison => {
+    try {
+      const reportData = readReportData();
+
+      // Find existing comparison with same name and replace it, or add new one
+      const existingIndex = reportData.comparisons.findIndex(c => c.name === newComparison.name);
+      if (existingIndex >= 0) {
+        reportData.comparisons[existingIndex] = newComparison;
+        logger.debug(`Updated comparison for ${newComparison.name}`);
+      } else {
+        reportData.comparisons.push(newComparison);
+        logger.debug(`Added new comparison for ${newComparison.name}`);
+      }
+
+      // Update summary
+      reportData.timestamp = Date.now();
+      reportData.summary = {
+        total: reportData.comparisons.length,
+        passed: reportData.comparisons.filter(c => c.status === 'passed' || c.status === 'baseline-created').length,
+        failed: reportData.comparisons.filter(c => c.status === 'failed').length,
+        errors: reportData.comparisons.filter(c => c.status === 'error').length
+      };
+      writeFileSync(reportPath, JSON.stringify(reportData, null, 2));
+      logger.debug('Report data saved to report-data.json');
+    } catch (error) {
+      logger.error('Failed to update comparison:', error);
+    }
+  };
   const initialize = async () => {
-    logger.info('🔄 TDD mode enabled - setting up local comparison...');
+    logger.debug('TDD mode enabled - setting up local comparison');
 
     // In baseline update mode, skip all baseline loading/downloading
     if (setBaseline) {
-      logger.info('📁 Ready for new baseline creation - all screenshots will be treated as new baselines');
+      logger.debug('Ready for new baseline creation - all screenshots will be treated as new baselines');
       return;
     }
 
     // Check if we have baseline override flags that should force a fresh download
     const shouldForceDownload = (baselineBuild || baselineComparison) && config.apiKey;
     if (shouldForceDownload) {
-      logger.info('📥 Baseline override specified, downloading fresh baselines from Vizzly...');
+      logger.debug('Baseline override specified, downloading fresh baselines from Vizzly');
       await tddService.downloadBaselines(config.build?.environment || 'test', config.build?.branch || null, baselineBuild, baselineComparison);
       return;
     }
     const baseline = await tddService.loadBaseline();
     if (!baseline) {
-      if (config.apiKey) {
-        logger.info('📥 No local baseline found, downloading from Vizzly...');
+      // Only download baselines if explicitly requested via baseline flags
+      if ((baselineBuild || baselineComparison) && config.apiKey) {
+        logger.debug('No local baseline found, downloading from Vizzly');
         await tddService.downloadBaselines(config.build?.environment || 'test', config.build?.branch || null, baselineBuild, baselineComparison);
       } else {
-        logger.info('📝 No local baseline found and no API token - all screenshots will be marked as new');
+        logger.debug('No local baseline found - will create new baselines from first screenshots');
       }
     } else {
-      logger.info(`✅ Using existing baseline: ${colors.cyan(baseline.buildName)}`);
+      logger.debug(`Using existing baseline: ${baseline.buildName}`);
     }
   };
-  const registerBuild = buildId => {
-    builds.set(buildId, {
-      id: buildId,
-      name: `TDD Build ${buildId}`,
-      branch: 'current',
-      environment: 'test',
-      screenshots: [],
-      createdAt: Date.now()
-    });
-    logger.debug(`Registered TDD build: ${buildId}`);
-  };
   const handleScreenshot = async (buildId, name, image, properties = {}) => {
-    const build = builds.get(buildId);
-    if (!build) {
-      throw new Error(`Build ${buildId} not found`);
-    }
-
     // Validate and sanitize screenshot name
     let sanitizedName;
     try {
@@ -81,42 +125,44 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
         }
       };
     }
+    const imageBuffer = Buffer.from(image, 'base64');
+    logger.debug(`Received screenshot: ${name}`);
+    logger.debug(`Image size: ${imageBuffer.length} bytes`);
+    logger.debug(`Properties: ${JSON.stringify(validatedProperties)}`);
 
-    // Create unique screenshot name based on properties
-    let uniqueName = sanitizedName;
-    const relevantProps = [];
-
-    // Add browser to name if provided (already validated)
-    if (validatedProperties.browser) {
-      relevantProps.push(validatedProperties.browser);
-    }
-
-    // Add viewport info if provided (already validated)
-    if (validatedProperties.viewport && validatedProperties.viewport.width && validatedProperties.viewport.height) {
-      relevantProps.push(`${validatedProperties.viewport.width}x${validatedProperties.viewport.height}`);
-    }
+    // Use the sanitized name as-is (no modification with browser/viewport)
+    // Baseline matching uses signature logic (name + viewport_width + browser)
+    const comparison = await tddService.compareScreenshot(sanitizedName, imageBuffer, validatedProperties);
+    logger.debug(`Comparison result: ${comparison.status}`);
 
-    // Combine base name with relevant properties and sanitize the result
-    if (relevantProps.length > 0) {
-      let proposedUniqueName = `${sanitizedName}-${relevantProps.join('-')}`;
-      try {
-        uniqueName = sanitizeScreenshotName(proposedUniqueName);
-      } catch (error) {
-        // If the combined name is invalid, fall back to the base sanitized name
-        uniqueName = sanitizedName;
-        logger.warn(`Combined screenshot name invalid (${error.message}), using base name: ${uniqueName}`);
+    // 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}`;
       }
-    }
-    const screenshot = {
-      name: uniqueName,
+      return filePath;
+    };
+
+    // Record the comparison for the dashboard
+    const newComparison = {
+      name: comparison.name,
       originalName: name,
-      imageData: image,
+      status: comparison.status,
+      baseline: convertPathToUrl(comparison.baseline),
+      current: convertPathToUrl(comparison.current),
+      diff: convertPathToUrl(comparison.diff),
+      diffPercentage: comparison.diffPercentage,
+      threshold: comparison.threshold,
       properties: validatedProperties,
       timestamp: Date.now()
     };
-    build.screenshots.push(screenshot);
-    const imageBuffer = Buffer.from(image, 'base64');
-    const comparison = await tddService.compareScreenshot(uniqueName, imageBuffer, validatedProperties);
+
+    // Update comparison in report data file
+    updateComparison(newComparison);
     if (comparison.status === 'failed') {
       return {
         statusCode: 422,
@@ -174,39 +220,180 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       }
     };
   };
-  const getScreenshotCount = buildId => {
-    const build = builds.get(buildId);
-    return build ? build.screenshots.length : 0;
+  const getResults = async () => {
+    return await tddService.printResults();
   };
-  const finishBuild = async buildId => {
-    const build = builds.get(buildId);
-    if (!build) {
-      throw new Error(`Build ${buildId} not found`);
+  const acceptBaseline = async screenshotName => {
+    try {
+      logger.debug(`Accepting baseline for screenshot: ${screenshotName}`);
+
+      // Use TDD service to accept the baseline
+      const result = await tddService.acceptBaseline(screenshotName);
+
+      // Read current report data and update the comparison status
+      const reportData = readReportData();
+      const comparison = reportData.comparisons.find(c => c.name === screenshotName);
+      if (comparison) {
+        // Update the comparison to passed status
+        const updatedComparison = {
+          ...comparison,
+          status: 'passed',
+          diffPercentage: 0,
+          diff: null
+        };
+        updateComparison(updatedComparison);
+        logger.debug('Comparison updated in report-data.json');
+      } else {
+        logger.error(`Comparison not found in report data for: ${screenshotName}`);
+      }
+      logger.info(`Baseline accepted for ${screenshotName}`);
+      return result;
+    } catch (error) {
+      logger.error(`Failed to accept baseline for ${screenshotName}:`, error);
+      throw error;
     }
-    if (build.screenshots.length === 0) {
-      throw new Error('No screenshots to process. Make sure your tests are calling the Vizzly screenshot function.');
+  };
+  const acceptAllBaselines = async () => {
+    try {
+      logger.debug('Accepting all baselines');
+      const reportData = readReportData();
+      let acceptedCount = 0;
+
+      // Accept all failed or new comparisons
+      for (const comparison of reportData.comparisons) {
+        if (comparison.status === 'failed' || comparison.status === 'new') {
+          await tddService.acceptBaseline(comparison.name);
+
+          // Update the comparison to passed status
+          updateComparison({
+            ...comparison,
+            status: 'passed',
+            diffPercentage: 0,
+            diff: null
+          });
+          acceptedCount++;
+        }
+      }
+      logger.info(`Accepted ${acceptedCount} baselines`);
+      return {
+        count: acceptedCount
+      };
+    } catch (error) {
+      logger.error('Failed to accept all baselines:', error);
+      throw error;
+    }
+  };
+  const resetBaselines = async () => {
+    try {
+      logger.debug('Resetting baselines');
+      const reportData = readReportData();
+      let deletedBaselines = 0;
+      let deletedCurrents = 0;
+      let deletedDiffs = 0;
+
+      // Delete all baseline, current, and diff images
+      for (const comparison of reportData.comparisons) {
+        // Delete baseline image if it exists
+        if (comparison.baseline) {
+          const baselinePath = join(workingDir, '.vizzly', comparison.baseline.replace('/images/', ''));
+          if (existsSync(baselinePath)) {
+            try {
+              const {
+                unlinkSync
+              } = await import('fs');
+              unlinkSync(baselinePath);
+              deletedBaselines++;
+              logger.debug(`Deleted baseline for ${comparison.name}`);
+            } catch (error) {
+              logger.warn(`Failed to delete baseline for ${comparison.name}: ${error.message}`);
+            }
+          }
+        }
+
+        // Delete current screenshot if it exists
+        if (comparison.current) {
+          const currentPath = join(workingDir, '.vizzly', comparison.current.replace('/images/', ''));
+          if (existsSync(currentPath)) {
+            try {
+              const {
+                unlinkSync
+              } = await import('fs');
+              unlinkSync(currentPath);
+              deletedCurrents++;
+              logger.debug(`Deleted current screenshot for ${comparison.name}`);
+            } catch (error) {
+              logger.warn(`Failed to delete current screenshot for ${comparison.name}: ${error.message}`);
+            }
+          }
+        }
+
+        // Delete diff image if it exists
+        if (comparison.diff) {
+          const diffPath = join(workingDir, '.vizzly', comparison.diff.replace('/images/', ''));
+          if (existsSync(diffPath)) {
+            try {
+              const {
+                unlinkSync
+              } = await import('fs');
+              unlinkSync(diffPath);
+              deletedDiffs++;
+              logger.debug(`Deleted diff for ${comparison.name}`);
+            } catch (error) {
+              logger.warn(`Failed to delete diff for ${comparison.name}: ${error.message}`);
+            }
+          }
+        }
+      }
+
+      // Delete baseline metadata
+      const metadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
+      if (existsSync(metadataPath)) {
+        try {
+          const {
+            unlinkSync
+          } = await import('fs');
+          unlinkSync(metadataPath);
+          logger.debug('Deleted baseline metadata');
+        } catch (error) {
+          logger.warn(`Failed to delete baseline metadata: ${error.message}`);
+        }
+      }
+
+      // Clear the report data entirely - fresh start
+      const freshReportData = {
+        timestamp: Date.now(),
+        comparisons: [],
+        summary: {
+          total: 0,
+          passed: 0,
+          failed: 0,
+          errors: 0
+        }
+      };
+      writeFileSync(reportPath, JSON.stringify(freshReportData, null, 2));
+      logger.info(`Baselines reset - ${deletedBaselines} baselines deleted, ${deletedCurrents} current screenshots deleted, ${deletedDiffs} diffs deleted`);
+      return {
+        success: true,
+        deletedBaselines,
+        deletedCurrents,
+        deletedDiffs
+      };
+    } catch (error) {
+      logger.error('Failed to reset baselines:', error);
+      throw error;
     }
-    const results = await tddService.printResults();
-    builds.delete(buildId);
-    return {
-      id: buildId,
-      name: build.name,
-      tddMode: true,
-      results,
-      url: null,
-      passed: results.failed === 0 && results.errors === 0
-    };
   };
   const cleanup = () => {
-    builds.clear();
+    // Report data is persisted to file, no in-memory cleanup needed
     logger.debug('TDD handler cleanup completed');
   };
   return {
     initialize,
-    registerBuild,
     handleScreenshot,
-    getScreenshotCount,
-    finishBuild,
+    getResults,
+    acceptBaseline,
+    acceptAllBaselines,
+    resetBaselines,
     cleanup
   };
 };