test: e2e for next-partial-prerendering example (#758)

Author: james-elicx

examples/common/apps.ts

@@ -8,6 +8,7 @@ const apps = [
 	"vercel-blog-starter",
 	"ssg-app",
 	"prisma",
+	"next-partial-prerendering",
 	// e2e
 	"app-pages-router",
 	"app-router",

examples/next-partial-prerendering/.gitignore

@@ -8,6 +8,8 @@
 
 # testing
 /coverage
+playwright-report
+test-results
 
 # next.js
 /.next/

examples/next-partial-prerendering/components/reviews.tsx

@@ -40,7 +40,7 @@ function Skeleton() {
 
 export function ReviewsSkeleton() {
 	return (
-		<div className="space-y-6">
+		<div className="space-y-6" data-testid="reviews-loader">
 			<div className={`h-7 w-2/5 rounded-lg bg-gray-900 ${shimmer}`} />
 			<div className="space-y-8">
 				<Skeleton />

examples/next-partial-prerendering/e2e/playwright.config.ts

@@ -0,0 +1,3 @@
+import { configurePlaywright } from '../../common/config-e2e';
+
+export default configurePlaywright('next-partial-prerendering');

examples/next-partial-prerendering/e2e/ppr.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('PPR', () => {
+	test('PPR should show loading first', async ({ page }) => {
+		await page.goto('/', { waitUntil: 'commit' });
+		await expect(
+			page.getByRole('heading', { name: 'Partial Prerendering' }),
+		).toBeVisible();
+
+		const loader = page.getByTestId('reviews-loader');
+		await expect(loader).toBeVisible();
+		await expect(page.getByText('Customer Reviews')).toHaveCount(0);
+
+		await page.waitForTimeout(6000);
+		await expect(page.getByText('Customer Reviews')).toBeVisible();
+		await expect(loader).not.toBeVisible();
+	});
+
+	test('PPR rsc prefetch request should be cached', async ({ request }) => {
+		const resp = await request.get('/', {
+			headers: { rsc: '1', 'next-router-prefetch': '1' },
+		});
+		expect(resp.status()).toEqual(200);
+
+		const headers = resp.headers();
+		expect(headers['x-nextjs-postponed']).toEqual('1');
+		expect(headers['x-nextjs-cache']).toEqual('HIT');
+		expect(headers['cache-control']).toEqual(
+			's-maxage=31536000, stale-while-revalidate=2592000',
+		);
+	});
+});

examples/next-partial-prerendering/open-next.config.ts

@@ -1,3 +1,6 @@
 import { defineCloudflareConfig } from '@opennextjs/cloudflare/config';
+import staticAssetsIncrementalCache from '@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache';
 
-export default defineCloudflareConfig();
+export default defineCloudflareConfig({
+	incrementalCache: staticAssetsIncrementalCache,
+});

examples/next-partial-prerendering/package.json

@@ -7,7 +7,8 @@
 		"start": "next start",
 		"build:worker": "pnpm opennextjs-cloudflare build",
 		"preview:worker": "pnpm opennextjs-cloudflare preview",
-		"preview": "pnpm build:worker && pnpm preview:worker"
+		"preview": "pnpm build:worker && pnpm preview:worker",
+		"e2e": "playwright test -c e2e/playwright.config.ts"
 	},
 	"dependencies": {
 		"@heroicons/react": "2.1.5",