qunitx-cli 0.0.2 → 0.1.0

package/lib/commands/run/tests-in-browser.js

@@ -0,0 +1,162 @@
+import fs from 'node:fs/promises';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import kleur from 'kleur';
+import esbuild from 'esbuild';
+import timeCounter from '../../utils/time-counter.js';
+import runUserModule from '../../utils/run-user-module.js';
+import TAPDisplayFinalResult from '../../tap/display-final-result.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+class BundleError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'BundleError';
+    this.message = `esbuild Bundle Error: ${message}`.split('\n').join('\n# ');
+  }
+}
+
+export default async function runTestsInBrowser(
+  config,
+  cachedContent = {},
+  connections,
+  targetTestFilesToFilter
+) {
+  const { projectRoot, timeout, output } = config;
+  const allTestFilePaths = Object.keys(config.fsTree);
+  const runHasFilter = !!targetTestFilesToFilter;
+
+  config.COUNTER = { testCount: 0, failCount: 0, skipCount: 0, passCount: 0 };
+  config.lastRanTestFiles = targetTestFilesToFilter || allTestFilePaths;
+
+  try {
+    await Promise.all([
+      esbuild.build({
+        stdin: {
+          contents: allTestFilePaths.reduce((result, fileAbsolutePath) => {
+            return result + `import "${fileAbsolutePath}";`
+          }, ''),
+          resolveDir: process.cwd()
+        },
+        bundle: true,
+        logLevel: 'error',
+        outfile: `${projectRoot}/${output}/tests.js`,
+        keepNames: true
+      }), // NOTE: This prevents file cache most likely
+      Promise.all(cachedContent.htmlPathsToRunTests.map(async (htmlPath) => {
+        let targetPath = `${config.projectRoot}/${config.output}${htmlPath}`;
+
+        if (htmlPath !== '/') {
+          await fs.rm(targetPath, { force: true, recursive: true });
+          await fs.mkdir(targetPath.split('/').slice(0, -1).join('/'), { recursive: true }); // NOTE: this can be done earlier
+        }
+      }))
+    ]);
+    cachedContent.allTestCode = await fs.readFile(`${projectRoot}/${output}/tests.js`);
+
+    if (runHasFilter) {
+      let outputPath = `${projectRoot}/${output}/filtered-tests.js`;
+
+      await buildFilteredTests(targetTestFilesToFilter, outputPath);
+      cachedContent.filteredTestCode = (await fs.readFile(outputPath)).toString();
+    }
+
+    let TIME_COUNTER = timeCounter();
+
+    if (runHasFilter) {
+      await runTestInsideHTMLFile('/qunitx.html', connections, config);
+    } else {
+      await Promise.all(cachedContent.htmlPathsToRunTests.map((htmlPath) => {
+        return runTestInsideHTMLFile(htmlPath, connections, config); // NOTE: maybe make this blocking
+      }));
+    }
+
+    let TIME_TAKEN = TIME_COUNTER.stop()
+
+    TAPDisplayFinalResult(config.COUNTER, TIME_TAKEN);
+
+    if (config.after) {
+      await runUserModule(`${process.cwd()}/${config.after}`, config.COUNTER, 'after');
+    }
+
+    if (!config.watch) {
+      await Promise.all([
+        connections.server && connections.server.close(),
+        connections.browser && connections.browser.close()
+      ]);
+
+      return process.exit(config.COUNTER.failCount > 0 ? 1 : 0);
+    }
+  } catch(error) {
+    config.lastFailedTestFiles = config.lastRanTestFiles;
+    console.log(error);
+    let exception = new BundleError(error);
+
+    if (config.watch) {
+      console.log(`# ${exception}`);
+    } else {
+      throw exception;
+    }
+  }
+
+  return connections;
+}
+
+function buildFilteredTests(filteredTests, outputPath) {
+  return esbuild.build({
+    stdin: {
+      contents: filteredTests.reduce((result, fileAbsolutePath) => {
+        return result + `import "${fileAbsolutePath}";`
+      }, ''),
+      resolveDir: process.cwd()
+    },
+    bundle: true,
+    logLevel: 'error',
+    outfile: outputPath
+  });
+}
+
+async function runTestInsideHTMLFile(filePath, { page, server }, config) {
+  let QUNIT_RESULT;
+  let targetError;
+  try {
+    await wait(350);
+    console.log('#', kleur.blue(`QUnitX running: http://localhost:${config.port}${filePath}`));
+    await page.goto(`http://localhost:${config.port}${filePath}`, { timeout: 0 });
+    await page.evaluate(() => {
+      window.IS_PUPPETEER = true;
+    });
+    await page.waitForFunction(`window.testTimeout >= ${config.timeout}`, { timeout: 0 });
+
+    QUNIT_RESULT = await page.evaluate(() => window.QUNIT_RESULT);
+  } catch(error) {
+    targetError = error;
+    console.log(error);
+    console.error(error);
+  }
+
+  if (!QUNIT_RESULT || QUNIT_RESULT.totalTests === 0) {
+    console.log(targetError);
+    console.log('BROWSER: runtime error thrown during executing tests');
+    console.error('BROWSER: runtime error thrown during executing tests');
+
+    await failOnNonWatchMode(config.watch);
+  } else if (QUNIT_RESULT.totalTests > QUNIT_RESULT.finishedTests) {
+    console.log(targetError);
+    console.log(`BROWSER: TEST TIMED OUT: ${QUNIT_RESULT.currentTest}`);
+    console.error(`BROWSER: TEST TIMED OUT: ${QUNIT_RESULT.currentTest}`);
+
+    await failOnNonWatchMode(config.watch);
+  }
+}
+
+async function failOnNonWatchMode(watchMode = false) {
+  if (!watchMode) {
+    await new Promise((resolve, reject) => setTimeout(() => resolve(process.exit(1)), 100));
+  }
+}
+
+function wait(duration) {
+  return new Promise((resolve) => setTimeout(() => { resolve() }, duration));
+}

