@ohos-ports/web-test-runner 1.0.0-beta.0

package/src/reporter/defaultReporter.ts

@@ -0,0 +1,78 @@
+import {
+  type BufferedLogger,
+  type Logger,
+  type Reporter,
+  type ReporterArgs,
+} from '@web/test-runner-core';
+
+import { getTestProgressReport } from './getTestProgress.js';
+import { reportTestFileResults } from './reportTestFileResults.js';
+
+export interface DefaultReporterArgs {
+  reportTestResults?: boolean;
+  reportTestProgress?: boolean;
+}
+
+function isBufferedLogger(logger: Logger): logger is BufferedLogger {
+  return (
+    typeof (logger as any).logBufferedMessages === 'function' &&
+    Array.isArray((logger as any).buffer)
+  );
+}
+
+export function defaultReporter({
+  reportTestResults = true,
+  reportTestProgress = true,
+}: DefaultReporterArgs = {}): Reporter {
+  let args: ReporterArgs;
+  let favoriteBrowser: string;
+
+  return {
+    start(_args) {
+      args = _args;
+      favoriteBrowser =
+        args.browserNames.find(name => {
+          const n = name.toLowerCase();
+          return n.includes('chrome') || n.includes('chromium') || n.includes('firefox');
+        }) ?? args.browserNames[0];
+    },
+
+    reportTestFileResults({ logger, sessionsForTestFile, testFile }) {
+      if (!reportTestResults) {
+        return undefined;
+      }
+
+      if (!isBufferedLogger(logger)) {
+        throw new Error('Expected a BufferedLogger instance.');
+      }
+
+      return reportTestFileResults(
+        logger,
+        testFile,
+        args.browserNames,
+        favoriteBrowser,
+        sessionsForTestFile,
+      );
+    },
+
+    getTestProgress({ testRun, focusedTestFile, testCoverage }) {
+      if (!reportTestProgress) {
+        return [];
+      }
+
+      return getTestProgressReport(args.config, {
+        browsers: args.browsers,
+        browserNames: args.browserNames,
+        testRun,
+        testFiles: args.testFiles,
+        sessions: args.sessions,
+        startTime: args.startTime,
+        focusedTestFile,
+        watch: args.config.watch,
+        coverage: !!args.config.coverage,
+        coverageConfig: args.config.coverageConfig,
+        testCoverage,
+      });
+    },
+  };
+}

package/src/reporter/dotReporter.ts

@@ -0,0 +1,65 @@
+import type { Reporter, ReporterArgs, TestSuiteResult } from '@web/test-runner-core';
+
+import { reportTestFileErrors } from './reportTestFileErrors.js';
+import { reportTestsErrors } from './reportTestsErrors.js';
+
+import { TestRunnerLogger } from '../logger/TestRunnerLogger.js';
+
+const color =
+  ([x, y]: [number, number]) =>
+  (z: string) =>
+    `\x1b[${x}m${z}\x1b[${y}m${reset}`;
+const reset = `\x1b[0m\x1b[0m`;
+const red = color([31, 89]);
+
+/** Test reporter that summarizes all test for a given run using dot notation */
+export function dotReporter(): Reporter {
+  let args: ReporterArgs;
+  let favoriteBrowser: string;
+
+  const logger = new TestRunnerLogger();
+
+  function log(passed: boolean) {
+    logger.log(passed ? '.' : red('x'));
+  }
+
+  function logResults(results?: TestSuiteResult) {
+    for (const result of results?.tests ?? []) {
+      log(result.passed);
+    }
+
+    for (const suite of results?.suites ?? []) {
+      logSuite(suite);
+    }
+  }
+
+  function logSuite(suite: TestSuiteResult) {
+    logResults(suite);
+  }
+
+  return {
+    start(_args) {
+      args = _args;
+      favoriteBrowser =
+        args.browserNames.find(name => {
+          const n = name.toLowerCase();
+          return n.includes('chrome') || n.includes('chromium') || n.includes('firefox');
+        }) ?? args.browserNames[0];
+    },
+
+    reportTestFileResults({ sessionsForTestFile: sessions }) {
+      for (const session of sessions) {
+        logResults(session.testResults);
+      }
+    },
+
+    onTestRunFinished({ sessions }) {
+      const failedSessions = sessions.filter(s => !s.passed);
+      if (failedSessions.length > 0) {
+        logger.log('\n\nErrors Reported in Tests:\n\n');
+        reportTestsErrors(logger, args.browserNames, favoriteBrowser, failedSessions);
+        reportTestFileErrors(logger, args.browserNames, favoriteBrowser, failedSessions, true);
+      }
+    },
+  };
+}

