@vizzly-testing/cli 0.11.2 → 0.13.0

package/dist/services/tdd-service.js

@@ -1,5 +1,7 @@
 import { writeFileSync, readFileSync, existsSync, mkdirSync } from 'fs';
 import { join } from 'path';
+import { compare } from '@vizzly-testing/honeydiff';
+import crypto from 'crypto';
 import { ApiService } from '../services/api-service.js';
 import { createServiceLogger } from '../utils/logger-factory.js';
 import { colors } from '../utils/colors.js';
@@ -13,13 +15,26 @@ const logger = createServiceLogger('TDD');
 /**
  * Generate a screenshot signature for baseline matching
  * Uses same logic as screenshot-identity.js: name + viewport_width + browser
+ *
+ * Matches backend signature generation which uses:
+ * - screenshot.name
+ * - screenshot.viewport_width (top-level property)
+ * - screenshot.browser (top-level property)
  */
 function generateScreenshotSignature(name, properties = {}) {
   let parts = [name];
 
+  // Check for viewport_width as top-level property first (backend format)
+  let viewportWidth = properties.viewport_width;
+
+  // Fallback to nested viewport.width (SDK format)
+  if (!viewportWidth && properties.viewport?.width) {
+    viewportWidth = properties.viewport.width;
+  }
+
   // Add viewport width if present
-  if (properties.viewport?.width) {
-    parts.push(properties.viewport.width.toString());
+  if (viewportWidth) {
+    parts.push(viewportWidth.toString());
   }
 
   // Add browser if present
@@ -37,6 +52,14 @@ function signatureToFilename(signature) {
   return signature.replace(/\|/g, '_');
 }
 
+/**
+ * Generate a stable unique ID from signature for TDD comparisons
+ * This allows UI to reference specific variants without database IDs
+ */
+function generateComparisonId(signature) {
+  return crypto.createHash('sha256').update(signature).digest('hex').slice(0, 16);
+}
+
 /**
  * Create a new TDD service instance
  */
@@ -133,7 +156,7 @@ export class TddService {
         }
       } else if (comparisonId) {
         // Use specific comparison ID - download only this comparison's baseline screenshot
-        logger.info(`📌 Using comparison: ${comparisonId}`);
+        logger.info(`Using comparison: ${comparisonId}`);
         const comparison = await this.api.getComparison(comparisonId);
 
         // A comparison doesn't have baselineBuild directly - we need to get it
@@ -148,6 +171,38 @@ export class TddService {
           throw new Error(`Baseline screenshot for comparison ${comparisonId} has no download URL`);
         }
 
+        // Extract properties from the current screenshot to ensure signature matching
+        // The baseline should use the same properties (viewport/browser) as the current screenshot
+        // so that generateScreenshotSignature produces the correct filename
+        // Use current screenshot properties since we're downloading baseline to compare against current
+        let screenshotProperties = {};
+
+        // Build properties from comparison API fields (added in backend update)
+        // Use current_* fields since we're matching against the current screenshot being tested
+        if (comparison.current_viewport_width || comparison.current_browser) {
+          if (comparison.current_viewport_width) {
+            screenshotProperties.viewport = {
+              width: comparison.current_viewport_width,
+              height: comparison.current_viewport_height
+            };
+          }
+          if (comparison.current_browser) {
+            screenshotProperties.browser = comparison.current_browser;
+          }
+        } else if (comparison.baseline_viewport_width || comparison.baseline_browser) {
+          // Fallback to baseline properties if current not available
+          if (comparison.baseline_viewport_width) {
+            screenshotProperties.viewport = {
+              width: comparison.baseline_viewport_width,
+              height: comparison.baseline_viewport_height
+            };
+          }
+          if (comparison.baseline_browser) {
+            screenshotProperties.browser = comparison.baseline_browser;
+          }
+        }
+        logger.info(`📊 Extracted properties for signature: ${JSON.stringify(screenshotProperties)}`);
+
         // For a specific comparison, we only download that one baseline screenshot
         // Create a mock build structure with just this one screenshot
         baselineBuild = {
@@ -157,8 +212,8 @@ export class TddService {
             id: comparison.baseline_screenshot.id,
             name: comparison.baseline_name || comparison.current_name,
             original_url: baselineUrl,
-            metadata: {},
-            properties: {}
+            metadata: screenshotProperties,
+            properties: screenshotProperties
           }]
         };
       } else {
@@ -193,12 +248,6 @@ export class TddService {
       logger.info(`Using baseline from build: ${colors.cyan(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
       logger.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
 
-      // Debug screenshots structure (only in debug mode)
-      logger.debug(`📊 Screenshots array structure:`, {
-        screenshotSample: buildDetails.screenshots.slice(0, 2),
-        totalCount: buildDetails.screenshots.length
-      });
-
       // Check existing baseline metadata for efficient SHA comparison
       const existingBaseline = await this.loadBaseline();
       const existingShaMap = new Map();
@@ -479,6 +528,12 @@ export class TddService {
       validatedProperties = {};
     }
 
+    // Normalize properties to match backend format (viewport_width at top level)
+    // This ensures signature generation matches backend's screenshot-identity.js
+    if (validatedProperties.viewport?.width && !validatedProperties.viewport_width) {
+      validatedProperties.viewport_width = validatedProperties.viewport.width;
+    }
+
     // Generate signature for baseline matching (name + viewport_width + browser)
     const signature = generateScreenshotSignature(sanitizedName, validatedProperties);
     const filename = signatureToFilename(signature);
@@ -536,12 +591,14 @@ export class TddService {
       writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
       logger.debug(`✅ Created baseline for ${sanitizedName}`);
       const result = {
+        id: generateComparisonId(signature),
         name: sanitizedName,
         status: 'new',
         baseline: baselineImagePath,
         current: currentImagePath,
         diff: null,
-        properties: validatedProperties
+        properties: validatedProperties,
+        signature
       };
       this.comparisons.push(result);
       return result;
@@ -549,55 +606,71 @@ export class TddService {
 
     // Baseline exists - compare with it
     try {
-      // Use odiff Node.js API to compare images
-      const {
-        compare
-      } = await import('odiff-bin');
-
       // Log file sizes for debugging
       const baselineSize = readFileSync(baselineImagePath).length;
       const currentSize = readFileSync(currentImagePath).length;
       logger.debug(`Comparing ${sanitizedName}`);
       logger.debug(`Baseline: ${baselineImagePath} (${baselineSize} bytes)`);
       logger.debug(`Current:  ${currentImagePath} (${currentSize} bytes)`);
-      const result = await compare(baselineImagePath, currentImagePath, diffImagePath, {
-        threshold: this.threshold,
-        outputDiffMask: true,
-        failOnLayoutDiff: true // Fail if image dimensions differ
+
+      // Try to compare - honeydiff will throw if dimensions don't match
+      const result = await compare(baselineImagePath, currentImagePath, {
+        colorThreshold: this.threshold,
+        // YIQ color threshold (0.0-1.0), default 0.1
+        antialiasing: true,
+        diffPath: diffImagePath,
+        overwrite: true,
+        includeClusters: true // Enable spatial clustering analysis
       });
-      if (result.match) {
+      if (!result.isDifferent) {
         // Images match
         const comparison = {
+          id: generateComparisonId(signature),
           name: sanitizedName,
           status: 'passed',
           baseline: baselineImagePath,
           current: currentImagePath,
           diff: null,
           properties: validatedProperties,
-          threshold: this.threshold
+          signature,
+          threshold: this.threshold,
+          // Include honeydiff metrics even for passing comparisons
+          totalPixels: result.totalPixels,
+          aaPixelsIgnored: result.aaPixelsIgnored,
+          aaPercentage: result.aaPercentage
         };
         logger.debug(`PASSED ${sanitizedName}`);
         this.comparisons.push(comparison);
         return comparison;
       } else {
         // Images differ
-        let diffInfo = '';
-        if (result.reason === 'pixel-diff') {
-          diffInfo = ` (${result.diffPercentage.toFixed(2)}% different, ${result.diffCount} pixels)`;
-        } else if (result.reason === 'layout-diff') {
-          diffInfo = ' (layout difference)';
+        let diffInfo = ` (${result.diffPercentage.toFixed(2)}% different, ${result.diffPixels} pixels)`;
+
+        // Add cluster info to log if available
+        if (result.diffClusters && result.diffClusters.length > 0) {
+          diffInfo += `, ${result.diffClusters.length} region${result.diffClusters.length > 1 ? 's' : ''}`;
         }
         const comparison = {
+          id: generateComparisonId(signature),
           name: sanitizedName,
           status: 'failed',
           baseline: baselineImagePath,
           current: currentImagePath,
           diff: diffImagePath,
           properties: validatedProperties,
+          signature,
           threshold: this.threshold,
-          diffPercentage: result.reason === 'pixel-diff' ? result.diffPercentage : null,
-          diffCount: result.reason === 'pixel-diff' ? result.diffCount : null,
-          reason: result.reason
+          diffPercentage: result.diffPercentage,
+          diffCount: result.diffPixels,
+          reason: 'pixel-diff',
+          // Honeydiff metrics
+          totalPixels: result.totalPixels,
+          aaPixelsIgnored: result.aaPixelsIgnored,
+          aaPercentage: result.aaPercentage,
+          boundingBox: result.boundingBox,
+          heightDiff: result.heightDiff,
+          intensityStats: result.intensityStats,
+          diffClusters: result.diffClusters
         };
         logger.warn(`❌ ${colors.red('FAILED')} ${sanitizedName} - differences detected${diffInfo}`);
         logger.info(`    Diff saved to: ${diffImagePath}`);
@@ -605,15 +678,69 @@ export class TddService {
         return comparison;
       }
     } catch (error) {
-      // Handle file errors or other issues
+      // Check if error is due to dimension mismatch
+      const isDimensionMismatch = error.message && error.message.includes("Image dimensions don't match");
+      if (isDimensionMismatch) {
+        // Different dimensions = different screenshot signature
+        // This shouldn't happen if signatures are working correctly, but handle gracefully
+        logger.warn(`⚠️  Dimension mismatch for ${sanitizedName} - baseline file exists but has different dimensions`);
+        logger.warn(`   This indicates a signature collision. Creating new baseline with correct signature.`);
+        logger.debug(`   Error: ${error.message}`);
+
+        // Create a new baseline for this screenshot (overwriting the incorrect one)
+        writeFileSync(baselineImagePath, imageBuffer);
+
+        // Update baseline metadata
+        if (!this.baselineData) {
+          this.baselineData = {
+            buildId: 'local-baseline',
+            buildName: 'Local TDD Baseline',
+            environment: 'test',
+            branch: 'local',
+            threshold: this.threshold,
+            screenshots: []
+          };
+        }
+        const screenshotEntry = {
+          name: sanitizedName,
+          properties: validatedProperties,
+          path: baselineImagePath,
+          signature: signature
+        };
+        const existingIndex = this.baselineData.screenshots.findIndex(s => s.signature === signature);
+        if (existingIndex >= 0) {
+          this.baselineData.screenshots[existingIndex] = screenshotEntry;
+        } else {
+          this.baselineData.screenshots.push(screenshotEntry);
+        }
+        const metadataPath = join(this.baselinePath, 'metadata.json');
+        writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
+        logger.info(`✅ Created new baseline for ${sanitizedName} (different dimensions)`);
+        const comparison = {
+          id: generateComparisonId(signature),
+          name: sanitizedName,
+          status: 'new',
+          baseline: baselineImagePath,
+          current: currentImagePath,
+          diff: null,
+          properties: validatedProperties,
+          signature
+        };
+        this.comparisons.push(comparison);
+        return comparison;
+      }
+
+      // Handle other file errors or issues
       logger.error(`❌ Error comparing ${sanitizedName}: ${error.message}`);
       const comparison = {
+        id: generateComparisonId(signature),
         name: sanitizedName,
         status: 'error',
         baseline: baselineImagePath,
         current: currentImagePath,
         diff: null,
         properties: validatedProperties,
+        signature,
         error: error.message
       };
       this.comparisons.push(comparison);
@@ -858,12 +985,14 @@ export class TddService {
     const metadataPath = join(this.baselinePath, 'metadata.json');
     writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
     const result = {
+      id: generateComparisonId(signature),
       name,
       status: 'new',
       baseline: baselineImagePath,
       current: currentImagePath,
       diff: null,
-      properties
+      properties,
+      signature
     };
     this.comparisons.push(result);
     logger.info(`✅ Baseline created for ${name}`);
@@ -913,12 +1042,14 @@ export class TddService {
     const metadataPath = join(this.baselinePath, 'metadata.json');
     writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
     const result = {
+      id: generateComparisonId(signature),
       name,
       status: 'baseline-updated',
       baseline: baselineImagePath,
       current: currentImagePath,
       diff: null,
-      properties
+      properties,
+      signature
     };
     this.comparisons.push(result);
     logger.info(`🐻 Baseline set for ${name}`);
@@ -927,55 +1058,45 @@ export class TddService {
 
   /**
    * Accept a current screenshot as the new baseline
-   * @param {string} name - Screenshot name to accept
+   * @param {string} id - Comparison ID to accept (generated from signature)
    * @returns {Object} Result object
    */
-  async acceptBaseline(name) {
-    const sanitizedName = sanitizeScreenshotName(name);
-    logger.debug(`Starting accept baseline for: ${sanitizedName}`);
-
-    // Find the comparison to get properties
-    let comparison = this.comparisons.find(c => c.name === sanitizedName);
+  async acceptBaseline(id) {
+    // Find the comparison by ID
+    let comparison = this.comparisons.find(c => c.id === id);
     if (!comparison) {
-      throw new Error(`No comparison found for screenshot: ${name}`);
+      throw new Error(`No comparison found with ID: ${id}`);
     }
+    const sanitizedName = comparison.name;
     let properties = comparison.properties || {};
     let signature = generateScreenshotSignature(sanitizedName, properties);
     let filename = signatureToFilename(signature);
 
     // Find the current screenshot file
     const currentImagePath = safePath(this.currentPath, `${filename}.png`);
-    logger.debug(`Looking for current screenshot at: ${currentImagePath}`);
     if (!existsSync(currentImagePath)) {
       logger.error(`Current screenshot not found at: ${currentImagePath}`);
-      throw new Error(`Current screenshot not found: ${name} (looked at ${currentImagePath})`);
+      throw new Error(`Current screenshot not found: ${sanitizedName} (looked at ${currentImagePath})`);
     }
 
     // Read the current image
     const imageBuffer = readFileSync(currentImagePath);
-    logger.debug(`Read current image: ${imageBuffer.length} bytes`);
 
     // Create baseline directory if it doesn't exist
     if (!existsSync(this.baselinePath)) {
       mkdirSync(this.baselinePath, {
         recursive: true
       });
-      logger.debug(`Created baseline directory: ${this.baselinePath}`);
     }
 
     // Update the baseline
     const baselineImagePath = safePath(this.baselinePath, `${filename}.png`);
-    logger.debug(`Writing baseline to: ${baselineImagePath}`);
 
     // Write the baseline image directly
     writeFileSync(baselineImagePath, imageBuffer);
-    logger.debug(`Wrote baseline image: ${imageBuffer.length} bytes`);
 
     // Verify the write
-    if (existsSync(baselineImagePath)) {
-      const writtenSize = readFileSync(baselineImagePath).length;
-      logger.debug(`Verified baseline file exists: ${writtenSize} bytes`);
-    } else {
+    if (!existsSync(baselineImagePath)) {
       logger.error(`Baseline file does not exist after write!`);
     }
 
@@ -989,7 +1110,6 @@ export class TddService {
         threshold: this.threshold,
         screenshots: []
       };
-      logger.debug(`Created new baseline metadata`);
     }
 
     // Add or update screenshot in baseline metadata
@@ -1002,17 +1122,13 @@ export class TddService {
     const existingIndex = this.baselineData.screenshots.findIndex(s => s.signature === signature);
     if (existingIndex >= 0) {
       this.baselineData.screenshots[existingIndex] = screenshotEntry;
-      logger.debug(`Updated existing metadata entry at index ${existingIndex}`);
     } else {
       this.baselineData.screenshots.push(screenshotEntry);
-      logger.debug(`Added new metadata entry (total: ${this.baselineData.screenshots.length})`);
     }
 
     // Save updated metadata
     const metadataPath = join(this.baselinePath, 'metadata.json');
     writeFileSync(metadataPath, JSON.stringify(this.baselineData, null, 2));
-    logger.debug(`Saved metadata to: ${metadataPath}`);
-    logger.debug(`Accepted ${sanitizedName} as new baseline`);
     return {
       name: sanitizedName,
       status: 'accepted',

package/dist/types/reporter/src/components/comparison/comparison-card.d.ts

@@ -1,6 +1,7 @@
-export default function ComparisonCard({ comparison, onAccept, onReject, userAction, }: {
+export default function ComparisonCard({ comparison, onAccept, onReject, userAction, variantSelector, }: {
     comparison: any;
     onAccept: any;
     onReject: any;
     userAction: any;
+    variantSelector?: any;
 }): any;

package/dist/types/reporter/src/components/comparison/comparison-group.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Comparison group component that displays multiple variants of the same screenshot
+ * Matches cloud product's grouped screenshot display
+ */
+export default function ComparisonGroup({ group, onAccept, onReject, loadingStates, }: {
+    group: any;
+    onAccept: any;
+    onReject: any;
+    loadingStates: any;
+}): any;

package/dist/types/reporter/src/components/comparison/variant-selector.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Variant selector for toggling between different viewport sizes and browsers
+ * Matches cloud product's variant selection UI
+ */
+export default function VariantSelector({ group, selectedIndex, onSelect }: {
+    group: any;
+    selectedIndex: any;
+    onSelect: any;
+}): any;

package/dist/types/reporter/src/services/api-client.d.ts

@@ -1,4 +1,4 @@
 export function fetchReportData(): Promise<any>;
-export function acceptBaseline(screenshotName: any): Promise<any>;
+export function acceptBaseline(comparisonId: any): Promise<any>;
 export function acceptAllBaselines(): Promise<any>;
 export function resetBaselines(): Promise<any>;

package/dist/types/server/handlers/api-handler.d.ts

@@ -7,6 +7,9 @@ export function createApiHandler(apiService: any): {
             count: number;
             message: string;
             error?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
             name?: undefined;
         };
     } | {
@@ -17,6 +20,48 @@ export function createApiHandler(apiService: any): {
             disabled?: undefined;
             count?: undefined;
             message?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
+            name?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            originalPath: any;
+            success?: undefined;
+            disabled?: undefined;
+            count?: undefined;
+            message?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
+            name?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            filePath: any;
+            success?: undefined;
+            disabled?: undefined;
+            count?: undefined;
+            message?: undefined;
+            originalPath?: undefined;
+            receivedType?: undefined;
+            name?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            receivedType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+            success?: undefined;
+            disabled?: undefined;
+            count?: undefined;
+            message?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
             name?: undefined;
         };
     } | {
@@ -28,6 +73,9 @@ export function createApiHandler(apiService: any): {
             disabled?: undefined;
             message?: undefined;
             error?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
         };
     }>;
     getScreenshotCount: () => number;

package/dist/types/server/handlers/tdd-handler.d.ts

@@ -6,6 +6,65 @@ export function createTddHandler(config: any, workingDir: any, baselineBuild: an
             error: string;
             details: any;
             tddMode: boolean;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
+            comparison?: undefined;
+            status?: undefined;
+            message?: undefined;
+            success?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            originalPath: any;
+            tddMode: boolean;
+            details?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
+            comparison?: undefined;
+            status?: undefined;
+            message?: undefined;
+            success?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            filePath: any;
+            tddMode: boolean;
+            details?: undefined;
+            originalPath?: undefined;
+            receivedType?: undefined;
+            comparison?: undefined;
+            status?: undefined;
+            message?: undefined;
+            success?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            tddMode: boolean;
+            details?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
+            comparison?: undefined;
+            status?: undefined;
+            message?: undefined;
+            success?: undefined;
+        };
+    } | {
+        statusCode: number;
+        body: {
+            error: string;
+            receivedType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+            tddMode: boolean;
+            details?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
             comparison?: undefined;
             status?: undefined;
             message?: undefined;
@@ -26,6 +85,9 @@ export function createTddHandler(config: any, workingDir: any, baselineBuild: an
                 threshold: any;
             };
             tddMode: boolean;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
             status?: undefined;
             message?: undefined;
             success?: undefined;
@@ -47,17 +109,9 @@ export function createTddHandler(config: any, workingDir: any, baselineBuild: an
             tddMode: boolean;
             error?: undefined;
             details?: undefined;
-            success?: undefined;
-        };
-    } | {
-        statusCode: number;
-        body: {
-            error: string;
-            tddMode: boolean;
-            details?: undefined;
-            comparison?: undefined;
-            status?: undefined;
-            message?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
             success?: undefined;
         };
     } | {
@@ -76,6 +130,9 @@ export function createTddHandler(config: any, workingDir: any, baselineBuild: an
             tddMode: boolean;
             error?: undefined;
             details?: undefined;
+            originalPath?: undefined;
+            filePath?: undefined;
+            receivedType?: undefined;
             status?: undefined;
             message?: undefined;
         };
@@ -89,7 +146,7 @@ export function createTddHandler(config: any, workingDir: any, baselineBuild: an
         comparisons: any[];
         baseline: any;
     }>;
-    acceptBaseline: (screenshotName: any) => Promise<any>;
+    acceptBaseline: (comparisonId: any) => Promise<any>;
     acceptAllBaselines: () => Promise<{
         count: number;
     }>;