Add a test to show that 'use cache' works in generateMetadata (#80172)

When calling a function with a `'use cache'` directive from
`generateMetadata`, and from the page/layout, the invocations are
deduped and the result is shared.

When `generateMetadata` itself also has a `'use cache'` directive, and
it calls a nested function with a `'use cache'` directive, we do need to
land #78703 for proper deduplication of the nested cache.

Author: unstubbable

test/e2e/app-dir/use-cache/app/generate-metadata/cached-data.ts

@@ -0,0 +1,7 @@
+import { setTimeout } from 'timers/promises'
+
+export async function getCachedData() {
+  'use cache'
+  await setTimeout(1000)
+  return new Date().toISOString()
+}

test/e2e/app-dir/use-cache/app/generate-metadata/layout.tsx

@@ -0,0 +1,15 @@
+import { getCachedData } from './cached-data'
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <h1>Layout</h1>
+      <p id="layout-data">{await getCachedData()}</p>
+      <div>{children}</div>
+    </>
+  )
+}

test/e2e/app-dir/use-cache/app/generate-metadata/page.tsx

@@ -0,0 +1,24 @@
+import { Metadata } from 'next'
+import { connection } from 'next/server'
+import { getCachedData } from './cached-data'
+
+export async function generateMetadata(): Promise<Metadata> {
+  // TODO: Deduping with nested caches requires #78703.
+  // 'use cache'
+
+  return {
+    description: new Date().toISOString(),
+    title: await getCachedData(),
+  }
+}
+
+export default async function Page() {
+  await connection()
+
+  return (
+    <>
+      <h2>Page</h2>
+      <p id="page-data">{await getCachedData()}</p>
+    </>
+  )
+}

test/e2e/app-dir/use-cache/use-cache.test.ts

@@ -980,6 +980,34 @@ describe('use-cache', () => {
       expect(randomOne).toBe(randomTwo)
     })
   })
+
+  it('shares caches between the page/layout and generateMetadata', async () => {
+    const browser = await next.browser('/generate-metadata')
+    const layoutData = await browser.elementByCss('#layout-data').text()
+    const pageData = await browser.elementByCss('#page-data').text()
+    const title = await browser.eval('document.title')
+
+    expect(layoutData).toBe(pageData)
+    expect(pageData).toBe(title)
+
+    const initialDescription = await browser
+      .elementByCss('meta[name="description"]')
+      .getAttribute('content')
+
+    expect(initialDescription).not.toBe(title)
+
+    await browser.refresh()
+
+    const description = await browser
+      .elementByCss('meta[name="description"]')
+      .getAttribute('content')
+
+    // TODO: After #78703 has landed, we can enable the outer 'use cache' in
+    // generateMetadata, and still have the cached title (a nested cache) be
+    // shared with the page/layout. Then the description will also be cached (by
+    // the outer 'use cache'), and this expectation needs to be flipped.
+    expect(description).not.toBe(initialDescription)
+  })
 })
 
 async function getSanitizedLogs(browser: Playwright): Promise<string[]> {