chore: create monorepo e2e spec (#1079)

This needs more work to figure out how to install dependencies in the
test monorepo and link in the waku package in a way that closely matches
the way it works with published npm packages.

---------

Co-authored-by: Daishi Kato <[email protected]>

e2e/fixtures/monorepo/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "monorepo",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ]
+}

e2e/fixtures/monorepo/packages/waku-project/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "waku-project",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-server-dom-webpack": "19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
+    "autoprefixer": "10.4.20",
+    "tailwindcss": "3.4.16",
+    "typescript": "5.7.2"
+  }
+}

e2e/fixtures/monorepo/packages/waku-project/postcss.config.js

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

e2e/fixtures/monorepo/packages/waku-project/src/components/counter.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react'; // eslint-disable-line import/no-unresolved
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+      <div>Count: {count}</div>
+      <button
+        onClick={handleIncrement}
+        className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
+      >
+        Increment
+      </button>
+    </section>
+  );
+};

e2e/fixtures/monorepo/packages/waku-project/src/components/footer.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="p-6 lg:fixed lg:bottom-0 lg:left-0">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

e2e/fixtures/monorepo/packages/waku-project/src/components/header.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'waku';
+
+export const Header = () => {
+  return (
+    <header className="flex items-center gap-4 p-6 lg:fixed lg:left-0 lg:top-0">
+      <h2 className="text-lg font-bold tracking-tight">
+        <Link to="/">Waku starter</Link>
+      </h2>
+    </header>
+  );
+};

e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx

@@ -0,0 +1,39 @@
+import '../styles.css';
+
+import type { ReactNode } from 'react';
+
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+
+type RootLayoutProps = { children: ReactNode };
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const data = await getData();
+
+  return (
+    <div className="font-['Nunito']">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

e2e/fixtures/monorepo/packages/waku-project/src/pages/about.tsx

@@ -0,0 +1,32 @@
+import { Link } from 'waku';
+
+export default async function AboutPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <p>{data.body}</p>
+      <Link to="/" className="mt-4 inline-block underline">
+        Return home
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'About',
+    headline: 'About Waku',
+    body: 'The minimal React framework',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

e2e/fixtures/monorepo/packages/waku-project/src/pages/index.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'waku';
+
+import { Counter } from '../components/counter';
+
+export default async function HomePage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight" data-testid="header">
+        {data.headline}
+      </h1>
+      <p>{data.body}</p>
+      <Counter />
+      <Link to="/about" className="mt-4 inline-block underline">
+        About page
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+    body: 'Hello world!',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

e2e/fixtures/monorepo/packages/waku-project/src/styles.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

e2e/fixtures/monorepo/packages/waku-project/tailwind.config.js

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};

e2e/fixtures/monorepo/packages/waku-project/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist"
+  }
+}

e2e/monorepo.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+
+import { test, prepareStandaloneSetup } from './utils.js';
+
+const startApp = prepareStandaloneSetup('monorepo');
+
+for (const mode of ['DEV', 'PRD'] as const) {
+  for (const packageManager of ['npm', 'pnpm', 'yarn'] as const) {
+    test.describe(`${packageManager} monorepo: ${mode}`, () => {
+      let port: number;
+      let stopApp: () => Promise<void>;
+      test.beforeAll(async () => {
+        ({ port, stopApp } = await startApp(
+          mode,
+          packageManager,
+          'packages/waku-project',
+        ));
+      });
+      test.afterAll(async () => {
+        await stopApp();
+      });
+
+      test('renders the home page', async ({ page }) => {
+        await page.goto(`http://localhost:${port}`);
+        await expect(page.getByTestId('header')).toHaveText('Waku');
+      });
+    });
+  }
+}

e2e/utils.ts

@@ -138,6 +138,12 @@ export const prepareNormalSetup = (fixtureName: string) => {
   return startApp;
 };
 
+const PACKAGE_INSTALL = {
+  npm: (path: string) => `npm add ${path}`,
+  pnpm: (path: string) => `pnpm add ${path}`,
+  yarn: (path: string) => `yarn add ${path}`,
+} as const;
+
 export const prepareStandaloneSetup = (fixtureName: string) => {
   const wakuDir = fileURLToPath(new URL('../packages/waku', import.meta.url));
   const { version } = createRequire(import.meta.url)(
@@ -151,7 +157,11 @@ export const prepareStandaloneSetup = (fixtureName: string) => {
   const tmpDir = process.env.TEMP_DIR || tmpdir();
   let standaloneDir: string | undefined;
   let built = false;
-  const startApp = async (mode: 'DEV' | 'PRD' | 'STATIC') => {
+  const startApp = async (
+    mode: 'DEV' | 'PRD' | 'STATIC',
+    packageManager: 'npm' | 'pnpm' | 'yarn' = 'npm',
+    packageDir = '',
+  ) => {
     if (!standaloneDir) {
       standaloneDir = mkdtempSync(join(tmpDir, fixtureName));
       cpSync(fixtureDir, standaloneDir, {
@@ -164,16 +174,22 @@ export const prepareStandaloneSetup = (fixtureName: string) => {
         cwd: wakuDir,
         stdio: 'inherit',
       });
+      const wakuPackageTgz = join(standaloneDir, `waku-${version}.tgz`);
+      const installScript = PACKAGE_INSTALL[packageManager](wakuPackageTgz);
+      execSync(installScript, { cwd: standaloneDir, stdio: 'inherit' });
       execSync(
         `npm install --force ${join(standaloneDir, `waku-${version}.tgz`)}`,
         { cwd: standaloneDir, stdio: 'inherit' },
       );
     }
     if (mode !== 'DEV' && !built) {
-      rmSync(`${standaloneDir}/dist`, { recursive: true, force: true });
+      rmSync(`${join(standaloneDir, packageDir, 'dist')}`, {
+        recursive: true,
+        force: true,
+      });
       execSync(
         `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} build`,
-        { cwd: standaloneDir },
+        { cwd: join(standaloneDir, packageDir) },
       );
       built = true;
     }
@@ -190,7 +206,7 @@ export const prepareStandaloneSetup = (fixtureName: string) => {
         cmd = `node ${join(standaloneDir, './node_modules/serve/build/main.js')} dist/public -p ${port}`;
         break;
     }
-    const cp = exec(cmd, { cwd: standaloneDir });
+    const cp = exec(cmd, { cwd: join(standaloneDir, packageDir) });
     debugChildProcess(cp, fileURLToPath(import.meta.url), [
       /ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time/,
     ]);

tsconfig.e2e.json

@@ -51,6 +51,9 @@
     {
       "path": "./e2e/fixtures/hot-reload/tsconfig.json"
     },
+    {
+      "path": "./e2e/fixtures/monorepo/packages/waku-project/tsconfig.json"
+    },
     {
       "path": "./e2e/fixtures/create-pages/tsconfig.json"
     }