dceky 1.0.5-beta.ky-declarations.13 → 1.0.5

package/start/helpers/mergeAllReportsAndGenerateHtml.ts

@@ -0,0 +1,150 @@
+/* eslint-disable no-console */
+
+// Import libs
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+// Import helpers
+import getRootPath from './getRootPath';
+import RunResult from '../types/RunResult';
+
+/**
+ * Recursively annotate mochawesome suites (not individual tests) with a label
+ * so the combined report shows profile+browser for each suite
+ * @author Yuen Ler Chow
+ * @param node - The mochawesome node to annotate
+ * @param label - The label to prepend to suite titles
+ */
+const annotateMochawesomeSuites = (node: any, label: string): void => {
+  if (!node || typeof node !== 'object') {
+    return;
+  }
+
+  // If this is an array of nodes, annotate each element
+  if (Array.isArray(node)) {
+    node.forEach((child: any) => {
+      annotateMochawesomeSuites(child, label);
+    });
+    return;
+  }
+
+  // Only annotate if this is a suite (has suites or tests arrays)
+  const isSuite = Array.isArray(node.suites) || Array.isArray(node.tests);
+  if (isSuite) {
+    if (typeof node.title === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      node.title = `${label}${node.title}`;
+    }
+    if (typeof node.fullTitle === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      node.fullTitle = `${label}${node.fullTitle}`;
+    }
+  }
+
+  // Recurse into child suites (but not tests)
+  if (Array.isArray(node.suites)) {
+    node.suites.forEach((suite: any) => {
+      annotateMochawesomeSuites(suite, label);
+    });
+  }
+};
+
+/**
+ * Merge all per-combination mochawesome JSON reports into a single JSON
+ * and generate one combined HTML report for all runs.
+ * Each suite/test is annotated with [profile][browser] in its title.
+ * @author Yuen Ler Chow
+ * @param outputDir - Date-labeled results directory
+ * @param results - Array of run results
+ */
+const mergeAllReportsAndGenerateHtml = (
+  outputDir: string,
+  results: RunResult[],
+): void => {
+  // Collect annotated copies of report-data.json files from successful runs
+  const annotatedJsonPaths: string[] = [];
+
+  results.forEach((result) => {
+    const jsonPath = path.join(
+      outputDir,
+      `${result.profileName}-${result.browser}`,
+      'report-data.json',
+    );
+    if (!fs.existsSync(jsonPath)) {
+      return;
+    }
+
+    try {
+      // Import the json report
+      const raw = fs.readFileSync(jsonPath, 'utf-8');
+      const data = JSON.parse(raw);
+      const label = `[${result.profileName}][${result.browser}] `;
+
+      if (Array.isArray(data.results)) {
+        data.results.forEach((res: any) => {
+          if (res && res.suites) {
+            annotateMochawesomeSuites(res.suites, label);
+          }
+        });
+      }
+
+      // Annotate tests with their profile+browser
+      const annotatedPath = path.join(
+        outputDir,
+        `${result.profileName}-${result.browser}-labeled.json`,
+      );
+      fs.writeFileSync(annotatedPath, JSON.stringify(data, null, 2), 'utf-8');
+      annotatedJsonPaths.push(annotatedPath);
+    } catch (e) {
+      console.error(`Error annotating report for ${result.profileName} + ${result.browser}:`, e);
+    }
+  });
+
+  if (annotatedJsonPaths.length === 0) {
+    console.warn('No annotated report-data.json files found. Skipping global merge.');
+    return;
+  }
+
+  const allReportDataPath = path.join(outputDir, 'all-report-data.json');
+  const allReportHtmlDir = outputDir;
+
+  try {
+    // Build mochawesome-merge command with all annotated JSON paths
+    const mergedArgs = (
+      annotatedJsonPaths
+        .map((p) => {
+          return `"${p}"`;
+        })
+        .join(' ')
+    );
+    const mergeCommand = `npx mochawesome-merge ${mergedArgs} > "${allReportDataPath}"`;
+
+    console.log('Merging all annotated report-data.json files into a single JSON for all runs...');
+
+    execSync(mergeCommand, {
+      stdio: 'inherit',
+      cwd: getRootPath(),
+      shell: '/bin/bash',
+    });
+
+    // Generate combined HTML using marge
+    const margeCommand = `npx marge "${allReportDataPath}" --reportDir "${allReportHtmlDir}" --reportFilename "all-runs"`;
+
+    console.log('Generating combined HTML report for all runs...');
+
+    execSync(
+      margeCommand,
+      {
+        stdio: 'inherit',
+        cwd: getRootPath(),
+      },
+    );
+
+    console.log(`Combined HTML report generated at: ${path.join(allReportHtmlDir, 'all-runs.html')}`);
+  } catch (e) {
+    console.error('Error generating combined HTML report for all runs:', e);
+  }
+};
+
+export default mergeAllReportsAndGenerateHtml;

