@vizzly-testing/cli 0.3.2 → 0.5.0

package/dist/utils/diagnostics.js

@@ -1,184 +0,0 @@
-/**
- * Diagnostics utilities for the doctor command
- */
-import { spawn } from 'child_process';
-import { access, constants } from 'fs/promises';
-import { getApiToken } from './environment-config.js';
-
-/**
- * Check if required dependencies are available
- */
-export async function checkDependencies() {
-  const dependencies = {
-    node: await checkNodeVersion(),
-    npm: await checkCommandAvailable('npm'),
-    git: await checkCommandAvailable('git'),
-    odiff: await checkOdiffBinary()
-  };
-  const allOk = Object.values(dependencies).every(dep => dep.available);
-  return {
-    all_ok: allOk,
-    details: dependencies
-  };
-}
-
-/**
- * Check Node.js version
- */
-async function checkNodeVersion() {
-  try {
-    const version = process.version;
-    const majorVersion = parseInt(version.slice(1).split('.')[0]);
-    const supported = majorVersion >= 20;
-    return {
-      available: true,
-      version,
-      supported,
-      message: supported ? 'OK' : 'Node.js 20+ required'
-    };
-  } catch (error) {
-    return {
-      available: false,
-      error: error.message
-    };
-  }
-}
-
-/**
- * Check if a command is available
- */
-async function checkCommandAvailable(command) {
-  return new Promise(resolve => {
-    const child = spawn(command, ['--version'], {
-      stdio: 'pipe'
-    });
-    let output = '';
-    child.stdout.on('data', data => {
-      output += data.toString();
-    });
-    child.on('close', code => {
-      resolve({
-        available: code === 0,
-        version: output.trim().split('\n')[0] || 'Unknown',
-        message: code === 0 ? 'OK' : `Command '${command}' not found`
-      });
-    });
-    child.on('error', () => {
-      resolve({
-        available: false,
-        message: `Command '${command}' not found`
-      });
-    });
-  });
-}
-
-/**
- * Check if odiff binary is available
- */
-async function checkOdiffBinary() {
-  try {
-    // Check if odiff-bin package is installed and binary is accessible
-    const {
-      findOdiffBin
-    } = await import('odiff-bin');
-    const odiffPath = findOdiffBin();
-    await access(odiffPath, constants.F_OK | constants.X_OK);
-    return {
-      available: true,
-      path: odiffPath,
-      message: 'OK'
-    };
-  } catch (error) {
-    return {
-      available: false,
-      error: error.message,
-      message: 'odiff binary not found or not executable'
-    };
-  }
-}
-
-/**
- * Check API connectivity
- */
-
-export async function checkApiConnectivity(config) {
-  try {
-    const apiUrl = config?.apiUrl || 'https://vizzly.dev';
-    const apiKey = config?.apiKey || getApiToken();
-
-    // Basic URL validation
-    try {
-      new globalThis.URL(apiUrl);
-    } catch {
-      throw new Error(`Invalid API URL: ${apiUrl}`);
-    }
-    const result = {
-      url: apiUrl,
-      has_token: !!apiKey,
-      reachable: false,
-      authenticated: false
-    };
-
-    // Try to reach the API
-    try {
-      const response = await fetch(`${apiUrl}/health`, {
-        method: 'GET',
-        timeout: 5000
-      });
-      result.reachable = response.ok;
-      result.status_code = response.status;
-
-      // Test authentication if we have a token
-      if (apiKey && result.reachable) {
-        const authResponse = await fetch(`${apiUrl}/api/user`, {
-          method: 'GET',
-          headers: {
-            Authorization: `Bearer ${apiKey}`,
-            'Content-Type': 'application/json'
-          },
-          timeout: 5000
-        });
-        result.authenticated = authResponse.ok;
-        result.auth_status_code = authResponse.status;
-      }
-    } catch (fetchError) {
-      result.reachable = false;
-      result.error = fetchError.message;
-    }
-    return result;
-  } catch (error) {
-    return {
-      error: error.message,
-      reachable: false,
-      authenticated: false
-    };
-  }
-}
-
-/**
- * Check terminal capabilities
- */
-export function checkTerminalCapabilities() {
-  return {
-    stdout_is_tty: Boolean(process.stdout.isTTY),
-    stdin_is_tty: Boolean(process.stdin.isTTY),
-    supports_color: Boolean(process.stdout.isTTY && process.env.TERM !== 'dumb'),
-    terminal_type: process.env.TERM || 'unknown',
-    columns: process.stdout.columns || 0,
-    rows: process.stdout.rows || 0
-  };
-}
-
-/**
- * Get system information
- */
-export function getSystemInfo() {
-  return {
-    platform: process.platform,
-    arch: process.arch,
-    node_version: process.version,
-    memory_usage: process.memoryUsage(),
-    uptime: process.uptime(),
-    working_directory: process.cwd()
-  };
-}

