test: added async metadata test

Author: logaretm

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/metadata-async/page.tsx

@@ -0,0 +1,37 @@
+import * as Sentry from '@sentry/nextjs';
+
+function fetchPost() {
+  return Promise.resolve({ id: '1', title: 'Post 1' });
+}
+
+export async function generateMetadata() {
+  const { id } = await fetchPost();
+  const product = `Product: ${id}`;
+
+  return {
+    title: product,
+  };
+}
+
+export default function Page() {
+  return (
+    <>
+      <h1>This will be pre-rendered</h1>
+      <DynamicContent />
+    </>
+  );
+}
+
+async function DynamicContent() {
+  const getTodos = async () => {
+    return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+      'use cache';
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return [1, 2, 3, 4, 5];
+    });
+  };
+
+  const todos = await getTodos();
+
+  return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts

@@ -39,3 +39,16 @@ test('Should generate metadata', async ({ page }) => {
   await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
   await expect(page).toHaveTitle('Cache Components Metadata Test');
 });
+
+test('Should generate metadata async', async ({ page }) => {
+  const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/metadata-async');
+  const serverTx = await serverTxPromise;
+
+  expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+  await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+  await expect(page).toHaveTitle('Product: 1');
+});