package/start/helpers/mergeReports.ts

@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+import { execSync } from 'child_process';
+import path from 'path';
+import { existsSync, readdirSync } from 'fs';
+import getRootPath from './getRootPath';
+
+/**
+ * Merge mochawesome JSON reports into a single JSON file using mochawesome-merge
+ * @author Yuen Ler Chow
+ * @param opts - object of arguments
+ * @param opts.resultsDir - Results directory containing the reports
+ * @param opts.profileName - Profile name
+ * @param opts.browserName - Browser name
+ */
+const mergeReports = (
+  opts: {
+    resultsDir: string;
+    profileName: string;
+    browserName: string;
+  },
+): void => {
+  const { resultsDir, profileName, browserName } = opts;
+
+  const granularResultsDir = path.join(
+    resultsDir,
+    `${profileName}-${browserName}`,
+    'granular-results',
+  );
+  const reportDataPath = path.join(
+    resultsDir,
+    `${profileName}-${browserName}`,
+    'report-data.json',
+  );
+
+  console.log(`\n📊 Merge Reports Debug for ${profileName} + ${browserName}:`);
+  console.log(`   Granular results dir: ${granularResultsDir}`);
+  console.log(`   Report data path: ${reportDataPath}`);
+
+  if (!existsSync(granularResultsDir)) {
+    const errorMsg = `❌ ERROR: Granular results directory does not exist: ${granularResultsDir}`;
+    console.error(errorMsg);
+    throw new Error(errorMsg);
+  }
+
+  // List files in granular results directory
+  const files = readdirSync(granularResultsDir);
+  const jsonFiles = files.filter((f) => { return f.endsWith('.json'); });
+  console.log(`   Found ${jsonFiles.length} JSON files: ${jsonFiles.join(', ') || '(none)'}`);
+
+  if (jsonFiles.length === 0) {
+    const errorMsg = `❌ ERROR: No JSON files found in granular results directory: ${granularResultsDir}`;
+    console.error(errorMsg);
+    throw new Error(errorMsg);
+  }
+
+  try {
+    const command = `npx mochawesome-merge "${path.join(granularResultsDir, '*.json')}" > "${reportDataPath}"`;
+
+    console.log(`   Running: ${command}`);
+    console.log(`Merging reports for ${profileName} + ${browserName}...`);
+
+    execSync(command, {
+      stdio: 'inherit',
+      cwd: getRootPath(),
+      shell: '/bin/bash',
+    });
+
+    // Verify the report was created
+    if (!existsSync(reportDataPath)) {
+      const errorMsg = `❌ ERROR: Report data was not created at: ${reportDataPath}`;
+      console.error(errorMsg);
+      throw new Error(errorMsg);
+    }
+
+    console.log(`   ✅ Report data created successfully at: ${reportDataPath}`);
+  } catch (e) {
+    console.error(`Error merging reports for ${profileName} + ${browserName}:`, e);
+    throw e;
+  }
+};
+
+export default mergeReports;

package/start/helpers/reportHomepage.ejs