package/dist/utils/error-messages.js

@@ -1,34 +0,0 @@
-export const ERROR_MESSAGES = {
-  NO_API_TOKEN: {
-    message: 'No API token provided',
-    hint: 'Set the VIZZLY_TOKEN environment variable or pass --token flag',
-    docs: 'https://github.com/vizzly-testing/cli#set-up-your-api-token'
-  },
-  BUILD_CREATION_FAILED: {
-    message: 'Failed to create build',
-    hint: 'Check your API token permissions and network connection',
-    docs: 'https://github.com/vizzly-testing/cli/blob/main/docs/upload-command.md#troubleshooting'
-  },
-  NO_SCREENSHOTS_FOUND: {
-    message: 'No screenshots found',
-    hint: 'Make sure your test code calls vizzlyScreenshot() or check the screenshots directory',
-    docs: 'https://github.com/vizzly-testing/cli/blob/main/docs/getting-started.md'
-  },
-  PORT_IN_USE: {
-    message: 'Port is already in use',
-    hint: 'Try a different port with --port flag or stop the process using this port',
-    docs: 'https://github.com/vizzly-testing/cli/blob/main/docs/test-integration.md#troubleshooting'
-  }
-};
-export function formatError(errorCode, context = {}) {
-  const errorInfo = ERROR_MESSAGES[errorCode];
-  if (!errorInfo) return {
-    message: errorCode
-  };
-  return {
-    message: errorInfo.message,
-    hint: errorInfo.hint,
-    docs: errorInfo.docs,
-    context
-  };
-}

package/dist/utils/framework-detector.js

@@ -1,40 +0,0 @@
-import fs from 'fs/promises';
-import path from 'path';
-
-/**
- * Detect testing framework from project dependencies
- * @returns {Promise<string|null>} Detected framework or null
- */
-export async function detectFramework() {
-  try {
-    const packageJsonPath = path.join(process.cwd(), 'package.json');
-    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
-    const dependencies = {
-      ...(packageJson.dependencies || {}),
-      ...(packageJson.devDependencies || {})
-    };
-
-    // Check for common testing frameworks
-    if (dependencies['@playwright/test'] || dependencies.playwright) {
-      return 'playwright';
-    }
-    if (dependencies.cypress) {
-      return 'cypress';
-    }
-    if (dependencies.puppeteer) {
-      return 'puppeteer';
-    }
-
-    // Check for config files
-    const files = await fs.readdir(process.cwd());
-    if (files.some(f => f.includes('playwright.config'))) {
-      return 'playwright';
-    }
-    if (files.some(f => f.includes('cypress.config'))) {
-      return 'cypress';
-    }
-    return null;
-  } catch {
-    return null;
-  }
-}

package/dist/utils/help.js

