fix(ui): make fixture bundle browser-safe, fast and cacheable
The UI fixture bundle crashed at runtime, so every test waited out its 45s timeout: - server-only modules leaked into the bundle and referenced node built-ins, the process global, and validated env at import time - the previous platform: 'node' fix kept esbuild happy but emitted require() calls that cannot run in the browser Fix it at the bundle boundary: - alias node:* imports to e2e/ui/node-stubs.mjs (shape-compatible stubs, no real I/O) - inject e2e/ui/process-shim.mjs for the process global - define process.env.SKIP_ENV_VALIDATION=1 so src/env.ts skips parsing in the fixture (same escape hatch vitest uses) Also make the fixture server fast to start: - build JS and Tailwind CSS in parallel - cache built assets in node_modules/.cache/nexst-ui-fixture keyed on a content hash of src/, fixtures, stubs and the server file - startup drops from ~1.7s to ~220ms on cache hits
This commit is contained in:
openhands committed
1 parent
c9b363d60d
commit
1dd584cd82
27 files changed
+334
-67
No files matched your search
+147
-56
@@ -1,4 +1,5 @@
|
||||
import { readFile } from "node:fs/promises";
|
||||
import { createHash } from "node:crypto";
|
||||
import { mkdir, readdir, readFile, unlink, writeFile } from "node:fs/promises";
|
||||
import { createServer } from "node:http";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
@@ -24,63 +25,153 @@ const actions = new Set([
|
||||
"@/actions/admin-media",
|
||||
]);
|
||||
const nodeStubs = path.join(root, "e2e/ui/node-stubs.mjs");
|
||||
const bundle = await build({
|
||||
entryPoints: [path.join(fixtures, "entry.tsx")],
|
||||
bundle: true,
|
||||
write: false,
|
||||
outdir: path.join(root, "test-results/ui-fixture"),
|
||||
format: "iife",
|
||||
jsx: "automatic",
|
||||
alias: {
|
||||
"@": path.join(root, "src"),
|
||||
"node:async_hooks": nodeStubs,
|
||||
"node:crypto": nodeStubs,
|
||||
"node:fs/promises": nodeStubs,
|
||||
"node:path": nodeStubs,
|
||||
},
|
||||
define: { "process.env.NODE_ENV": '"production"' },
|
||||
plugins: [
|
||||
{
|
||||
name: "server-contracts",
|
||||
setup(build) {
|
||||
build.onResolve(
|
||||
{ filter: /^next\/navigation$|^next\/link$|^@\/actions\// },
|
||||
(args) => {
|
||||
if (args.path === "next/navigation")
|
||||
return { path: path.join(fixtures, "navigation.ts") };
|
||||
if (args.path === "next/link")
|
||||
return { path: path.join(fixtures, "next-link.tsx") };
|
||||
if (actions.has(args.path))
|
||||
return { path: path.join(fixtures, "server-actions.ts") };
|
||||
throw Error(`Unexpected server action in UI fixture: ${args.path}`);
|
||||
},
|
||||
);
|
||||
build.onResolve(
|
||||
{ filter: /^@\/lib\/db$|^mysql2|^next\/headers$/ },
|
||||
(args) => {
|
||||
throw Error(
|
||||
`Database or server dependency forbidden in UI fixture: ${args.path}`,
|
||||
const cacheDir = path.join(root, "node_modules/.cache/nexst-ui-fixture");
|
||||
const startedAt = Date.now();
|
||||
|
||||
async function listFiles(dir) {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const files = [];
|
||||
for (const entry of entries) {
|
||||
const target = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) files.push(...(await listFiles(target)));
|
||||
else files.push(target);
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
async function fixtureCacheKey() {
|
||||
const files = [
|
||||
...(await listFiles(path.join(root, "src"))),
|
||||
...(await listFiles(fixtures)),
|
||||
nodeStubs,
|
||||
path.join(root, "e2e/ui/process-shim.mjs"),
|
||||
fileURLToPath(import.meta.url),
|
||||
path.join(root, "package.json"),
|
||||
].sort();
|
||||
const hash = createHash("sha256");
|
||||
for (const file of files) {
|
||||
hash.update(file.slice(root.length));
|
||||
hash.update(await readFile(file));
|
||||
}
|
||||
return hash.digest("hex");
|
||||
}
|
||||
|
||||
async function readCache(key) {
|
||||
try {
|
||||
const [js, css] = await Promise.all([
|
||||
readFile(path.join(cacheDir, `${key}.app.js`), "utf8"),
|
||||
readFile(path.join(cacheDir, `${key}.styles.css`), "utf8"),
|
||||
]);
|
||||
return { js, css };
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function writeCache(key, js, css) {
|
||||
await mkdir(cacheDir, { recursive: true });
|
||||
await Promise.all([
|
||||
writeFile(path.join(cacheDir, `${key}.app.js`), js),
|
||||
writeFile(path.join(cacheDir, `${key}.styles.css`), css),
|
||||
]);
|
||||
const stale = await readdir(cacheDir);
|
||||
await Promise.all(
|
||||
stale
|
||||
.filter((name) => !name.startsWith(key))
|
||||
.map((name) => unlink(path.join(cacheDir, name))),
|
||||
);
|
||||
}
|
||||
|
||||
async function buildFixture() {
|
||||
const [bundle, globalCss] = await Promise.all([
|
||||
build({
|
||||
entryPoints: [path.join(fixtures, "entry.tsx")],
|
||||
bundle: true,
|
||||
write: false,
|
||||
outdir: path.join(root, "test-results/ui-fixture"),
|
||||
format: "iife",
|
||||
jsx: "automatic",
|
||||
alias: {
|
||||
"@": path.join(root, "src"),
|
||||
"node:async_hooks": nodeStubs,
|
||||
"node:child_process": nodeStubs,
|
||||
"node:crypto": nodeStubs,
|
||||
"node:dns/promises": nodeStubs,
|
||||
"node:fs": nodeStubs,
|
||||
"node:fs/promises": nodeStubs,
|
||||
"node:http": nodeStubs,
|
||||
"node:net": nodeStubs,
|
||||
"node:os": nodeStubs,
|
||||
"node:path": nodeStubs,
|
||||
"node:url": nodeStubs,
|
||||
"node:util": nodeStubs,
|
||||
},
|
||||
define: {
|
||||
"process.env.NODE_ENV": '"production"',
|
||||
"process.env.SKIP_ENV_VALIDATION": '"1"',
|
||||
},
|
||||
inject: [path.join(root, "e2e/ui/process-shim.mjs")],
|
||||
plugins: [
|
||||
{
|
||||
name: "server-contracts",
|
||||
setup(build) {
|
||||
build.onResolve(
|
||||
{ filter: /^next\/navigation$|^next\/link$|^@\/actions\// },
|
||||
(args) => {
|
||||
if (args.path === "next/navigation")
|
||||
return { path: path.join(fixtures, "navigation.ts") };
|
||||
if (args.path === "next/link")
|
||||
return { path: path.join(fixtures, "next-link.tsx") };
|
||||
if (actions.has(args.path))
|
||||
return { path: path.join(fixtures, "server-actions.ts") };
|
||||
throw Error(
|
||||
`Unexpected server action in UI fixture: ${args.path}`,
|
||||
);
|
||||
},
|
||||
);
|
||||
build.onResolve(
|
||||
{ filter: /^@\/lib\/db$|^mysql2|^next\/headers$/ },
|
||||
(args) => {
|
||||
throw Error(
|
||||
`Database or server dependency forbidden in UI fixture: ${args.path}`,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
const globalCss = (
|
||||
await postcss([tailwind({ base: root })]).process(
|
||||
await readFile(path.join(root, "src/app/globals.css"), "utf8"),
|
||||
{ from: path.join(root, "src/app/globals.css") },
|
||||
)
|
||||
).css;
|
||||
const css =
|
||||
globalCss +
|
||||
"\n" +
|
||||
bundle.outputFiles
|
||||
.filter((file) => file.path.endsWith(".css"))
|
||||
.map((file) => file.text)
|
||||
.join("\n");
|
||||
const js = bundle.outputFiles.find((file) => file.path.endsWith(".js")).text;
|
||||
},
|
||||
],
|
||||
}),
|
||||
postcss([tailwind({ base: root })])
|
||||
.process(await readFile(path.join(root, "src/app/globals.css"), "utf8"), {
|
||||
from: path.join(root, "src/app/globals.css"),
|
||||
})
|
||||
.then((result) => result.css),
|
||||
]);
|
||||
const js = bundle.outputFiles.find((file) => file.path.endsWith(".js")).text;
|
||||
const css =
|
||||
globalCss +
|
||||
"\n" +
|
||||
bundle.outputFiles
|
||||
.filter((file) => file.path.endsWith(".css"))
|
||||
.map((file) => file.text)
|
||||
.join("\n");
|
||||
return { js, css };
|
||||
}
|
||||
|
||||
const cacheKey = await fixtureCacheKey();
|
||||
let assets = await readCache(cacheKey);
|
||||
if (assets) {
|
||||
console.log(
|
||||
`[fixture] reusing cached bundle ${cacheKey.slice(0, 12)} (${Date.now() - startedAt}ms)`,
|
||||
);
|
||||
} else {
|
||||
assets = await buildFixture();
|
||||
await writeCache(cacheKey, assets.js, assets.css);
|
||||
console.log(
|
||||
`[fixture] built bundle ${cacheKey.slice(0, 12)} in ${Date.now() - startedAt}ms`,
|
||||
);
|
||||
}
|
||||
const { js, css } = assets;
|
||||
const html =
|
||||
'<!doctype html><html lang="en" class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="csrf-token" content="' +
|
||||
"a".repeat(64) +
|
||||
|
||||
Reference in new issue
Block a user