@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cypress Test Reports</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: #f5f5f5;
+      padding: 2rem 1rem;
+      color: #222;
+    }
+    .container {
+      max-width: 75rem;
+      margin: 0 auto;
+      background: #ffffff;
+      border-radius: 0.5rem;
+      border: 0.0625rem solid #e0e0e0;
+      box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
+    }
+    header {
+      border-bottom: 0.0625rem solid #e0e0e0;
+      padding: 1.25rem 1.5rem;
+      text-align: center;
+    }
+    h1 {
+      font-size: 1.75rem;
+      margin-bottom: 0.625rem;
+    }
+    .subtitle {
+      font-size: 0.95rem;
+      color: #666666;
+    }
+    .content {
+      padding: 1.5rem;
+    }
+    .profile-section {
+      margin-bottom: 2.5rem;
+    }
+    .profile-title {
+      font-size: 1.1rem;
+      color: #111111;
+      margin-bottom: 0.75rem;
+      border-bottom: 0.0625rem solid #e0e0e0;
+      padding-bottom: 0.375rem;
+    }
+    .report-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
+      gap: 1.25rem;
+      margin-bottom: 1.875rem;
+    }
+    .report-card {
+      border: 0.0625rem solid #e0e0e0;
+      border-radius: 0.5rem;
+      padding: 1rem;
+      background: #fafafa;
+    }
+    .report-card.success {
+      border-color: #c8e6c9;
+      background: #f4f9f4;
+    }
+    .report-card.failed {
+      border-color: #ffcdd2;
+      background: #fdf5f6;
+    }
+    .browser-name {
+      font-size: 1rem;
+      font-weight: bold;
+      color: #222222;
+      margin-bottom: 0.625rem;
+      text-transform: capitalize;
+    }
+    .status {
+      display: inline-block;
+      padding: 0.25rem 0.75rem;
+      border-radius: 0.75rem;
+      font-size: 0.85em;
+      font-weight: bold;
+      margin-bottom: 0.625rem;
+    }
+    .status.success {
+      background: #2e7d32;
+      color: white;
+    }
+    .status.failed {
+      background: #c62828;
+      color: white;
+    }
+    .report-link {
+      display: inline-block;
+      margin-top: 0.625rem;
+      padding: 0.5rem 1rem;
+      background: #1976d2;
+      color: white;
+      text-decoration: none;
+      border-radius: 0.375rem;
+      transition: background 0.3s ease;
+    }
+    .report-link:hover {
+      background: #115293;
+    }
+    .timestamp {
+      font-size: 0.85em;
+      color: #777777;
+      margin-top: 0.5rem;
+    }
+    .summary {
+      background: #fafafa;
+      padding: 1rem 1.125rem;
+      border-radius: 0.375rem;
+      margin-bottom: 1.875rem;
+      border: 0.0625rem solid #e0e0e0;
+    }
+    .summary h2 {
+      color: #111111;
+      margin-bottom: 0.625rem;
+      font-size: 1rem;
+    }
+    .summary-stats {
+      display: flex;
+      gap: 1.25rem;
+      flex-wrap: wrap;
+    }
+    .stat {
+      display: flex;
+      flex-direction: column;
+    }
+    .stat-value {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #1976d2;
+    }
+    .stat-label {
+      font-size: 0.9em;
+      color: #777777;
+      text-transform: uppercase;
+      letter-spacing: 0.0625rem;
+    }
+    .combined-report {
+      margin-bottom: 1.5rem;
+      padding: 0.875rem 1rem;
+      border-radius: 0.375rem;
+      border: 0.0625rem solid #d0d0d0;
+      background: #f9fafb;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+    .combined-report-title {
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: #111111;
+    }
+    .combined-report-subtitle {
+      font-size: 0.85rem;
+      color: #777777;
+      margin-top: 0.125rem;
+    }
+    .combined-report-button {
+      padding: 0.5rem 1rem;
+      border-radius: 0.25rem;
+      border: 0.0625rem solid #1976d2;
+      background: #1976d2;
+      color: #ffffff;
+      text-decoration: none;
+      font-size: 0.9rem;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    .combined-report-button:hover {
+      background: #115293;
+      border-color: #115293;
+    }
+    .screenshot-list {
+      list-style: none;
+      padding-left: 0;
+      margin-top: 0.5rem;
+    }
+    .no-report {
+      color: #999;
+      font-size: 0.9em;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Cypress Test Reports</h1>
+      <p class="subtitle">Profile and browser run summary</p>
+    </header>
+    <div class="content">
+      <% if (hasCombinedReport) { %>
+      <div class="combined-report">
+        <div>
+          <div class="combined-report-title">Combined report for all profiles and browsers</div>
+          <div class="combined-report-subtitle">
+            <% if (combinedTotalTests !== null && combinedPassedTests !== null) { %>
+              <%= combinedPassedTests %>/<%= combinedTotalTests %> tests passing in this run.
+            <% } else { %>
+              View a single consolidated Mochawesome report for this run.
+            <% } %>
+          </div>
+        </div>
+        <a href="all-runs.html" class="combined-report-button" target="_blank">Open combined report</a>
+      </div>
+      <% } %>
+
+      <div class="summary">
+        <h2>Summary</h2>
+        <div class="summary-stats">
+          <div class="stat">
+            <div class="stat-value"><%= totalRuns %></div>
+            <div class="stat-label">Total Runs</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value"><%= passedRuns %></div>
+            <div class="stat-label">Passed</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value"><%= failedRuns %></div>
+            <div class="stat-label">Failed</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value"><%= profileCount %></div>
+            <div class="stat-label">Profiles</div>
+          </div>
+        </div>
+      </div>
+
+      <% Object.entries(reportsByProfile).forEach(([profileName, profileReports]) => { %>
+      <div class="profile-section">
+        <h2 class="profile-title">📋 Profile: <%= profileName %></h2>
+        <div class="report-grid">
+          <% profileReports.forEach((report) => { %>
+          <div class="report-card <%= report.success ? 'success' : 'failed' %>">
+            <div class="browser-name">🌐 <%= report.browser %></div>
+            <span class="status <%= report.success ? 'success' : 'failed' %>">
+              <%= report.success ? '✅ Passed' : '❌ Failed' %>
+            </span>
+            <% if (report.totalTests !== undefined && report.passedTests !== undefined) { %>
+            <div class="timestamp"><%= report.passedTests %>/<%= report.totalTests %> tests passing</div>
+            <% } %>
+            <div class="timestamp"><%= report.timestamp %></div>
+            <% if (report.relativeReportPath) { %>
+            <a href="<%= report.relativeReportPath %>" class="report-link" target="_blank">View Report</a>
+            <% } else { %>
+            <p class="no-report">Report not available</p>
+            <% } %>
+            <% if (report.screenshots && report.screenshots.length > 0) { %>
+            <ul class="screenshot-list">
+              <% report.screenshots.forEach((screenshot) => { %>
+              <li><a href="<%= screenshot.href %>" class="report-link" target="_blank"><%= screenshot.name %></a></li>
+              <% }) %>
+            </ul>
+            <% } %>
+          </div>
+          <% }) %>
+        </div>
+      </div>
+      <% }) %>
+    </div>
+  </div>
+</body>
+</html>

package/start/helpers/runCypressHeadless.ts

@@ -0,0 +1,164 @@
+/* eslint-disable no-console */
+
+// Import libs
+import { spawn } from 'child_process';
+import path from 'path';
+import fs from 'fs';
+
+// Import helpers
+import getRootPath from './getRootPath';
+import generateReporterConfig from './generateReporterConfig';
+import mergeReports from './mergeReports';
+import generateHtmlReport from './generateHtmlReport';
+
+// Import shared types
+import RunResult from '../types/RunResult';
+
+// Import constants
+import DEFAULT_THREADS_PER_COMBO from '../constants/DEFAULT_THREADS_PER_COMBO';
+
+/**
+ * Run Cypress in headless mode for a single profile and browser using cypress-parallel
+ * @author Yuen Ler Chow
+ * @param opts - object of arguments
+ * @param opts.profileName - The profile name to use
+ * @param opts.browser - The browser to use
+ * @param opts.outputDir - The output directory for results
+ * @param [opts.numThreads] - The number of parallel threads to use (default: 2)
+ * @returns Promise that resolves with run result
+ */
+const runCypressHeadless = (opts: {
+  profileName: string,
+  browser: string,
+  outputDir: string,
+  numThreads?: number,
+}): Promise<RunResult> => {
+  const {
+    profileName,
+    browser,
+    outputDir,
+    numThreads = DEFAULT_THREADS_PER_COMBO,
+  } = opts;
+
+  return new Promise((resolve, reject) => {
+    const root = getRootPath();
+
+    // Ensure output directory exists
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+
+    // Create subdirectory for this profile+browser combination
+    const comboDir = path.join(outputDir, `${profileName}-${browser}`);
+    if (!fs.existsSync(comboDir)) {
+      fs.mkdirSync(comboDir, { recursive: true });
+    }
+
+    // Create per-combo screenshots directory
+    const comboScreenshotsDir = path.join(comboDir, 'screenshots');
+    if (!fs.existsSync(comboScreenshotsDir)) {
+      fs.mkdirSync(comboScreenshotsDir, { recursive: true });
+    }
+
+    const env = {
+      ...process.env,
+      CYPRESS_PROFILE: profileName,
+      BROWSER: browser,
+    };
+
+    console.log(`\n🚀 Starting Cypress headless: ${profileName} + ${browser}`);
+    console.log(`Output: ${comboDir}\n`);
+
+    // Create reporter config for cypress-multi-reporters
+    const reporterConfigPath = path.join(comboDir, 'reporter-config.json');
+    const reporterConfig = generateReporterConfig({
+      resultsDir: outputDir,
+      profileName,
+      browserName: browser,
+    });
+    fs.writeFileSync(reporterConfigPath, JSON.stringify(reporterConfig, null, 2));
+
+    // Cypress parallel run command with browser, threads, and reporter config
+    const cypressArgsString = `--headless --browser ${browser} --config screenshotsFolder=${comboScreenshotsDir} --reporter cypress-multi-reporters --reporter-options configFile=${reporterConfigPath}`;
+
+    console.log(`Reporter config path: ${reporterConfigPath}`);
+    console.log(`Granular results dir: ${path.join(comboDir, 'granular-results')}`);
+
+    const args = [
+      'cypress-parallel',
+      '-s',
+      'cy:run',
+      '--threads',
+      numThreads.toString(),
+      '-d',
+      'cypress/e2e/**/*',
+      '-a',
+      // eslint-disable-next-line quotes
+      `'"${cypressArgsString}"'`,
+    ];
+
+    const cypressProcess = spawn('npx', args, {
+      cwd: root,
+      env,
+      stdio: 'inherit',
+      shell: true,
+    });
+
+    cypressProcess.on('close', (code) => {
+      const success = code === 0;
+
+      // Merge granular mochawesome JSON and generate a single HTML report
+      let reportGenerated = true;
+      try {
+        // Merge all json test suites (test files) into one report
+        mergeReports({
+          resultsDir: outputDir,
+          profileName,
+          browserName: browser,
+        });
+
+        // Generate combined HTML report for all test suites for this single browser+profile combo
+        generateHtmlReport({
+          resultsDir: outputDir,
+          profileName,
+          browserName: browser,
+        });
+      } catch (reportError) {
+        console.error(`\n⚠️ Report generation failed for ${profileName} + ${browser}:`, reportError);
+        reportGenerated = false;
+      }
+
+      // By default, marge names the HTML after the JSON basename: report-data.html
+      const reportPath = path.join(
+        outputDir,
+        `${profileName}-${browser}`,
+        'report',
+        'report-data.html',
+      );
+
+      const result: RunResult = {
+        profileName,
+        browser,
+        success: success && reportGenerated,
+        outputDir: comboDir,
+        reportPath: reportGenerated ? reportPath : undefined,
+      };
+
+      if (success && reportGenerated) {
+        console.log(`\n✅ Completed: ${profileName} + ${browser}`);
+      } else if (!reportGenerated) {
+        console.log(`\n⚠️ Tests ran but report generation failed: ${profileName} + ${browser}`);
+      } else {
+        console.log(`\n❌ Failed: ${profileName} + ${browser} (exit code: ${code})`);
+      }
+
+      resolve(result);
+    });
+
+    cypressProcess.on('error', (error) => {
+      reject(error);
+    });
+  });
+};
+
+export default runCypressHeadless;