@vizzly-testing/cli 0.3.2 → 0.5.0

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

@@ -0,0 +1,138 @@
+import { Buffer } from 'buffer';
+import { createServiceLogger } from '../../utils/logger-factory.js';
+import { TddService } from '../../services/tdd-service.js';
+import { colors } from '../../utils/colors.js';
+const logger = createServiceLogger('TDD-HANDLER');
+export const createTddHandler = (config, workingDir, baselineBuild, baselineComparison) => {
+  const tddService = new TddService(config, workingDir);
+  const builds = new Map();
+  const initialize = async () => {
+    logger.info('🔄 TDD mode enabled - setting up local comparison...');
+    const baseline = await tddService.loadBaseline();
+    if (!baseline) {
+      if (config.apiKey) {
+        logger.info('📥 No local baseline found, downloading from Vizzly...');
+        await tddService.downloadBaselines(baselineBuild, baselineComparison);
+      } else {
+        logger.info('📝 No local baseline found and no API token - all screenshots will be marked as new');
+      }
+    } else {
+      logger.info(`✅ Using existing baseline: ${colors.cyan(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`);
+    }
+    const screenshot = {
+      name,
+      imageData: image,
+      properties,
+      timestamp: Date.now()
+    };
+    build.screenshots.push(screenshot);
+    const imageBuffer = Buffer.from(image, 'base64');
+    const comparison = await tddService.compareScreenshot(name, imageBuffer, properties);
+    if (comparison.status === 'failed') {
+      return {
+        statusCode: 422,
+        body: {
+          error: 'Visual difference detected',
+          details: `Screenshot '${name}' differs from baseline`,
+          comparison: {
+            name: comparison.name,
+            status: comparison.status,
+            baseline: comparison.baseline,
+            current: comparison.current,
+            diff: comparison.diff
+          },
+          tddMode: true
+        }
+      };
+    }
+    if (comparison.status === 'baseline-updated') {
+      return {
+        statusCode: 200,
+        body: {
+          status: 'success',
+          message: `Baseline updated for ${name}`,
+          comparison: {
+            name: comparison.name,
+            status: comparison.status,
+            baseline: comparison.baseline,
+            current: comparison.current
+          },
+          tddMode: true
+        }
+      };
+    }
+    if (comparison.status === 'error') {
+      return {
+        statusCode: 500,
+        body: {
+          error: `Comparison failed: ${comparison.error}`,
+          tddMode: true
+        }
+      };
+    }
+    logger.debug(`✅ TDD: ${comparison.status.toUpperCase()} ${name}`);
+    return {
+      statusCode: 200,
+      body: {
+        success: true,
+        comparison: {
+          name: comparison.name,
+          status: comparison.status
+        },
+        tddMode: true
+      }
+    };
+  };
+  const getScreenshotCount = buildId => {
+    const build = builds.get(buildId);
+    return build ? build.screenshots.length : 0;
+  };
+  const finishBuild = async buildId => {
+    const build = builds.get(buildId);
+    if (!build) {
+      throw new Error(`Build ${buildId} not found`);
+    }
+    if (build.screenshots.length === 0) {
+      throw new Error('No screenshots to process. Make sure your tests are calling the Vizzly screenshot function.');
+    }
+    const results = 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();
+    logger.debug('TDD handler cleanup completed');
+  };
+  return {
+    initialize,
+    registerBuild,
+    handleScreenshot,
+    getScreenshotCount,
+    finishBuild,
+    cleanup
+  };
+};

package/dist/server/http-server.js

