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

package/dist/services/screenshot-server.js

@@ -1,99 +1,65 @@
 /**
  * Screenshot Server Service
  * Listens for and processes screenshots from the test runner
+ *
+ * This class is a thin wrapper around the functional operations in
+ * src/screenshot-server/. It maintains backwards compatibility while
+ * delegating to pure functions for testability.
  */
 
 import { createServer } from 'node:http';
 import { VizzlyError } from '../errors/vizzly-error.js';
+import { handleRequest, parseRequestBody, startServer, stopServer } from '../screenshot-server/index.js';
 import * as output from '../utils/output.js';
 export class ScreenshotServer {
-  constructor(config, buildManager) {
+  constructor(config, buildManager, options = {}) {
     this.config = config;
     this.buildManager = buildManager;
     this.server = null;
+
+    // Dependency injection for testing
+    this.deps = options.deps || {
+      createHttpServer: createServer,
+      output,
+      createError: (message, code) => new VizzlyError(message, code)
+    };
   }
   async start() {
-    this.server = createServer(this.handleRequest.bind(this));
-    return new Promise((resolve, reject) => {
-      this.server.listen(this.config.server.port, '127.0.0.1', error => {
-        if (error) {
-          reject(new VizzlyError(`Failed to start screenshot server: ${error.message}`, 'SERVER_ERROR'));
-        } else {
-          output.info(`Screenshot server listening on http://127.0.0.1:${this.config.server.port}`);
-          resolve();
-        }
-      });
+    this.server = await startServer({
+      config: this.config,
+      requestHandler: this.handleRequest.bind(this),
+      deps: {
+        createHttpServer: this.deps.createHttpServer,
+        createError: this.deps.createError,
+        output: this.deps.output
+      }
     });
   }
   async stop() {
-    if (this.server) {
-      return new Promise(resolve => {
-        this.server.close(() => {
-          output.info('Screenshot server stopped');
-          resolve();
-        });
-      });
-    }
+    await stopServer({
+      server: this.server,
+      deps: {
+        output: this.deps.output
+      }
+    });
   }
   async handleRequest(req, res) {
-    if (req.method === 'POST' && req.url === '/screenshot') {
-      try {
-        const body = await this.parseRequestBody(req);
-        const {
-          buildId,
-          name,
-          image,
-          properties
-        } = body;
-        if (!name || !image) {
-          res.statusCode = 400;
-          res.end(JSON.stringify({
-            error: 'name and image are required'
-          }));
-          return;
-        }
-
-        // Use default buildId if none provided
-        const effectiveBuildId = buildId || 'default';
-        await this.buildManager.addScreenshot(effectiveBuildId, {
-          name,
-          image,
-          properties
-        });
-        res.statusCode = 200;
-        res.end(JSON.stringify({
-          success: true
-        }));
-      } catch (error) {
-        output.error('Failed to process screenshot:', error);
-        res.statusCode = 500;
-        res.end(JSON.stringify({
-          error: 'Internal server error'
-        }));
+    await handleRequest({
+      req,
+      res,
+      deps: {
+        buildManager: this.buildManager,
+        createError: this.deps.createError,
+        output: this.deps.output
       }
-    } else {
-      res.statusCode = 404;
-      res.end(JSON.stringify({
-        error: 'Not found'
-      }));
-    }
+    });
   }
   async parseRequestBody(req) {
-    return new Promise((resolve, reject) => {
-      let body = '';
-      req.on('data', chunk => {
-        body += chunk.toString();
-      });
-      req.on('end', () => {
-        try {
-          resolve(JSON.parse(body));
-        } catch {
-          reject(new VizzlyError('Invalid JSON in request body', 'INVALID_JSON'));
-        }
-      });
-      req.on('error', error => {
-        reject(new VizzlyError(`Request error: ${error.message}`, 'REQUEST_ERROR'));
-      });
+    return parseRequestBody({
+      req,
+      deps: {
+        createError: this.deps.createError
+      }
     });
   }
 }

package/dist/services/server-manager.js

@@ -1,108 +1,71 @@
 /**
  * Server Manager Service
  * Manages the HTTP server with functional handlers
+ *
+ * This class is a thin wrapper around the functional operations in
+ * src/server-manager/. It maintains backwards compatibility while
+ * delegating to pure functions for testability.
  */
 
 import { existsSync, mkdirSync, unlinkSync, writeFileSync } from 'node:fs';
-import { join } from 'node:path';
+import { createApiClient } from '../api/index.js';
 import { createApiHandler } from '../server/handlers/api-handler.js';
 import { createTddHandler } from '../server/handlers/tdd-handler.js';
 import { createHttpServer } from '../server/http-server.js';
+import { buildServerInterface, getTddResults, startServer, stopServer } from '../server-manager/index.js';
 export class ServerManager {
   constructor(config, options = {}) {
     this.config = config;
     this.httpServer = null;
     this.handler = null;
     this.services = options.services || {};
+    this.tddMode = false;
+
+    // Dependency injection for testing - defaults to real implementations
+    this.deps = options.deps || {
+      createHttpServer,
+      createTddHandler,
+      createApiHandler,
+      createApiClient,
+      fs: {
+        mkdirSync,
+        writeFileSync,
+        existsSync,
+        unlinkSync
+      }
+    };
   }
   async start(buildId = null, tddMode = false, setBaseline = false) {
     this.buildId = buildId;
     this.tddMode = tddMode;
     this.setBaseline = setBaseline;
-    const port = this.config?.server?.port || 47392;
-    if (this.tddMode) {
-      this.handler = createTddHandler(this.config, process.cwd(), this.config?.baselineBuildId, this.config?.baselineComparisonId, this.setBaseline);
-      await this.handler.initialize();
-    } else {
-      const apiService = await this.createApiService();
-      this.handler = createApiHandler(apiService);
-    }
-
-    // Pass buildId and tddService in services so http-server can use them
-    const servicesWithExtras = {
-      ...this.services,
-      buildId: this.buildId,
-      // Expose tddService for baseline download operations (TDD mode only)
-      tddService: this.tddMode ? this.handler.tddService : null
-    };
-    this.httpServer = createHttpServer(port, this.handler, servicesWithExtras);
-    if (this.httpServer) {
-      await this.httpServer.start();
-    }
-
-    // Write server info to .vizzly/server.json for SDK discovery
-    // This allows SDKs that can't access environment variables (like Swift/iOS)
-    // to discover both the server port and current build ID
-    try {
-      const vizzlyDir = join(process.cwd(), '.vizzly');
-      mkdirSync(vizzlyDir, {
-        recursive: true
-      });
-      const serverFile = join(vizzlyDir, 'server.json');
-      const serverInfo = {
-        port: port.toString(),
-        pid: process.pid,
-        startTime: Date.now()
-      };
-
-      // Include buildId if we have one (for `vizzly run` mode)
-      if (this.buildId) {
-        serverInfo.buildId = this.buildId;
-      }
-      writeFileSync(serverFile, JSON.stringify(serverInfo, null, 2));
-    } catch {
-      // Non-fatal - SDK can still use health check or environment variables
-    }
-  }
-  async createApiService() {
-    if (!this.config.apiKey) return null;
-    const {
-      ApiService
-    } = await import('./api-service.js');
-    return new ApiService({
-      ...this.config,
-      command: 'run'
+    let result = await startServer({
+      config: this.config,
+      buildId,
+      tddMode,
+      setBaseline,
+      projectRoot: process.cwd(),
+      services: this.services,
+      deps: this.deps
     });
+    this.httpServer = result.httpServer;
+    this.handler = result.handler;
   }
   async stop() {
-    if (this.httpServer) {
-      await this.httpServer.stop();
-    }
-    if (this.handler?.cleanup) {
-      try {
-        this.handler.cleanup();
-      } catch {
-        // Don't throw - cleanup errors shouldn't fail the stop process
-      }
-    }
-
-    // Clean up server.json so the client SDK doesn't try to connect to a dead server
-    try {
-      const serverFile = join(process.cwd(), '.vizzly', 'server.json');
-      if (existsSync(serverFile)) {
-        unlinkSync(serverFile);
-      }
-    } catch {
-      // Non-fatal - cleanup errors shouldn't fail the stop process
-    }
+    await stopServer({
+      httpServer: this.httpServer,
+      handler: this.handler,
+      projectRoot: process.cwd(),
+      deps: this.deps
+    });
   }
 
   // Expose server interface for compatibility
   get server() {
-    return {
-      getScreenshotCount: buildId => this.handler?.getScreenshotCount?.(buildId) || 0,
-      finishBuild: buildId => this.httpServer?.finishBuild?.(buildId)
-    };
+    return buildServerInterface({
+      handler: this.handler,
+      httpServer: this.httpServer
+    });
   }
 
   /**
@@ -110,7 +73,9 @@ export class ServerManager {
    * Only available in TDD mode after tests have run
    */
   async getTddResults() {
-    if (!this.tddMode || !this.handler?.getResults) return null;
-    return await this.handler.getResults();
+    return getTddResults({
+      tddMode: this.tddMode,
+      handler: this.handler
+    });
   }
 }

package/dist/services/static-report-generator.js

@@ -1,12 +1,16 @@
 /**
  * Static Report Generator using React Reporter
  * Generates a self-contained HTML file with the React dashboard and embedded data
+ *
+ * This class is a thin wrapper around the functional report-generator module.
+ * For new code, consider using the functions directly from '../report-generator/'.
  */
 
 import { existsSync } from 'node:fs';
 import { copyFile, mkdir, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { buildFallbackHtmlContent, buildHtmlContent, buildReportDir, buildReportPath, generateReport } from '../report-generator/index.js';
 import * as output from '../utils/output.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -15,8 +19,8 @@ export class StaticReportGenerator {
   constructor(workingDir, config) {
     this.workingDir = workingDir;
     this.config = config;
-    this.reportDir = join(workingDir, '.vizzly', 'report');
-    this.reportPath = join(this.reportDir, 'index.html');
+    this.reportDir = buildReportDir(workingDir);
+    this.reportPath = buildReportPath(this.reportDir);
   }
 
   /**
@@ -25,100 +29,29 @@ export class StaticReportGenerator {
    * @returns {Promise<string>} Path to generated report
    */
   async generateReport(reportData) {
-    if (!reportData || typeof reportData !== 'object') {
-      throw new Error('Invalid report data provided');
-    }
-    try {
-      // Ensure report directory exists
-      await mkdir(this.reportDir, {
-        recursive: true
-      });
-
-      // Copy React bundles to report directory
-      const bundlePath = join(PROJECT_ROOT, 'dist', 'reporter', 'reporter-bundle.iife.js');
-      const cssPath = join(PROJECT_ROOT, 'dist', 'reporter', 'reporter-bundle.css');
-      if (!existsSync(bundlePath) || !existsSync(cssPath)) {
-        throw new Error('Reporter bundles not found. Run "npm run build:reporter" first.');
+    return generateReport({
+      reportData,
+      workingDir: this.workingDir,
+      projectRoot: PROJECT_ROOT,
+      deps: {
+        mkdir,
+        existsSync,
+        copyFile,
+        writeFile,
+        output,
+        getDate: () => new Date()
       }
-
-      // Copy bundles to report directory for self-contained report
-      await copyFile(bundlePath, join(this.reportDir, 'reporter-bundle.js'));
-      await copyFile(cssPath, join(this.reportDir, 'reporter-bundle.css'));
-
-      // Generate HTML with embedded data
-      const htmlContent = this.generateHtmlTemplate(reportData);
-      await writeFile(this.reportPath, htmlContent, 'utf8');
-      output.debug('report', 'generated static report');
-      return this.reportPath;
-    } catch (error) {
-      output.error(`Failed to generate static report: ${error.message}`);
-      throw new Error(`Report generation failed: ${error.message}`);
-    }
+    });
   }
 
   /**
    * Generate HTML template with embedded React app
    * @param {Object} reportData - Report data to embed
    * @returns {string} HTML content
+   * @deprecated Use buildHtmlContent from report-generator/core.js
    */
   generateHtmlTemplate(reportData) {
-    // Serialize report data safely
-    const serializedData = JSON.stringify(reportData).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
-    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 - ${new Date().toLocaleString()}</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 = "${new Date().toISOString()}";
-
-        console.log('Vizzly Static Report loaded');
-        console.log('Report data:', window.VIZZLY_REPORTER_DATA?.summary);
-    </script>
-    <script src="./reporter-bundle.js"></script>
-</body>
-</html>`;
+    return buildHtmlContent(reportData, new Date());
   }
 
   /**
@@ -127,81 +60,6 @@ export class StaticReportGenerator {
    * @returns {string} Minimal HTML content
    */
   generateFallbackHtml(reportData) {
-    const summary = reportData.summary || {};
-    const comparisons = reportData.comparisons || [];
-    const failed = comparisons.filter(c => c.status === 'failed');
-    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: ${new Date().toLocaleString()}</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>
-
-        ${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>'}
-    </div>
-</body>
-</html>`;
+    return buildFallbackHtmlContent(reportData, new Date());
   }
 }