@@ -1,66 +0,0 @@
-import { createColors } from './colors.js';
-
-/**
- * Display help information for the CLI
- * @param {Object} globalOptions - Global CLI options
- */
-export function showHelp(globalOptions = {}) {
-  const colors = createColors({
-    useColor: !globalOptions.noColor
-  });
-  if (globalOptions.json) {
-    console.log(JSON.stringify({
-      status: 'info',
-      message: 'Vizzly CLI Help',
-      commands: [{
-        name: 'run',
-        description: 'Run tests with Vizzly visual testing'
-      }, {
-        name: 'upload',
-        description: 'Upload screenshots to Vizzly'
-      }, {
-        name: 'init',
-        description: 'Initialize Vizzly configuration'
-      }],
-      timestamp: new Date().toISOString()
-    }));
-    return;
-  }
-  console.log('');
-  console.log(colors.cyan(colors.bold('🔍 Vizzly CLI')));
-  console.log(colors.dim('Visual testing tool for UI developers'));
-  console.log('');
-  console.log(colors.yellow(colors.bold('Available Commands:')));
-  console.log('');
-  console.log(`  ${colors.green(colors.bold('run'))}     Run tests with Vizzly visual testing`);
-  console.log(`  ${colors.green(colors.bold('upload'))}  Upload screenshots to Vizzly`);
-  console.log(`  ${colors.green(colors.bold('init'))}    Initialize Vizzly configuration`);
-  console.log('');
-  console.log(colors.dim('Use ') + colors.cyan('vizzly <command> --help') + colors.dim(' for command-specific options'));
-  console.log('');
-}
-
-/**
- * Show error for unknown command
- * @param {string} command - Unknown command name
- * @param {Object} globalOptions - Global CLI options
- */
-export function showUnknownCommand(command, globalOptions = {}) {
-  const colors = createColors({
-    useColor: !globalOptions.noColor
-  });
-  if (globalOptions.json) {
-    console.error(JSON.stringify({
-      status: 'error',
-      message: `Unknown command: ${command}`,
-      availableCommands: ['run', 'upload', 'init'],
-      timestamp: new Date().toISOString()
-    }));
-    process.exit(1);
-  }
-  console.error(colors.red(`✖ Unknown command: ${command}`));
-  console.error('');
-  console.error(colors.dim('Available commands: run, upload, init'));
-  console.error('');
-  process.exit(1);
-}

package/dist/utils/image-comparison.js