@@ -0,0 +1,132 @@
+import { createServer } from 'http';
+import { createServiceLogger } from '../utils/logger-factory.js';
+const logger = createServiceLogger('HTTP-SERVER');
+export const createHttpServer = (port, screenshotHandler, emitter = null) => {
+  let server = null;
+  const parseRequestBody = req => {
+    return new Promise((resolve, reject) => {
+      let body = '';
+      req.on('data', chunk => {
+        body += chunk.toString();
+      });
+      req.on('end', () => {
+        try {
+          const data = JSON.parse(body);
+          resolve(data);
+        } catch {
+          reject(new Error('Invalid JSON'));
+        }
+      });
+      req.on('error', reject);
+    });
+  };
+  const handleRequest = async (req, res) => {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+    res.setHeader('Content-Type', 'application/json');
+    if (req.method === 'OPTIONS') {
+      res.statusCode = 200;
+      res.end();
+      return;
+    }
+    if (req.method === 'GET' && req.url === '/health') {
+      res.statusCode = 200;
+      res.end(JSON.stringify({
+        status: 'ok',
+        port: port,
+        uptime: process.uptime()
+      }));
+      return;
+    }
+    if (req.method === 'POST' && req.url === '/screenshot') {
+      try {
+        const body = await parseRequestBody(req);
+        const {
+          buildId,
+          name,
+          properties,
+          image
+        } = body;
+        if (!buildId || !name || !image) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'buildId, name, and image are required'
+          }));
+          return;
+        }
+        const result = await screenshotHandler.handleScreenshot(buildId, name, image, properties);
+
+        // Emit screenshot captured event if emitter is available
+        if (emitter && result.statusCode === 200) {
+          emitter.emit('screenshot-captured', {
+            name,
+            count: screenshotHandler.getScreenshotCount?.(buildId) || 0,
+            skipped: result.body?.skipped
+          });
+        }
+        res.statusCode = result.statusCode;
+        res.end(JSON.stringify(result.body));
+      } catch (error) {
+        logger.error('Screenshot processing error:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: 'Failed to process screenshot'
+        }));
+      }
+      return;
+    }
+    res.statusCode = 404;
+    res.end(JSON.stringify({
+      error: 'Not found'
+    }));
+  };
+  const start = () => {
+    return new Promise((resolve, reject) => {
+      server = createServer(async (req, res) => {
+        try {
+          await handleRequest(req, res);
+        } catch (error) {
+          logger.error('Server error:', error);
+          res.statusCode = 500;
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify({
+            error: 'Internal server error'
+          }));
+        }
+      });
+      server.listen(port, '127.0.0.1', error => {
+        if (error) {
+          reject(error);
+        } else {
+          logger.debug(`HTTP server listening on http://127.0.0.1:${port}`);
+          resolve();
+        }
+      });
+      server.on('error', error => {
+        if (error.code === 'EADDRINUSE') {
+          reject(new Error(`Port ${port} is already in use. Try a different port with --port.`));
+        } else {
+          reject(error);
+        }
+      });
+    });
+  };
+  const stop = () => {
+    if (server) {
+      return new Promise(resolve => {
+        server.close(() => {
+          server = null;
+          logger.debug('HTTP server stopped');
+          resolve();
+        });
+      });
+    }
+    return Promise.resolve();
+  };
+  return {
+    start,
+    stop,
+    getServer: () => server
+  };
+};

package/dist/services/api-service.js

@@ -16,6 +16,7 @@ export class ApiService {
   constructor(options = {}) {
     this.baseUrl = options.baseUrl || getApiUrl();
     this.token = options.token || getApiToken();
+    this.uploadAll = options.uploadAll || false;
 
     // Build User-Agent string
     const command = options.command || 'run'; // Default to 'run' for API service
@@ -104,7 +105,9 @@ export class ApiService {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify(metadata)
+      body: JSON.stringify({
+        build: metadata
+      })
     });
   }
 
@@ -147,7 +150,24 @@ export class ApiService {
    * @returns {Promise<Object>} Upload result
    */
   async uploadScreenshot(buildId, name, buffer, metadata = {}) {
-    // Calculate SHA256 of the image
+    // Skip SHA deduplication entirely if uploadAll flag is set
+    if (this.uploadAll) {
+      // Upload directly without SHA calculation or checking
+      return this.request(`/api/sdk/builds/${buildId}/screenshots`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          name,
+          image_data: buffer.toString('base64'),
+          properties: metadata ?? {}
+          // No SHA included when bypassing deduplication
+        })
+      });
+    }
+
+    // Normal flow with SHA deduplication
     const sha256 = crypto.createHash('sha256').update(buffer).digest('hex');
 
     // Check if this SHA already exists

package/dist/services/server-manager.js

@@ -1,44 +1,43 @@
 /**
  * Server Manager Service
- * Manages the Vizzly HTTP server
+ * Manages the HTTP server with functional handlers
  */
 
 import { BaseService } from './base-service.js';
