@vizzly-testing/cli 0.26.2 → 0.27.0

package/dist/commands/baselines.js

@@ -0,0 +1,265 @@
+/**
+ * Baselines command - query local TDD baselines
+ */
+
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { basename, join, resolve } from 'node:path';
+import { loadBaselineMetadata } from '../tdd/metadata/baseline-metadata.js';
+import * as defaultOutput from '../utils/output.js';
+
+/**
+ * Extract filename from a path
+ */
+function getFilename(screenshot) {
+  if (screenshot.filename) return screenshot.filename;
+  if (screenshot.path) return basename(screenshot.path);
+  return null;
+}
+
+/**
+ * Extract viewport from screenshot properties
+ */
+function getViewport(screenshot) {
+  if (screenshot.viewport) return screenshot.viewport;
+  if (screenshot.properties?.viewport_width && screenshot.properties?.viewport_height) {
+    return {
+      width: screenshot.properties.viewport_width,
+      height: screenshot.properties.viewport_height
+    };
+  }
+  return null;
+}
+
+/**
+ * Baselines command - list and query local TDD baselines
+ * @param {Object} options - Command options
+ * @param {Object} globalOptions - Global CLI options
+ * @param {Object} deps - Dependencies for testing
+ */
+export async function baselinesCommand(options = {}, globalOptions = {}, deps = {}) {
+  let {
+    output = defaultOutput,
+    exit = code => process.exit(code),
+    cwd = process.cwd
+  } = deps;
+  output.configure({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    let workingDir = resolve(cwd());
+    let vizzlyDir = join(workingDir, '.vizzly');
+    let baselinesDir = join(vizzlyDir, 'baselines');
+
+    // Check if .vizzly directory exists
+    if (!existsSync(vizzlyDir)) {
+      if (globalOptions.json) {
+        output.data({
+          baselines: [],
+          count: 0,
+          error: 'No .vizzly directory found'
+        });
+        output.cleanup();
+        return;
+      }
+      output.warn('No .vizzly directory found. Run visual tests first to create baselines.');
+      output.cleanup();
+      return;
+    }
+
+    // Load metadata
+    let metadata = loadBaselineMetadata(baselinesDir);
+    let screenshots = metadata?.screenshots || [];
+
+    // Get actual baseline files
+    let baselineFiles = [];
+    if (existsSync(baselinesDir)) {
+      baselineFiles = readdirSync(baselinesDir).filter(f => f.endsWith('.png')).map(f => {
+        let filePath = join(baselinesDir, f);
+        try {
+          let stat = statSync(filePath);
+          return {
+            filename: f,
+            path: filePath,
+            size: stat.size,
+            modifiedAt: stat.mtime.toISOString()
+          };
+        } catch {
+          // File was deleted between readdir and stat, skip it
+          return null;
+        }
+      }).filter(Boolean);
+    }
+
+    // Filter by name if provided
+    if (options.name) {
+      let pattern = options.name.replace(/\*/g, '.*');
+      let regex = new RegExp(pattern, 'i');
+      screenshots = screenshots.filter(s => regex.test(s.name));
+      baselineFiles = baselineFiles.filter(f => regex.test(f.filename));
+    }
+
+    // Get specific baseline info
+    if (options.info) {
+      let screenshot = screenshots.find(s => s.name === options.info || s.signature === options.info);
+      if (!screenshot) {
+        if (globalOptions.json) {
+          output.data({
+            error: 'Baseline not found',
+            name: options.info
+          });
+          output.cleanup();
+          return;
+        }
+        output.error(`Baseline "${options.info}" not found`);
+        output.cleanup();
+        exit(1);
+        return;
+      }
+      let filename = getFilename(screenshot);
+      let viewport = getViewport(screenshot);
+      let file = baselineFiles.find(f => f.filename === filename);
+      if (globalOptions.json) {
+        output.data({
+          name: screenshot.name,
+          signature: screenshot.signature,
+          filename,
+          path: screenshot.path || file?.path || join(baselinesDir, filename),
+          sha256: screenshot.sha256,
+          viewport,
+          browser: screenshot.browser || null,
+          createdAt: screenshot.createdAt || metadata?.createdAt,
+          fileSize: file?.size,
+          fileModifiedAt: file?.modifiedAt
+        });
+        output.cleanup();
+        return;
+      }
+      output.header('baseline');
+      output.keyValue({
+        Name: screenshot.name,
+        Signature: screenshot.signature,
+        File: filename
+      });
+      output.blank();
+      if (viewport) {
+        output.labelValue('Viewport', `${viewport.width}×${viewport.height}`);
+      }
+      if (screenshot.browser) {
+        output.labelValue('Browser', screenshot.browser);
+      }
+      if (screenshot.sha256) {
+        output.labelValue('SHA256', `${screenshot.sha256.substring(0, 16)}...`);
+      }
+      if (file) {
+        output.labelValue('Size', formatBytes(file.size));
+        output.labelValue('Modified', new Date(file.modifiedAt).toLocaleString());
+      }
+      output.cleanup();
+      return;
+    }
+
+    // JSON output for list
+    if (globalOptions.json) {
+      let baselines = screenshots.map(s => {
+        let filename = getFilename(s);
+        let viewport = getViewport(s);
+        let file = baselineFiles.find(f => f.filename === filename);
+        return {
+          name: s.name,
+          signature: s.signature,
+          filename,
+          path: s.path || file?.path || join(baselinesDir, filename),
+          sha256: s.sha256,
+          viewport,
+          browser: s.browser || null,
+          createdAt: s.createdAt,
+          fileSize: file?.size
+        };
+      });
+      output.data({
+        baselines,
+        count: baselines.length,
+        metadata: metadata ? {
+          buildId: metadata.buildId,
+          buildName: metadata.buildName,
+          branch: metadata.branch,
+          threshold: metadata.threshold,
+          createdAt: metadata.createdAt
+        } : null
+      });
+      output.cleanup();
+      return;
+    }
+
+    // Human-readable output
+    output.header('baselines');
+    if (screenshots.length === 0 && baselineFiles.length === 0) {
+      output.print('  No baselines found');
+      output.hint('Run visual tests to create baselines');
+      output.cleanup();
+      return;
+    }
+
+    // Show metadata info
+    if (metadata) {
+      output.labelValue('Source', metadata.buildName || metadata.buildId || 'Local');
+      if (metadata.branch && metadata.branch !== 'local') {
+        output.labelValue('Branch', metadata.branch);
+      }
+      output.labelValue('Threshold', `${metadata.threshold || 2.0}%`);
+      output.blank();
+    }
+    output.labelValue('Count', String(screenshots.length));
+    output.blank();
+    let colors = output.getColors();
+
+    // Show baselines (limited in non-verbose mode)
+    let displayLimit = globalOptions.verbose ? screenshots.length : 20;
+    for (let screenshot of screenshots.slice(0, displayLimit)) {
+      let viewport = getViewport(screenshot);
+      let viewportInfo = viewport ? colors.dim(` ${viewport.width}×${viewport.height}`) : '';
+      let browserInfo = screenshot.browser ? colors.dim(` ${screenshot.browser}`) : '';
+      output.print(`  ${colors.brand.success('●')} ${screenshot.name}${viewportInfo}${browserInfo}`);
+    }
+    if (screenshots.length > displayLimit) {
+      output.blank();
+      output.hint(`... and ${screenshots.length - displayLimit} more. Use --verbose to see all.`);
+    }
+
+    // Show orphaned files (files without metadata)
+    if (globalOptions.verbose) {
+      let knownFiles = new Set(screenshots.map(s => getFilename(s)).filter(Boolean));
+      let orphaned = baselineFiles.filter(f => !knownFiles.has(f.filename));
+      if (orphaned.length > 0) {
+        output.blank();
+        output.labelValue('Orphaned Files', String(orphaned.length));
+        for (let file of orphaned) {
+          output.print(`  ${colors.brand.warning('?')} ${file.filename}`);
+        }
+      }
+    }
+    output.cleanup();
+  } catch (error) {
+    output.error('Failed to read baselines', error);
+    output.cleanup();
+    exit(1);
+  }
+}
+
+/**
+ * Format bytes to human readable
+ */
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Validate baselines command options
+ */
+export function validateBaselinesOptions() {
+  return [];
+}

package/dist/commands/builds.js

@@ -0,0 +1,274 @@
+/**
+ * Builds command - list and query builds
+ */
+
+import { createApiClient as defaultCreateApiClient, getBuild as defaultGetBuild, getBuilds as defaultGetBuilds } from '../api/index.js';
+import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
+import * as defaultOutput from '../utils/output.js';
+
+/**
+ * Builds list command - list builds with optional filters
+ * @param {Object} options - Command options
+ * @param {Object} globalOptions - Global CLI options
+ * @param {Object} deps - Dependencies for testing
+ */
+export async function buildsCommand(options = {}, globalOptions = {}, deps = {}) {
+  let {
+    loadConfig = defaultLoadConfig,
+    createApiClient = defaultCreateApiClient,
+    getBuilds = defaultGetBuilds,
+    getBuild = defaultGetBuild,
+    output = defaultOutput,
+    exit = code => process.exit(code)
+  } = deps;
+  output.configure({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    // Load configuration with CLI overrides
+    let allOptions = {
+      ...globalOptions,
+      ...options
+    };
+    let config = await loadConfig(globalOptions.config, allOptions);
+
+    // Validate API token
+    if (!config.apiKey) {
+      output.error('API token required. Use --token or set VIZZLY_TOKEN environment variable');
+      exit(1);
+      return;
+    }
+    let client = createApiClient({
+      baseUrl: config.apiUrl,
+      token: config.apiKey,
+      command: 'builds'
+    });
+
+    // If a specific build ID is provided, get that build
+    if (options.build) {
+      output.startSpinner('Fetching build...');
+      let include = options.comparisons ? 'comparisons' : undefined;
+      let response = await getBuild(client, options.build, {
+        include
+      });
+      output.stopSpinner();
+      let build = response.build || response;
+      if (globalOptions.json) {
+        output.data(formatBuildForJson(build, options.comparisons));
+        output.cleanup();
+        return;
+      }
+      displayBuild(output, build, globalOptions.verbose);
+      output.cleanup();
+      return;
+    }
+
+    // List builds with filters
+    output.startSpinner('Fetching builds...');
+    let filters = {
+      limit: options.limit || 20,
+      offset: options.offset || 0
+    };
+    if (options.branch) filters.branch = options.branch;
+    if (options.status) filters.status = options.status;
+    if (options.environment) filters.environment = options.environment;
+    let response = await getBuilds(client, filters);
+    output.stopSpinner();
+    let builds = response.builds || [];
+    let pagination = response.pagination || {
+      total: builds.length,
+      hasMore: false
+    };
+
+    // JSON output
+    if (globalOptions.json) {
+      output.data({
+        builds: builds.map(b => formatBuildForJson(b)),
+        pagination: {
+          total: pagination.total,
+          limit: filters.limit,
+          offset: filters.offset,
+          hasMore: pagination.hasMore
+        }
+      });
+      output.cleanup();
+      return;
+    }
+
+    // Human-readable output
+    output.header('builds');
+    if (builds.length === 0) {
+      output.print('  No builds found');
+      if (options.branch || options.status) {
+        output.hint('Try removing filters to see more results');
+      }
+      output.cleanup();
+      return;
+    }
+    let colors = output.getColors();
+    for (let build of builds) {
+      let statusColor = getStatusColor(colors, build.status);
+      let statusBadge = statusColor(build.status.toUpperCase());
+      output.print(`  ${colors.bold(build.name || build.id)} ${statusBadge}`);
+      let details = [];
+      if (build.branch) details.push(build.branch);
+      if (build.commit_sha) details.push(build.commit_sha.substring(0, 7));
+      if (build.screenshot_count) details.push(`${build.screenshot_count} screenshots`);
+      if (details.length > 0) {
+        output.print(`    ${colors.dim(details.join(' · '))}`);
+      }
+      if (build.created_at) {
+        output.print(`    ${colors.dim(new Date(build.created_at).toLocaleString())}`);
+      }
+      output.blank();
+    }
+
+    // Pagination info
+    if (pagination.total > builds.length) {
+      output.hint(`Showing ${builds.length} of ${pagination.total} builds. ` + `Use --offset ${filters.offset + filters.limit} to see more.`);
+    }
+    output.cleanup();
+  } catch (error) {
+    output.stopSpinner();
+    output.error('Failed to fetch builds', error);
+    output.cleanup();
+    exit(1);
+  }
+}
+
+/**
+ * Format a build for JSON output
+ */
+function formatBuildForJson(build, includeComparisons = false) {
+  let result = {
+    id: build.id,
+    name: build.name,
+    status: build.status,
+    branch: build.branch,
+    commit: build.commit_sha,
+    commitMessage: build.commit_message,
+    environment: build.environment,
+    screenshotCount: build.screenshot_count || 0,
+    comparisons: {
+      total: build.total_comparisons || 0,
+      new: build.new_comparisons || 0,
+      changed: build.changed_comparisons || 0,
+      identical: build.identical_comparisons || 0
+    },
+    approvalStatus: build.approval_status,
+    createdAt: build.created_at,
+    completedAt: build.completed_at
+  };
+  if (includeComparisons && build.comparisons) {
+    result.comparisonDetails = build.comparisons.map(c => ({
+      id: c.id,
+      name: c.name,
+      status: c.status,
+      diffPercentage: c.diff_percentage,
+      approvalStatus: c.approval_status
+    }));
+  }
+  return result;
+}
+
+/**
+ * Display a single build in human-readable format
+ */
+function displayBuild(output, build, verbose) {
+  let colors = output.getColors();
+  output.header('build', build.status);
+  output.keyValue({
+    Name: build.name || build.id,
+    Status: build.status?.toUpperCase(),
+    Branch: build.branch,
+    Commit: build.commit_sha ? `${build.commit_sha.substring(0, 8)} - ${build.commit_message || 'No message'}` : 'N/A'
+  });
+  output.blank();
+
+  // Stats
+  let newCount = build.new_comparisons || 0;
+  let changedCount = build.changed_comparisons || 0;
+  let identicalCount = build.identical_comparisons || 0;
+  output.labelValue('Screenshots', String(build.screenshot_count || 0));
+  let stats = [];
+  if (newCount > 0) stats.push(`${colors.brand.info(newCount)} new`);
+  if (changedCount > 0) stats.push(`${colors.brand.warning(changedCount)} changed`);
+  if (identicalCount > 0) stats.push(`${colors.brand.success(identicalCount)} identical`);
+  if (stats.length > 0) {
+    output.labelValue('Comparisons', stats.join(colors.dim(' · ')));
+  }
+  if (build.approval_status) {
+    output.labelValue('Approval', build.approval_status);
+  }
+  output.blank();
+  if (build.created_at) {
+    output.hint(`Created ${new Date(build.created_at).toLocaleString()}`);
+  }
+  if (build.completed_at) {
+    output.hint(`Completed ${new Date(build.completed_at).toLocaleString()}`);
+  }
+
+  // Show comparisons if included
+  if (build.comparisons && build.comparisons.length > 0) {
+    output.blank();
+    output.labelValue('Comparisons', '');
+    for (let comp of build.comparisons.slice(0, verbose ? 50 : 10)) {
+      let statusIcon = getComparisonStatusIcon(colors, comp.status);
+      output.print(`    ${statusIcon} ${comp.name}`);
+    }
+    if (build.comparisons.length > (verbose ? 50 : 10)) {
+      output.hint(`  ... and ${build.comparisons.length - (verbose ? 50 : 10)} more`);
+    }
+  }
+}
+
+/**
+ * Get color function for build status
+ */
+function getStatusColor(colors, status) {
+  switch (status) {
+    case 'completed':
+      return colors.brand.success;
+    case 'failed':
+      return colors.brand.error;
+    case 'processing':
+    case 'pending':
+      return colors.brand.warning;
+    default:
+      return colors.dim;
+  }
+}
+
+/**
+ * Get icon for comparison status
+ */
+function getComparisonStatusIcon(colors, status) {
+  switch (status) {
+    case 'identical':
+      return colors.brand.success('✓');
+    case 'new':
+      return colors.brand.info('●');
+    case 'changed':
+      return colors.brand.warning('◐');
+    case 'failed':
+      return colors.brand.error('✗');
+    default:
+      return colors.dim('○');
+  }
+}
+
+/**
+ * Validate builds command options
+ */
+export function validateBuildsOptions(options = {}) {
+  let errors = [];
+  if (options.limit && (Number.isNaN(options.limit) || options.limit < 1 || options.limit > 250)) {
+    errors.push('--limit must be a number between 1 and 250');
+  }
+  if (options.offset && (Number.isNaN(options.offset) || options.offset < 0)) {
+    errors.push('--offset must be a non-negative number');
+  }
+  return errors;
+}