@@ -1,172 +0,0 @@
-import { compare } from 'odiff-bin';
-import fs from 'fs/promises';
-import path from 'path';
-import os from 'os';
-import crypto from 'crypto';
-import { VizzlyError } from '../errors/vizzly-error.js';
-
-/**
- * Compare two images and return the difference
- * @param {Buffer} imageBuffer1 - First image buffer
- * @param {Buffer} imageBuffer2 - Second image buffer
- * @param {Object} options - Comparison options
- * @param {number} options.threshold - Matching threshold (0-1)
- * @param {boolean} options.ignoreAntialiasing - Ignore antialiasing
- * @param {boolean} options.ignoreColors - Ignore colors (not supported by odiff)
- * @param {Array} options.ignoreRegions - Regions to ignore in comparison
- * @returns {Promise<Object>} Comparison result
- */
-export async function compareImages(imageBuffer1, imageBuffer2, options = {}) {
-  // Create temporary files for odiff
-  const tempDir = os.tmpdir();
-  const tempId = crypto.randomBytes(8).toString('hex');
-  const basePath = path.join(tempDir, `vizzly-base-${tempId}.png`);
-  const comparePath = path.join(tempDir, `vizzly-compare-${tempId}.png`);
-  const diffPath = path.join(tempDir, `vizzly-diff-${tempId}.png`);
-  try {
-    // Write buffers to temporary files
-    await fs.writeFile(basePath, imageBuffer1);
-    await fs.writeFile(comparePath, imageBuffer2);
-
-    // Configure odiff options
-    const odiffOptions = {
-      threshold: options.threshold || 0.1,
-      antialiasing: options.ignoreAntialiasing !== false,
-      outputDiffMask: true,
-      failOnLayoutDiff: false,
-      noFailOnFsErrors: false,
-      diffColor: '#ff0000',
-      // Red for differences
-      captureDiffLines: true,
-      reduceRamUsage: false,
-      ignoreRegions: options.ignoreRegions || []
-    };
-
-    // Run odiff comparison
-    const result = await compare(basePath, comparePath, diffPath, odiffOptions);
-
-    // Process results
-    if (result.match) {
-      return {
-        misMatchPercentage: 0,
-        diffPixels: 0,
-        totalPixels: 0,
-        dimensionDifference: {
-          width: 0,
-          height: 0
-        },
-        diffBuffer: null
-      };
-    }
-
-    // Handle different failure reasons
-    switch (result.reason) {
-      case 'layout-diff':
-        {
-          return {
-            misMatchPercentage: 100,
-            dimensionDifference: {
-              width: 'unknown',
-              height: 'unknown'
-            },
-            error: 'Image dimensions do not match',
-            diffBuffer: null
-          };
-        }
-      case 'pixel-diff':
-        {
-          // Read the diff image
-          const diffBuffer = await fs.readFile(diffPath);
-          return {
-            misMatchPercentage: result.diffPercentage,
-            diffPixels: result.diffCount,
-            totalPixels: Math.round(result.diffCount / (result.diffPercentage / 100)),
-            dimensionDifference: {
-              width: 0,
-              height: 0
-            },
-            diffBuffer,
-            diffLines: result.diffLines
-          };
-        }
-      case 'file-not-exists':
-        throw new VizzlyError(`Image file not found: ${result.file}`, 'IMAGE_NOT_FOUND', {
-          file: result.file
-        });
-      default:
-        throw new VizzlyError('Unknown comparison result', 'COMPARISON_UNKNOWN', {
-          result
-        });
-    }
-  } catch (error) {
-    // Re-throw VizzlyErrors
-    if (error instanceof VizzlyError) {
-      throw error;
-    }
-    throw new VizzlyError('Failed to compare images', 'IMAGE_COMPARISON_FAILED', {
-      error: error.message
-    });
-  } finally {
-    // Clean up temporary files
-    await Promise.all([fs.unlink(basePath).catch(() => {}), fs.unlink(comparePath).catch(() => {}), fs.unlink(diffPath).catch(() => {})]);
-  }
-}
-
-/**
- * Check if buffer is a valid PNG image
- * @param {Buffer} buffer - Image buffer
- * @returns {boolean} True if valid PNG
- */
-export function isValidPNG(buffer) {
-  // Check PNG signature
-  if (!buffer || buffer.length < 8) {
-    return false;
-  }
-
-  // PNG signature: 137 80 78 71 13 10 26 10
-  const pngSignature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
-  return buffer.subarray(0, 8).equals(pngSignature);
-}
-
-/**
- * Get image dimensions from PNG buffer
- * @param {Buffer} buffer - Image buffer
- * @returns {Object|null} Dimensions or null if invalid
- */
-export function getImageDimensions(buffer) {
-  if (!isValidPNG(buffer)) {
-    return null;
-  }
-  try {
-    // PNG dimensions are stored in the IHDR chunk
-    // Skip PNG signature (8 bytes) + chunk length (4 bytes) + chunk type (4 bytes)
-    const width = buffer.readUInt32BE(16);
-    const height = buffer.readUInt32BE(20);
-    return {
-      width,
-      height
-    };
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Compare images with ignore regions
- * @param {Buffer} imageBuffer1 - First image buffer
- * @param {Buffer} imageBuffer2 - Second image buffer
- * @param {Array<{x: number, y: number, width: number, height: number}>} ignoreRegions - Regions to ignore
- * @returns {Promise<Object>} Comparison result
- */
-export async function compareImagesWithIgnoreRegions(imageBuffer1, imageBuffer2, ignoreRegions = []) {
-  // Convert ignore regions to odiff format
-  const odiffIgnoreRegions = ignoreRegions.map(region => ({
-    x1: region.x,
-    y1: region.y,
-    x2: region.x + region.width,
-    y2: region.y + region.height
-  }));
-  return compareImages(imageBuffer1, imageBuffer2, {
-    ignoreRegions: odiffIgnoreRegions
-  });
-}

package/dist/utils/package.js

@@ -1,9 +0,0 @@
-import { readFile } from 'fs/promises';
-import { resolve, dirname } from 'path';
-import { fileURLToPath } from 'url';
-const __dirname = dirname(fileURLToPath(import.meta.url));
-export async function getPackageInfo() {
-  const packagePath = resolve(__dirname, '../../package.json');
-  const content = await readFile(packagePath, 'utf-8');
-  return JSON.parse(content);
-}

package/dist/utils/project-detection.js

@@ -1,145 +0,0 @@
-/**
- * Project Detection Utilities
- * Automatically detect project type and framework
- */
-
-import { readFile, access } from 'fs/promises';
-import { join } from 'path';
-
-/**
- * Detect project type and framework
- * @param {string} directory - Directory to analyze
- * @returns {Promise<Object>} Project information
- */
-export async function detectProjectType(directory = process.cwd()) {
-  const packageJsonPath = join(directory, 'package.json');
-  let packageJsonData = null;
-  try {
-    const content = await readFile(packageJsonPath, 'utf8');
-    packageJsonData = JSON.parse(content);
-  } catch {
-    // No package.json found
-  }
-
-  // Detect framework based on dependencies and files
-  const framework = await detectFramework(directory, packageJsonData);
-  const type = detectProjectTypeFromFramework(framework);
-  return {
-    type,
-    framework,
-    hasPackageJson: !!packageJsonData,
-    projectName: packageJsonData?.name || 'unknown',
-    dependencies: packageJsonData?.dependencies || {},
-    devDependencies: packageJsonData?.devDependencies || {}
-  };
-}
-
-/**
- * Detect testing framework
- * @param {string} directory - Directory to analyze
- * @param {Object} packageJson - Package.json content
- * @returns {Promise<string>} Framework name
- */
-async function detectFramework(directory, packageJson) {
-  const dependencies = {
-    ...packageJson?.dependencies,
-    ...packageJson?.devDependencies
-  };
-
-  // Check for specific framework dependencies
-  if (dependencies.cypress) {
-    return 'cypress';
-  }
-  if (dependencies.playwright || dependencies['@playwright/test']) {
-    return 'playwright';
-  }
-  if (dependencies.webdriverio || dependencies['@wdio/cli']) {
-    return 'webdriver';
-  }
-  if (dependencies.jest || dependencies['@jest/core']) {
-    return 'jest';
-  }
-  if (dependencies.vitest) {
-    return 'vitest';
-  }
-  if (dependencies.mocha) {
-    return 'mocha';
-  }
-
-  // Check for config files
-  const configFiles = ['cypress.config.js', 'playwright.config.js', 'wdio.conf.js', 'jest.config.js', 'vitest.config.js'];
-  for (const configFile of configFiles) {
-    try {
-      await access(join(directory, configFile));
-      return configFile.split('.')[0];
-    } catch {
-      // File doesn't exist
-    }
-  }
-  return 'generic';
-}
-
-/**
- * Determine project type from framework
- * @param {string} framework - Framework name
- * @returns {string} Project type
- */
-function detectProjectTypeFromFramework(framework) {
-  const e2eFrameworks = ['cypress', 'playwright', 'webdriver'];
-  if (e2eFrameworks.includes(framework)) {
-    return 'e2e';
-  }
-  return 'web';
-}
-
-/**
- * Get suggested test command for framework
- * @param {string} framework - Framework name
- * @param {Object} packageJson - Package.json content
- * @returns {string} Suggested test command
- */
-export function getSuggestedTestCommand(framework, packageJson) {
-  const scripts = packageJson?.scripts || {};
-
-  // Check for common script names
-  const testScripts = ['test:e2e', 'test:integration', 'e2e', 'cypress:run', 'playwright:test', 'test'];
-  for (const script of testScripts) {
-    if (scripts[script]) {
-      return `npm run ${script}`;
-    }
-  }
-
-  // Framework-specific defaults
-  switch (framework) {
-    case 'cypress':
-      return 'npx cypress run';
-    case 'playwright':
-      return 'npx playwright test';
-    case 'webdriver':
-      return 'npx wdio run';
-    case 'jest':
-      return 'npx jest';
-    case 'vitest':
-      return 'npx vitest run';
-    default:
-      return 'npm test';
-  }
-}
-
-/**
- * Get suggested screenshots directory for framework
- * @param {string} framework - Framework name
- * @returns {string} Screenshots directory
- */
-export function getSuggestedScreenshotsDir(framework) {
-  switch (framework) {
-    case 'cypress':
-      return './cypress/screenshots';
-    case 'playwright':
-      return './test-results';
-    case 'webdriver':
-      return './screenshots';
-    default:
-      return './screenshots';
-  }
-}