package/src/reporter/getCodeCoverage.ts

@@ -0,0 +1,54 @@
+import {
+  type CoverageConfig,
+  type CoverageThresholdConfig,
+  type TestCoverage,
+} from '@web/test-runner-core';
+import { bold, green, red, underline } from 'nanocolors';
+import path from 'path';
+
+const coverageTypes: (keyof CoverageThresholdConfig)[] = [
+  'lines',
+  'statements',
+  'branches',
+  'functions',
+];
+
+export function getCodeCoverage(
+  testCoverage: TestCoverage,
+  watch: boolean,
+  coverageConfig: CoverageConfig,
+) {
+  const entries: string[] = [];
+
+  const coverageSum = coverageTypes.reduce((all, type) => all + testCoverage.summary[type].pct, 0);
+  const avgCoverage = Math.round((coverageSum * 100) / 4) / 100;
+
+  if (!Number.isNaN(avgCoverage)) {
+    const percent = `${avgCoverage} %`;
+    entries.push(`Code coverage: ${bold(testCoverage.passed ? green(percent) : red(percent))}`);
+  }
+
+  if (!testCoverage.passed && coverageConfig.threshold) {
+    coverageTypes.forEach(type => {
+      if (testCoverage.summary[type].pct < coverageConfig.threshold![type]) {
+        entries.push(
+          `Coverage for ${bold(type)} failed with ${bold(
+            red(`${testCoverage.summary[type].pct} %`),
+          )} compared to configured ${bold(`${coverageConfig.threshold![type]} %`)}`,
+        );
+      }
+    });
+  }
+
+  if (!watch && coverageConfig.report && coverageConfig.reporters?.includes('lcov')) {
+    entries.push(
+      `View full coverage report at ${underline(
+        path.join(coverageConfig.reportDir ?? '', 'lcov-report', 'index.html'),
+      )}`,
+    );
+  }
+
+  entries.push('');
+
+  return entries;
+}

package/src/reporter/getTestProgress.ts

