fix: hmr:e2e flaky in CI (#983)

* refactor: 🎨 use portWait in CI

* refactor: 🎨 delay time configable by env variable

* test: ✅ wait port released in teardown

* refactor: 🎨 throw when port not release for time

* Update scripts/test-hmr.mjs

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* chore: 🔧 add aci.yml placeholder

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: stormslowly

.aci.yml

@@ -20,18 +20,19 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@jest/expect": "^29.7.0",
-    "@types/jest": "^29.5.12",
     "@okamjs/okam": "workspace:*",
     "@swc/helpers": "0.5.1",
     "@taplo/cli": "^0.7.0",
     "@types/express": "^4.17.21",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.4.2",
     "@types/semver": "^7.5.0",
     "antd": "^5.12.2",
     "babel-plugin-import": "^1.13.8",
     "es-check": "^7.1.1",
     "esno": "^4",
     "express": "^4.18.2",
+    "get-port": "^7.1.0",
     "husky": "^8.0.3",
     "less": "^4.2.0",
     "node-libs-browser-okam": "2.2.4",
@@ -42,6 +43,7 @@
     "react-error-overlay": "6.0.9",
     "react-refresh": "^0.14.0",
     "semver": "^7.5.4",
+    "wait-port": "^1.1.0",
     "webpack": "^5.0.0",
     "zx": "^7.2.3"
   },

package.json

@@ -1,6 +1,8 @@
 import assert from 'assert';
 import { execSync } from 'child_process';
+import getPort, { clearLockedPorts } from 'get-port';
 import { chromium, devices } from 'playwright';
+import waitPort from 'wait-port';
 import 'zx/globals';
 
 function skip() {}
@@ -12,8 +14,8 @@ if (!fs.existsSync(tmp)) {
   fs.mkdirSync(tmp, { recursive: true });
 }
 // TODO: check port
-const port = 3000;
-const DELAY_TIME = 500;
+const MAKO_DEV_PORT = 3000;
+const DELAY_TIME = parseInt(process.env.DELAY_TIME) || 500;
 
 async function cleanup({ process, browser } = {}) {
   try {
@@ -81,7 +83,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(<App />);
   await cleanup({ process, browser });
 });
 
-runTest('js: anonymize default export hmr', async () => {
+runTest('js: anonymous default export hmr', async () => {
   write(
     normalizeFiles({
       '/src/App.tsx': `
@@ -496,7 +498,11 @@ return 'bar'+bar();
     });
     await delay(DELAY_TIME);
     thisResult = normalizeHtml(await getRootHtml(page));
-    assert.equal(thisResult.html, '<div>App barbar</div>', 'Second render');
+    assert.equal(
+      thisResult.html,
+      '<div>App barbar</div>',
+      `Second render: unexpected html ${thisResult.html}`,
+    );
     isReload = lastResult.random !== thisResult.random;
     assert.equal(isReload, true, 'should reload');
     lastResult = thisResult;
@@ -1432,14 +1438,15 @@ async function startMakoDevServer() {
     'scripts',
     'mako.js',
   )} ${tmp} --watch`.nothrow();
+  await waitPort({ port: MAKO_DEV_PORT, timeout: 10000 });
   return { process: p };
 }
 
 async function startBrowser() {
   const browser = await chromium.launch();
   const context = await browser.newContext(devices['iPhone 11']);
   const page = await context.newPage();
-  await page.goto(`http://localhost:${port}`);
+  await page.goto(`http://localhost:${MAKO_DEV_PORT}`);
   return { browser, page };
 }
 
@@ -1465,6 +1472,17 @@ async function killMakoDevServer() {
   const res = await $`ps -ax | grep mako | grep -v grep | awk '{print $1}'`;
   console.error('stdout', res.stdout);
   await $`ps -ax | grep mako | grep -v grep | awk '{print $1}' | xargs kill -9`;
+  let waited = 0;
+  while (waited < 10000) {
+    await delay(1000);
+    clearLockedPorts();
+    let port = await getPort({ port: MAKO_DEV_PORT });
+    if (port == MAKO_DEV_PORT) {
+      return;
+    }
+    waited += 1000;
+  }
+  throw Error(`port(${MAKO_DEV_PORT}) not released for ${waited}ms`);
 }
 
 function normalizeHtml(html) {
@@ -1511,7 +1529,7 @@ async function commonTest(
 }
 
 (async () => {
-  console.log('tests', Object.keys(tests).join(', '));
+  console.log('tests', Object.keys(tests).join(',\n'));
   for (const [name, fn] of Object.entries(tests)) {
     console.log(`> ${chalk.green(name)}`);
     await fn();