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