@membranehq/cli 0.1.1

package/src/testing/scripts/generate-test-report.ts

@@ -0,0 +1,757 @@
+import fs from 'fs'
+import path from 'path'
+
+import yaml from 'js-yaml'
+
+interface TestNode {
+  name: string
+  path: string
+  content?: string
+  parsedContent?: unknown
+  children: TestNode[]
+}
+
+interface TestResult {
+  logs: any[]
+  assertions: TestAssertion[]
+  error?: any
+}
+
+interface TestAssertion {
+  message: string
+  result: boolean
+  details?: any
+}
+
+interface TestSummary {
+  totalDataCollections: number
+  fullyFunctional: number
+  partiallyFunctional: number
+  failed: number
+  untested: number
+  // Test-level statistics
+  totalTests: number
+  successfulTests: number
+  warningTests: number
+  errorTests: number
+  untestedTests: number
+}
+
+function calculateTestStatus(node: TestNode): 'success' | 'warning' | 'error' | 'untested' {
+  if (!node.parsedContent || typeof node.parsedContent !== 'object') {
+    return 'untested'
+  }
+
+  const parsed = node.parsedContent as any
+  const result = parsed.result as TestResult | undefined
+
+  if (!result) {
+    return 'untested'
+  }
+
+  if (result.error) {
+    return 'error'
+  }
+
+  if (!result.assertions || result.assertions.length === 0) {
+    return 'untested'
+  }
+
+  const hasFailures = result.assertions.some((assertion: TestAssertion) => !assertion.result)
+  const allPassed = result.assertions.every((assertion: TestAssertion) => assertion.result)
+
+  if (allPassed) {
+    return 'success'
+  } else if (hasFailures) {
+    return 'warning'
+  }
+
+  return 'untested'
+}
+
+function calculateDataCollectionSummary(nodes: TestNode[]): TestSummary {
+  let totalDataCollections = 0
+  let fullyFunctional = 0
+  let partiallyFunctional = 0
+  let failed = 0
+  let untested = 0
+  let totalTests = 0
+  let successfulTests = 0
+  let warningTests = 0
+  let errorTests = 0
+  let untestedTests = 0
+
+  function processNodes(nodeList: TestNode[]) {
+    for (const node of nodeList) {
+      if (node.children.length > 0) {
+        // Check if this is a data collection folder (has test files)
+        const hasTestFiles = node.children.some(
+          (child) => child.name.endsWith('.test.yml') || child.name.endsWith('.test.yaml'),
+        )
+
+        if (hasTestFiles) {
+          totalDataCollections++
+
+          const testResults = node.children
+            .filter((child) => child.name.endsWith('.test.yml') || child.name.endsWith('.test.yaml'))
+            .map((child) => calculateTestStatus(child))
+
+          totalTests += testResults.length
+          const successCount = testResults.filter((status) => status === 'success').length
+          const errorCount = testResults.filter((status) => status === 'error').length
+          const warningCount = testResults.filter((status) => status === 'warning').length
+          const untestedCount = testResults.filter((status) => status === 'untested').length
+
+          successfulTests += successCount
+          errorTests += errorCount
+          warningTests += warningCount
+          untestedTests += untestedCount
+
+          if (errorCount > 0) {
+            failed++
+          } else if (untestedCount > 0) {
+            untested++
+          } else if (warningCount > 0) {
+            partiallyFunctional++
+          } else if (successCount > 0) {
+            fullyFunctional++
+          } else {
+            untested++
+          }
+        }
+
+        processNodes(node.children)
+      }
+    }
+  }
+
+  processNodes(nodes)
+
+  return {
+    totalDataCollections,
+    fullyFunctional,
+    partiallyFunctional,
+    failed,
+    untested,
+    totalTests,
+    successfulTests,
+    warningTests,
+    errorTests,
+    untestedTests,
+  }
+}
+
+function buildTestTree(dir: string, basePath: string = ''): TestNode[] {
+  const nodes: TestNode[] = []
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+    const relativePath = path.join(basePath, entry.name)
+
+    if (entry.isDirectory()) {
+      nodes.push({
+        name: entry.name,
+        path: relativePath,
+        children: buildTestTree(fullPath, relativePath),
+      })
+    } else if (entry.name.endsWith('.yaml') || entry.name.endsWith('.yml')) {
+      const content = fs.readFileSync(fullPath, 'utf8')
+      let parsedContent: unknown
+      try {
+        parsedContent = yaml.load(content)
+        console.warn(`Successfully loaded YAML file: ${fullPath}`)
+      } catch (error) {
+        console.error(`Error parsing YAML file ${fullPath}:`, error)
+      }
+      nodes.push({
+        name: entry.name,
+        path: relativePath,
+        content,
+        parsedContent,
+        children: [],
+      })
+    }
+  }
+
+  return nodes.sort((a, b) => {
+    // Directories first, then files
+    if (a.children.length > 0 && b.children.length === 0) return -1
+    if (a.children.length === 0 && b.children.length > 0) return 1
+    return a.name.localeCompare(b.name)
+  })
+}
+
+let folderIdCounter = 0
+
+function getStatusIcon(status: string): string {
+  switch (status) {
+    case 'success':
+      return '✅'
+    case 'warning':
+      return '⚠️'
+    case 'error':
+      return '❌'
+    case 'untested':
+      return '⭕'
+    default:
+      return '📄'
+  }
+}
+
+function getStatusClass(status: string): string {
+  switch (status) {
+    case 'success':
+      return 'status-success'
+    case 'warning':
+      return 'status-warning'
+    case 'error':
+      return 'status-error'
+    case 'untested':
+      return 'status-untested'
+    default:
+      return ''
+  }
+}
+
+function generateTreeHtml(nodes: TestNode[], parentId = 'root', depth = 0): string {
+  return nodes
+    .map((node) => {
+      const hasChildren = node.children.length > 0
+      const isYaml = node.name.endsWith('.yaml') || node.name.endsWith('.yml')
+      const isTestYaml = node.name.endsWith('.test.yaml') || node.name.endsWith('.test.yml')
+      let content = ''
+      let folderId = ''
+      if (hasChildren) {
+        folderId = `folder-${parentId}-${folderIdCounter++}`
+        content = `
+          <div id="${folderId}" class="folder-children" style="display: none;">
+            ${generateTreeHtml(node.children, folderId, depth + 1)}
+          </div>
+        `
+      }
+      let displayName = node.name
+      let icon = ''
+      let statusClass = ''
+
+      if (hasChildren) {
+        icon = '📁'
+      } else if (isTestYaml) {
+        displayName = node.name.replace(/\.test\.ya?ml$/, '')
+        const status = calculateTestStatus(node)
+        icon = getStatusIcon(status)
+        statusClass = getStatusClass(status)
+      } else if (isYaml) {
+        icon = '📄'
+      }
+
+      const chevron = hasChildren ? `<span class="folder-chevron" data-target="${folderId}">▶</span>` : ''
+      const className = hasChildren
+        ? 'tree-node folder-node'
+        : isYaml
+          ? `tree-node yaml-file ${statusClass}`
+          : 'tree-node'
+      const dataContent = isYaml && node.content ? `data-content="${escapeHtml(node.content)}"` : ''
+
+      return `
+      <div class="${className}" ${dataContent}>
+        <span class="tree-line" style="padding-left: ${depth * 1.25}rem">
+          ${chevron} ${icon} <span class="file-name">${displayName}</span>
+        </span>
+        ${content}
+      </div>
+    `
+    })
+    .join('')
+}
+
+function generateSummaryHtml(summary: TestSummary): string {
+  const total = summary.totalDataCollections
+  const successPercent = total > 0 ? Math.round((summary.fullyFunctional / total) * 100) : 0
+  const warningPercent = total > 0 ? Math.round((summary.partiallyFunctional / total) * 100) : 0
+  const errorPercent = total > 0 ? Math.round((summary.failed / total) * 100) : 0
+  const untestedPercent = total > 0 ? Math.round((summary.untested / total) * 100) : 0
+
+  const testTotal = summary.totalTests
+  const testSuccessPercent = testTotal > 0 ? Math.round((summary.successfulTests / testTotal) * 100) : 0
+  const testWarningPercent = testTotal > 0 ? Math.round((summary.warningTests / testTotal) * 100) : 0
+  const testErrorPercent = testTotal > 0 ? Math.round((summary.errorTests / testTotal) * 100) : 0
+  const testUntestedPercent = testTotal > 0 ? Math.round((summary.untestedTests / testTotal) * 100) : 0
+
+  return `
+    <div class="summary-dashboard">
+      <h2 class="summary-title">Test Summary</h2>
+      
+      <h3 class="summary-subtitle">Data Collections Overview</h3>
+      <div class="summary-grid">
+        <div class="summary-card total">
+          <div class="summary-number">${total}</div>
+          <div class="summary-label">Total Data Collections</div>
+        </div>
+        <div class="summary-card success">
+          <div class="summary-number">${summary.fullyFunctional}</div>
+          <div class="summary-label">Fully Functional (${successPercent}%)</div>
+        </div>
+        <div class="summary-card warning">
+          <div class="summary-number">${summary.partiallyFunctional}</div>
+          <div class="summary-label">Partially Functional (${warningPercent}%)</div>
+        </div>
+        <div class="summary-card error">
+          <div class="summary-number">${summary.failed}</div>
+          <div class="summary-label">Failed (${errorPercent}%)</div>
+        </div>
+        <div class="summary-card untested">
+          <div class="summary-number">${summary.untested}</div>
+          <div class="summary-label">Untested (${untestedPercent}%)</div>
+        </div>
+      </div>
+
+      <h3 class="summary-subtitle">Individual Tests Breakdown</h3>
+      <div class="summary-grid">
+        <div class="summary-card total">
+          <div class="summary-number">${testTotal}</div>
+          <div class="summary-label">Total Tests</div>
+        </div>
+        <div class="summary-card success">
+          <div class="summary-number">${summary.successfulTests}</div>
+          <div class="summary-label">Successful (${testSuccessPercent}%)</div>
+        </div>
+        <div class="summary-card warning">
+          <div class="summary-number">${summary.warningTests}</div>
+          <div class="summary-label">Warnings (${testWarningPercent}%)</div>
+        </div>
+        <div class="summary-card error">
+          <div class="summary-number">${summary.errorTests}</div>
+          <div class="summary-label">Errors (${testErrorPercent}%)</div>
+        </div>
+        <div class="summary-card untested">
+          <div class="summary-number">${summary.untestedTests}</div>
+          <div class="summary-label">Untested (${testUntestedPercent}%)</div>
+        </div>
+      </div>
+      <div class="legend">
+        <h3>Status Legend</h3>
+        <div class="legend-items">
+          <div class="legend-item">
+            <span class="legend-icon">✅</span>
+            <span>Fully Functional - All tests pass, operation works correctly</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">⚠️</span>
+            <span>Partially Functional - Some tests fail, may have issues</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">❌</span>
+            <span>Failed - Tests failed or errors occurred</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">⭕</span>
+            <span>Untested - No test results available</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+}
+
+function generateHtml(nodes: TestNode[]): string {
+  folderIdCounter = 0
+  const summary = calculateDataCollectionSummary(nodes)
+
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Integration Tests Report</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+    <style>
+        .tree-node {
+            padding: 0.25rem 0;
+        }
+        .tree-line {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            transition: background 0.2s;
+        }
+        .tree-line:hover {
+            background-color: #f3f4f6;
+        }
+        .folder-node {
+            font-weight: 500;
+        }
+        .folder-chevron {
+            cursor: pointer;
+            user-select: none;
+            display: inline-block;
+            width: 1.5rem;
+            text-align: center;
+        }
+        .folder-chevron:hover {
+            color: #2563eb;
+        }
+        .yaml-file {
+            cursor: pointer;
+        }
+        .file-name {
+            margin-left: 0.25rem;
+        }
+        
+        /* Status-based styling */
+        .status-success .tree-line {
+            background-color: #f0fdf4;
+            border-left: 4px solid #22c55e;
+        }
+        .status-warning .tree-line {
+            background-color: #fefce8;
+            border-left: 4px solid #eab308;
+        }
+        .status-error .tree-line {
+            background-color: #fef2f2;
+            border-left: 4px solid #ef4444;
+        }
+        .status-untested .tree-line {
+            background-color: #f8fafc;
+            border-left: 4px solid #94a3b8;
+        }
+        
+        /* Summary Dashboard */
+        .summary-dashboard {
+            background: white;
+            border-radius: 0.5rem;
+            padding: 2rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        .summary-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: #1f2937;
+        }
+        .summary-subtitle {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin: 1.5rem 0 1rem 0;
+            color: #374151;
+            border-bottom: 2px solid #e5e7eb;
+            padding-bottom: 0.5rem;
+        }
+        .summary-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        .summary-card {
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            text-align: center;
+        }
+        .summary-card.total {
+            background-color: #f8fafc;
+            border: 2px solid #e2e8f0;
+        }
+        .summary-card.success {
+            background-color: #f0fdf4;
+            border: 2px solid #22c55e;
+        }
+        .summary-card.warning {
+            background-color: #fefce8;
+            border: 2px solid #eab308;
+        }
+        .summary-card.error {
+            background-color: #fef2f2;
+            border: 2px solid #ef4444;
+        }
+        .summary-card.untested {
+            background-color: #f1f5f9;
+            border: 2px solid #94a3b8;
+        }
+        .summary-number {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+        .summary-label {
+            font-size: 0.875rem;
+            font-weight: 500;
+            opacity: 0.8;
+        }
+        
+        /* Legend */
+        .legend {
+            border-top: 1px solid #e2e8f0;
+            padding-top: 1.5rem;
+        }
+        .legend h3 {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: #374151;
+        }
+        .legend-items {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 0.75rem;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .legend-icon {
+            font-size: 1.25rem;
+        }
+        
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+        }
+        .modal-content {
+            position: relative;
+            background-color: #2d2d2d;
+            margin: 5% auto;
+            padding: 1.5rem;
+            width: 80%;
+            max-width: 1000px;
+            max-height: 80vh;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: auto;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #4a4a4a;
+        }
+        .modal-title {
+            color: #e6e6e6;
+            font-size: 1.25rem;
+            font-weight: 600;
+        }
+        .modal-close {
+            color: #e6e6e6;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.25rem;
+        }
+        .modal-close:hover {
+            color: #fff;
+        }
+        .modal-body {
+            background-color: #2d2d2d;
+            border-radius: 0.25rem;
+            overflow: auto;
+        }
+        .modal-body pre {
+            margin: 0;
+            padding: 0;
+        }
+        .modal-body code {
+            font-family: 'Fira Code', monospace;
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+        .tree-controls {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        .tree-btn {
+            background: #2563eb;
+            color: #fff;
+            border: none;
+            border-radius: 0.375rem;
+            padding: 0.5rem 1.25rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .tree-btn:hover {
+            background: #1d4ed8;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen p-8">
+    <div class="max-w-7xl mx-auto">
+        <h1 class="text-3xl font-bold mb-8 text-gray-800">Integration Tests Report</h1>
+        
+        ${generateSummaryHtml(summary)}
+        
+        <div class="bg-white rounded-lg shadow-lg p-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">Detailed Test Results</h2>
+            <div class="tree-controls">
+                <button id="expandAllBtn" class="tree-btn">Expand All</button>
+                <button id="collapseAllBtn" class="tree-btn">Collapse All</button>
+            </div>
+            <div id="folder-root" class="folder-children" style="display: block;">
+                ${generateTreeHtml(nodes, 'root')}
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal -->
+    <div id="yamlModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title"></h2>
+                <span class="modal-close">&times;</span>
+            </div>
+            <div class="modal-body">
+                <pre><code class="language-yaml"></code></pre>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
+    <script>
+        const modal = document.getElementById('yamlModal');
+        const modalTitle = modal.querySelector('.modal-title');
+        const modalCode = modal.querySelector('code');
+        const modalClose = modal.querySelector('.modal-close');
+
+        function showYamlContent(fileName, content) {
+            modalTitle.textContent = fileName;
+            modalCode.textContent = content;
+            modal.style.display = 'block';
+            Prism.highlightElement(modalCode);
+        }
+
+        function closeModal() {
+            modal.style.display = 'none';
+        }
+
+        // Folder toggle logic
+        function toggleFolder(chevron, children) {
+            if (!chevron || !children) return;
+            const isOpen = children.style.display === 'block';
+            children.style.display = isOpen ? 'none' : 'block';
+            chevron.textContent = isOpen ? '▶' : '▼';
+        }
+
+        // Close modal when clicking the close button or outside the modal
+        modalClose.addEventListener('click', closeModal);
+        window.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+
+        // Close modal with Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // Folder chevrons
+            document.querySelectorAll('.folder-chevron').forEach(chevron => {
+                chevron.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const targetId = chevron.getAttribute('data-target');
+                    const children = document.getElementById(targetId);
+                    toggleFolder(chevron, children);
+                });
+            });
+            // Folder line click (expand/collapse)
+            document.querySelectorAll('.folder-node .tree-line').forEach(line => {
+                line.addEventListener('click', (e) => {
+                    // Prevent double toggle if chevron was clicked
+                    if ((e.target).classList.contains('folder-chevron')) return;
+                    const chevron = line.querySelector('.folder-chevron');
+                    if (chevron) {
+                        const targetId = chevron.getAttribute('data-target');
+                        const children = document.getElementById(targetId);
+                        toggleFolder(chevron, children);
+                    }
+                });
+            });
+            // YAML file modal
+            document.querySelectorAll('.yaml-file').forEach(node => {
+                node.addEventListener('click', (e) => {
+                    const fileName = node.querySelector('.file-name').textContent;
+                    const content = node.getAttribute('data-content');
+                    if (content) {
+                        showYamlContent(fileName, content);
+                    }
+                });
+            });
+            // Expand All
+            document.getElementById('expandAllBtn').addEventListener('click', () => {
+                document.querySelectorAll('.folder-children').forEach(el => {
+                    el.style.display = 'block';
+                });
+                document.querySelectorAll('.folder-chevron').forEach(chevron => {
+                    chevron.textContent = '▼';
+                });
+            });
+            // Collapse All
+            document.getElementById('collapseAllBtn').addEventListener('click', () => {
+                document.querySelectorAll('.folder-children').forEach(el => {
+                    if (el.id !== 'folder-root') {
+                        el.style.display = 'none';
+                    }
+                });
+                document.querySelectorAll('.folder-chevron').forEach(chevron => {
+                    chevron.textContent = '▶';
+                });
+            });
+        });
+    </script>
+</body>
+</html>
+  `
+
+  return html
+}
+
+function escapeHtml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+export function generateTestReport(testsDir: string, outputFile: string): void {
+  try {
+    const tree = buildTestTree(testsDir)
+    const html = generateHtml(tree)
+    fs.writeFileSync(outputFile, html)
+    console.warn(`Report generated successfully at: ${outputFile}`)
+  } catch (error) {
+    console.error('Error generating report:', error)
+    throw error
+  }
+}
+
+function main() {
+  const testsDir = path.join(__dirname, '..', 'tests')
+  const outputFile = path.join(__dirname, '..', 'test-report.html')
+
+  generateTestReport(testsDir, outputFile)
+}
+
+// Only run main if this file is executed directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main()
+}