qunitx-cli 0.0.2 → 0.0.3

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:');
+  }
+}

package/lib/setup/fs-tree.js

@@ -0,0 +1,48 @@
+import fs from 'node:fs/promises';
+import picomatch from 'picomatch';
+import recursiveLookup from 'recursive-lookup';
+
+export default async function buildFSTree(fileAbsolutePaths, config = {}) {
+  let targetExtensions = ['js', 'ts'];
+  let fsTree = {};
+
+  await Promise.all(fileAbsolutePaths.map(async (fileAbsolutePath) => {
+    let glob = picomatch.scan(fileAbsolutePath);
+
+    // TODO: maybe allow absolute path references
+
+    try {
+      if (glob.isGlob) {
+        let fileNames = await recursiveLookup(glob.base, (path) => {
+          return targetExtensions.some((extension) => path.endsWith(extension));
+        });
+
+        fileNames.forEach((fileName) => {
+          if (picomatch.isMatch(fileName, fileAbsolutePath, { bash: true })) {
+            fsTree[fileName] = null;
+          }
+        });
+      } else {
+        let entry = await fs.stat(fileAbsolutePath);
+
+        if (entry.isFile()) {
+          fsTree[fileAbsolutePath] = null;
+        } else if (entry.isDirectory()) {
+          let fileNames = await recursiveLookup(glob.base, (path) => {
+            return targetExtensions.some((extension) => path.endsWith(extension));
+          });
+
+          fileNames.forEach((fileName) => {
+            fsTree[fileName] = null;
+          });
+        }
+      }
+    } catch (error) {
+      console.error(error);
+
+      return process.exit(1);
+    }
+  }));
+
+  return fsTree;
+}

package/lib/setup/keyboard-events.js

@@ -0,0 +1,34 @@
+import kleur from 'kleur';
+import listenToKeyboardKey from '../utils/listen-to-keyboard-key.js';
+import runTestsInBrowser from '../commands/run/tests-in-browser.js';
+
+export default function setupKeyboardEvents(config, cachedContent, connections) {
+  listenToKeyboardKey('qq', () => abortBrowserQUnit(config, connections));
+  listenToKeyboardKey('qa', () => {
+    abortBrowserQUnit(config, connections);
+    runTestsInBrowser(config, cachedContent, connections)
+  });
+  listenToKeyboardKey('qf', () => {
+    abortBrowserQUnit(config, connections);
+
+    if (!config.lastFailedTestFiles) {
+      console.log('#', kleur.blue(`QUnitX: No tests failed so far, so repeating the last test run`));
+      return runTestsInBrowser(config, cachedContent, connections, config.lastRanTestFiles);
+    }
+
+    runTestsInBrowser(config, cachedContent, connections, config.lastFailedTestFiles)
+  });
+  listenToKeyboardKey('ql', () => {
+    abortBrowserQUnit(config, connections);
+    runTestsInBrowser(config, cachedContent, connections, config.lastRanTestFiles)
+  });
+}
+
+function abortBrowserQUnit(config, connections) {
+  connections.server.publish('abort', 'abort');
+}
+
+function abortNodejsQUnit(config) {
+  window.QUnit.config.queue.length = 0;
+  config.aborted = true;
+}

package/lib/setup/test-file-paths.js

@@ -0,0 +1,79 @@
+import picomatch from 'picomatch';
+
+export default function setupTestFilePaths(projectRoot, inputs) { // NOTE: very complex algorithm, order is very important
+  let [folders, filesWithGlob, filesWithoutGlob] = inputs.reduce((result, input) => {
+    let isGlob = picomatch.scan(input).isGlob;
+
+    if (!pathIsFile(input)) {
+      result[0].push({
+        input,
+        isFile: false,
+        isGlob
+      });
+    } else {
+      result[isGlob ? 1 : 2].push({
+        input,
+        isFile: true,
+        isGlob
+      });
+    }
+
+    return result;
+  }, [[], [], []]);
+
+  let result = folders.reduce((folderResult, folder) => {
+    if (!pathIsIncludedInPaths(folders, folder)) {
+      folderResult.push(folder);
+    }
+
+    return folderResult;
+  }, []);
+
+  filesWithGlob.forEach((file) => {
+    if (
+      !pathIsIncludedInPaths(result, file) &&
+      !pathIsIncludedInPaths(filesWithGlob, file)
+    ) {
+      result.push(file);
+    }
+  });
+  filesWithoutGlob.forEach((file) => {
+    if (!pathIsIncludedInPaths(result, file)) {
+      result.push(file);
+    }
+  });
+
+  return result.map((metaItem) => metaItem.input);
+}
+
+function pathIsFile(path) {
+  let inputs = path.split('/');
+
+  return inputs[inputs.length - 1].includes('.');
+}
+
+function pathIsIncludedInPaths(paths, targetPath) {
+  return paths.some((path) => {
+    if (path === targetPath) {
+      return false;
+    }
+
+    let globFormat = buildGlobFormat(path);
+
+    return picomatch.isMatch(targetPath.input, globFormat, { bash: true });
+  });
+}
+
+function buildGlobFormat(path) {
+  if (!path.isFile) {
+    if (!path.isGlob) {
+      return `${path.input}/*`;
+    } else if (path.input.endsWith('*')) { // NOTE: could be problematic in future, investigate if I should check endsWith /*
+      return path.input;
+    }
+
+    return `${path.input}/*`;
+  }
+
+  return path.input;
+}