fix(web): repair Next.js standalone static-chunks 404 in Docker + harden 2 e2e specs

Root cause of bug: web Dockerfile copied .next/static to the wrong path
in the runtime stage. The Next.js 16 standalone server (CMD 'node
web/server.js' from /app/web) runs from /app/web/web/server.js because
'standalone' wraps the source directory. It serves /_next/static/* from
'./web/.next/static' (relative to the standalone server's location),
not from './.next/static' (which is what the previous COPY produced).

Symptom: in the deployed Docker stack at http://localhost:3050 every
client-side JS chunk under /_next/static/chunks/* returned HTTP 404
with content-type text/plain. The browser refused to execute the
chunks (strict MIME), so the SPA never hydrated. All Playwright tests
that ask for any dynamic UI text on a (app)/ page would time out
because AuthGuard never ran in the browser.

Discovery path: deployed compose stack via 'docker compose up -d
--build' + 'scripts/e2e-docker-test.sh' (backend API 9/9 ✓), then ran
Playwright against NOTELETT_WEB_PORT=3050. settings.spec failed with
'product configuration section' not visible. Page snapshot showed
just <skip-to-content link> + toast region — no other content. Console
logs revealed every /_next/static/chunks/* was 404 with text/plain.
'docker exec ls' showed BUILD_ID at /app/web/web/.next/BUILD_ID and
static at /app/web/.next/static — wrong path. Moved static into the
standalone tree and chunks now serve 200 with application/javascript.

Fix:
  web/Dockerfile: change
    COPY --from=builder /app/web/.next/static ./.next/static
  to
    COPY --from=builder /app/web/.next/static ./web/.next/static
  with explanatory comment so this doesn't regress.

Test hardening (these tests were dev-server-only by accident — they
worked locally because Next.js dev did not enforce the same static
path layout; the bug above hid them in production builds too):

  web/e2e/accessibility.spec.ts — 'focus-visible ring appears on tab
  navigation' was navigating to /dashboard which AuthGuard correctly
  redirects when unauthenticated, leaving the DOM empty (AuthGuard
  returns null until verifySessionAndReadiness completes) so Tab
  presses focused nothing. Switched to /login which is unauthenticated
  by design and has known focusable form inputs.

  web/e2e/settings.spec.ts — 'shows product configuration section'
  expected /settings to render content without auth. Now obtains real
  tokens from platform-service via API, seeds them via addInitScript,
  and falls back to test.skip with a clear message if platform-service
  is not reachable.

Verified:
  - All 31 Playwright tests across navigation/accessibility/dashboard/
    search/settings/smart-actions/reviews specs PASS against the
    deployed Docker stack at :3050.
  - 'pnpm run verify': backend 380/380, web 96/96, mobile 97/97.
  - 'bash scripts/e2e-docker-test.sh': 9/9 backend API CRUD steps pass.
  - 'curl -sI http://localhost:3050/_next/static/chunks/app/error-*.js'
    now returns 200 + application/javascript.

Not migrated: e2e/release-flows.spec.ts and e2e/visual-regression.spec.ts
intentionally remain dev-server-targeted. release-flows.spec uses
page.route() to mock backend responses and is meant to test the UI in
isolation against a dev server. visual-regression.spec needs baseline
regeneration after the UI5-UI8 migration; this is a separate workstream
tracked in docs/UI_UX_PLATFORM_CORE_ROADMAP.md.
This commit is contained in:
saravanakumardb1 2026-05-23 02:29:40 -07:00
parent 82ce90f91d
commit 131b73cfc1
3 changed files with 48 additions and 4 deletions

View File

@ -33,7 +33,12 @@ ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
COPY --from=builder /app/web/.next/standalone ./
COPY --from=builder /app/web/.next/static ./.next/static
# The Next.js standalone server (at /app/web/web/server.js) serves
# /_next/static/* from a `web/.next/static` directory relative to its
# own location, NOT from /app/web/.next/static. Without this, all
# generated JS chunks 404 with text/plain content-type and the SPA
# never hydrates.
COPY --from=builder /app/web/.next/static ./web/.next/static
EXPOSE 3045
ENV PORT=3045

View File

@ -28,9 +28,15 @@ for (const route of routes) {
}
test('accessibility: focus-visible ring appears on tab navigation', async ({ page }) => {
await page.goto('/dashboard');
// Use /login because it doesn't require auth and has known focusable
// form fields. /dashboard would be redirected by AuthGuard when no
// session is present, leaving the DOM empty (AuthGuard returns null
// until verifySessionAndReadiness completes) and Tab presses would
// focus nothing.
await page.goto('/login');
await page.waitForLoadState('networkidle');
await page.keyboard.press('Tab');
// Click the page first to ensure keyboard focus tracking starts.
await page.locator('body').click();
await page.keyboard.press('Tab');
const focused = page.locator(':focus-visible');

View File

@ -6,7 +6,40 @@ test.describe("Settings Page", () => {
expect(res.status()).toBe(200);
});
test("shows product configuration section", async ({ page }) => {
test("shows product configuration section", async ({ page, request }) => {
// Obtain real tokens from platform-service via API, then seed
// localStorage so AuthGuard's session refresh + kill-switch checks
// pass naturally. Requires the deployed platform-service stack to be
// reachable at http://localhost:4003, which is the same assumption
// as the navigation/dashboard specs.
const email = process.env.NOTELETT_E2E_EMAIL ?? "user@notelett.app";
const password = process.env.NOTELETT_E2E_PASSWORD ?? "Notelett!Test#2026";
const platformUrl =
process.env.NOTELETT_E2E_PLATFORM_URL ?? "http://localhost:4003/api";
const loginRes = await request.post(`${platformUrl}/auth/login`, {
data: { email, password, productId: "notelett" },
headers: { "Content-Type": "application/json", "X-Product-Id": "notelett" },
});
if (!loginRes.ok()) {
test.skip(
true,
`Skipping: platform-service login at ${platformUrl} not reachable. Status ${loginRes.status()}.`
);
return;
}
const tokens = (await loginRes.json()) as {
user: { id: string; email: string; name?: string };
accessToken: string;
refreshToken: string;
};
await page.addInitScript((seed) => {
localStorage.setItem("notelett_auth_user", JSON.stringify(seed.user));
localStorage.setItem("notelett_access_token", seed.accessToken);
localStorage.setItem("notelett_refresh_token", seed.refreshToken);
}, tokens);
await page.goto("/settings");
await expect(
page.getByText(/product|configuration|notelett|backend/i).first()