404 and broken link handling

e2e/broken-link.spec.ts

@@ -17,10 +17,12 @@ const { version } = createRequire(import.meta.url)(
   join(wakuDir, 'package.json'),
 );
 
-async function start() {
+async function start(staticServe: boolean) {
   const port = await getFreePort();
   const cp = exec(
-    `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} start --port ${port}`,
+    staticServe
+      ? `node ${join(standaloneDir, './node_modules/serve/build/main.js')} dist/public -p ${port}`
+      : `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} start --port ${port}`,
     { cwd: standaloneDir },
   );
   debugChildProcess(cp, fileURLToPath(import.meta.url), [
@@ -31,55 +33,140 @@ async function start() {
   return [port, cp.pid];
 }
 
-test.describe('broken links', async () => {
-  test.beforeEach(async () => {
-    // GitHub Action on Windows doesn't support mkdtemp on global temp dir,
-    // Which will cause files in `src` folder to be empty.
-    // I don't know why
-    const tmpDir = process.env.TEMP_DIR ? process.env.TEMP_DIR : tmpdir();
-    standaloneDir = await mkdtemp(join(tmpDir, 'waku-broken-link-'));
-    await cp(exampleDir, standaloneDir, {
-      filter: (src) => {
-        return !src.includes('node_modules') && !src.includes('dist');
-      },
-      recursive: true,
-    });
-    execSync(`pnpm pack --pack-destination ${standaloneDir}`, {
-      cwd: wakuDir,
-      stdio: 'inherit',
-    });
-    const name = `waku-${version}.tgz`;
-    execSync(`npm install ${join(standaloneDir, name)}`, {
+test.beforeEach(async () => {
+  // GitHub Action on Windows doesn't support mkdtemp on global temp dir,
+  // Which will cause files in `src` folder to be empty.
+  // I don't know why
+  const tmpDir = process.env.TEMP_DIR ? process.env.TEMP_DIR : tmpdir();
+  standaloneDir = await mkdtemp(join(tmpDir, 'waku-broken-link-'));
+  await cp(exampleDir, standaloneDir, {
+    filter: (src) => {
+      return !src.includes('node_modules') && !src.includes('dist');
+    },
+    recursive: true,
+  });
+  execSync(`pnpm pack --pack-destination ${standaloneDir}`, {
+    cwd: wakuDir,
+    stdio: 'inherit',
+  });
+  const name = `waku-${version}.tgz`;
+  execSync(`npm install ${join(standaloneDir, name)}`, {
+    cwd: standaloneDir,
+    stdio: 'inherit',
+  });
+  execSync(
+    `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} build`,
+    {
       cwd: standaloneDir,
       stdio: 'inherit',
-    });
-    execSync(
-      `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} build`,
-      {
-        cwd: standaloneDir,
-        stdio: 'inherit',
-      },
-    );
+    },
+  );
+});
+
+test.describe('server side navigation', () => {
+  test('existing page', async ({ page }) => {
+    const [port, pid] = await start(false);
+
+    // Go to an existing page
+    await page.goto(`http://localhost:${port}/exists`);
+    // The page renders its header
+    await expect(page.getByRole('heading')).toHaveText('Existing page');
+    // The page URL is correct
+    expect(page.url()).toBe(`http://localhost:${port}/exists`);
+
+    // Go back to the index page
+    await page.getByRole('link', { name: 'Back' }).click();
+    await expect(page.getByRole('heading')).toHaveText('Index');
+
+    await terminate(pid!);
+  });
+
+  test('missing page', async ({ page }) => {
+    const [port, pid] = await start(false);
+
+    // Navigate to a non-existing page
+    await page.goto(`http://localhost:${port}/broken`);
+    // The page renders the custom 404.tsx
+    await expect(page.getByRole('heading')).toHaveText('Custom not found');
+    // The browsers URL remains the one that was navigated to
+    expect(page.url()).toBe(`http://localhost:${port}/broken`);
+
+    // Go back to the index page
+    await page.getByRole('link', { name: 'Back' }).click();
+    await expect(page.getByRole('heading')).toHaveText('Index');
+
+    await terminate(pid!);
   });
 
+  test('redirect', async ({ page }) => {
+    const [port, pid] = await start(false);
+
+    // Navigate to a page that redirects to an existing page
+    await page.goto(`http://localhost:${port}/redirect`);
+    // The page renders the target page
+    await expect(page.getByRole('heading')).toHaveText('Existing page');
+    // The browsers URL is the one of the target page
+    expect(page.url()).toBe(`http://localhost:${port}/exists`);
+
+    // Go back to the index page
+    await page.getByRole('link', { name: 'Back' }).click();
+    await expect(page.getByRole('heading')).toHaveText('Index');
+
+    await terminate(pid!);
+  });
+
+  test('broken redirect', async ({ page }) => {
+    const [port, pid] = await start(false);
+
+    // Navigate to a page that redirects to a non-existing page
+    await page.goto(`http://localhost:${port}/broken-redirect`);
+    // The page renders the custom 404.tsx
+    await expect(page.getByRole('heading')).toHaveText('Custom not found');
+    // The browsers URL remains the one that was redirected to
+    expect(page.url()).toBe(`http://localhost:${port}/broken`);
+
+    // Go back to the index page
+    await page.getByRole('link', { name: 'Back' }).click();
+    await expect(page.getByRole('heading')).toHaveText('Index');
+
+    await terminate(pid!);
+  });
+});
+
+test.describe('client side navigation', () => {
   test('correct link', async ({ page }) => {
-    const [port, pid] = await start();
+    const [port, pid] = await start(true);
 
     await page.goto(`http://localhost:${port}`);
-
+    // Click on a link to an existing page
     await page.getByRole('link', { name: 'Existing page' }).click();
+    // The page renders the target page
     await expect(page.getByRole('heading')).toHaveText('Existing page');
+    // The browsers URL is the one of the target page
+    expect(page.url()).toBe(`http://localhost:${port}/exists`);
+
+    // Go back to the index page
+    await page.getByRole('link', { name: 'Back' }).click();
+    await expect(page.getByRole('heading')).toHaveText('Index');
 
     await terminate(pid!);
   });
 
   test('broken link', async ({ page }) => {
-    const [port, pid] = await start();
+    const [port, pid] = await start(true);
 
     await page.goto(`http://localhost:${port}`);
 
+    // Click on a link to a non-existing page
     await page.getByRole('link', { name: 'Broken link' }).click();
-    await expect(page.getByRole('heading')).toHaveText('Not Found');
+    // The page renders the custom 404.tsx
+    await expect(page.getByRole('heading')).toHaveText('Custom not found');
+    // The browsers URL remains the one that was navigated to
+    expect(page.url()).toBe(`http://localhost:${port}/broken`);
+
+    // Go back to the index page
+    await page.getByRole('link', { name: 'Back' }).click();
+    await expect(page.getByRole('heading')).toHaveText('Index');
 
     await terminate(pid!);
   });

e2e/fixtures/broken-links/package.json

@@ -12,6 +12,7 @@
     "react": "19.0.0-rc-d6cb4e77-20240911",
     "react-dom": "19.0.0-rc-d6cb4e77-20240911",
     "react-server-dom-webpack": "19.0.0-rc-d6cb4e77-20240911",
+    "serve": "^14.2.3",
     "waku": "workspace:*"
   },
   "devDependencies": {

e2e/fixtures/broken-links/src/pages/404.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'waku';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h1>Custom not found</h1>
+      <p>
+        <Link to="/">Back</Link>
+      </p>
+    </div>
+  );
+}
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  };
+};

e2e/fixtures/broken-links/src/pages/exists.tsx

@@ -1,18 +1,18 @@
 import { Link } from 'waku';
 
-const Page = () => (
-  <div>
-    <h1>Existing page</h1>
-    <p>
-      <Link to="/">Back</Link>
-    </p>
-  </div>
-);
+export default function Exists() {
+  return (
+    <div>
+      <h1>Existing page</h1>
+      <p>
+        <Link to="/">Back</Link>
+      </p>
+    </div>
+  );
+}
 
 export const getConfig = async () => {
   return {
-    render: 'dynamic',
+    render: 'static',
   };
 };
-
-export default Page;

e2e/fixtures/broken-links/src/pages/index.tsx

@@ -1,21 +1,27 @@
 import { Link } from 'waku';
 
-const Page = () => (
-  <div>
-    <h1>Index</h1>
-    <p>
-      <Link to="/exists">Existing page</Link>
-    </p>
-    <p>
-      <Link to="/broken">Broken link</Link>
-    </p>
-  </div>
-);
+export default function Index() {
+  return (
+    <div>
+      <h1>Index</h1>
+      <p>
+        <Link to="/exists">Existing page</Link>
+      </p>
+      <p>
+        <Link to="/broken">Broken link</Link>
+      </p>
+      <p>
+        <Link to="/redirect">Correct Redirect</Link>
+      </p>
+      <p>
+        <Link to="/broken-redirect">Broken redirect</Link>
+      </p>
+    </div>
+  );
+}
 
 export const getConfig = async () => {
   return {
-    render: 'dynamic',
+    render: 'static',
   };
 };
-
-export default Page;

e2e/fixtures/broken-links/src/redirects.ts

@@ -0,0 +1,22 @@
+import type { Middleware } from 'waku/config';
+
+const redirectsMiddleware: Middleware = () => async (ctx, next) => {
+  switch (ctx.req.url.pathname) {
+    case '/redirect':
+      ctx.res.status = 302;
+      ctx.res.headers = {
+        Location: '/exists',
+      };
+      break;
+    case '/broken-redirect':
+      ctx.res.status = 302;
+      ctx.res.headers = {
+        Location: '/broken',
+      };
+      break;
+    default:
+      return await next();
+  }
+};
+
+export default redirectsMiddleware;

e2e/fixtures/broken-links/tsconfig.json

@@ -11,7 +11,7 @@
     "exactOptionalPropertyTypes": true,
     "types": ["react/experimental"],
     "jsx": "react-jsx",
-    "rootDir": "./src",
     "outDir": "./dist"
-  }
+  },
+  "include": ["./src", "./waku.config.ts"]
 }

e2e/fixtures/broken-links/waku.config.ts

@@ -0,0 +1,10 @@
+/** @type {import('waku/config').Config} */
+export default {
+  middleware: () => [
+    import('./src/redirects.js'),
+    import('waku/middleware/dev-server'),
+    import('waku/middleware/headers'),
+    import('waku/middleware/rsc'),
+    import('waku/middleware/ssr'),
+  ],
+};