@vizzly-testing/cli 0.20.0 → 0.20.1-beta.0

package/dist/project/operations.js

@@ -0,0 +1,393 @@
+/**
+ * Project Operations - Project operations with dependency injection
+ *
+ * Each operation takes its dependencies as parameters:
+ * - mappingStore: for reading/writing project mappings
+ * - httpClient: for making API requests (OAuth or API token based)
+ *
+ * This makes them trivially testable without mocking modules.
+ */
+
+import { buildBuildsUrl, buildMappingResult, buildNoApiServiceError, buildNoAuthError, buildOrgHeader, buildProjectFetchError, buildProjectUrl, buildTokenCreateError, buildTokenRevokeError, buildTokensFetchError, buildTokensUrl, enrichProjectsWithOrg, extractBuilds, extractOrganizations, extractProject, extractProjects, extractToken, extractTokens, mappingsToArray, validateDirectory, validateProjectData } from './core.js';
+
+// ============================================================================
+// Mapping Operations
+// ============================================================================
+
+/**
+ * List all project mappings
+ * @param {Object} mappingStore - Store with getMappings method
+ * @returns {Promise<Array>} Array of project mappings with directory included
+ */
+export async function listMappings(mappingStore) {
+  let mappings = await mappingStore.getMappings();
+  return mappingsToArray(mappings);
+}
+
+/**
+ * Get project mapping for a specific directory
+ * @param {Object} mappingStore - Store with getMapping method
+ * @param {string} directory - Directory path
+ * @returns {Promise<Object|null>} Project mapping or null
+ */
+export async function getMapping(mappingStore, directory) {
+  return mappingStore.getMapping(directory);
+}
+
+/**
+ * Create or update project mapping
+ * @param {Object} mappingStore - Store with saveMapping method
+ * @param {string} directory - Directory path
+ * @param {Object} projectData - Project data
+ * @returns {Promise<Object>} Created mapping with directory included
+ */
+export async function createMapping(mappingStore, directory, projectData) {
+  let dirValidation = validateDirectory(directory);
+  if (!dirValidation.valid) {
+    throw dirValidation.error;
+  }
+  let dataValidation = validateProjectData(projectData);
+  if (!dataValidation.valid) {
+    throw dataValidation.error;
+  }
+  await mappingStore.saveMapping(directory, projectData);
+  return buildMappingResult(directory, projectData);
+}
+
+/**
+ * Remove project mapping
+ * @param {Object} mappingStore - Store with deleteMapping method
+ * @param {string} directory - Directory path
+ * @returns {Promise<void>}
+ */
+export async function removeMapping(mappingStore, directory) {
+  let validation = validateDirectory(directory);
+  if (!validation.valid) {
+    throw validation.error;
+  }
+  await mappingStore.deleteMapping(directory);
+}
+
+/**
+ * Switch project for a directory (convenience wrapper for createMapping)
+ * @param {Object} mappingStore - Store with saveMapping method
+ * @param {string} directory - Directory path
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @param {string} token - Project token
+ * @returns {Promise<Object>} Updated mapping
+ */
+export async function switchProject(mappingStore, directory, projectSlug, organizationSlug, token) {
+  return createMapping(mappingStore, directory, {
+    projectSlug,
+    organizationSlug,
+    token
+  });
+}
+
+// ============================================================================
+// API Operations - List Projects
+// ============================================================================
+
+/**
+ * List all projects from API using OAuth authentication
+ * @param {Object} oauthClient - OAuth HTTP client with authenticatedRequest method
+ * @returns {Promise<Array>} Array of projects with organization info
+ */
+export async function listProjectsWithOAuth(oauthClient) {
+  // First get the user's organizations via whoami
+  let whoami = await oauthClient.authenticatedRequest('/api/auth/cli/whoami', {
+    method: 'GET'
+  });
+  let organizations = extractOrganizations(whoami);
+  if (organizations.length === 0) {
+    return [];
+  }
+
+  // Fetch projects for each organization
+  let allProjects = [];
+  for (let org of organizations) {
+    try {
+      let response = await oauthClient.authenticatedRequest('/api/project', {
+        method: 'GET',
+        headers: buildOrgHeader(org.slug)
+      });
+      let projects = extractProjects(response);
+      let enriched = enrichProjectsWithOrg(projects, org);
+      allProjects.push(...enriched);
+    } catch {
+      // Silently skip failed orgs
+    }
+  }
+  return allProjects;
+}
+
+/**
+ * List all projects from API using API token authentication
+ * @param {Object} apiClient - API HTTP client with request method
+ * @returns {Promise<Array>} Array of projects
+ */
+export async function listProjectsWithApiToken(apiClient) {
+  let response = await apiClient.request('/api/project', {
+    method: 'GET'
+  });
+  return extractProjects(response);
+}
+
+/**
+ * List all projects, trying OAuth first then falling back to API token
+ * @param {Object} options - Options
+ * @param {Object} [options.oauthClient] - OAuth HTTP client
+ * @param {Object} [options.apiClient] - API token HTTP client
+ * @returns {Promise<Array>} Array of projects
+ */
+export async function listProjects({
+  oauthClient,
+  apiClient
+}) {
+  // Try OAuth-based request first
+  if (oauthClient) {
+    try {
+      return await listProjectsWithOAuth(oauthClient);
+    } catch {
+      // Fall back to API token
+    }
+  }
+
+  // Fall back to API token-based request
+  if (apiClient) {
+    try {
+      return await listProjectsWithApiToken(apiClient);
+    } catch {
+      return [];
+    }
+  }
+
+  // No authentication available
+  return [];
+}
+
+// ============================================================================
+// API Operations - Get Project
+// ============================================================================
+
+/**
+ * Get project details using OAuth authentication
+ * @param {Object} oauthClient - OAuth HTTP client
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @returns {Promise<Object>} Project details
+ */
+export async function getProjectWithOAuth(oauthClient, projectSlug, organizationSlug) {
+  let response = await oauthClient.authenticatedRequest(buildProjectUrl(projectSlug), {
+    method: 'GET',
+    headers: buildOrgHeader(organizationSlug)
+  });
+  return extractProject(response);
+}
+
+/**
+ * Get project details using API token authentication
+ * @param {Object} apiClient - API HTTP client
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @returns {Promise<Object>} Project details
+ */
+export async function getProjectWithApiToken(apiClient, projectSlug, organizationSlug) {
+  let response = await apiClient.request(buildProjectUrl(projectSlug), {
+    method: 'GET',
+    headers: buildOrgHeader(organizationSlug)
+  });
+  return extractProject(response);
+}
+
+/**
+ * Get project details, trying OAuth first then falling back to API token
+ * @param {Object} options - Options
+ * @param {Object} [options.oauthClient] - OAuth HTTP client
+ * @param {Object} [options.apiClient] - API token HTTP client
+ * @param {string} options.projectSlug - Project slug
+ * @param {string} options.organizationSlug - Organization slug
+ * @returns {Promise<Object>} Project details
+ */
+export async function getProject({
+  oauthClient,
+  apiClient,
+  projectSlug,
+  organizationSlug
+}) {
+  // Try OAuth-based request first
+  if (oauthClient) {
+    try {
+      return await getProjectWithOAuth(oauthClient, projectSlug, organizationSlug);
+    } catch {
+      // Fall back to API token
+    }
+  }
+
+  // Fall back to API token
+  if (apiClient) {
+    try {
+      return await getProjectWithApiToken(apiClient, projectSlug, organizationSlug);
+    } catch (error) {
+      throw buildProjectFetchError(error);
+    }
+  }
+  throw buildNoAuthError();
+}
+
+// ============================================================================
+// API Operations - Recent Builds
+// ============================================================================
+
+/**
+ * Get recent builds for a project using OAuth authentication
+ * @param {Object} oauthClient - OAuth HTTP client
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @param {Object} options - Query options
+ * @returns {Promise<Array>} Array of builds
+ */
+export async function getRecentBuildsWithOAuth(oauthClient, projectSlug, organizationSlug, options = {}) {
+  let response = await oauthClient.authenticatedRequest(buildBuildsUrl(projectSlug, options), {
+    method: 'GET',
+    headers: buildOrgHeader(organizationSlug)
+  });
+  return extractBuilds(response);
+}
+
+/**
+ * Get recent builds for a project using API token authentication
+ * @param {Object} apiClient - API HTTP client
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @param {Object} options - Query options
+ * @returns {Promise<Array>} Array of builds
+ */
+export async function getRecentBuildsWithApiToken(apiClient, projectSlug, organizationSlug, options = {}) {
+  let response = await apiClient.request(buildBuildsUrl(projectSlug, options), {
+    method: 'GET',
+    headers: buildOrgHeader(organizationSlug)
+  });
+  return extractBuilds(response);
+}
+
+/**
+ * Get recent builds for a project, trying OAuth first then falling back to API token
+ * @param {Object} options - Options
+ * @param {Object} [options.oauthClient] - OAuth HTTP client
+ * @param {Object} [options.apiClient] - API token HTTP client
+ * @param {string} options.projectSlug - Project slug
+ * @param {string} options.organizationSlug - Organization slug
+ * @param {number} [options.limit] - Number of builds to fetch
+ * @param {string} [options.branch] - Filter by branch
+ * @returns {Promise<Array>} Array of builds
+ */
+export async function getRecentBuilds({
+  oauthClient,
+  apiClient,
+  projectSlug,
+  organizationSlug,
+  limit,
+  branch
+}) {
+  let queryOptions = {
+    limit,
+    branch
+  };
+
+  // Try OAuth-based request first
+  if (oauthClient) {
+    try {
+      return await getRecentBuildsWithOAuth(oauthClient, projectSlug, organizationSlug, queryOptions);
+    } catch {
+      // Fall back to API token
+    }
+  }
+
+  // Fall back to API token-based request
+  if (apiClient) {
+    try {
+      return await getRecentBuildsWithApiToken(apiClient, projectSlug, organizationSlug, queryOptions);
+    } catch {
+      return [];
+    }
+  }
+
+  // No authentication available
+  return [];
+}
+
+// ============================================================================
+// API Operations - Project Tokens
+// ============================================================================
+
+/**
+ * Create a project token
+ * @param {Object} apiClient - API HTTP client with request method
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @param {Object} tokenData - Token data
+ * @param {string} tokenData.name - Token name
+ * @param {string} [tokenData.description] - Token description
+ * @returns {Promise<Object>} Created token
+ */
+export async function createProjectToken(apiClient, projectSlug, organizationSlug, tokenData) {
+  if (!apiClient) {
+    throw buildNoApiServiceError();
+  }
+  try {
+    let response = await apiClient.request(buildTokensUrl(organizationSlug, projectSlug), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(tokenData)
+    });
+    return extractToken(response);
+  } catch (error) {
+    throw buildTokenCreateError(error);
+  }
+}
+
+/**
+ * List project tokens
+ * @param {Object} apiClient - API HTTP client with request method
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @returns {Promise<Array>} Array of tokens
+ */
+export async function listProjectTokens(apiClient, projectSlug, organizationSlug) {
+  if (!apiClient) {
+    throw buildNoApiServiceError();
+  }
+  try {
+    let response = await apiClient.request(buildTokensUrl(organizationSlug, projectSlug), {
+      method: 'GET'
+    });
+    return extractTokens(response);
+  } catch (error) {
+    throw buildTokensFetchError(error);
+  }
+}
+
+/**
+ * Revoke a project token
+ * @param {Object} apiClient - API HTTP client with request method
+ * @param {string} projectSlug - Project slug
+ * @param {string} organizationSlug - Organization slug
+ * @param {string} tokenId - Token ID to revoke
+ * @returns {Promise<void>}
+ */
+export async function revokeProjectToken(apiClient, projectSlug, organizationSlug, tokenId) {
+  if (!apiClient) {
+    throw buildNoApiServiceError();
+  }
+  try {
+    await apiClient.request(buildTokensUrl(organizationSlug, projectSlug, tokenId), {
+      method: 'DELETE'
+    });
+  } catch (error) {
+    throw buildTokenRevokeError(error);
+  }
+}

