test: detailed test cases for server- and client navigation cases

e2e/broken-link.spec.ts

@@ -31,44 +31,101 @@ 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();
+
+    // 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`);
+
+    await terminate(pid!);
+  });
+
+  test('missing page', async ({ page }) => {
+    const [port, pid] = await start();
+
+    // 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`);
+
+    await terminate(pid!);
+  });
+
+  test('redirect', async ({ page }) => {
+    const [port, pid] = await start();
+
+    // 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`);
+
+    await terminate(pid!);
   });
 
+  test('broken redirect', async ({ page }) => {
+    const [port, pid] = await start();
+
+    // 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`);
+
+    await terminate(pid!);
+  });
+});
+
+test.describe('client side navigation', () => {
   test('correct link', async ({ page }) => {
     const [port, pid] = await start();
 
     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`);
 
     await terminate(pid!);
   });
@@ -78,8 +135,42 @@ test.describe('broken links', async () => {
 
     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`);
+
+    await terminate(pid!);
+  });
+
+  test('redirect', async ({ page }) => {
+    const [port, pid] = await start();
+
+    await page.goto(`http://localhost:${port}`);
+
+    // Click on a link to a page that redirects to an existing page
+    await page.getByRole('link', { name: 'Redirect' }).click();
+    // The page renders the target
+    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`);
+
+    await terminate(pid!);
+  });
+
+  test('broken redirect', async ({ page }) => {
+    const [port, pid] = await start();
+
+    await page.goto(`http://localhost:${port}`);
+
+    // Click on a link to a page that redirects to a non-existing page
+    await page.getByRole('link', { name: 'Broken redirect' }).click();
+    // 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`);
 
     await terminate(pid!);
   });

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

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

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

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

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

@@ -1,21 +1,21 @@
 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 const getConfig = async () => {
-  return {
-    render: 'dynamic',
-  };
-};
-
-export default Page;
+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">Redirect</Link>
+      </p>
+      <p>
+        <Link to="/broken-redirect">Broken redirect</Link>
+      </p>
+    </div>
+  );
+}

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'),
+  ],
+};