test: test case for static and dynamic rendering

e2e/fixtures/render-type/README.md

@@ -0,0 +1,3 @@
+# Render types
+
+Test different render types.

e2e/fixtures/render-type/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "render-type",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start:dynamic": "waku start",
+    "start:static": "serve dist/public"
+  },
+  "dependencies": {
+    "react": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-dom": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-server-dom-webpack": "19.0.0-canary-e3ebcd54b-20240405",
+    "waku": "workspace:*",
+    "serve": "^14.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.24",
+    "typescript": "5.4.4"
+  }
+}

e2e/fixtures/render-type/src/pages/dynamic/[path].tsx

@@ -0,0 +1,10 @@
+export default async function Test({ path }: { path: string }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return <h1>{path}</h1>;
+}
+
+export async function getConfig() {
+  return {
+    render: 'dynamic',
+  };
+}

e2e/fixtures/render-type/src/pages/static/[path].tsx

@@ -0,0 +1,11 @@
+export default async function Test({ path }: { path: string }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return <h1>{path}</h1>;
+}
+
+export async function getConfig() {
+  return {
+    render: 'static',
+    staticPaths: ['static-page'],
+  };
+}

e2e/fixtures/render-type/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "composite": true
+  },
+  "include": ["./src", "./waku.config.ts"]
+}

e2e/render-type.spec.ts

@@ -0,0 +1,65 @@
+import { execSync, exec, ChildProcess } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import waitPort from 'wait-port';
+import { debugChildProcess, getFreePort, terminate, test } from './utils.js';
+import { rm } from 'node:fs/promises';
+import { expect } from '@playwright/test';
+
+const waku = fileURLToPath(
+  new URL('../packages/waku/dist/cli.js', import.meta.url),
+);
+
+const cwd = fileURLToPath(new URL('./fixtures/render-type', import.meta.url));
+
+test.describe(`render type`, () => {
+  let cp: ChildProcess;
+  let port: number;
+  test.beforeAll('remove cache', async () => {
+    await rm(`${cwd}/dist`, {
+      recursive: true,
+      force: true,
+    });
+  });
+
+  test.beforeAll(async () => {
+    execSync(`node ${waku} build`, { cwd });
+  });
+
+  test('dynamic page', async ({ browser }) => {
+    port = await getFreePort();
+    cp = exec(`node ${waku} start --port ${port}`, { cwd });
+    debugChildProcess(cp, fileURLToPath(import.meta.url), [
+      /ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time/,
+    ]);
+    await waitPort({ port });
+
+    const context = await browser.newContext({
+      javaScriptEnabled: false,
+    });
+    const page = await context.newPage();
+    await page.goto(`http://localhost:${port}/dynamic/dynamic-page`);
+    await expect(
+      page.getByRole('heading', { name: 'dynamic-page' }),
+    ).toBeVisible();
+  });
+
+  test('static page', async ({ browser }) => {
+    port = await getFreePort();
+    // Use a static http server to verify the static page exists.
+    cp = exec(`pnpm serve -l ${port} dist/public`, { cwd });
+    await waitPort({ port });
+
+    const context = await browser.newContext({
+      javaScriptEnabled: false,
+    });
+    const page = await context.newPage();
+    await page.goto(`http://localhost:${port}/static/static-page`);
+    await expect(
+      page.getByRole('heading', { name: 'static-page' }),
+    ).toBeVisible();
+  });
+
+  test.afterAll(async () => {
+    await terminate(cp.pid!);
+  });
+});