refactor: move changes into new ppr test suite

vercel · Dec 14, 2023 · 353d2e1 · 353d2e1
1 parent 03ecbd4
commit 353d2e1
Show file tree

Hide file tree

Showing 10 changed files with 310 additions and 159 deletions.
diff --git a/test/e2e/app-dir/ppr-full/app/layout.jsx b/test/e2e/app-dir/ppr-full/app/layout.jsx
@@ -1,18 +1,10 @@
-import { Links } from '../components/links'
+import { Layout } from '../components/layout'
 
 export default ({ children }) => {
   return (
     <html>
       <body>
-        <h1>Partial Prerendering</h1>
-        <p>
-          Below are links that are associated with different pages that all will
-          partially prerender
-        </p>
-        <aside>
-          <Links />
-        </aside>
-        <main>{children}</main>
+        <Layout>{children}</Layout>
       </body>
     </html>
   )

diff --git a/test/e2e/app-dir/ppr-full/app/static/page.jsx b/test/e2e/app-dir/ppr-full/app/static/page.jsx
@@ -1,3 +1,8 @@
 export default () => {
-  return 'Static'
+  return (
+    <dl>
+      <dt>Pathname</dt>
+      <dd data-pathname="/static">/static</dd>
+    </dl>
+  )
 }
diff --git a/test/e2e/app-dir/ppr-full/components/dynamic.jsx b/test/e2e/app-dir/ppr-full/components/dynamic.jsx
@@ -1,37 +1,38 @@
-import React from 'react'
-import { headers } from 'next/headers'
+import React, { use } from 'react'
+import * as next from 'next/headers'
 
 export const Dynamic = ({ pathname, fallback }) => {
   if (fallback) {
     return <div>Dynamic Loading...</div>
   }
 
+  const headers = next.headers()
   const messages = []
-  const names = ['x-test-input', 'user-agent']
-  const list = headers()
+  for (const name of ['x-test-input', 'user-agent']) {
+    messages.push({ name, value: headers.get(name) })
+  }
 
-  for (const name of names) {
-    messages.push({ name, value: list.get(name) })
+  const delay = headers.get('x-delay')
+  if (delay) {
+    use(new Promise((resolve) => setTimeout(resolve, parseInt(delay, 10))))
   }
 
   return (
-    <div id="needle">
-      <dl>
-        {pathname && (
-          <>
-            <dt>Pathname</dt>
-            <dd>{pathname}</dd>
-          </>
-        )}
-        {messages.map(({ name, value }) => (
-          <React.Fragment key={name}>
-            <dt>
-              Header: <code>{name}</code>
-            </dt>
-            <dd>{value ?? `MISSING:${name.toUpperCase()}`}</dd>
-          </React.Fragment>
-        ))}
-      </dl>
-    </div>
+    <dl>
+      {pathname && (
+        <>
+          <dt>Pathname</dt>
+          <dd data-pathname={pathname}>{pathname}</dd>
+        </>
+      )}
+      {messages.map(({ name, value }) => (
+        <React.Fragment key={name}>
+          <dt>
+            Header: <code>{name}</code>
+          </dt>
+          <dd>{value ?? `MISSING:${name.toUpperCase()}`}</dd>
+        </React.Fragment>
+      ))}
+    </dl>
   )
 }
diff --git a/test/e2e/app-dir/ppr-full/components/layout.jsx b/test/e2e/app-dir/ppr-full/components/layout.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Links } from './links'
+
+export const Layout = ({ children }) => {
+  return (
+    <>
+      <h1>Partial Prerendering</h1>
+      <p>
+        Below are links that are associated with different pages that all will
+        partially prerender
+      </p>
+      <aside>
+        <Links />
+      </aside>
+      <main>{children}</main>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/ppr-full/components/links.jsx b/test/e2e/app-dir/ppr-full/components/links.jsx
@@ -18,6 +18,18 @@ const links = [
   { href: '/no-suspense/nested/b', tag: 'no suspense, on-demand' },
   { href: '/no-suspense/nested/c', tag: 'no suspense, on-demand' },
   { href: '/dynamic/force-dynamic', tag: "dynamic = 'force-dynamic'" },
+  {
+    href: '/dynamic/force-dynamic/nested/a',
+    tag: "dynamic = 'force-dynamic', on-demand, no-gsp",
+  },
+  {
+    href: '/dynamic/force-dynamic/nested/b',
+    tag: "dynamic = 'force-dynamic', on-demand, no-gsp",
+  },
+  {
+    href: '/dynamic/force-dynamic/nested/c',
+    tag: "dynamic = 'force-dynamic', on-demand, no-gsp",
+  },
   { href: '/dynamic/force-static', tag: "dynamic = 'force-static'" },
   { href: '/edge/suspense', tag: 'edge, pre-generated' },
   { href: '/edge/suspense/a', tag: 'edge, pre-generated' },
@@ -27,6 +39,7 @@ const links = [
   { href: '/edge/no-suspense/a', tag: 'edge, no suspense, pre-generated' },
   { href: '/edge/no-suspense/b', tag: 'edge, no suspense, on-demand' },
   { href: '/edge/no-suspense/c', tag: 'edge, no suspense, on-demand' },
+  { href: '/pages', tag: 'pages' },
 ]
 
 export const Links = () => {

diff --git a/test/e2e/app-dir/ppr-full/pages/pages.jsx b/test/e2e/app-dir/ppr-full/pages/pages.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Layout } from '../components/layout'
+
+export default () => {
+  return (
+    <Layout>
+      <dl>
+        <dt>Pathname</dt>
+        <dd data-pathname="/pages">/pages</dd>
+      </dl>
+    </Layout>
+  )
+}