@@ -0,0 +1,181 @@
+import {
+  SESSION_STATUS,
+  type BrowserLauncher,
+  type CoverageConfig,
+  type TestCoverage,
+  type TestRunnerCoreConfig,
+  type TestSessionManager,
+} from '@web/test-runner-core';
+import { bold, gray, green, red } from 'nanocolors';
+
+import { getCodeCoverage } from './getCodeCoverage.js';
+import { renderProgressBar } from './renderProgressBar.js';
+import { getPassedFailedSkippedCount } from './utils/getPassedFailedSkippedCount.js';
+
+export interface TestProgressArgs {
+  browsers: BrowserLauncher[];
+  browserNames: string[];
+  testFiles: string[];
+  testRun: number;
+  sessions: TestSessionManager;
+  startTime: number;
+  watch: boolean;
+  focusedTestFile?: string;
+  coverage: boolean;
+  coverageConfig?: CoverageConfig;
+  testCoverage?: TestCoverage;
+}
+
+function getProgressReport(
+  name: string,
+  minWidth: number,
+  finishedFiles: number,
+  activeFiles: number,
+  testFiles: number,
+  passedTests: number,
+  skippedTests: number,
+  failedTests: number,
+) {
+  const failedText = `${failedTests} failed`;
+  const testResults =
+    `${green(`${passedTests} passed`)}` +
+    `, ${failedTests !== 0 ? red(failedText) : failedText}` +
+    (skippedTests !== 0 ? `, ${gray(`${skippedTests} skipped`)}` : '');
+  const progressBar = `${renderProgressBar(
+    finishedFiles,
+    activeFiles,
+    testFiles,
+  )} ${finishedFiles}/${testFiles} test files`;
+
+  return `${`${name}:`.padEnd(minWidth)} ${progressBar} | ${testResults}`;
+}
+
+export function getTestProgressReport(config: TestRunnerCoreConfig, args: TestProgressArgs) {
+  const {
+    browsers,
+    browserNames,
+    testRun,
+    sessions,
+    watch,
+    startTime,
+    focusedTestFile,
+    coverage,
+    coverageConfig,
+    testCoverage,
+  } = args;
+  const entries: string[] = [];
+  const unfinishedSessions = Array.from(
+    sessions.forStatusAndTestFile(
+      focusedTestFile,
+      SESSION_STATUS.SCHEDULED,
+      SESSION_STATUS.INITIALIZING,
+      SESSION_STATUS.TEST_STARTED,
+      SESSION_STATUS.TEST_FINISHED,
+    ),
+  );
+
+  const finishedFiles = new Set<string>();
+  let failedTestCount = 0;
+  let failed = false;
+
+  const longestBrowser = [...browserNames].sort((a, b) => b.length - a.length)[0];
+  const minWidth = longestBrowser ? longestBrowser.length + 1 : 0;
+  for (const browser of browsers) {
+    // when started or not initiliazing we render a progress bar
+    const allSessionsForBrowser = Array.from(sessions.forBrowser(browser));
+    const sessionsForBrowser = focusedTestFile
+      ? allSessionsForBrowser.filter(s => s.testFile === focusedTestFile)
+      : allSessionsForBrowser;
+    const totalTestFiles = sessionsForBrowser.length;
+    let finishedFilesForBrowser = 0;
+    let activeFilesForBrowser = 0;
+    let passedTestsForBrowser = 0;
+    let skippedTestsForBrowser = 0;
+    let failedTestsForBrowser = 0;
+
+    for (const session of sessionsForBrowser) {
+      if (!session.passed) {
+        failed = true;
+      }
+
+      if (![SESSION_STATUS.SCHEDULED, SESSION_STATUS.FINISHED].includes(session.status)) {
+        activeFilesForBrowser += 1;
+      }
+
+      if (session.status === SESSION_STATUS.FINISHED) {
+        const { testFile, testResults } = session;
+        finishedFiles.add(testFile);
+        finishedFilesForBrowser += 1;
+        if (testResults) {
+          const parsed = getPassedFailedSkippedCount(testResults);
+          passedTestsForBrowser += parsed.passed;
+          skippedTestsForBrowser += parsed.skipped;
+          failedTestsForBrowser += parsed.failed;
+          failedTestCount += parsed.failed;
+        }
+      }
+    }
+
+    entries.push(
+      getProgressReport(
+        browser.name,
+        minWidth,
+        finishedFilesForBrowser,
+        activeFilesForBrowser,
+        totalTestFiles,
+        passedTestsForBrowser,
+        skippedTestsForBrowser,
+        failedTestsForBrowser,
+      ),
+    );
+  }
+
+  entries.push('');
+
+  if (coverage && coverageConfig) {
+    if (testCoverage) {
+      if (!testCoverage.passed) {
+        failed = true;
+      }
+      const coverageReport = getCodeCoverage(testCoverage, watch, coverageConfig);
+      entries.push(...coverageReport);
+    }
+  }
+
+  if (testRun !== -1 && unfinishedSessions.length === 0) {
+    if (coverage && !testCoverage) {
+      entries.push(bold('Calculating code coverage...'));
+    } else if (config.watch) {
+      entries.push(bold(`Finished running tests, watching for file changes...`));
+    } else {
+      const durationInSec = (Date.now() - startTime) / 1000;
+      const duration = Math.trunc(durationInSec * 10) / 10;
+
+      if (failed) {
+        if (coverage && !testCoverage?.passed) {
+          entries.push(
+            bold(red(`Finished running tests in ${duration}s, failed to meet coverage threshold.`)),
+          );
+        } else if (failedTestCount > 0) {
+          entries.push(
+            bold(
+              red(`Finished running tests in ${duration}s with ${failedTestCount} failed tests.`),
+            ),
+          );
+        } else if (finishedFiles.size > 0) {
+          entries.push(bold(red(`Error while running tests.`)));
+        } else {
+          entries.push(bold(red(`Failed to run any tests.`)));
+        }
+      } else {
+        entries.push(bold(`Finished running tests in ${duration}s, all tests passed! 🎉`));
+      }
+    }
+  } else {
+    entries.push(bold('Running tests...'));
+  }
+
+  entries.push('');
+
+  return entries;
+}

package/src/reporter/renderProgressBar.ts