package/lib/commands/run.js

@@ -0,0 +1,119 @@
+import fs from 'node:fs/promises';
+import { normalize, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import kleur from 'kleur';
+import runTestsInBrowser from './run/tests-in-browser.js';
+import setupBrowser from '../setup/browser.js';
+import fileWatcher from '../setup/file-watcher.js';
+import findInternalAssetsFromHTML from '../utils/find-internal-assets-from-html.js';
+import runUserModule from '../utils/run-user-module.js';
+import setupKeyboardEvents from '../setup/keyboard-events.js';
+import writeOutputStaticFiles from '../setup/write-output-static-files.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default async function(config) {
+  let cachedContent = await buildCachedContent(config, config.htmlPaths);
+  let [connections, _] = await Promise.all([
+    setupBrowser(config, cachedContent),
+    writeOutputStaticFiles(config, cachedContent)
+  ]);
+  config.expressApp = connections.server;
+
+  if (config.watch) {
+    setupKeyboardEvents(config, cachedContent, connections);
+  }
+
+  if (config.before) {
+    await runUserModule(`${process.cwd()}/${config.before}`, config, 'before');
+  }
+
+  await runTestsInBrowser(config, cachedContent, connections);
+
+  if (config.watch) {
+    logWatcherAndKeyboardShortcutInfo(config, connections.server);
+
+    await fileWatcher(
+      config.testFileLookupPaths,
+      config,
+      async (event, file) => {
+        if (event === 'addDir') {
+          return;
+        } else if (['unlink', 'unlinkDir'].includes(event)) {
+          return await runTestsInBrowser(config, cachedContent, connections);
+        }
+
+        await runTestsInBrowser(config, cachedContent, connections, [file]);
+      },
+      (path, event) => connections.server.publish('refresh', 'refresh')
+    );
+  }
+}
+
+async function buildCachedContent(config, htmlPaths) {
+  let htmlBuffers = await Promise.all(config.htmlPaths.map((htmlPath) => fs.readFile(htmlPath)));   // TODO: remove this and read it from the fsTree, should be cached?
+  let cachedContent = htmlPaths.reduce((result, htmlPath, index) => {
+    let filePath = config.htmlPaths[index];
+    let html = htmlBuffers[index].toString();
+
+    if (html.includes('{{content}}')) { // TODO: here I could do html analysis to see which static js certain html points to? Complex algorithm
+      result.dynamicContentHTMLs[filePath] = html;
+
+      let relativePath = filePath.replace(config.projectRoot, '');
+
+      result.htmlPathsToRunTests.push(relativePath);
+    } else {
+      console.log('#', kleur.yellow(`WARNING: Static html file with no {{content}} detected. Therefore ignoring ${filePath}`));
+      result.staticHTMLs[filePath] = html;
+    }
+
+    findInternalAssetsFromHTML(html).forEach((key) => {
+      result.assets.add(normalizeInternalAssetPathFromHTML(config.projectRoot, key, filePath))
+    });
+
+    return result;
+  }, {
+    allTestCode: null,
+    assets: new Set(),
+    htmlPathsToRunTests: [],
+    mainHTML: { filePath: null, html: null },
+    staticHTMLs: {},
+    dynamicContentHTMLs: {}
+  });
+
+  if (cachedContent.htmlPathsToRunTests.length === 0) {
+    cachedContent.htmlPathsToRunTests = ['/'];
+  }
+
+  return await addCachedContentMainHTML(config.projectRoot, cachedContent);
+}
+
+async function addCachedContentMainHTML(projectRoot, cachedContent) {
+  let mainHTMLPath = Object.keys(cachedContent.dynamicContentHTMLs)[0];
+  if (mainHTMLPath) {
+    cachedContent.mainHTML = {
+      filePath: mainHTMLPath,
+      html: cachedContent.dynamicContentHTMLs[mainHTMLPath]
+    };
+  } else {
+    let html = (await fs.readFile(`${__dirname}/../boilerplates/setup/tests.hbs`)).toString();
+
+    cachedContent.mainHTML = { filePath: `${projectRoot}/test/tests.html`, html };
+    cachedContent.assets.add(`${projectRoot}/node_modules/qunitx/vendor/qunit.css`);
+  }
+
+  return cachedContent;
+}
+
+function logWatcherAndKeyboardShortcutInfo(config, server) {
+  console.log('#', kleur.blue(`Watching files... You can browse the tests on http://localhost:${config.port} ...`)); // NOTE: maybe add also qx to exit
+  console.log('#', kleur.blue(`Shortcuts: Press "qq" to abort running tests, "qa" to run all the tests, "qf" to run last failing test, "ql" to repeat last test`)); // NOTE: maybe add also qx to test specific
+}
+
+function normalizeInternalAssetPathFromHTML(projectRoot, assetPath, htmlPath) { // NOTE: maybe normalize ..
+  let currentDirectory = htmlPath ? htmlPath.split('/').slice(0, -1).join('/') : projectRoot;
+
+  return assetPath.startsWith('./')
+    ? normalize(`${currentDirectory}/${assetPath.slice(2)}`)
+    : normalize(`${currentDirectory}/${assetPath}`);
+}

