@dargmuesli/nuxt-vio-testing 23.1.0 → 23.1.2

package/dist/e2e/utils/tests.d.mts

@@ -7,8 +7,8 @@ export declare const testMetadata: ({ page, path, title }: {
   title: string;
 }) => Promise<void>;
 export declare const testOgImage: (paths: {
-  static?: Record<string, string>;
-  dynamic?: Record<string, string>;
+  en: string;
+  de: string;
 }) => void;
 export declare const testPageLoad: (url: string, status?: number) => void;
 export declare const testVisualRegression: (url: string, plain?: boolean) => void;

package/dist/e2e/utils/tests.mjs

@@ -2,7 +2,7 @@ import { SITE_URL, TIMEOUT } from "./constants.mjs";
 import { vioTest } from "../fixtures/vioTest.mjs";
 import { expect } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
-import { joinURL, withoutTrailingSlash } from "ufo";
+import { withoutTrailingSlash } from "ufo";
 //#region e2e/utils/tests.ts
 const testA11y = (url) => vioTest.describe("a11y", () => {
 	vioTest("should not have any automatically detectable accessibility issues", async ({ defaultPage }) => {
@@ -403,17 +403,20 @@ const testMetadata = async ({ page, path, title }) => {
 	];
 	for (const object of meta) await expect(page.locator(object.tag + object.attributes?.map((attribute) => `[${attribute.key}="${attribute.value}"]`).join(""))).toBeAttached();
 	expect((await page.locator("script[data-hid=\"schema-org-graph\"]").innerText()).replaceAll(SITE_URL, "https://example.com")).toMatchSnapshot(`schema-org-graph-${process.env.VIO_SERVER}.json`);
+	const ogImageContent = await page.locator("meta[property=\"og:image\"]").getAttribute("content");
+	expect(ogImageContent).toBeTruthy();
+	expect(ogImageContent?.startsWith(SITE_URL)).toBeTruthy();
+	expect(ogImageContent).toMatch(/(\/_og\/[ds]\/).+\.png$/);
 };
 const testOgImage = (paths) => vioTest.describe("visual regression", () => {
 	vioTest("generates the open graph image", async ({ page }) => {
-		const isStaticServer = process.env.VIO_SERVER === "static";
-		const serverPaths = isStaticServer ? paths.static : paths.dynamic;
-		if (!serverPaths) throw new Error(isStaticServer ? "Static paths must be provided for static server tests" : "Dynamic paths must be provided for dynamic server tests");
-		const serverPrefix = isStaticServer ? "s" : "d";
-		await page.goto(joinURL(`/_og/${serverPrefix}/${serverPaths.en}`));
-		await expect(page).toHaveScreenshot();
-		await page.goto(joinURL(`/_og/${serverPrefix}/${serverPaths.de}`));
-		await expect(page).toHaveScreenshot();
+		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);
+			await expect(page).toHaveScreenshot();
+		}
 	});
 });
 const testPageLoad = (url, status = 200) => vioTest.describe("page load", () => {

package/dist/playwright.config.mjs

@@ -1,6 +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
@@ -36,7 +39,7 @@ var playwright_config_default = defineConfig({
 		trace: "on-first-retry"
 	},
 	webServer: {
-		command: `pnpm run --dir ../src certificates && pnpm run --dir ../src start:${process.env.VIO_SERVER || "dev"}`,
+		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

@@ -6,7 +6,7 @@
     "@types/lodash-es": "4.17.12",
     "@types/node": "24.19.2",
     "cross-env": "10.1.0",
-    "eslint": "10.12.0",
+    "eslint": "10.13.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.7",
     "lodash-es": "4.18.1",
@@ -56,9 +56,10 @@
     "url": "git+https://github.com/dargmuesli/vio.git"
   },
   "type": "module",
-  "version": "23.1.0",
+  "version": "23.1.2",
   "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",