npm - @vizzly-testing/cli - Versions diffs - 0.7.2 → 0.9.0 - Mend

@vizzly-testing/cli 0.7.2 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/server/http-server.js CHANGED Viewed

@@ -1,7 +1,13 @@
 import { createServer } from 'http';
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
 import { createServiceLogger } from '../utils/logger-factory.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PROJECT_ROOT = join(__dirname, '..', '..');
 const logger = createServiceLogger('HTTP-SERVER');
-export const createHttpServer = (port, screenshotHandler, emitter = null) => {
+export const createHttpServer = (port, screenshotHandler) => {
   let server = null;
   const parseRequestBody = req => {
     return new Promise((resolve, reject) => {
@@ -30,16 +36,304 @@ export const createHttpServer = (port, screenshotHandler, emitter = null) => {
       res.end();
       return;
     }
-    if (req.method === 'GET' && req.url === '/health') {
+    // Parse URL to handle query params properly for all routes
+    const parsedUrl = new URL(req.url, `http://${req.headers.host}`);
+    if (req.method === 'GET' && parsedUrl.pathname === '/health') {
+      // Enhanced health endpoint with diagnostics
+      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      const baselineMetadataPath = join(process.cwd(), '.vizzly', 'baselines', 'metadata.json');
+      let reportData = null;
+      let baselineInfo = null;
+      if (existsSync(reportDataPath)) {
+        try {
+          reportData = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+        } catch {
+          // Ignore read errors
+        }
+      }
+      if (existsSync(baselineMetadataPath)) {
+        try {
+          baselineInfo = JSON.parse(readFileSync(baselineMetadataPath, 'utf8'));
+        } catch {
+          // Ignore read errors
+        }
+      }
       res.statusCode = 200;
       res.end(JSON.stringify({
         status: 'ok',
         port: port,
-        uptime: process.uptime()
+        uptime: process.uptime(),
+        mode: screenshotHandler ? 'tdd' : 'upload',
+        baseline: baselineInfo ? {
+          buildName: baselineInfo.buildName,
+          createdAt: baselineInfo.createdAt
+        } : null,
+        stats: reportData ? {
+          total: reportData.summary?.total || 0,
+          passed: reportData.summary?.passed || 0,
+          failed: reportData.summary?.failed || 0,
+          errors: reportData.summary?.errors || 0
+        } : null
       }));
       return;
     }
-    if (req.method === 'POST' && req.url === '/screenshot') {
+    // Serve the main React app for all non-API routes
+    if (req.method === 'GET' && (parsedUrl.pathname === '/' || parsedUrl.pathname === '/dashboard' || parsedUrl.pathname === '/stats')) {
+      // Serve React-powered dashboard
+      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      // Try to read existing report data
+      let reportData = null;
+      if (existsSync(reportDataPath)) {
+        try {
+          const data = readFileSync(reportDataPath, 'utf8');
+          reportData = JSON.parse(data);
+        } catch (error) {
+          logger.debug('Could not read report data:', error.message);
+        }
+      }
+      const dashboardHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Vizzly TDD Dashboard</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/reporter-bundle.css">
+</head>
+<body>
+    <div id="vizzly-reporter-root">
+        <div class="reporter-loading">
+            <div>
+                <div class="spinner"></div>
+                <p>Loading Vizzly TDD Dashboard...</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Inject report data if available
+        ${reportData ? `window.VIZZLY_REPORTER_DATA = ${JSON.stringify(reportData)};` : ''}
+    </script>
+    <script src="/reporter-bundle.js"></script>
+</body>
+</html>`;
+      res.setHeader('Content-Type', 'text/html');
+      res.statusCode = 200;
+      res.end(dashboardHtml);
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/reporter-bundle.js') {
+      // Serve the React bundle
+      const bundlePath = join(PROJECT_ROOT, 'dist', 'reporter', 'reporter-bundle.iife.js');
+      if (existsSync(bundlePath)) {
+        try {
+          const bundle = readFileSync(bundlePath, 'utf8');
+          res.setHeader('Content-Type', 'application/javascript');
+          res.statusCode = 200;
+          res.end(bundle);
+        } catch (error) {
+          logger.error('Error serving reporter bundle:', error);
+          res.statusCode = 500;
+          res.end('Error loading reporter bundle');
+        }
+      } else {
+        res.statusCode = 404;
+        res.end('Reporter bundle not found');
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/reporter-bundle.css') {
+      // Serve the React CSS bundle
+      const cssPath = join(PROJECT_ROOT, 'dist', 'reporter', 'reporter-bundle.css');
+      if (existsSync(cssPath)) {
+        try {
+          const css = readFileSync(cssPath, 'utf8');
+          res.setHeader('Content-Type', 'text/css');
+          res.statusCode = 200;
+          res.end(css);
+        } catch (error) {
+          logger.error('Error serving reporter CSS:', error);
+          res.statusCode = 500;
+          res.end('Error loading reporter CSS');
+        }
+      } else {
+        res.statusCode = 404;
+        res.end('Reporter CSS not found');
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/report-data') {
+      // API endpoint for fetching report data
+      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      if (existsSync(reportDataPath)) {
+        try {
+          const data = readFileSync(reportDataPath, 'utf8');
+          res.setHeader('Content-Type', 'application/json');
+          res.statusCode = 200;
+          res.end(data);
+        } catch (error) {
+          logger.error('Error reading report data:', error);
+          res.statusCode = 500;
+          res.end(JSON.stringify({
+            error: 'Failed to read report data'
+          }));
+        }
+      } else {
+        res.statusCode = 200;
+        res.end(JSON.stringify(null)); // No data available yet
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/status') {
+      // Real-time status endpoint
+      const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      const baselineMetadataPath = join(process.cwd(), '.vizzly', 'baselines', 'metadata.json');
+      let reportData = null;
+      let baselineInfo = null;
+      if (existsSync(reportDataPath)) {
+        try {
+          reportData = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+        } catch {
+          // Ignore
+        }
+      }
+      if (existsSync(baselineMetadataPath)) {
+        try {
+          baselineInfo = JSON.parse(readFileSync(baselineMetadataPath, 'utf8'));
+        } catch {
+          // Ignore
+        }
+      }
+      res.setHeader('Content-Type', 'application/json');
+      res.statusCode = 200;
+      res.end(JSON.stringify({
+        timestamp: Date.now(),
+        baseline: baselineInfo,
+        comparisons: reportData?.comparisons || [],
+        summary: reportData?.summary || {
+          total: 0,
+          passed: 0,
+          failed: 0,
+          errors: 0
+        }
+      }));
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/baseline/accept') {
+      // Accept a single screenshot as baseline
+      if (!screenshotHandler?.acceptBaseline) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({
+          error: 'Baseline management not available'
+        }));
+        return;
+      }
+      try {
+        const {
+          name
+        } = await parseRequestBody(req);
+        if (!name) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'Screenshot name required'
+          }));
+          return;
+        }
+        await screenshotHandler.acceptBaseline(name);
+        res.setHeader('Content-Type', 'application/json');
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: `Baseline accepted for ${name}`
+        }));
+      } catch (error) {
+        logger.error('Error accepting baseline:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/baseline/accept-all') {
+      // Accept all screenshots as baseline
+      if (!screenshotHandler?.acceptAllBaselines) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({
+          error: 'Baseline management not available'
+        }));
+        return;
+      }
+      try {
+        const result = await screenshotHandler.acceptAllBaselines();
+        res.setHeader('Content-Type', 'application/json');
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: `Accepted ${result.count} baselines`,
+          count: result.count
+        }));
+      } catch (error) {
+        logger.error('Error accepting all baselines:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/baseline/reset') {
+      // Reset baselines to previous state
+      if (!screenshotHandler?.resetBaselines) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({
+          error: 'Baseline management not available'
+        }));
+        return;
+      }
+      try {
+        await screenshotHandler.resetBaselines();
+        res.setHeader('Content-Type', 'application/json');
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: 'Baselines reset to previous state'
+        }));
+      } catch (error) {
+        logger.error('Error resetting baselines:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    // Serve images from .vizzly directory
+    if (req.method === 'GET' && parsedUrl.pathname.startsWith('/images/')) {
+      const imagePath = parsedUrl.pathname.replace('/images/', '');
+      const fullImagePath = join(process.cwd(), '.vizzly', imagePath);
+      if (existsSync(fullImagePath)) {
+        try {
+          const imageData = readFileSync(fullImagePath);
+          res.setHeader('Content-Type', 'image/png');
+          res.statusCode = 200;
+          res.end(imageData);
+        } catch (error) {
+          logger.error('Error serving image:', error);
+          res.statusCode = 500;
+          res.end('Error loading image');
+        }
+      } else {
+        res.statusCode = 404;
+        res.end('Image not found');
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/screenshot') {
       try {
         const body = await parseRequestBody(req);
         const {
@@ -48,23 +342,17 @@ export const createHttpServer = (port, screenshotHandler, emitter = null) => {
           properties,
           image
         } = body;
-        if (!buildId || !name || !image) {
+        if (!name || !image) {
           res.statusCode = 400;
           res.end(JSON.stringify({
-            error: 'buildId, name, and image are required'
+            error: 'name and image are required'
           }));
           return;
         }
-        const result = await screenshotHandler.handleScreenshot(buildId, name, image, properties);
-        // Emit screenshot captured event if emitter is available
-        if (emitter && result.statusCode === 200) {
-          emitter.emit('screenshot-captured', {
-            name,
-            count: screenshotHandler.getScreenshotCount?.(buildId) || 0,
-            skipped: result.body?.skipped
-          });
-        }
+        // Use default buildId if none provided
+        const effectiveBuildId = buildId || 'default';
+        const result = await screenshotHandler.handleScreenshot(effectiveBuildId, name, image, properties);
         res.statusCode = result.statusCode;
         res.end(JSON.stringify(result.body));
       } catch (error) {
@@ -76,6 +364,43 @@ export const createHttpServer = (port, screenshotHandler, emitter = null) => {
       }
       return;
     }
+    if (req.method === 'POST' && parsedUrl.pathname === '/accept-baseline') {
+      try {
+        const body = await parseRequestBody(req);
+        const {
+          name
+        } = body;
+        if (!name) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'screenshot name is required'
+          }));
+          return;
+        }
+        // Call the screenshot handler's accept baseline method if it exists
+        if (screenshotHandler.acceptBaseline) {
+          const result = await screenshotHandler.acceptBaseline(name);
+          res.statusCode = 200;
+          res.end(JSON.stringify({
+            success: true,
+            ...result
+          }));
+        } else {
+          res.statusCode = 501;
+          res.end(JSON.stringify({
+            error: 'Accept baseline not implemented'
+          }));
+        }
+      } catch (error) {
+        logger.error('Accept baseline error:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: 'Failed to accept baseline'
+        }));
+      }
+      return;
+    }
     res.statusCode = 404;
     res.end(JSON.stringify({
       error: 'Not found'
@@ -124,9 +449,27 @@ export const createHttpServer = (port, screenshotHandler, emitter = null) => {
     }
     return Promise.resolve();
   };
+  /**
+   * Finish build - flush any pending background operations
+   * Call this before finalizing a build to ensure all uploads complete
+   */
+  const finishBuild = async buildId => {
+    logger.debug(`Finishing build ${buildId}...`);
+    // Flush screenshot handler if it has a flush method (API mode)
+    if (screenshotHandler?.flush) {
+      const stats = await screenshotHandler.flush();
+      logger.debug(`Build ${buildId} uploads complete: ${stats.uploaded} uploaded, ${stats.failed} failed`);
+      return stats;
+    }
+    logger.debug(`Build ${buildId} finished (no flush needed)`);
+    return null;
+  };
   return {
     start,
     stop,
+    finishBuild,
     getServer: () => server
   };
 };

package/dist/services/api-service.js CHANGED Viewed

@@ -4,7 +4,7 @@
  */
 import { URLSearchParams } from 'url';
-import { VizzlyError } from '../errors/vizzly-error.js';
+import { VizzlyError, AuthError } from '../errors/vizzly-error.js';
 import crypto from 'crypto';
 import { getPackageVersion } from '../utils/package-info.js';
 import { getApiUrl, getApiToken, getUserAgent } from '../utils/environment-config.js';
@@ -58,6 +58,11 @@ export class ApiService {
       } catch {
         // ignore
       }
+      // Handle authentication errors with user-friendly messages
+      if (response.status === 401) {
+        throw new AuthError('Invalid or expired API token. Please check your VIZZLY_TOKEN environment variable and ensure it is valid.');
+      }
       throw new VizzlyError(`API request failed: ${response.status}${errorText ? ` - ${errorText}` : ''} (URL: ${url})`);
     }
     return response.json();

package/dist/services/html-report-generator.js CHANGED Viewed

@@ -297,6 +297,74 @@ document.addEventListener('DOMContentLoaded', function () {
   console.log('Vizzly TDD Report loaded successfully');
 });
+// Accept/Reject baseline functions
+async function acceptBaseline(screenshotName) {
+  const button = document.querySelector(\`button[onclick*="\${screenshotName}"]\`);
+  if (button) {
+    button.disabled = true;
+    button.innerHTML = '⏳ Accepting...';
+  }
+  try {
+    const response = await fetch('/accept-baseline', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: screenshotName })
+    });
+    if (response.ok) {
+      // Mark as accepted and hide the comparison
+      const comparison = document.querySelector(\`[data-comparison="\${screenshotName}"]\`);
+      if (comparison) {
+        comparison.style.background = '#e8f5e8';
+        comparison.style.border = '2px solid #4caf50';
+        const status = comparison.querySelector('.diff-status');
+        if (status) {
+          status.innerHTML = '✅ Accepted as new baseline';
+          status.style.color = '#4caf50';
+        }
+        const actions = comparison.querySelector('.comparison-actions');
+        if (actions) {
+          actions.innerHTML = '<div style="color: #4caf50; padding: 0.5rem;">✅ Screenshot accepted as new baseline</div>';
+        }
+      }
+      // Auto-refresh after short delay to show updated report
+      setTimeout(() => window.location.reload(), 2000);
+    } else {
+      throw new Error('Failed to accept baseline');
+    }
+  } catch (error) {
+    console.error('Error accepting baseline:', error);
+    if (button) {
+      button.disabled = false;
+      button.innerHTML = '✅ Accept as Baseline';
+    }
+    alert('Failed to accept baseline. Please try again.');
+  }
+}
+function rejectChanges(screenshotName) {
+  const comparison = document.querySelector(\`[data-comparison="\${screenshotName}"]\`);
+  if (comparison) {
+    comparison.style.background = '#fff3cd';
+    comparison.style.border = '2px solid #ffc107';
+    const status = comparison.querySelector('.diff-status');
+    if (status) {
+      status.innerHTML = '⚠️ Changes rejected - baseline unchanged';
+      status.style.color = '#856404';
+    }
+    const actions = comparison.querySelector('.comparison-actions');
+    if (actions) {
+      actions.innerHTML = '<div style="color: #856404; padding: 0.5rem;">⚠️ Changes rejected - baseline kept as-is</div>';
+    }
+  }
+}
     </script>
 </body>
 </html>`;
@@ -331,6 +399,15 @@ document.addEventListener('DOMContentLoaded', function () {
             <button class="view-mode-btn" data-mode="side-by-side">Side by Side</button>
         </div>
+        <div class="comparison-actions">
+            <button class="accept-btn" onclick="acceptBaseline('${safeName}')">
+                ✅ Accept as Baseline
+            </button>
+            <button class="reject-btn" onclick="rejectChanges('${safeName}')">
+                ❌ Keep Current Baseline
+            </button>
+        </div>
         <div class="comparison-viewer">
             <!-- Overlay Mode -->
             <div class="mode-container overlay-mode" data-mode="overlay">

package/dist/services/report-generator/report.css CHANGED Viewed

@@ -337,6 +337,59 @@ body {
   padding: 40px;
 }
+/* Action buttons for accept/reject */
+.comparison-actions {
+  display: flex;
+  gap: 12px;
+  margin: 16px 0;
+  padding: 16px;
+  background: #1e293b;
+  border-radius: 8px;
+  border: 1px solid #334155;
+}
+.accept-btn,
+.reject-btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.accept-btn {
+  background: #059669;
+  color: white;
+}
+.accept-btn:hover {
+  background: #047857;
+}
+.accept-btn:disabled {
+  background: #6b7280;
+  cursor: not-allowed;
+}
+.reject-btn {
+  background: #dc2626;
+  color: white;
+}
+.reject-btn:hover {
+  background: #b91c1c;
+}
+.reject-btn:disabled {
+  background: #6b7280;
+  cursor: not-allowed;
+}
 @media (max-width: 768px) {
   .container {
     padding: 10px;
@@ -352,4 +405,7 @@ body {
     grid-template-columns: 1fr;
     gap: 15px;
   }
+  .comparison-actions {
+    flex-direction: column;
+  }
 }

package/dist/services/screenshot-server.js CHANGED Viewed

@@ -45,14 +45,17 @@ export class ScreenshotServer extends BaseService {
           image,
           properties
         } = body;
-        if (!buildId || !name || !image) {
+        if (!name || !image) {
           res.statusCode = 400;
           res.end(JSON.stringify({
-            error: 'buildId, name, and image are required'
+            error: 'name and image are required'
           }));
           return;
         }
-        await this.buildManager.addScreenshot(buildId, {
+        // Use default buildId if none provided
+        const effectiveBuildId = buildId || 'default';
+        await this.buildManager.addScreenshot(effectiveBuildId, {
           name,
           image,
           properties

package/dist/services/server-manager.js CHANGED Viewed

@@ -7,7 +7,6 @@ import { BaseService } from './base-service.js';
 import { createHttpServer } from '../server/http-server.js';
 import { createTddHandler } from '../server/handlers/tdd-handler.js';
 import { createApiHandler } from '../server/handlers/api-handler.js';
-import { EventEmitter } from 'events';
 export class ServerManager extends BaseService {
   constructor(config, logger) {
     super(config, {
@@ -15,7 +14,6 @@ export class ServerManager extends BaseService {
     });
     this.httpServer = null;
     this.handler = null;
-    this.emitter = null;
   }
   async start(buildId = null, tddMode = false, setBaseline = false) {
     this.buildId = buildId;
@@ -24,19 +22,15 @@ export class ServerManager extends BaseService {
     return super.start();
   }
   async onStart() {
-    this.emitter = new EventEmitter();
     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();
-      if (this.buildId) {
-        this.handler.registerBuild(this.buildId);
-      }
     } else {
       const apiService = await this.createApiService();
       this.handler = createApiHandler(apiService);
     }
-    this.httpServer = createHttpServer(port, this.handler, this.emitter);
+    this.httpServer = createHttpServer(port, this.handler);
     if (this.httpServer) {
       await this.httpServer.start();
     }
@@ -70,9 +64,8 @@ export class ServerManager extends BaseService {
   // Expose server interface for compatibility
   get server() {
     return {
-      emitter: this.emitter,
       getScreenshotCount: buildId => this.handler?.getScreenshotCount?.(buildId) || 0,
-      finishBuild: buildId => this.handler?.finishBuild?.(buildId)
+      finishBuild: buildId => this.httpServer?.finishBuild?.(buildId)
     };
   }
 }