@vizzly-testing/cli 0.14.0 → 0.15.0

package/dist/commands/tdd.js

@@ -1,6 +1,6 @@
 import { loadConfig } from '../utils/config-loader.js';
-import { ConsoleUI } from '../utils/console-ui.js';
-import { createServiceContainer } from '../container/index.js';
+import * as output from '../utils/output.js';
+import { createServices } from '../services/index.js';
 import { detectBranch, detectCommit } from '../utils/git.js';
 
 /**
@@ -11,7 +11,7 @@ import { detectBranch, detectCommit } from '../utils/git.js';
  * @returns {Promise<{result: Object, cleanup: Function}>} Result and cleanup function
  */
 export async function tddCommand(testCommand, options = {}, globalOptions = {}) {
-  const ui = new ConsoleUI({
+  output.configure({
     json: globalOptions.json,
     verbose: globalOptions.verbose,
     color: !globalOptions.noColor
@@ -20,126 +20,99 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
   let isCleanedUp = false;
 
   // Create cleanup function that can be called by the caller
-  const cleanup = async () => {
+  let cleanup = async () => {
     if (isCleanedUp) return;
     isCleanedUp = true;
-    ui.cleanup();
+    output.cleanup();
     if (testRunner?.cancel) {
       await testRunner.cancel();
     }
   };
   try {
     // Load configuration with CLI overrides
-    const allOptions = {
+    let allOptions = {
       ...globalOptions,
       ...options
     };
-    const config = await loadConfig(globalOptions.config, allOptions);
+    let config = await loadConfig(globalOptions.config, allOptions);
 
     // Dev mode works locally by default - only needs token for baseline download
-    const needsToken = options.baselineBuild || options.baselineComparison;
+    let needsToken = options.baselineBuild || options.baselineComparison;
     if (!config.apiKey && needsToken) {
       throw new Error('API token required when using --baseline-build or --baseline-comparison flags');
     }
 
     // Always allow no-token mode for dev mode unless baseline flags are used
     config.allowNoToken = true;
-    if (!config.apiKey && !options.daemon) {
-      ui.info('Running in local-only mode (no API token)');
-    } else if (!needsToken && !options.daemon) {
-      ui.info('Running in local mode (API token available but not needed)');
-    }
 
     // Collect git metadata
-    const branch = await detectBranch(options.branch);
-    const commit = await detectCommit(options.commit);
+    let branch = await detectBranch(options.branch);
+    let commit = await detectCommit(options.commit);
+
+    // Show header (skip in daemon mode)
+    if (!options.daemon) {
+      let mode = config.apiKey ? 'local' : 'local';
+      output.header('tdd', mode);
 
-    // Only show config in verbose mode for non-daemon (daemon shows baseline info instead)
-    if (globalOptions.verbose && !options.daemon) {
-      ui.info('TDD Configuration loaded', {
-        testCommand,
+      // Show config in verbose mode
+      output.debug('config', 'loaded', {
         port: config.server.port,
-        timeout: config.server.timeout,
         branch,
-        commit: commit?.substring(0, 7),
-        environment: config.build.environment,
-        threshold: config.comparison.threshold,
-        baselineBuildId: config.baselineBuildId,
-        baselineComparisonId: config.baselineComparisonId
+        threshold: config.comparison.threshold
       });
     }
 
-    // Create service container and get services
-    ui.startSpinner('Initializing TDD server...');
-    const configWithVerbose = {
+    // Create services
+    output.startSpinner('Initializing TDD server...');
+    let configWithVerbose = {
       ...config,
       verbose: globalOptions.verbose
     };
-    const container = await createServiceContainer(configWithVerbose, 'tdd');
-    testRunner = await container.get('testRunner');
-    ui.stopSpinner();
+    let services = createServices(configWithVerbose, 'tdd');
+    testRunner = services.testRunner;
+    output.stopSpinner();
 
     // Set up event handlers for user feedback
     testRunner.on('progress', progressData => {
-      const {
+      let {
         message: progressMessage
       } = progressData;
-      ui.progress(progressMessage || 'Running tests...');
+      output.progress(progressMessage || 'Running tests...');
     });
-    testRunner.on('test-output', output => {
+    testRunner.on('test-output', data => {
       // In non-JSON mode, show test output directly
       if (!globalOptions.json) {
-        ui.stopSpinner();
-        console.log(output.data);
+        output.stopSpinner();
+        output.print(data.data);
       }
     });
     testRunner.on('server-ready', serverInfo => {
       // Only show in non-daemon mode (daemon shows its own startup message)
       if (!options.daemon) {
-        ui.info(`TDD screenshot server running on port ${serverInfo.port}`);
-        ui.info(`Dashboard: http://localhost:${serverInfo.port}/dashboard`);
-      }
-      // Verbose server details only in non-daemon mode
-      if (globalOptions.verbose && !options.daemon) {
-        ui.info('Server started', {
-          port: serverInfo.port,
-          pid: serverInfo.pid,
-          uptime: serverInfo.uptime
-        });
+        output.debug('server', `listening on :${serverInfo.port}`);
       }
     });
     testRunner.on('screenshot-captured', screenshotInfo => {
-      ui.info(`Vizzly TDD: Screenshot captured - ${screenshotInfo.name}`);
+      output.debug('capture', screenshotInfo.name);
     });
     testRunner.on('comparison-result', comparisonInfo => {
-      const {
+      let {
         name,
         status,
         pixelDifference
       } = comparisonInfo;
       if (status === 'passed') {
-        ui.info(`✅ ${name}: Visual comparison passed`);
+        output.debug('compare', `${name} passed`);
       } else if (status === 'failed') {
-        ui.warning(`❌ ${name}: Visual comparison failed (${pixelDifference}% difference)`);
+        output.warn(`${name}: ${pixelDifference}% difference`);
       } else if (status === 'new') {
-        ui.warning(`🆕 ${name}: New screenshot (no baseline)`);
+        output.debug('compare', `${name} (new baseline)`);
       }
     });
     testRunner.on('error', error => {
-      ui.error('TDD test runner error occurred', error, 0); // Don't exit immediately
+      output.error('Test runner error', error);
     });
-
-    // Show informational messages about baseline behavior (skip in daemon mode)
-    if (!options.daemon) {
-      if (options.setBaseline) {
-        ui.info('🐻 Baseline update mode - will ignore existing baselines and create new ones');
-      } else if (options.baselineBuild || options.baselineComparison) {
-        ui.info('📥 Will fetch remote baselines from Vizzly for local comparison');
-      } else {
-        ui.info('📁 Will use local baselines or create new ones when screenshots differ');
-      }
-    }
-    const runOptions = {
+    let runOptions = {
       testCommand,
       port: config.server.port,
       timeout: config.server.timeout,
@@ -175,30 +148,28 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
     }
 
     // Normal dev mode - run tests
-    ui.info('Starting test execution...');
-    const result = await testRunner.run(runOptions);
+    output.debug('run', testCommand);
+    let runResult = await testRunner.run(runOptions);
 
     // Show summary
-    const {
+    let {
       screenshotsCaptured,
       comparisons
-    } = result;
-    console.log(`🐻 Vizzly TDD: Processed ${screenshotsCaptured} screenshots`);
-    if (comparisons && comparisons.length > 0) {
-      const passed = comparisons.filter(c => c.status === 'passed').length;
-      const failed = comparisons.filter(c => c.status === 'failed').length;
-      const newScreenshots = comparisons.filter(c => c.status === 'new').length;
-      console.log(`📊 Results: ${passed} passed, ${failed} failed, ${newScreenshots} new`);
-      if (failed > 0) {
-        console.log(`🔍 Check diff images in .vizzly/diffs/ directory`);
-      }
-    }
-    ui.success('TDD test run completed');
+    } = runResult;
 
     // Determine success based on comparison results
-    const hasFailures = result.failed || result.comparisons && result.comparisons.some(c => c.status === 'failed');
-    if (hasFailures) {
-      ui.error('Visual differences detected in TDD mode', {}, 0);
+    let hasFailures = runResult.failed || runResult.comparisons && runResult.comparisons.some(c => c.status === 'failed');
+    if (comparisons && comparisons.length > 0) {
+      let passed = comparisons.filter(c => c.status === 'passed').length;
+      let failed = comparisons.filter(c => c.status === 'failed').length;
+      if (hasFailures) {
+        output.error(`${failed} visual difference${failed !== 1 ? 's' : ''} detected`);
+        output.info(`Check .vizzly/diffs/ for diff images`);
+      } else {
+        output.result(`${screenshotsCaptured} screenshot${screenshotsCaptured !== 1 ? 's' : ''} · ${passed} passed`);
+      }
+    } else {
+      output.result(`${screenshotsCaptured} screenshot${screenshotsCaptured !== 1 ? 's' : ''}`);
     }
 
     // Return result and cleanup function
@@ -206,12 +177,12 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
       result: {
         success: !hasFailures,
         exitCode: hasFailures ? 1 : 0,
-        ...result
+        ...runResult
       },
       cleanup
     };
   } catch (error) {
-    ui.error('TDD test run failed', error);
+    output.error('Test failed', error);
     return {
       result: {
         success: false,
@@ -229,24 +200,24 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
  * @param {Object} options - Command options
  */
 export function validateTddOptions(testCommand, options) {
-  const errors = [];
+  let errors = [];
   if (!testCommand || testCommand.trim() === '') {
     errors.push('Test command is required');
   }
   if (options.port) {
-    const port = parseInt(options.port, 10);
+    let port = parseInt(options.port, 10);
     if (isNaN(port) || port < 1 || port > 65535) {
       errors.push('Port must be a valid number between 1 and 65535');
     }
   }
   if (options.timeout) {
-    const timeout = parseInt(options.timeout, 10);
+    let timeout = parseInt(options.timeout, 10);
     if (isNaN(timeout) || timeout < 1000) {
       errors.push('Timeout must be at least 1000 milliseconds');
     }
   }
   if (options.threshold !== undefined) {
-    const threshold = parseFloat(options.threshold);
+    let threshold = parseFloat(options.threshold);
     if (isNaN(threshold) || threshold < 0 || threshold > 1) {
       errors.push('Threshold must be a number between 0 and 1');
     }

package/dist/commands/upload.js

@@ -1,6 +1,6 @@
 import { loadConfig } from '../utils/config-loader.js';
-import { ConsoleUI } from '../utils/console-ui.js';
-import { createServiceContainer } from '../container/index.js';
+import * as output from '../utils/output.js';
+import { createServices } from '../services/index.js';
 import { detectBranch, detectCommit, detectCommitMessage, detectPullRequestNumber, generateBuildNameWithGit } from '../utils/git.js';
 import { ApiService } from '../services/api-service.js';
 
@@ -13,23 +13,25 @@ import { ApiService } from '../services/api-service.js';
  */
 async function constructBuildUrl(buildId, apiUrl, apiToken) {
   try {
-    const apiService = new ApiService({
+    let apiService = new ApiService({
       baseUrl: apiUrl,
       token: apiToken,
       command: 'upload'
     });
-    const tokenContext = await apiService.getTokenContext();
-    const baseUrl = apiUrl.replace(/\/api.*$/, '');
+    let tokenContext = await apiService.getTokenContext();
+    let baseUrl = apiUrl.replace(/\/api.*$/, '');
     if (tokenContext.organization?.slug && tokenContext.project?.slug) {
       return `${baseUrl}/${tokenContext.organization.slug}/${tokenContext.project.slug}/builds/${buildId}`;
     }
   } catch (error) {
     // Fall back to simple URL if context fetch fails
-    console.debug('Failed to fetch token context, using fallback URL:', error.message);
+    output.debug('Failed to fetch token context, using fallback URL:', {
+      error: error.message
+    });
   }
 
   // Fallback URL construction
-  const baseUrl = apiUrl.replace(/\/api.*$/, '');
+  let baseUrl = apiUrl.replace(/\/api.*$/, '');
   return `${baseUrl}/builds/${buildId}`;
 }
 
@@ -40,23 +42,19 @@ async function constructBuildUrl(buildId, apiUrl, apiToken) {
  * @param {Object} globalOptions - Global CLI options
  */
 export async function uploadCommand(screenshotsPath, options = {}, globalOptions = {}) {
-  // Create UI handler
-  const ui = new ConsoleUI({
+  output.configure({
     json: globalOptions.json,
     verbose: globalOptions.verbose,
     color: !globalOptions.noColor
   });
-
-  // Note: ConsoleUI handles cleanup via global process listeners
-
   let buildId = null;
   let config = null;
-  const uploadStartTime = Date.now();
+  let uploadStartTime = Date.now();
   try {
-    ui.info('Starting upload process...');
+    output.info('Starting upload process...');
 
     // Load configuration with CLI overrides
-    const allOptions = {
+    let allOptions = {
       ...globalOptions,
       ...options
     };
@@ -64,19 +62,20 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
 
     // Validate API token
     if (!config.apiKey) {
-      ui.error('API token required. Use --token or set VIZZLY_TOKEN environment variable');
-      return; // Won't reach here due to process.exit in error()
+      output.error('API token required. Use --token or set VIZZLY_TOKEN environment variable');
+      process.exit(1);
     }
 
     // Collect git metadata if not provided
-    const branch = await detectBranch(options.branch);
-    const commit = await detectCommit(options.commit);
-    const message = options.message || (await detectCommitMessage());
-    const buildName = await generateBuildNameWithGit(options.buildName);
-    const pullRequestNumber = detectPullRequestNumber();
-    ui.info(`Uploading screenshots from: ${screenshotsPath}`);
+    let branch = await detectBranch(options.branch);
+    let commit = await detectCommit(options.commit);
+    let message = options.message || (await detectCommitMessage());
+    let buildName = await generateBuildNameWithGit(options.buildName);
+    let pullRequestNumber = detectPullRequestNumber();
+    output.info(`Uploading screenshots from: ${screenshotsPath}`);
     if (globalOptions.verbose) {
-      ui.info('Configuration loaded', {
+      output.info('Configuration loaded');
+      output.debug('Config details', {
         branch,
         commit: commit?.substring(0, 7),
         environment: config.build.environment,
@@ -85,12 +84,12 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
     }
 
     // Get uploader service
-    ui.startSpinner('Initializing uploader...');
-    const container = await createServiceContainer(config, 'upload');
-    const uploader = await container.get('uploader');
+    output.startSpinner('Initializing uploader...');
+    let services = createServices(config, 'upload');
+    let uploader = services.uploader;
 
     // Prepare upload options with progress callback
-    const uploadOptions = {
+    let uploadOptions = {
       screenshotsDir: screenshotsPath,
       buildName,
       branch,
@@ -103,7 +102,7 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
       pullRequestNumber,
       parallelId: config.parallelId,
       onProgress: progressData => {
-        const {
+        let {
           message: progressMessage,
           current,
           total,
@@ -123,76 +122,77 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
             displayMessage = phase;
           }
         }
-        ui.progress(displayMessage || 'Processing...', current, total);
+        output.progress(displayMessage || 'Processing...', current, total);
       }
     };
 
     // Start upload
-    ui.progress('Starting upload...');
-    const result = await uploader.upload(uploadOptions);
+    output.progress('Starting upload...');
+    let result = await uploader.upload(uploadOptions);
     buildId = result.buildId; // Ensure we have the buildId
 
     // Mark build as completed
     if (result.buildId) {
-      ui.progress('Finalizing build...');
+      output.progress('Finalizing build...');
       try {
-        const apiService = new ApiService({
+        let apiService = new ApiService({
           baseUrl: config.apiUrl,
           token: config.apiKey,
           command: 'upload'
         });
-        const executionTime = Date.now() - uploadStartTime;
+        let executionTime = Date.now() - uploadStartTime;
         await apiService.finalizeBuild(result.buildId, true, executionTime);
       } catch (error) {
-        ui.warning(`Failed to finalize build: ${error.message}`);
+        output.warn(`Failed to finalize build: ${error.message}`);
       }
     }
-    ui.success('Upload completed successfully');
+    output.success('Upload completed successfully');
 
     // Show Vizzly summary
     if (result.buildId) {
-      ui.info(`🐻 Vizzly: Uploaded ${result.stats.uploaded} of ${result.stats.total} screenshots to build ${result.buildId}`);
+      output.info(`🐻 Vizzly: Uploaded ${result.stats.uploaded} of ${result.stats.total} screenshots to build ${result.buildId}`);
       // Use API-provided URL or construct proper URL with org/project context
-      const buildUrl = result.url || (await constructBuildUrl(result.buildId, config.apiUrl, config.apiKey));
-      ui.info(`🔗 Vizzly: View results at ${buildUrl}`);
+      let buildUrl = result.url || (await constructBuildUrl(result.buildId, config.apiUrl, config.apiKey));
+      output.info(`🔗 Vizzly: View results at ${buildUrl}`);
     }
 
     // Wait for build completion if requested
     if (options.wait && result.buildId) {
-      ui.info('Waiting for build completion...');
-      ui.startSpinner('Processing comparisons...');
-      const buildResult = await uploader.waitForBuild(result.buildId);
-      ui.success('Build processing completed');
+      output.info('Waiting for build completion...');
+      output.startSpinner('Processing comparisons...');
+      let buildResult = await uploader.waitForBuild(result.buildId);
+      output.success('Build processing completed');
 
       // Show build processing results
       if (buildResult.failedComparisons > 0) {
-        ui.warning(`${buildResult.failedComparisons} visual comparisons failed`);
+        output.warn(`${buildResult.failedComparisons} visual comparisons failed`);
       } else {
-        ui.success(`All ${buildResult.passedComparisons} visual comparisons passed`);
+        output.success(`All ${buildResult.passedComparisons} visual comparisons passed`);
       }
       // Use API-provided URL or construct proper URL with org/project context
-      const buildUrl = buildResult.url || (await constructBuildUrl(result.buildId, config.apiUrl, config.apiKey));
-      ui.info(`🔗 Vizzly: View results at ${buildUrl}`);
+      let buildUrl = buildResult.url || (await constructBuildUrl(result.buildId, config.apiUrl, config.apiKey));
+      output.info(`🔗 Vizzly: View results at ${buildUrl}`);
     }
-    ui.cleanup();
+    output.cleanup();
   } catch (error) {
     // Mark build as failed if we have a buildId and config
     if (buildId && config) {
       try {
-        const apiService = new ApiService({
+        let apiService = new ApiService({
           baseUrl: config.apiUrl,
           token: config.apiKey,
           command: 'upload'
         });
-        const executionTime = Date.now() - uploadStartTime;
+        let executionTime = Date.now() - uploadStartTime;
         await apiService.finalizeBuild(buildId, false, executionTime);
       } catch {
         // Silent fail on cleanup
       }
     }
     // Use user-friendly error message if available
-    const errorMessage = error?.getUserMessage ? error.getUserMessage() : error.message;
-    ui.error(errorMessage || 'Upload failed', error);
+    let errorMessage = error?.getUserMessage ? error.getUserMessage() : error.message;
+    output.error(errorMessage || 'Upload failed', error);
+    process.exit(1);
   }
 }
 
@@ -202,7 +202,7 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
  * @param {Object} options - Command options
  */
 export function validateUploadOptions(screenshotsPath, options) {
-  const errors = [];
+  let errors = [];
   if (!screenshotsPath) {
     errors.push('Screenshots path is required');
   }
@@ -214,19 +214,19 @@ export function validateUploadOptions(screenshotsPath, options) {
     }
   }
   if (options.threshold !== undefined) {
-    const threshold = parseFloat(options.threshold);
+    let threshold = parseFloat(options.threshold);
     if (isNaN(threshold) || threshold < 0 || threshold > 1) {
       errors.push('Threshold must be a number between 0 and 1');
     }
   }
   if (options.batchSize !== undefined) {
-    const n = parseInt(options.batchSize, 10);
+    let n = parseInt(options.batchSize, 10);
     if (!Number.isFinite(n) || n <= 0) {
       errors.push('Batch size must be a positive integer');
     }
   }
   if (options.uploadTimeout !== undefined) {
-    const n = parseInt(options.uploadTimeout, 10);
+    let n = parseInt(options.uploadTimeout, 10);
     if (!Number.isFinite(n) || n <= 0) {
       errors.push('Upload timeout must be a positive integer (milliseconds)');
     }