Demos: Cover all 29 bundler variants in Node.js

Krinkle · Krinkle · commit 50c4daa470ad · 2024-07-30T22:25:44.000+01:00
Previously only the 5 .cjs.js outputs were tested in Node.js.

* Rename .es.js to  .es.mjs output, because otherwise `node --import=`
  will reject it. The rejection error suggest placing `{ type: 'module' }`
  in package.json, but we can't given the Webpack caveat (see build.mjs).

* Use readdirSync(), since 29 is too many to hardcode.
  We have to know the list of test cases at the top-level,
  thus run readdirSync() top-level,
  thus run build.mjs before it, which is ESM and async,
  thus to import and await it, the test file has to be an ESM file,
  convert to demos/bundlers.mjs accordingly.
diff --git a/demos/bundlers.mjs b/demos/bundlers.mjs
@@ -1,33 +1,34 @@
-const cp = require('child_process');
-const path = require('path');
-const DIR = path.join(__dirname, 'bundlers');
+import cp from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+
+const dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const DIR = path.join(dirname, 'bundlers');
+
+// Prepare
+// cp.execSync('npm install --no-audit --update-notifier=false', { cwd: DIR, encoding: 'utf8' });
+await import('./bundlers/build.mjs');
+
+const tmpJsFiles = fs.readdirSync(path.join(DIR, 'tmp'))
+  .filter(name => name.endsWith('.js') || name.endsWith('.mjs'));
+const directFiles = tmpJsFiles.filter(name => !name.includes('-indirect'));
+const indirectFiles = tmpJsFiles.filter(name => name.includes('-indirect'));
 
 function normalize (str) {
   return str
     .replace(/^localhost:\d+/g, 'localhost:8000')
     .replace(/\b\d+ms\b/g, '42ms');
 }
 
-QUnit.module('bundlers', {
-  before: async (assert) => {
-    assert.timeout(60_000);
-
-    cp.execSync('npm install --no-audit --update-notifier=false', { cwd: DIR, encoding: 'utf8' });
+QUnit.module('bundlers');
 
-    await import('./bundlers/build.mjs');
-  }
-});
-
-QUnit.test.each('test in Node.js [direct]', [
-  './tmp/import-default.cjs.js',
-  './tmp/import-named.cjs.js',
-  './tmp/require-default.cjs.js'
-], function (assert, fileName) {
+QUnit.test.each('test in Node.js [direct]', directFiles, function (assert, fileName) {
   const actual = cp.execFileSync(process.execPath,
     [
       '--input-type=module',
       '-e',
-      `import ${JSON.stringify(fileName)}; QUnit.start();`
+      `import ${JSON.stringify('./tmp/' + fileName)}; QUnit.start();`
     ],
     { cwd: DIR, env: { qunit_config_reporters_tap: 'true' }, encoding: 'utf8' }
   );
@@ -41,15 +42,12 @@ QUnit.test.each('test in Node.js [direct]', [
   assert.pushResult({ result: actual.includes(expected), actual, expected }, 'stdout');
 });
 
-QUnit.test.each('test in Node.js [indirect]', [
-  './tmp/import-indirect.cjs.js',
-  './tmp/require-indirect.cjs.js'
-], function (assert, fileName) {
+QUnit.test.each('test in Node.js [indirect]', indirectFiles, function (assert, fileName) {
   const actual = cp.execFileSync(process.execPath,
     [
       '--input-type=module',
       '-e',
-      `import ${JSON.stringify(fileName)}; QUnit.start();`
+      `import ${JSON.stringify('./tmp/' + fileName)}; QUnit.start();`
     ],
     { cwd: DIR, env: { qunit_config_reporters_tap: 'true' }, encoding: 'utf8' }
   );
@@ -64,6 +62,8 @@ QUnit.test.each('test in Node.js [indirect]', [
 });
 
 QUnit.test('test in browser', function (assert) {
+  assert.timeout(60_000);
+
   const expected = `Running "connect:all" (connect) task
 Started connect web server on http://localhost:8000
 
diff --git a/demos/bundlers/build.mjs b/demos/bundlers/build.mjs
@@ -35,7 +35,7 @@ const htmlTemplate = `<!DOCTYPE html>
 const rollupOutputs = [
   {
     dir: tmpDir,
-    entryFileNames: '[name].[format].js',
+    entryFileNames: '[name].[format].mjs',
     format: 'es'
   },
   {
@@ -107,20 +107,22 @@ await (async function main () {
   for await (const fileName of gRollup) {
     console.log('... built ' + fileName);
 
-    if (!fileName.endsWith('.cjs.js')) {
-      const html = htmlTemplate
-        .replace('{{title}}', fileName)
-        .replace('{{scriptTag}}', (
-          fileName.endsWith('.es.js')
-            ? `<script src="./${fileName}" type="module"></script>`
-            : `<script src="./${fileName}"></script>`
-        ));
-
-      fs.writeFileSync(
-        `${tmpDir}/test-${fileName.replace('.js', '')}.html`,
-        html
-      );
+    if (fileName.endsWith('.cjs.js')) {
+      continue;
     }
+
+    const html = htmlTemplate
+      .replace('{{title}}', fileName)
+      .replace('{{scriptTag}}', (
+        fileName.endsWith('.mjs')
+          ? `<script src="./${fileName}" type="module"></script>`
+          : `<script src="./${fileName}"></script>`
+      ));
+
+    fs.writeFileSync(
+      `${tmpDir}/test-${fileName.replace(/\.(js|mjs)$/, '')}.html`,
+      html
+    );
   }
   for await (const fileName of gWebpack) {
     console.log('... built ' + fileName);