-import { VizzlyServer } from '../server/index.js';
+import { createHttpServer } from '../server/http-server.js';
+import { createTddHandler } from '../server/handlers/tdd-handler.js';
+import { createApiHandler } from '../server/handlers/api-handler.js';
 import { EventEmitter } from 'events';
 export class ServerManager extends BaseService {
   constructor(config, logger) {
     super(config, {
       logger
     });
-    this.server = null;
+    this.httpServer = null;
+    this.handler = null;
+    this.emitter = null;
   }
-  async start(buildId = null, buildInfo = null, mode = 'lazy') {
-    if (this.started) {
-      this.logger.warn(`${this.constructor.name} already started`);
-      return;
-    }
-
-    // Create event emitter for server events
-    const emitter = new EventEmitter();
-    this.server = new VizzlyServer({
-      port: this.config?.server?.port || 47392,
-      config: this.config,
-      buildId,
-      buildInfo,
-      vizzlyApi: buildInfo || mode === 'eager' ? await this.createApiService() : null,
-      tddMode: mode === 'tdd',
-      // TDD mode only when explicitly set
-      baselineBuild: this.config?.baselineBuildId,
-      baselineComparison: this.config?.baselineComparisonId,
-      workingDir: process.cwd(),
-      emitter // Pass the emitter to the server
-    });
-    await super.start();
+  async start(buildId = null, tddMode = false) {
+    this.buildId = buildId;
+    this.tddMode = tddMode;
+    return super.start();
   }
   async onStart() {
-    if (this.server) {
-      await this.server.start();
+    this.emitter = new EventEmitter();
+    const port = this.config?.server?.port || 47392;
+    if (this.tddMode) {
+      this.handler = createTddHandler(this.config, process.cwd(), this.config?.baselineBuildId, this.config?.baselineComparisonId);
+      await this.handler.initialize();
+      if (this.buildId) {
+        this.handler.registerBuild(this.buildId);
+      }
+    } else {
+      const apiService = await this.createApiService();
+      this.handler = createApiHandler(apiService);
+    }
+    this.httpServer = createHttpServer(port, this.handler, this.emitter);
+    if (this.httpServer) {
+      await this.httpServer.start();
     }
   }
   async createApiService() {
@@ -54,8 +53,25 @@ export class ServerManager extends BaseService {
     });
   }
   async onStop() {
-    if (this.server) {
-      await this.server.stop();
+    if (this.httpServer) {
+      await this.httpServer.stop();
     }
+    if (this.handler?.cleanup) {
+      try {
+        this.handler.cleanup();
+      } catch (error) {
+        this.logger.debug('Handler cleanup error:', error.message);
+        // Don't throw - cleanup errors shouldn't fail the stop process
+      }
+    }
+  }
+
+  // Expose server interface for compatibility
+  get server() {
+    return {
+      emitter: this.emitter,
+      getScreenshotCount: buildId => this.handler?.getScreenshotCount?.(buildId) || 0,
+      finishBuild: buildId => this.handler?.finishBuild?.(buildId)
+    };
   }
 }

package/dist/services/test-runner.js

@@ -40,87 +40,47 @@ export class TestRunner extends BaseService {
       };
     }
     try {
-      let buildInfo = null;
       let buildUrl = null;
       let screenshotCount = 0;
-      if (tdd) {
-        // TDD mode: create local build for fast feedback
-        this.logger.debug('TDD mode: creating local build...');
-        const build = await this.buildManager.createBuild(options);
-        buildId = build.id;
-        this.logger.debug(`TDD build created with ID: ${build.id}`);
-      } else if (options.eager) {
-        // Eager mode: create build immediately via API
-        this.logger.debug('Eager mode: creating build via API...');
+
+      // Create build based on mode
+      buildId = await this.createBuild(options, tdd);
+      if (!tdd && buildId) {
+        // Get build URL for API mode
         const apiService = await this.createApiService();
         if (apiService) {
-          const buildResult = await apiService.createBuild({
-            build: {
-              name: options.buildName || `Test Run ${new Date().toISOString()}`,
-              branch: options.branch || 'main',
-              environment: options.environment || 'test',
-              commit_sha: options.commit,
-              commit_message: options.message
+          try {
+            const build = await apiService.getBuild(buildId);
+            buildUrl = build.url;
+            if (buildUrl) {
+              this.logger.info(`Build URL: ${buildUrl}`);
             }
-          });
-          buildId = buildResult.id;
-          buildUrl = buildResult.url;
-          this.logger.debug(`Eager build created with ID: ${buildId}`);
-          if (buildUrl) {
-            this.logger.info(`Build URL: ${buildUrl}`);
+          } catch (error) {
+            this.logger.debug('Could not retrieve build URL:', error.message);
           }
-
-          // Emit build created event for eager mode
-          this.emit('build-created', {
-            buildId: buildResult.id,
-            url: buildResult.url,
-            name: buildResult.name || options.buildName
-          });
-        } else {
-          this.logger.warn('No API key available for eager build creation, falling back to lazy mode');
         }
-      } else {
-        // Lazy mode: prepare build info for API creation on first screenshot
-        buildInfo = {
-          buildName: options.buildName || `Test Run ${new Date().toISOString()}`,
-          branch: options.branch || 'main',
-          environment: options.environment || 'test',
-          commitSha: options.commit,
-          commitMessage: options.message
-        };
       }
 
-      // Start server with appropriate configuration
-      const mode = tdd ? 'tdd' : options.eager ? 'eager' : 'lazy';
-      await this.serverManager.start(buildId, buildInfo, mode);
+      // Start server with appropriate handler
+      await this.serverManager.start(buildId, tdd);
 
       // Forward server events
-      if (this.serverManager.server && this.serverManager.server.emitter) {
-        this.serverManager.server.emitter.on('build-created', buildInfo => {
-          // Update local buildId and buildUrl from server
-          buildId = buildInfo.buildId;
-          buildUrl = buildInfo.url;
-          this.emit('build-created', buildInfo);
-        });
+      if (this.serverManager.server?.emitter) {
         this.serverManager.server.emitter.on('screenshot-captured', screenshotInfo => {
           screenshotCount++;
           this.emit('screenshot-captured', screenshotInfo);
         });
       }
-      if (tdd) {
-        this.logger.debug('TDD service ready for comparisons');
-      }
       const env = {
         ...process.env,
         VIZZLY_SERVER_URL: `http://localhost:${this.config.server.port}`,
-        VIZZLY_BUILD_ID: buildId || 'lazy',
-        // Use 'lazy' for API-driven builds
+        VIZZLY_BUILD_ID: buildId,
         VIZZLY_ENABLED: 'true',
         VIZZLY_SET_BASELINE: options.setBaseline || options['set-baseline'] ? 'true' : 'false'
       };
       await this.executeTestCommand(testCommand, env);
 
-      // Finalize builds based on mode
+      // Finalize build
       const executionTime = Date.now() - startTime;
       await this.finalizeBuild(buildId, tdd, true, executionTime);
       return {
@@ -133,14 +93,45 @@ export class TestRunner extends BaseService {
     } catch (error) {
       this.logger.error('Test run failed:', error);
 
-      // Finalize builds on failure too
+      // Finalize build on failure
       const executionTime = Date.now() - startTime;
       await this.finalizeBuild(buildId, tdd, false, executionTime);
       throw error;
     } finally {
       await this.serverManager.stop();
-      if (tdd && this.tddService && typeof this.tddService.stop === 'function') {
-        await this.tddService.stop();
+    }
+  }
+  async createBuild(options, tdd) {
+    if (tdd) {
+      // TDD mode: create local build
+      this.logger.debug('TDD mode: creating local build...');
+      const build = await this.buildManager.createBuild(options);
+      this.logger.debug(`TDD build created with ID: ${build.id}`);
+      return build.id;
+    } else {
+      // API mode: create build via API
+      this.logger.debug('Creating build via API...');
+      const apiService = await this.createApiService();
+      if (apiService) {
+        const buildResult = await apiService.createBuild({
+          name: options.buildName || `Test Run ${new Date().toISOString()}`,
+          branch: options.branch || 'main',
+          environment: options.environment || 'test',
+          commit_sha: options.commit,
+          commit_message: options.message,
+          github_pull_request_number: options.pullRequestNumber
+        });
+        this.logger.debug(`Build created with ID: ${buildResult.id}`);
+
+        // Emit build created event
+        this.emit('build-created', {
+          buildId: buildResult.id,
+          url: buildResult.url,
+          name: buildResult.name || options.buildName
+        });
+        return buildResult.id;
+      } else {
+        throw new VizzlyError('No API key available for build creation', 'API_KEY_MISSING');
       }
     }
   }
@@ -151,9 +142,8 @@ export class TestRunner extends BaseService {
     } = await import('./api-service.js');
     return new ApiService({
       ...this.config,
-      command: 'run'
-    }, {
-      logger: this.logger
+      command: 'run',
+      uploadAll: this.config.uploadAll
     });
   }
   async finalizeBuild(buildId, isTddMode, success, executionTime) {
@@ -163,15 +153,16 @@ export class TestRunner extends BaseService {
     }
     try {
       if (isTddMode) {
-        // TDD mode: use buildManager for local builds
-        if (this.buildManager.getCurrentBuild()) {
-          await this.buildManager.finalizeBuild(buildId, {
-            success
-          });
+        // TDD mode: use server handler to finalize (local-only)
+        if (this.serverManager.server?.finishBuild) {
+          await this.serverManager.server.finishBuild(buildId);
           this.logger.debug(`TDD build ${buildId} finalized with success: ${success}`);
+        } else {
+          // In TDD mode without a server, just log that finalization is skipped
+          this.logger.debug(`TDD build ${buildId} finalization skipped (local-only mode)`);
         }
       } else {
-        // API mode (eager/lazy): use API service to update build status
+        // API mode: use API service to update build status
         const apiService = await this.createApiService();
         if (apiService) {
           await apiService.finalizeBuild(buildId, success, executionTime);
@@ -180,6 +171,12 @@ export class TestRunner extends BaseService {
     } catch (error) {
       // Don't fail the entire run if build finalization fails
       this.logger.warn(`Failed to finalize build ${buildId}:`, error.message);
+      // Emit event for UI handling
+      this.emit('build-finalize-failed', {
+        buildId,
+        error: error.message,
+        stack: error.stack
+      });
     }
   }
   async executeTestCommand(testCommand, env) {

package/dist/services/uploader.js

@@ -11,7 +11,7 @@ import { createUploaderLogger } from '../utils/logger-factory.js';
 import { ApiService } from './api-service.js';
 import { getDefaultBranch } from '../utils/git.js';
 import { UploadError, TimeoutError, ValidationError } from '../errors/vizzly-error.js';
-const DEFAULT_BATCH_SIZE = 10;
+const DEFAULT_BATCH_SIZE = 50;
 const DEFAULT_SHA_CHECK_BATCH_SIZE = 100;
 const DEFAULT_TIMEOUT = 30000; // 30 seconds
 
@@ -50,6 +50,7 @@ export function createUploader({
     message,
     environment = 'production',
     threshold,
+    pullRequestNumber,
     onProgress = () => {}
   }) {
     try {
@@ -80,12 +81,14 @@ export function createUploader({
       }
       onProgress({
         phase: 'scanning',
+        message: `Found ${files.length} screenshots`,
         total: files.length
       });
 
       // Process files to get metadata
       const fileMetadata = await processFiles(files, signal, current => onProgress({
         phase: 'processing',
+        message: `Processing files`,
         current,
         total: files.length
       }));
@@ -94,10 +97,11 @@ export function createUploader({
       const buildInfo = {
         name: buildName || `Upload ${new Date().toISOString()}`,
         branch: branch || (await getDefaultBranch()) || 'main',
-        commitSha: commit,
-        commitMessage: message,
+        commit_sha: commit,
+        commit_message: message,
         environment,
-        threshold
+        threshold,
+        github_pull_request_number: pullRequestNumber
       };
       const build = await api.createBuild(buildInfo);
       const buildId = build.id;
@@ -110,6 +114,7 @@ export function createUploader({
       } = await checkExistingFiles(fileMetadata, api, signal, buildId);
       onProgress({
         phase: 'deduplication',
+        message: `Checking for duplicates (${toUpload.length} to upload, ${existing.length} existing)`,
         toUpload: toUpload.length,
         existing: existing.length,
         total: files.length
@@ -127,12 +132,14 @@ export function createUploader({
         batchSize: batchSize,
         onProgress: current => onProgress({
           phase: 'uploading',
+          message: `Uploading screenshots`,
           current,
           total: toUpload.length
         })
       });
       onProgress({
         phase: 'completed',
+        message: `Upload completed`,
         buildId: result.buildId,
         url: result.url
       });