ref(e2e): Make Next.js app dir tests more thorough

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/client-component)</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/layout.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/client-component)</h1>
+      {children}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/client-component)</h2>
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/client-component)</h2>;
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { ClientErrorDebugTools } from '../../components/client-error-debug-tools';
+
+export default function Page() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/client-component)</h2>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/client-component/[...parameters])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/layout.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/client-component/[...parameters])</h1>
+      {children}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/client-component/parameter/[...parameters])</h2>
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/client-component/[...parameters])</h2>;
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/page.tsx

@@ -0,0 +1,15 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+export default function Page({ params }: { params: Record<string, string> }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/client-component/[...parameters])</h2>
+      <p>Params: {JSON.stringify(params['parameters'])}</p>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  return [{ parameters: ['foo', 'bar', 'baz'] }];
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/client-component/[parameter])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/layout.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/client-component/[parameter])</h1>
+      {children}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/client-component/[parameter])</h2>
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/client-component/[parameter])</h2>;
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/page.tsx

@@ -0,0 +1,15 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+export default function Page({ params }: { params: Record<string, string> }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/client-component/[parameter])</h2>
+      <p>Parameter: {JSON.stringify(params['parameter'])}</p>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  return [{ parameter: '42' }];
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/)</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/layout.tsx

@@ -0,0 +1,38 @@
+import { TransactionContextProvider } from '../components/transaction-context';
+import Link from 'next/link';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+          <h1>Layout (/)</h1>
+          <ul>
+            <li>
+              <Link href="/">/</Link>
+            </li>
+            <li>
+              <Link href="/client-component">/client-component</Link>
+            </li>
+            <li>
+              <Link href="/client-component/parameter/42">/client-component/parameter/42</Link>
+            </li>
+            <li>
+              <Link href="/client-component/parameter/foo/bar/baz">/client-component/parameter/foo/bar/baz</Link>
+            </li>
+            <li>
+              <Link href="/server-component">/server-component</Link>
+            </li>
+            <li>
+              <Link href="/server-component/parameter/42">/server-component/parameter/42</Link>
+            </li>
+            <li>
+              <Link href="/server-component/parameter/foo/bar/baz">/server-component/parameter/foo/bar/baz</Link>
+            </li>
+          </ul>
+          <TransactionContextProvider>{children}</TransactionContextProvider>
+        </div>
+      </body>
+    </html>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/)</h2>
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/)</h2>;
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/page.tsx

@@ -0,0 +1,10 @@
+import { ClientErrorDebugTools } from '../components/client-error-debug-tools';
+
+export default function Page() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/)</h2>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/server-component)</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/layout.tsx

@@ -0,0 +1,8 @@
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/server-component)</h1>
+      {children}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/loading.tsx

@@ -0,0 +1,7 @@
+export default async function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/server-component)</h2>
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/server-component)</h2>;
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/page.tsx

@@ -0,0 +1,12 @@
+import { ClientErrorDebugTools } from '../../components/client-error-debug-tools';
+
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/server-component)</h2>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/error.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/server-component/[...parameters])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/layout.tsx

@@ -0,0 +1,8 @@
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/server-component/[...parameters])</h1>
+      {children}
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/loading.tsx

@@ -0,0 +1,7 @@
+export default async function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/server-component/[...parameters])</h2>
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/server-component/[...parameters])</h2>;
+    </div>
+  );
+}

packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/page.tsx

@@ -0,0 +1,13 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page({ params }: { params: Record<string, string> }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/server-component/[...parameters])</h2>
+      <p>Params: {JSON.stringify(params['parameters'])}</p>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}