@vizzly-testing/cli 0.29.6 → 0.31.0

package/dist/sdk/index.js

@@ -11,13 +11,15 @@
  */
 
 import { EventEmitter } from 'node:events';
+import { createServer } from 'node:http';
 import { VizzlyError } from '../errors/vizzly-error.js';
-import { ScreenshotServer } from '../services/screenshot-server.js';
-import { createUploader } from '../services/uploader.js';
+import { handleRequest as handleScreenshotRequest, startServer as startScreenshotServer, stopServer as stopScreenshotServer } from '../screenshot-server/index.js';
 import { createTDDService } from '../tdd/tdd-service.js';
+import { createUploader } from '../uploader/index.js';
 import { loadConfig } from '../utils/config-loader.js';
 import { resolveImageBuffer } from '../utils/file-helpers.js';
 import * as output from '../utils/output.js';
+import { createScreenshotProperties } from '../utils/screenshot-options.js';
 
 /**
  * Create a new Vizzly instance with custom configuration
@@ -52,79 +54,94 @@ import * as output from '../utils/output.js';
  * // Cleanup
  * await vizzly.stop();
  */
-export function createVizzly(config = {}, options = {}) {
+export async function createVizzly(config = {}, options = {}) {
   // Configure output based on options
   output.configure({
     verbose: options.verbose || false
   });
-
-  // Merge with loaded config
-  const resolvedConfig = {
+  let loadConfigFn = options.loadConfig || loadConfig;
+  let fileConfig = await loadConfigFn();
+  let resolvedConfig = {
+    ...fileConfig,
     ...config
   };
-
-  /**
-   * Initialize SDK with config loading
-   */
-  const init = async () => {
-    const fileConfig = await loadConfig();
-    Object.assign(resolvedConfig, fileConfig, config); // CLI config takes precedence
-    return resolvedConfig;
-  };
-
-  /**
-   * Create uploader service
-   */
-  const createUploaderService = (uploaderOptions = {}) => {
-    return createUploader({
-      apiKey: resolvedConfig.apiKey,
-      apiUrl: resolvedConfig.apiUrl
-    }, {
-      ...options,
-      ...uploaderOptions
-    });
-  };
-
-  /**
-   * Create TDD service
-   */
-  const createTDDServiceInstance = (tddOptions = {}) => {
-    return createTDDService(resolvedConfig, {
-      ...options,
-      ...tddOptions
-    });
-  };
-
-  /**
-   * Upload screenshots (convenience method)
-   */
-  const upload = async uploadOptions => {
-    const uploader = createUploaderService();
-    return uploader.upload(uploadOptions);
+  return new VizzlySDK(resolvedConfig, {
+    createUploader: (uploaderOptions = {}, activeConfig = resolvedConfig) => {
+      let {
+        upload: uploadConfig = activeConfig.upload,
+        ...serviceOptions
+      } = uploaderOptions;
+      let createUploaderService = options.createUploader || createUploader;
+      return createUploaderService({
+        apiKey: activeConfig.apiKey,
+        apiUrl: activeConfig.apiUrl,
+        upload: uploadConfig
+      }, {
+        ...options,
+        ...serviceOptions
+      });
+    },
+    createTDDService: (tddOptions = {}, activeConfig = resolvedConfig) => {
+      let createTDDServiceInstance = options.createTDDService || createTDDService;
+      return createTDDServiceInstance(activeConfig, {
+        ...options,
+        ...tddOptions
+      });
+    },
+    createScreenshotServer: createLocalScreenshotServer,
+    fetch: options.fetch,
+    loadConfig: loadConfigFn
+  });
+}
+function createLocalBuildManager() {
+  let screenshots = new Map();
+  return {
+    async addScreenshot(buildId, screenshot) {
+      if (!screenshots.has(buildId)) {
+        screenshots.set(buildId, []);
+      }
+      screenshots.get(buildId).push(screenshot);
+    },
+    getScreenshots(buildId) {
+      return screenshots.get(buildId) || [];
+    }
   };
-
-  /**
-   * Start TDD mode (convenience method)
-   */
-  const startTDD = async (tddOptions = {}) => {
-    const tddService = createTDDServiceInstance();
-    return tddService.start(tddOptions);
+}
+function createLocalScreenshotServer(config, buildManager, options = {}) {
+  let server = null;
+  let deps = {
+    createHttpServer: options.createHttpServer || createServer,
+    output: options.output || output,
+    createError: options.createError || ((message, code) => new VizzlyError(message, code))
   };
   return {
-    // Core methods
-    init,
-    upload,
-    startTDD,
-    // Service factories
-    createUploader: createUploaderService,
-    createTDDService: createTDDServiceInstance,
-    // Utilities
-    loadConfig: () => loadConfig(),
-    // Config access
-    getConfig: () => ({
-      ...resolvedConfig
-    }),
-    updateConfig: newConfig => Object.assign(resolvedConfig, newConfig)
+    async start() {
+      server = await startScreenshotServer({
+        config,
+        requestHandler: (req, res) => handleScreenshotRequest({
+          req,
+          res,
+          deps: {
+            buildManager,
+            createError: deps.createError,
+            output: deps.output
+          }
+        }),
+        deps
+      });
+    },
+    async stop() {
+      await stopScreenshotServer({
+        server,
+        deps: {
+          output: deps.output
+        }
+      });
+      server = null;
+    },
+    isRunning() {
+      return Boolean(server?.listening);
+    }
   };
 }
 
@@ -153,7 +170,7 @@ export class VizzlySDK extends EventEmitter {
   constructor(config, services) {
     super();
     this.config = config;
-    this.services = services;
+    this.services = services || {};
     this.server = null;
     this.currentBuildId = null;
   }
@@ -181,6 +198,59 @@ export class VizzlySDK extends EventEmitter {
     };
   }
 
+  /**
+   * Merge new config values into the active SDK config.
+   * @param {Object} newConfig - Config updates
+   * @returns {Object} Updated config
+   */
+  updateConfig(newConfig) {
+    Object.assign(this.config, newConfig);
+    return this.getConfig();
+  }
+
+  /**
+   * Reload file config and re-apply current in-memory overrides.
+   * @returns {Promise<Object>} Updated config
+   */
+  async init() {
+    let loadConfigFn = this.services.loadConfig || loadConfig;
+    let fileConfig = await loadConfigFn();
+    let currentConfig = {
+      ...this.config
+    };
+    Object.assign(this.config, fileConfig, currentConfig);
+    return this.getConfig();
+  }
+  createUploader(options = {}) {
+    let {
+      upload: uploadConfig = this.config.upload,
+      ...serviceOptions
+    } = options;
+    let createUploaderService = this.services.createUploader || ((uploaderOptions, activeConfig = this.config) => {
+      let {
+        upload: resolvedUploadConfig = activeConfig.upload,
+        ...resolvedServiceOptions
+      } = uploaderOptions;
+      return createUploader({
+        apiKey: activeConfig.apiKey,
+        apiUrl: activeConfig.apiUrl,
+        upload: resolvedUploadConfig
+      }, resolvedServiceOptions);
+    });
+    return createUploaderService({
+      upload: uploadConfig,
+      ...serviceOptions
+    }, this.config);
+  }
+  createTDDService(options = {}) {
+    let createTDDServiceInstance = this.services.createTDDService || ((tddOptions, activeConfig = this.config) => createTDDService(activeConfig, tddOptions));
+    return createTDDServiceInstance(options, this.config);
+  }
+  async startTDD(options = {}) {
+    let tddService = this.createTDDService(options);
+    return tddService.start(options);
+  }
+
   /**
    * Start the Vizzly server
    * @returns {Promise<{port: number, url: string}>} Server information
@@ -193,25 +263,12 @@ export class VizzlySDK extends EventEmitter {
         url: `http://localhost:${this.config.server?.port || 3000}`
       };
     }
-
-    // Create a simple build manager for screenshot collection
-    const buildManager = {
-      screenshots: new Map(),
-      currentBuildId: null,
-      async addScreenshot(buildId, screenshot) {
-        if (!this.screenshots.has(buildId)) {
-          this.screenshots.set(buildId, []);
-        }
-        this.screenshots.get(buildId).push(screenshot);
-      },
-      getScreenshots(buildId) {
-        return this.screenshots.get(buildId) || [];
-      }
-    };
-    this.server = new ScreenshotServer(this.config, buildManager);
+    let createScreenshotServer = this.services.createScreenshotServer || createLocalScreenshotServer;
+    let buildManager = createLocalBuildManager();
+    this.server = createScreenshotServer(this.config, buildManager);
     await this.server.start();
-    const port = this.config.server?.port || 3000;
-    const serverInfo = {
+    let port = this.config.server?.port || 3000;
+    let serverInfo = {
       port,
       url: `http://localhost:${port}`
     };
@@ -230,31 +287,32 @@ export class VizzlySDK extends EventEmitter {
    * @throws {VizzlyError} When file cannot be read due to permissions or I/O errors
    */
   async screenshot(name, imageBuffer, options = {}) {
-    if (!this.server || !this.server.isRunning()) {
+    if (this.server?.isRunning?.() !== true) {
       throw new VizzlyError('Server not running. Call start() first.', 'SERVER_NOT_RUNNING');
     }
 
     // Resolve Buffer or file path using shared utility
-    const buffer = resolveImageBuffer(imageBuffer, 'screenshot');
+    let buffer = resolveImageBuffer(imageBuffer, 'screenshot');
 
     // Generate or use provided build ID
-    const buildId = options.buildId || this.currentBuildId || 'default';
+    let buildId = options.buildId || this.currentBuildId || 'default';
     this.currentBuildId = buildId;
 
     // Convert Buffer to base64 for JSON transport
-    const imageBase64 = buffer.toString('base64');
-    const screenshotData = {
+    let imageBase64 = buffer.toString('base64');
+    let screenshotData = {
       buildId,
       name,
       image: imageBase64,
       type: 'base64',
-      properties: options.properties || {}
+      properties: createScreenshotProperties(options)
     };
 
     // POST to the local screenshot server
-    const serverUrl = `http://localhost:${this.config.server?.port || 3000}`;
+    let serverUrl = `http://localhost:${this.config.server?.port || 3000}`;
+    let fetchFn = this.services.fetch || fetch;
     try {
-      const response = await fetch(`${serverUrl}/screenshot`, {
+      let response = await fetchFn(`${serverUrl}/screenshot`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -262,7 +320,7 @@ export class VizzlySDK extends EventEmitter {
         body: JSON.stringify(screenshotData)
       });
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({
+        let errorData = await response.json().catch(() => ({
           error: 'Unknown error'
         }));
         throw new VizzlyError(`Screenshot capture failed: ${errorData.error}`, 'SCREENSHOT_FAILED', {
@@ -295,23 +353,21 @@ export class VizzlySDK extends EventEmitter {
   async upload(options = {}) {
     if (!this.services?.uploader) {
       this.services = this.services || {};
-      this.services.uploader = createUploader({
-        apiKey: this.config.apiKey,
-        apiUrl: this.config.apiUrl,
+      this.services.uploader = this.createUploader({
         upload: this.config.upload
       });
     }
 
     // Get the screenshots directory from config or default
-    const screenshotsDir = options.screenshotsDir || this.config?.upload?.screenshotsDir || './screenshots';
-    const uploadOptions = {
+    let screenshotsDir = options.screenshotsDir || this.config?.upload?.screenshotsDir || './screenshots';
+    let uploadOptions = {
       screenshotsDir,
       buildName: options.buildName || this.config.buildName,
       branch: options.branch || this.config.branch,
       commit: options.commit || this.config.commit,
       message: options.message || this.config.message,
       environment: options.environment || this.config.environment || 'production',
-      threshold: options.threshold || this.config.threshold,
+      threshold: options.threshold ?? this.config.threshold,
       onProgress: progress => {
         this.emit('upload:progress', progress);
         if (options.onProgress) {
@@ -320,7 +376,7 @@ export class VizzlySDK extends EventEmitter {
       }
     };
     try {
-      const result = await this.services.uploader.upload(uploadOptions);
+      let result = await this.services.uploader.upload(uploadOptions);
       this.emit('upload:completed', result);
       return result;
     } catch (error) {
@@ -340,13 +396,13 @@ export class VizzlySDK extends EventEmitter {
   async compare(name, imageBuffer) {
     if (!this.services?.tddService) {
       this.services = this.services || {};
-      this.services.tddService = createTDDService(this.config);
+      this.services.tddService = this.createTDDService();
     }
 
     // Resolve Buffer or file path using shared utility
-    const buffer = resolveImageBuffer(imageBuffer, 'compare');
+    let buffer = resolveImageBuffer(imageBuffer, 'compare');
     try {
-      const result = await this.services.tddService.compareScreenshot(name, buffer);
+      let result = await this.services.tddService.compareScreenshot(name, buffer);
       this.emit('comparison:completed', result);
       return result;
     } catch (error) {
@@ -358,10 +414,9 @@ export class VizzlySDK extends EventEmitter {
     }
   }
 }
-
-// Export service creators for advanced usage
-export { createUploader } from '../services/uploader.js';
 export { createTDDService } from '../tdd/tdd-service.js';
+// Export service creators for advanced usage
+export { createUploader } from '../uploader/index.js';
 // Re-export key utilities and errors
 export { loadConfig } from '../utils/config-loader.js';
 export * as output from '../utils/output.js';

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

@@ -157,6 +157,16 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
   const tddService = new TddService(config, workingDir, setBaseline);
   const reportPath = join(workingDir, '.vizzly', 'report-data.json');
   const detailsPath = join(workingDir, '.vizzly', 'comparison-details.json');
+  let clearJsonFile = path => {
+    if (existsSync(path)) {
+      unlinkSync(path);
+    }
+  };
+  let prepareRunArtifacts = () => {
+    clearJsonFile(reportPath);
+    clearJsonFile(detailsPath);
+    tddService.clearRunData?.();
+  };
 
   /**
    * Read heavy comparison details from comparison-details.json
@@ -267,6 +277,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
   };
   const initialize = async () => {
     output.debug('tdd', 'initializing local mode');
+    prepareRunArtifacts();
 
     // In baseline update mode, skip all baseline loading/downloading
     if (setBaseline) {
@@ -631,68 +642,33 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       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('node:fs');
-              unlinkSync(baselinePath);
-              deletedBaselines++;
-              // Silent deletion
-            } catch (error) {
-              output.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('node:fs');
-              unlinkSync(currentPath);
-              deletedCurrents++;
-              // Silent deletion
-            } catch (error) {
-              output.warn(`Failed to delete current screenshot for ${comparison.name}: ${error.message}`);
-            }
+      let deleteResetFile = (imagePath, label, name) => {
+        if (!imagePath) return 0;
+        try {
+          let filePath = safePath(workingDir, '.vizzly', imagePath.replace('/images/', ''));
+          if (!existsSync(filePath)) return 0;
+          unlinkSync(filePath);
+          if (label === 'diff') {
+            output.debug(`Deleted diff for ${name}`);
           }
+          return 1;
+        } catch (error) {
+          output.warn(`Failed to delete ${label} for ${name}: ${error.message}`);
+          return 0;
         }
+      };
 
-        // 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('node:fs');
-              unlinkSync(diffPath);
-              deletedDiffs++;
-              output.debug(`Deleted diff for ${comparison.name}`);
-            } catch (error) {
-              output.warn(`Failed to delete diff for ${comparison.name}: ${error.message}`);
-            }
-          }
-        }
+      // Delete all baseline, current, and diff images
+      for (let comparison of reportData.comparisons) {
+        deletedBaselines += deleteResetFile(comparison.baseline, 'baseline', comparison.name);
+        deletedCurrents += deleteResetFile(comparison.current, 'current screenshot', comparison.name);
+        deletedDiffs += deleteResetFile(comparison.diff, 'diff', comparison.name);
       }
 
       // Delete baseline metadata
-      const metadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
+      let metadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
       if (existsSync(metadataPath)) {
         try {
-          const {
-            unlinkSync
-          } = await import('node:fs');
           unlinkSync(metadataPath);
           output.debug('Deleted baseline metadata');
         } catch (error) {

package/dist/server/routers/assets.js

@@ -72,6 +72,10 @@ export function createAssetsRouter() {
       if (existsSync(fullImagePath)) {
         try {
           const imageData = readFileSync(fullImagePath);
+          // Images are rewritten in place between TDD runs, so disable browser caching.
+          res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+          res.setHeader('Pragma', 'no-cache');
+          res.setHeader('Expires', '0');
           sendFile(res, imageData, 'image/png');
           return true;
         } catch (error) {