package/dist/report-generator/core.js

@@ -0,0 +1,315 @@
+/**
+ * Report Generator Core - Pure functions for report generation
+ *
+ * No I/O, no side effects - just data transformations.
+ */
+
+import { join } from 'node:path';
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+export const DEFAULT_REPORT_DIR_NAME = 'report';
+export const BUNDLE_FILENAME = 'reporter-bundle.js';
+export const CSS_FILENAME = 'reporter-bundle.css';
+export const INDEX_FILENAME = 'index.html';
+
+// ============================================================================
+// Path Building
+// ============================================================================
+
+/**
+ * Build report directory path
+ * @param {string} workingDir - Working directory
+ * @returns {string} Report directory path
+ */
+export function buildReportDir(workingDir) {
+  return join(workingDir, '.vizzly', DEFAULT_REPORT_DIR_NAME);
+}
+
+/**
+ * Build report HTML path
+ * @param {string} reportDir - Report directory
+ * @returns {string} Report HTML path
+ */
+export function buildReportPath(reportDir) {
+  return join(reportDir, INDEX_FILENAME);
+}
+
+/**
+ * Build bundle source paths
+ * @param {string} projectRoot - Project root directory
+ * @returns {{ bundlePath: string, cssPath: string }}
+ */
+export function buildBundleSourcePaths(projectRoot) {
+  return {
+    bundlePath: join(projectRoot, 'dist', 'reporter', 'reporter-bundle.iife.js'),
+    cssPath: join(projectRoot, 'dist', 'reporter', 'reporter-bundle.css')
+  };
+}
+
+/**
+ * Build bundle destination paths
+ * @param {string} reportDir - Report directory
+ * @returns {{ bundleDest: string, cssDest: string }}
+ */
+export function buildBundleDestPaths(reportDir) {
+  return {
+    bundleDest: join(reportDir, BUNDLE_FILENAME),
+    cssDest: join(reportDir, CSS_FILENAME)
+  };
+}
+
+// ============================================================================
+// Validation
+// ============================================================================
+
+/**
+ * Validate report data
+ * @param {any} reportData - Report data to validate
+ * @returns {{ valid: boolean, error: string|null }}
+ */
+export function validateReportData(reportData) {
+  if (!reportData || typeof reportData !== 'object') {
+    return {
+      valid: false,
+      error: 'Invalid report data provided'
+    };
+  }
+  return {
+    valid: true,
+    error: null
+  };
+}
+
+/**
+ * Check if bundles exist
+ * @param {boolean} bundleExists - Whether bundle JS exists
+ * @param {boolean} cssExists - Whether bundle CSS exists
+ * @returns {{ valid: boolean, error: string|null }}
+ */
+export function validateBundlesExist(bundleExists, cssExists) {
+  if (!bundleExists || !cssExists) {
+    return {
+      valid: false,
+      error: 'Reporter bundles not found. Run "npm run build:reporter" first.'
+    };
+  }
+  return {
+    valid: true,
+    error: null
+  };
+}
+
+// ============================================================================
+// Data Serialization
+// ============================================================================
+
+/**
+ * Safely serialize data for embedding in HTML script tag
+ * Escapes characters that could break out of script context
+ * @param {Object} data - Data to serialize
+ * @returns {string} Safely serialized JSON string
+ */
+export function serializeForHtml(data) {
+  return JSON.stringify(data).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
+}
+
+// ============================================================================
+// HTML Template Generation
+// ============================================================================
+
+/**
+ * Generate the main HTML template with React reporter
+ * @param {Object} options - Template options
+ * @param {string} options.serializedData - Serialized report data
+ * @param {string} options.timestamp - ISO timestamp string
+ * @param {string} options.displayDate - Human-readable date string
+ * @returns {string} HTML content
+ */
+export function generateMainTemplate({
+  serializedData,
+  timestamp,
+  displayDate
+}) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vizzly Dev Report - ${displayDate}</title>
+    <link rel="stylesheet" href="./reporter-bundle.css">
+    <style>
+        /* Loading spinner styles */
+        .reporter-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            background: #0f172a;
+            color: #f59e0b;
+        }
+        .spinner {
+            width: 48px;
+            height: 48px;
+            border: 4px solid rgba(245, 158, 11, 0.2);
+            border-top-color: #f59e0b;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 1rem;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div id="vizzly-reporter-root">
+        <div class="reporter-loading">
+            <div style="text-align: center;">
+                <div class="spinner"></div>
+                <p>Loading Vizzly Report...</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Embedded report data (static mode)
+        window.VIZZLY_REPORTER_DATA = ${serializedData};
+        window.VIZZLY_STATIC_MODE = true;
+
+        // Generate timestamp for "generated at" display
+        window.VIZZLY_REPORT_GENERATED_AT = "${timestamp}";
+
+        console.log('Vizzly Static Report loaded');
+        console.log('Report data:', window.VIZZLY_REPORTER_DATA?.summary);
+    </script>
+    <script src="./reporter-bundle.js"></script>
+</body>
+</html>`;
+}
+
+/**
+ * Generate fallback HTML template (when bundles are missing)
+ * @param {Object} options - Template options
+ * @param {Object} options.summary - Report summary
+ * @param {Array} options.comparisons - Comparison results
+ * @param {string} options.displayDate - Human-readable date string
+ * @returns {string} HTML content
+ */
+export function generateFallbackTemplate({
+  summary,
+  comparisons,
+  displayDate
+}) {
+  let failed = comparisons.filter(c => c.status === 'failed');
+  let failedSection = failed.length > 0 ? `
+            <h2>Failed Comparisons</h2>
+            <ul>
+                ${failed.map(c => `<li>${c.name} - ${c.diffPercentage || 0}% difference</li>`).join('')}
+            </ul>
+        ` : '<p style="text-align: center; font-size: 1.5rem;">✅ All tests passed!</p>';
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vizzly Dev Report</title>
+    <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            background: #0f172a;
+            color: #e2e8f0;
+            padding: 2rem;
+        }
+        .container { max-width: 1200px; margin: 0 auto; }
+        .header { text-align: center; margin-bottom: 2rem; }
+        .summary {
+            display: flex;
+            gap: 2rem;
+            justify-content: center;
+            margin: 2rem 0;
+        }
+        .stat { text-align: center; }
+        .stat-number {
+            font-size: 3rem;
+            font-weight: bold;
+            display: block;
+        }
+        .warning {
+            background: #fef3c7;
+            color: #92400e;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            margin: 2rem 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🐻 Vizzly Dev Report</h1>
+            <p>Generated: ${displayDate}</p>
+        </div>
+
+        <div class="summary">
+            <div class="stat">
+                <span class="stat-number">${summary.total || 0}</span>
+                <span>Total</span>
+            </div>
+            <div class="stat">
+                <span class="stat-number" style="color: #10b981;">${summary.passed || 0}</span>
+                <span>Passed</span>
+            </div>
+            <div class="stat">
+                <span class="stat-number" style="color: #ef4444;">${summary.failed || 0}</span>
+                <span>Failed</span>
+            </div>
+        </div>
+
+        <div class="warning">
+            <strong>⚠️ Limited Report</strong>
+            <p>This is a fallback report. For the full interactive experience, ensure the reporter bundle is built:</p>
+            <code>npm run build:reporter</code>
+        </div>
+
+        ${failedSection}
+    </div>
+</body>
+</html>`;
+}
+
+/**
+ * Build HTML content for the report
+ * @param {Object} reportData - Report data
+ * @param {Date} date - Current date
+ * @returns {string} HTML content
+ */
+export function buildHtmlContent(reportData, date) {
+  let serializedData = serializeForHtml(reportData);
+  let timestamp = date.toISOString();
+  let displayDate = date.toLocaleString();
+  return generateMainTemplate({
+    serializedData,
+    timestamp,
+    displayDate
+  });
+}
+
+/**
+ * Build fallback HTML content
+ * @param {Object} reportData - Report data
+ * @param {Date} date - Current date
+ * @returns {string} HTML content
+ */
+export function buildFallbackHtmlContent(reportData, date) {
+  let summary = reportData.summary || {};
+  let comparisons = reportData.comparisons || [];
+  let displayDate = date.toLocaleString();
+  return generateFallbackTemplate({
+    summary,
+    comparisons,
+    displayDate
+  });
+}