@dargmuesli/nuxt-vio-testing 23.1.1 → 23.1.3

package/dist/e2e/utils/tests.mjs

@@ -410,11 +410,15 @@ const testMetadata = async ({ page, path, title }) => {
 };
 const testOgImage = (paths) => vioTest.describe("visual regression", () => {
 	vioTest("generates the open graph image", async ({ page }) => {
+		const base = new URL(SITE_URL);
 		for (const path of [paths.en, paths.de]) {
 			await page.goto(path);
 			const ogImageUrl = await page.locator("meta[property=\"og:image\"]").getAttribute("content");
 			if (!ogImageUrl) throw new Error("The og:image url is not given.");
-			await page.goto(ogImageUrl);
+			const ogImage = new URL(ogImageUrl);
+			ogImage.protocol = base.protocol;
+			ogImage.host = base.host;
+			await page.goto(ogImage.toString());
 			await expect(page).toHaveScreenshot();
 		}
 	});

package/dist/playwright.config.mjs

@@ -1,7 +1,9 @@
 import { SITE_URL, TIMEOUT } from "./e2e/utils/constants.mjs";
 import { defineConfig, devices } from "@playwright/test";
+import { fileURLToPath } from "node:url";
 //#region playwright.config.ts
 const VIO_SERVER = process.env.VIO_SERVER || "dev";
+const WARM_DEV_SERVER_SCRIPT = fileURLToPath(new URL("./scripts/warm-dev-server.mjs", import.meta.url));
 /**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
@@ -37,7 +39,7 @@ var playwright_config_default = defineConfig({
 		trace: "on-first-retry"
 	},
 	webServer: {
-		command: VIO_SERVER === "dev" ? "pnpm run --dir ../src certificates && node ./scripts/warm-dev-server.mjs" : `pnpm run --dir ../src certificates && pnpm run --dir ../src start:${VIO_SERVER}`,
+		command: VIO_SERVER === "dev" ? `pnpm run --dir ../src certificates && node ${WARM_DEV_SERVER_SCRIPT}` : `pnpm run --dir ../src certificates && pnpm run --dir ../src start:${VIO_SERVER}`,
 		env: {
 			NUXT_APP_SECRET: "vio-testing-app-secret-0123456789",
 			NUXT_PUBLIC_VIO_IS_TESTING: "true"

package/dist/scripts/warm-dev-server.mjs

@@ -0,0 +1,115 @@
+// Runs the dev server on an internal port, warms it up, then proxies the
+// public port to it transparently.
+//
+// nuxt dev answers 503 "Starting Nuxt..." while it starts up, and a request
+// that reaches it during the switch to the real app can hang without ever
+// being answered. Playwright's webServer availability check has no
+// per-request timeout and does not retry while one is in flight, so a single
+// check landing in that window would exhaust the whole timeout even though
+// the site is up. Keeping the server on an internal port until it has
+// answered real page loads twice in a row means the checks and the browsers
+// only ever talk to a warm server; until the proxy opens they get connection
+// refused, which they retry without hanging. The warmup polls use a fresh
+// connection and a hard timeout per attempt, so a single orphaned request
+// cannot stall them.
+//
+// Usage: node warm-dev-server.mjs
+// The public port comes from PORT (as set by the e2e script); the dev server
+// runs on PORT + 1000.
+
+import { spawn } from 'node:child_process'
+import https from 'node:https'
+import net from 'node:net'
+
+const host = process.env.HOST || 'app.localhost'
+const publicPort = Number(process.env.PORT || 3000)
+const internalPort = publicPort + 1000
+const warmupBudgetMs = 120_000
+
+const server = spawn('pnpm run --dir ../src start:dev', {
+  env: { ...process.env, PORT: String(internalPort) },
+  shell: true,
+  stdio: 'inherit',
+})
+
+function stop(code) {
+  server.kill('SIGTERM')
+  process.exit(code)
+}
+
+process.on('SIGTERM', () => stop(0))
+process.on('SIGINT', () => stop(0))
+server.on('exit', (code) => stop(code ?? 1))
+
+// matches playwright's own availability check: 200 to 403
+function probe() {
+  return new Promise((resolve) => {
+    const request = https.get(
+      {
+        host,
+        path: '/',
+        port: internalPort,
+        // talks only to the local dev server we just spawned on an internal, un-exposed
+        // loopback port, with our own mkcert dev cert, so there is no untrusted peer to
+        // authenticate; mirrors the e2e's ignoreHTTPSErrors. We only care that it is up.
+        rejectUnauthorized: false,
+        timeout: 2500,
+      },
+      (response) => {
+        const available =
+          response.statusCode >= 200 && response.statusCode < 404
+        response.resume()
+        response.on('end', () => resolve(available))
+      },
+    )
+    request.on('error', () => resolve(false))
+    request.on('timeout', () => {
+      request.destroy()
+      resolve(false)
+    })
+  })
+}
+
+async function waitForWarmup() {
+  const start = Date.now()
+  let consecutive = 0
+  while (Date.now() - start < warmupBudgetMs) {
+    if (await probe()) consecutive += 1
+    else consecutive = 0
+    if (consecutive >= 2) return true
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  }
+  return false
+}
+
+async function openProxy() {
+  const proxy = net.createServer((socket) => {
+    const upstream = net.connect({ host: '127.0.0.1', port: internalPort })
+    socket.pipe(upstream)
+    upstream.pipe(socket)
+    socket.on('error', () => upstream.destroy())
+    upstream.on('error', () => socket.destroy())
+  })
+  await new Promise((resolve, reject) => {
+    proxy.once('error', reject)
+    proxy.listen(publicPort, resolve)
+  })
+  return proxy
+}
+
+if (!(await waitForWarmup())) {
+  process.stderr.write('dev server did not warm up in time\n')
+  stop(1)
+}
+
+let proxy
+try {
+  proxy = await openProxy()
+} catch (error) {
+  process.stderr.write(
+    `could not open the proxy on port ${publicPort}: ${error.message}\n`,
+  )
+  stop(1)
+}
+
+proxy.on('close', () => stop(0))

package/package.json

@@ -56,9 +56,10 @@
     "url": "git+https://github.com/dargmuesli/vio.git"
   },
   "type": "module",
-  "version": "23.1.1",
+  "version": "23.1.3",
   "scripts": {
     "build": "tsdown",
+    "postbuild": "node -e \"import('node:fs').then(fs=>{fs.mkdirSync('dist/scripts',{recursive:true});fs.copyFileSync('scripts/warm-dev-server.mjs','dist/scripts/warm-dev-server.mjs')})\"",
     "build:watch": "tsdown --watch",
     "lint": "pnpm run lint:js && pnpm run lint:ts",
     "lint:fix": "pnpm run lint:js --fix",