package/lib/servers/http.js

@@ -0,0 +1,233 @@
+import http from 'node:http';
+import WebSocket, { WebSocketServer } from 'ws';
+import bindServerToPort from '../setup/bind-server-to-port.js';
+
+export const MIME_TYPES = {
+  html: "text/html; charset=UTF-8",
+  js: "application/javascript",
+  css: "text/css",
+  png: "image/png",
+  jpg: "image/jpg",
+  gif: "image/gif",
+  ico: "image/x-icon",
+  svg: "image/svg+xml",
+};
+
+export default class HTTPServer {
+  static serve(config = { port: 1234 }, handler) {
+    let onListen = config.onListen || ((server) => {});
+    let onError = config.onError || ((error) => {});
+
+    return new Promise((resolve, reject) => {
+      let server = http.createServer((req, res) => {
+        return handler(req, res);
+      });
+      server = server;
+      server.on('error', (error) => {
+        onError(error);
+        reject(error);
+      }).once('listening', () => {
+        onListen(Object.assign({ hostname: '127.0.0.1', server }, config));
+        resolve(server);
+      })
+
+      server.wss = new WebSocketServer({ server });
+      server.wss.on('error', (error) => {
+        console.log('# [WebSocketServer] Error:');
+        console.trace(error);
+      });
+
+      bindServerToPort(server, config)
+    });
+  }
+
+  constructor() {
+    this.routes = {
+      GET: {},
+      POST: {},
+      DELETE: {},
+      PUT: {}
+    };
+    this.middleware = [];
+    this._server = http.createServer((req, res) => {
+      res.send = (data) => {
+        res.setHeader('Content-Type', 'text/plain');
+        res.end(data);
+      };
+      res.json = (data) => {
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(data));
+      };
+
+      return this.handleRequest(req, res);
+    });
+    this.wss = new WebSocketServer({ server: this._server });
+    this.wss.on('error', (error) => {
+      console.log('# [WebSocketServer] Error:');
+      console.log(error);
+    });
+  }
+
+  close() {
+    return this._server.close();
+  }
+
+  get(path, handler) {
+    this.registerRouteHandler('GET', path, handler);
+  }
+
+  listen(port = 0, callback = () => {}) {
+    return new Promise((resolve, reject) => {
+      this._server.listen(port, (error) => {
+        if (error) {
+          reject(error);
+        } else {
+          resolve(callback());
+        }
+      });
+    });
+  }
+
+  publish(data) {
+    this.wss.clients.forEach((client) => {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(data);
+      }
+    });
+  }
+
+  post(path, handler) {
+    this.registerRouteHandler('POST', path, handler);
+  }
+
+  delete(path, handler) {
+    this.registerRouteHandler('DELETE', path, handler);
+  }
+
+  put(path, handler) {
+    this.registerRouteHandler('PUT', path, handler);
+  }
+
+  use(middleware) {
+    this.middleware.push(middleware);
+  }
+
+  registerRouteHandler(method, path, handler) {
+    if (!this.routes[method]) {
+      this.routes[method] = {};
+    }
+
+    this.routes[method][path] = {
+      path,
+      handler,
+      paramNames: this.extractParamNames(path),
+      isWildcard: path === '/*'
+    };
+  }
+
+  handleRequest(req, res) {
+    const { method, url } = req;
+    const matchingRoute = this.findRouteHandler(method, url);
+
+    if (matchingRoute) {
+      req.params = this.extractParams(matchingRoute, url);
+      this.runMiddleware(req, res, matchingRoute.handler);
+    } else {
+      res.statusCode = 404;
+      res.setHeader('Content-Type', 'text/plain');
+      res.end('Not found');
+    }
+  }
+
+  runMiddleware(req, res, callback) {
+    let index = 0;
+    const next = () => {
+      if (index >= this.middleware.length) {
+        callback(req, res);
+      } else {
+        const middleware = this.middleware[index];
+        index++;
+        middleware(req, res, next);
+      }
+    };
+    next();
+  }
+
+  findRouteHandler(method, url) {
+    const routes = this.routes[method];
+    if (!routes) {
+      return null;
+    }
+
+    return routes[url] || Object.values(routes).find(route => {
+      const { path, isWildcard } = route;
+
+      if (!isWildcard && !path.includes(':')) {
+        return false;
+      }
+
+      if (isWildcard || this.matchPathSegments(path, url)) {
+        if (route.paramNames.length > 0) {
+          const regexPattern = this.buildRegexPattern(path, route.paramNames);
+          const regex = new RegExp(`^${regexPattern}$`);
+          const regexMatches = regex.exec(url);
+          if (regexMatches) {
+            route.paramValues = regexMatches.slice(1);
+          }
+        }
+        return true;
+      }
+
+      return false;
+    }) || routes['/*'] || null;
+  }
+
+  matchPathSegments(path, url) {
+    const pathSegments = path.split('/');
+    const urlSegments = url.split('/');
+
+    if (pathSegments.length !== urlSegments.length) {
+      return false;
+    }
+
+    for (let i = 0; i < pathSegments.length; i++) {
+      const pathSegment = pathSegments[i];
+      const urlSegment = urlSegments[i];
+
+      if (pathSegment.startsWith(':')) {
+        continue;
+      }
+
+      if (pathSegment !== urlSegment) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  buildRegexPattern(path, paramNames) {
+    let regexPattern = path.replace(/:[^/]+/g, '([^/]+)');
+    regexPattern = regexPattern.replace(/\//g, '\\/');
+
+    return regexPattern;
+  }
+
+  extractParamNames(path) {
+    const paramRegex = /:(\w+)/g;
+    const paramMatches = path.match(paramRegex);
+
+    return paramMatches ? paramMatches.map(match => match.slice(1)) : [];
+  }
+
+  extractParams(route, url) {
+    const { paramNames, paramValues } = route;
+    const params = {};
+
+    for (let i = 0; i < paramNames.length; i++) {
+      params[paramNames[i]] = paramValues[i];
+    }
+
+    return params;
+  }
+}

package/lib/setup/bind-server-to-port.js

@@ -0,0 +1,14 @@
+import resolvePortNumberFor from '../utils/resolve-port-number-for.js';
+
+// NOTE: there was a race condition between socket.connection and server.listen, check if nanoexpress fixes it
+export default async function bindServerToPort(server, config) {
+  try {
+    let port = await resolvePortNumberFor(config.port);
+
+    await server.listen(port);
+
+    return server;
+  } catch(e) {
+    return await bindServerToPort(server, Object.assign(config, { port: config.port + 1 }));
+  }
+}

package/lib/setup/browser.js

@@ -0,0 +1,55 @@
+import Puppeteer from 'puppeteer';
+import setupWebServer from './web-server.js';
+import bindServerToPort from './bind-server-to-port.js';
+
+export default async function setupBrowser(config = {
+  port: 1234, debug: false, watch: false, timeout: 10000
+}, cachedContent) {
+  let [server, browser] = await Promise.all([
+    setupWebServer(config, cachedContent),
+    Puppeteer.launch({
+      debugger: config.debug || false,
+      args: ['--no-sandbox', '--disable-gpu', '--remote-debugging-port=0', '--window-size=1440,900'],
+      executablePath: process.env.CHROME_BIN || null,
+      headless: 'new',
+    }),
+  ]);
+  let [page, _] = await Promise.all([
+    browser.newPage(),
+    bindServerToPort(server, config)
+  ]);
+
+  page.on('console', async (msg) => {
+    if (config.debug) {
+      const args = await Promise.all(msg.args().map((arg) => turnToObjects(arg)));
+
+      console.log(...args);
+    }
+  });
+  page.on('error', (msg) => {
+    try {
+      throw error;
+    } catch (e) {
+      console.error(e, e.stack);
+      console.log(e, e.stack);
+    }
+  });
+  page.on('pageerror', async (error) => {
+    try {
+      throw error;
+    } catch (e) {
+      console.log(e.toString());
+      console.error(e.toString());
+    }
+  });
+
+  return { server, browser, page };
+}
+
+function turnToObjects(jsHandle) {
+  return jsHandle.jsonValue();
+}
+
+// function turnMStoSecond(timeInMS) {
+//   return (timeInMS / 1000).toFixed(2);
+// }

package/lib/setup/config.js

@@ -0,0 +1,46 @@
+import fs from 'node:fs/promises';
+import defaultProjectConfigValues from '../boilerplates/default-project-config-values.js';
+import findProjectRoot from '../utils/find-project-root.js';
+import setupFSTree from './fs-tree.js';
+import setupTestFilePaths from './test-file-paths.js';
+import parseCliFlags from '../utils/parse-cli-flags.js';
+
+export default async function setupConfig() {
+  let projectRoot = await findProjectRoot();
+  let [projectPackageJSON, cliConfigFlags] = await Promise.all([
+    readConfigFromPackageJSON(projectRoot),
+    parseCliFlags(projectRoot)
+  ]);
+  let inputs = cliConfigFlags.inputs.concat(readInputsFromPackageJSON(projectPackageJSON));
+  let config = {
+    projectRoot,
+    htmlPaths: [],
+    lastFailedTestFiles: null,
+    lastRanTestFiles: null,
+    ...defaultProjectConfigValues,
+    ...projectPackageJSON.qunitx,
+    ...cliConfigFlags,
+    inputs
+  };
+  config.htmlPaths = normalizeHTMLPaths(config.projectRoot, config.htmlPaths);
+  config.testFileLookupPaths = setupTestFilePaths(config.projectRoot, config.inputs);
+  config.fsTree = await setupFSTree(config.testFileLookupPaths, config);
+
+  return config;
+}
+
+async function readConfigFromPackageJSON(projectRoot) {
+  let packageJSON = await fs.readFile(`${projectRoot}/package.json`);
+
+  return JSON.parse(packageJSON.toString());
+}
+
+function normalizeHTMLPaths(projectRoot, htmlPaths) {
+  return Array.from(new Set(htmlPaths.map((htmlPath) => `${projectRoot}/${htmlPath}`)));
+}
+
+function readInputsFromPackageJSON(packageJSON) {
+  let qunitx = packageJSON.qunitx;
+
+  return qunitx && qunitx.inputs ? qunitx.inputs : [];
+}

package/lib/setup/file-watcher.js

@@ -0,0 +1,72 @@
+import chokidar from 'chokidar';
+import kleur from 'kleur';
+
+export default async function setupFileWatchers(testFileLookupPaths, config, onEventFunc, onFinishFunc) {
+  let extensions = ['js', 'ts'];
+  let fileWatchers = testFileLookupPaths.reduce((watcher, watchPath) => {
+    return Object.assign(watcher, {
+      [watchPath]: chokidar.watch(watchPath, { ignoreInitial: true }).on('all', (event, path) => {
+        if (extensions.some((extension) => path.endsWith(extension))) {
+          mutateFSTree(config.fsTree, event, path);
+
+          console.log('#', kleur.magenta().bold('=================================================================='));
+          console.log('#', getEventColor(event), path.split(config.projectRoot)[1]);
+          console.log('#', kleur.magenta().bold('=================================================================='));
+
+          if (!global.chokidarBuild) {
+            global.chokidarBuild = true;
+
+            let result = extensions.some((extension) => path.endsWith(extension)) ? onEventFunc(event, path) : null;
+
+            if (!(result instanceof Promise)) {
+              global.chokidarBuild = false;
+
+              return result;
+            }
+
+            result
+              .then(() => {
+                onFinishFunc ? onFinishFunc(event, path) : null;
+              })
+              .catch(() => {
+                // TODO: make an index.html to display the error
+                // error type has to be derived from the error!
+              })
+              .finally(() => (global.chokidarBuild = false));
+          }
+        }
+      })
+    });
+  }, {});
+
+  return {
+    fileWatchers,
+    killFileWatchers() {
+      Object.keys(fileWatchers).forEach((watcherKey) => fileWatchers[watcherKey].close());
+
+      return fileWatchers;
+    }
+  };
+}
+
+function mutateFSTree(fsTree, event, path) {
+  if (event === 'add') {
+    fsTree[path] = null;
+  } else if (event === 'unlink') {
+    delete fsTree[path];
+  } else if (event === 'unlinkDir') {
+    let targetPaths = Object.keys(config.fsTree).filter((treePath) => treePath.startsWith(path));
+
+    targetPaths.forEach((path) => delete config.fsTree[path]);
+  }
+}
+
+function getEventColor(event) {
+  if (event === 'change') {
+    return kleur.yellow('CHANGED:');
+  } else if (event === 'add' || event === 'addDir') {
+    return kleur.green('ADDED:');
+  } else if (event === 'unlink' || event === 'unlinkDir') {
+    return kleur.red('REMOVED:');
+  }
+}