@@ -0,0 +1,27 @@
+import { gray, white } from 'nanocolors';
+
+const PROGRESS_BLOCKS = [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'];
+const PROGRESS_WIDTH = 30;
+
+function createProgressBlocks(value: number, total: number) {
+  if (value >= total) {
+    return PROGRESS_BLOCKS[8].repeat(PROGRESS_WIDTH);
+  }
+
+  const count = (PROGRESS_WIDTH * value) / total;
+  const floored = Math.floor(count);
+  const partialBlock =
+    PROGRESS_BLOCKS[Math.floor((count - floored) * (PROGRESS_BLOCKS.length - 1))];
+  return `${PROGRESS_BLOCKS[8].repeat(floored)}${partialBlock}${' '.repeat(
+    PROGRESS_WIDTH - floored - 1,
+  )}`;
+}
+
+export function renderProgressBar(finished: number, active: number, total: number) {
+  const progressBlocks = createProgressBlocks(finished + active, total);
+  const finishedBlockCount = Math.floor((PROGRESS_WIDTH * finished) / total);
+
+  const finishedBlocks = white(progressBlocks.slice(0, finishedBlockCount));
+  const scheduledBlocks = gray(progressBlocks.slice(finishedBlockCount));
+  return `|${finishedBlocks}${scheduledBlocks}|`;
+}

package/src/reporter/reportBrowserLogs.ts

@@ -0,0 +1,64 @@
+import { type Logger, type TestSession } from '@web/test-runner-core';
+
+export function reportBrowserLogs(logger: Logger, sessions: TestSession[]) {
+  const commonLogs: any[] = [];
+  const commonStringified: string[] = [];
+  const logsByBrowser = new Map<string, any[]>();
+
+  const allStringified = sessions.map(s => JSON.stringify(s.logs));
+  for (const session of sessions) {
+    for (const args of session.logs) {
+      // for the first session, we always include all logs
+      // for others we deduplicate logs, this way we can allow the same log
+      // msg appearing multiple times while also deduplicating common logs
+      // between browsers
+      const stringifiedArgs = JSON.stringify(args);
+      if (
+        args.length > 0 &&
+        (session === sessions[0] || !commonStringified.includes(stringifiedArgs))
+      ) {
+        if (allStringified.every(logs => logs.includes(stringifiedArgs))) {
+          commonLogs.push(args);
+          commonStringified.push(stringifiedArgs);
+        } else {
+          let logsForBrowser = logsByBrowser.get(session.browser.name);
+          if (!logsForBrowser) {
+            logsForBrowser = [];
+            logsByBrowser.set(session.browser.name, logsForBrowser);
+          }
+          logsForBrowser.push(args);
+        }
+      }
+    }
+  }
+
+  if (commonLogs.length > 0) {
+    logger.log(` 🚧 Browser logs:`);
+    logger.group();
+    logger.group();
+    logger.group();
+    for (const args of commonLogs) {
+      logger.log(...args);
+    }
+    logger.groupEnd();
+    logger.groupEnd();
+    logger.groupEnd();
+  }
+
+  for (const [browser, logs] of logsByBrowser) {
+    logger.log(` 🚧 Browser logs on ${browser}:`);
+    logger.group();
+    logger.group();
+    logger.group();
+    for (const args of logs) {
+      logger.log(...args);
+    }
+    logger.groupEnd();
+    logger.groupEnd();
+    logger.groupEnd();
+  }
+
+  if (commonLogs.length > 0 || logsByBrowser.size > 0) {
+    logger.log('');
+  }
+}

package/src/reporter/reportRequest404s.ts

@@ -0,0 +1,55 @@
+import { type Logger, type TestSession } from '@web/test-runner-core';
+import { bold, gray } from 'nanocolors';
+
+export function reportRequest404s(logger: Logger, sessions: TestSession[]) {
+  const common404s: string[] = [];
+  const request404sPerBrowser = new Map<string, string[]>();
+
+  const all404s = sessions.map(s => s.request404s);
+  for (const session of sessions) {
+    for (const request404 of session.request404s) {
+      // for the first session, we always include all request 404s
+      // for others we deduplicate 404s, this way we can allow the same 404
+      // msg appearing multiple times while also deduplicating common 404s
+      // between browsers
+      if (session === sessions[0] || !common404s.includes(request404)) {
+        if (all404s.every(r404s => r404s.includes(request404))) {
+          common404s.push(request404);
+        } else {
+          let request404sForBrowser = request404sPerBrowser.get(session.browser.name);
+          if (!request404sForBrowser) {
+            request404sForBrowser = [];
+            request404sPerBrowser.set(session.browser.name, request404sForBrowser);
+          }
+          request404sForBrowser.push(request404);
+        }
+      }
+    }
+  }
+
+  if (common404s.length > 0) {
+    logger.log(' 🚧 404 network requests:');
+    logger.group();
+    logger.group();
+    for (const request404 of common404s) {
+      logger.log(`${bold(gray('-'))} ${request404}`);
+    }
+    logger.groupEnd();
+    logger.groupEnd();
+  }
+
+  for (const [browser, request404s] of request404sPerBrowser) {
+    logger.log(` 🚧 404 network requests on ${browser}:`);
+    logger.group();
+    logger.group();
+    for (const request404 of request404s) {
+      logger.log(`${bold(gray('-'))} ${request404}`);
+    }
+    logger.groupEnd();
+    logger.groupEnd();
+  }
+
+  if (common404s.length > 0 || request404sPerBrowser.size > 0) {
+    logger.log('');
+  }
+}

package/src/reporter/reportTestFileErrors.ts

@@ -0,0 +1,70 @@
+import { type Logger, type TestResultError, type TestSession } from '@web/test-runner-core';
+import { gray, red } from 'nanocolors';
+
+import { getFailedOnBrowsers } from './utils/getFailedOnBrowsers.js';
+
+function isSameError(a: TestResultError, b: TestResultError) {
+  return a.message === b.message && a.stack === b.stack;
+}
+
+interface ErrorReport {
+  testFile: string;
+  failedBrowsers: string[];
+  error: TestResultError;
+}
+
+export function reportTestFileErrors(
+  logger: Logger,
+  browserNames: string[],
+  favoriteBrowser: string,
+  sessionsForTestFile: TestSession[],
+  logFileNames?: boolean,
+) {
+  const reports: ErrorReport[] = [];
+
+  for (const session of sessionsForTestFile) {
+    for (const error of session.errors) {
+      let report = reports.find(r => isSameError(r.error, error));
+      if (!report) {
+        report = {
+          testFile: session.testFile,
+          failedBrowsers: [],
+          error,
+        };
+        reports.push(report);
+      }
+      report.failedBrowsers.push(session.browser.name);
+
+      if (session.browser.name === favoriteBrowser) {
+        report.error = error;
+      }
+    }
+  }
+
+  for (const report of reports) {
+    const { name, message = 'Unknown error' } = report.error;
+    const errorMsg = name ? `${name}: ${message}` : message;
+    const failedOn = getFailedOnBrowsers(browserNames, report.failedBrowsers);
+
+    if (report.error.stack) {
+      // there was a stack trace, take the first line and decorate it with an icon and which browsers it failed on
+      logger.log(` ❌ ${red(errorMsg)} ${failedOn}`);
+
+      // if there was more to the stack trace, print it
+      logger.group();
+      logger.group();
+      logger.log(gray(report.error.stack));
+      logger.groupEnd();
+      logger.groupEnd();
+    } else {
+      // there was no stack trace, so just print the error message
+      logger.log(` ❌ ${errorMsg} ${failedOn}`);
+    }
+
+    if (logFileNames) {
+      logger.log(`  ${report.testFile}`);
+    }
+
+    logger.log('');
+  }
+}

package/src/reporter/reportTestFileResults.ts

@@ -0,0 +1,33 @@
+import { type BufferedLogger, type TestSession } from '@web/test-runner-core';
+import { bold, cyan } from 'nanocolors';
+import { relative } from 'path';
+
+import { reportBrowserLogs } from './reportBrowserLogs.js';
+import { reportRequest404s } from './reportRequest404s.js';
+import { reportTestFileErrors } from './reportTestFileErrors.js';
+import { reportTestsErrors } from './reportTestsErrors.js';
+
+export function reportTestFileResults(
+  logger: BufferedLogger,
+  testFile: string,
+  allBrowserNames: string[],
+  favoriteBrowser: string,
+  sessionsForTestFile: TestSession[],
+) {
+  const failedSessions = sessionsForTestFile.filter(s => !s.passed);
+
+  reportBrowserLogs(logger, sessionsForTestFile);
+  reportRequest404s(logger, sessionsForTestFile);
+  reportTestFileErrors(logger, allBrowserNames, favoriteBrowser, sessionsForTestFile);
+
+  if (failedSessions.length > 0) {
+    reportTestsErrors(logger, allBrowserNames, favoriteBrowser, failedSessions);
+  }
+
+  if (logger.buffer.length > 0) {
+    logger.buffer.unshift({
+      method: 'log',
+      args: [`${bold(cyan(relative(process.cwd(), testFile)))}:\n`],
+    });
+  }
+}