test(e2e): harden startup for federated-css-react-ssr, federated-css mono, vue2-in-vue3 (sequential start, HTTP waits, longer timeouts); switch some to dev servers; add wait-on

Author: ScriptedAlchemy

federated-css-react-ssr/playwright.config.ts

@@ -35,15 +35,15 @@ export default defineConfig({
       cwd: __dirname,
       port: 3001,
       reuseExistingServer: reuseExisting,
-      timeout: 300_000,
+      timeout: 480_000,
     },
     {
       // Start all shells and wait until all ports 4000-4005 respond
       command: 'node scripts/start-shells.cjs',
       cwd: __dirname,
       port: 4005,
       reuseExistingServer: reuseExisting,
-      timeout: 300_000,
+      timeout: 480_000,
     },
   ],
 });

federated-css-react-ssr/scripts/start-exposes.cjs

@@ -1,5 +1,6 @@
 const { spawn } = require('node:child_process');
 const path = require('node:path');
+const waitOn = require('wait-on');
 
 const root = path.resolve(__dirname, '..');
 
@@ -9,11 +10,29 @@ function run(cmd, args, opts = {}) {
 
 async function main() {
   // build all exposes, then serve all
+  console.log('[exposes] building all expose apps...');
   await new Promise((resolve, reject) => {
     const p = run('pnpm', ['--filter', '"federated-css-react-ssr_expose-*"', '-r', 'run', 'build']);
     p.on('exit', code => (code === 0 ? resolve() : reject(new Error('build exposes failed'))));
   });
+  console.log('[exposes] starting static servers for exposes...');
   const pServe = run('pnpm', ['--filter', '"federated-css-react-ssr_expose-*"', '-r', 'run', 'serve']);
+
+  // Wait for all expose ports to be reachable before proceeding
+  await waitOn({
+    resources: [
+      'http://localhost:3001',
+      'http://localhost:3002',
+      'http://localhost:3003',
+      'http://localhost:3004',
+      'http://localhost:3005',
+      'http://localhost:3006',
+      'http://localhost:3007',
+    ],
+    timeout: 480000,
+    validateStatus: s => s >= 200 && s < 500,
+  });
+  console.log('[exposes] all expose ports are up.');
   process.on('SIGINT', () => pServe.kill('SIGINT'));
   process.on('SIGTERM', () => pServe.kill('SIGTERM'));
   // keep process alive

federated-css-react-ssr/scripts/start-shells.cjs

@@ -8,29 +8,46 @@ function run(cmd, args, opts = {}) {
   return spawn(cmd, args, { stdio: 'inherit', cwd: root, shell: true, ...opts });
 }
 
-async function main() {
-  // build all shells, then serve all, and wait for ports
-  await new Promise((resolve, reject) => {
-    const p = run('pnpm', ['--filter', '"federated-css-react-ssr_shell*"', '-r', 'run', 'build']);
-    p.on('exit', code => (code === 0 ? resolve() : reject(new Error('build shells failed'))));
-  });
-  const pServe = run('pnpm', ['--filter', '"federated-css-react-ssr_shell*"', '-r', 'run', 'serve']);
-
-  await waitOn({
-    resources: [
-      'http://localhost:4000',
-      'http://localhost:4001',
-      'http://localhost:4002',
-      'http://localhost:4003',
-      'http://localhost:4004',
-      'http://localhost:4005',
-    ],
-    timeout: 300000,
-    validateStatus: s => s >= 200 && s < 500,
+async function exec(cmd, args, opts = {}) {
+  return new Promise((resolve, reject) => {
+    const p = run(cmd, args, opts);
+    p.on('exit', code => (code === 0 ? resolve() : reject(new Error(`${cmd} ${args.join(' ')} failed with code ${code}`))));
   });
+}
+
+async function main() {
+  // Build and start each shell sequentially to reduce CI CPU pressure.
+  const shells = [
+    { dir: 'css-jss', port: 4000 },
+    { dir: 'css-scss', port: 4001 },
+    { dir: 'jss-styled-components', port: 4002 },
+    { dir: 'jss-styled-components-css-module', port: 4003 },
+    { dir: 'less-scss', port: 4004 },
+    { dir: 'scss-tailwind-css', port: 4005 },
+  ];
+
+  const procs = [];
+  for (const { dir, port } of shells) {
+    const cwd = path.join('shell-apps', dir);
+    console.log(`[shells] building ${dir}...`);
+    await exec('pnpm', ['-C', cwd, 'run', 'build']);
+
+    console.log(`[shells] starting ${dir} on port ${port}...`);
+    const p = run('pnpm', ['-C', cwd, 'run', 'serve']);
+    procs.push(p);
+
+    await waitOn({
+      resources: [`http://localhost:${port}`],
+      timeout: 480000,
+      validateStatus: s => s >= 200 && s < 500,
+    });
+    console.log(`[shells] ${dir} is up on ${port}.`);
+  }
+
+  const killAll = sig => procs.forEach(pr => pr.kill(sig));
+  process.on('SIGINT', () => killAll('SIGINT'));
+  process.on('SIGTERM', () => killAll('SIGTERM'));
 
-  process.on('SIGINT', () => pServe.kill('SIGINT'));
-  process.on('SIGTERM', () => pServe.kill('SIGTERM'));
   // keep process alive
   await new Promise(() => {});
 }

federated-css/scripts/start-all.cjs

@@ -9,18 +9,19 @@ function run(cmd, args) {
 }
 
 async function main() {
-  // Build consumers-react and exposes, then serve both groups; start Next consumers (dev)
-  await new Promise((res, rej) => {
-    const p = run('pnpm', ['--filter', '"@federated-css/*"', '-r', 'run', 'build']);
-    p.on('exit', c => (c === 0 ? res() : rej(new Error('build consumers failed'))));
-  });
+  // Start consumers-react in dev (avoid heavy prod builds), build+serve exposes, and start Next dev servers
+  console.log('[federated-css] starting consumers-react (dev servers)...');
+  const pReact = run('pnpm', ['--filter', '"@federated-css/*"', '-r', 'run', 'start']);
+
+  console.log('[federated-css] building expose apps...');
   await new Promise((res, rej) => {
     const p = run('pnpm', ['--filter', '"federated-css-mono_expose-*"', '-r', 'run', 'build']);
     p.on('exit', c => (c === 0 ? res() : rej(new Error('build exposes failed'))));
   });
-
-  const pReact = run('pnpm', ['--filter', '"@federated-css/*"', '-r', 'run', 'serve']);
+  console.log('[federated-css] serving expose apps...');
   const pExposes = run('pnpm', ['--filter', '"federated-css-mono_expose-*"', '-r', 'run', 'serve']);
+
+  console.log('[federated-css] starting Next consumers (dev servers)...');
   const pNext = run('pnpm', ['--filter', '"@federated-css/next-*"', '-r', 'run', 'start']);
 
   await waitOn({
@@ -34,9 +35,10 @@ async function main() {
       // next consumers
       'http://localhost:8081', 'http://localhost:8082', 'http://localhost:8083', 'http://localhost:8084'
     ],
-    timeout: 300000,
+    timeout: 480000,
     validateStatus: s => s >= 200 && s < 500,
   });
+  console.log('[federated-css] all ports are up.');
 
   const killAll = sig => { pReact.kill(sig); pExposes.kill(sig); pNext.kill(sig); };
   process.on('SIGINT', () => killAll('SIGINT'));
@@ -46,4 +48,3 @@ async function main() {
 }
 
 main().catch(err => { console.error(err); process.exit(1); });
-