test: sync e2e with latest aws (#540)

Author: vicb

.changeset/rich-bears-kick.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+test: sync e2e with aws

examples/e2e/app-router/app/isr/dynamic-params-false/[id]/page.tsx

@@ -0,0 +1,34 @@
+// https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = false; // or true, to make it try SSR unknown paths
+
+const POSTS = Array.from({ length: 20 }, (_, i) => ({
+  id: String(i + 1),
+  title: `Post ${i + 1}`,
+  content: `This is post ${i + 1}`,
+}));
+
+async function fakeGetPostsFetch() {
+  return POSTS.slice(0, 10);
+}
+
+async function fakeGetPostFetch(id: string) {
+  return POSTS.find((post) => post.id === id);
+}
+
+export async function generateStaticParams() {
+  const fakePosts = await fakeGetPostsFetch();
+  return fakePosts.map((post) => ({
+    id: post.id,
+  }));
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const post = await fakeGetPostFetch(id);
+  return (
+    <main>
+      <h1 data-testid="title">{post?.title}</h1>
+      <p data-testid="content">{post?.content}</p>
+    </main>
+  );
+}

examples/e2e/app-router/app/isr/dynamic-params-true/[id]/page.tsx

@@ -0,0 +1,45 @@
+import { notFound } from "next/navigation";
+
+// We'll prerender only the params from `generateStaticParams` at build time.
+// If a request comes in for a path that hasn't been generated,
+// Next.js will server-render the page on-demand.
+// https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = true; // or false, to 404 on unknown paths
+
+const POSTS = Array.from({ length: 20 }, (_, i) => ({
+  id: String(i + 1),
+  title: `Post ${i + 1}`,
+  content: `This is post ${i + 1}`,
+}));
+
+async function fakeGetPostsFetch() {
+  return POSTS.slice(0, 10);
+}
+
+async function fakeGetPostFetch(id: string) {
+  return POSTS.find((post) => post.id === id);
+}
+
+export async function generateStaticParams() {
+  const fakePosts = await fakeGetPostsFetch();
+  return fakePosts.map((post) => ({
+    id: post.id,
+  }));
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const post = await fakeGetPostFetch(id);
+  if (Number(id) === 1337) {
+    throw new Error("This is an error!");
+  }
+  if (!post) {
+    notFound();
+  }
+  return (
+    <main>
+      <h1 data-testid="title">{post.title}</h1>
+      <p data-testid="content">{post.content}</p>
+    </main>
+  );
+}

examples/e2e/app-router/e2e/isr.test.ts

@@ -98,3 +98,59 @@ test("Incremental Static Regeneration with data cache", async ({ page }) => {
   expect(originalCachedDate).toEqual(finalCachedDate);
   expect(originalFetchedDate).toEqual(finalFetchedDate);
 });
+
+test.describe("dynamicParams set to true", () => {
+  test("should be HIT on a path that was prebuilt", async ({ page }) => {
+    const res = await page.goto("/isr/dynamic-params-true/1");
+    expect(res?.status()).toEqual(200);
+    expect(res?.headers()["x-nextjs-cache"]).toEqual("HIT");
+    const title = await page.getByTestId("title").textContent();
+    const content = await page.getByTestId("content").textContent();
+    expect(title).toEqual("Post 1");
+    expect(content).toEqual("This is post 1");
+  });
+
+  // In `next start` this test would fail on subsequent requests because `x-nextjs-cache` would be `HIT`
+  // However, once deployed to AWS, Cloudfront will cache `MISS`
+  // We are gonna skip this one for now, turborepo caching can cause this page to be STALE once deployed
+  test.skip("should SSR on a path that was not prebuilt", async ({ page }) => {
+    const res = await page.goto("/isr/dynamic-params-true/11");
+    expect(res?.headers()["x-nextjs-cache"]).toEqual("MISS");
+    const title = await page.getByTestId("title").textContent();
+    const content = await page.getByTestId("content").textContent();
+    expect(title).toEqual("Post 11");
+    expect(content).toEqual("This is post 11");
+  });
+
+  test("should 404 when you call notFound", async ({ page }) => {
+    const res = await page.goto("/isr/dynamic-params-true/21");
+    expect(res?.status()).toEqual(404);
+    expect(res?.headers()["cache-control"]).toBe("private, no-cache, no-store, max-age=0, must-revalidate");
+    await expect(page.getByText("404")).toBeAttached();
+  });
+
+  test("should 500 for a path that throws an error", async ({ page }) => {
+    const res = await page.goto("/isr/dynamic-params-true/1337");
+    expect(res?.status()).toEqual(500);
+    expect(res?.headers()["cache-control"]).toBe("private, no-cache, no-store, max-age=0, must-revalidate");
+  });
+});
+
+test.describe("dynamicParams set to false", () => {
+  test("should be HIT on a path that was prebuilt", async ({ page }) => {
+    const res = await page.goto("/isr/dynamic-params-false/1");
+    expect(res?.status()).toEqual(200);
+    expect(res?.headers()["x-nextjs-cache"]).toEqual("HIT");
+    const title = await page.getByTestId("title").textContent();
+    const content = await page.getByTestId("content").textContent();
+    expect(title).toEqual("Post 1");
+    expect(content).toEqual("This is post 1");
+  });
+
+  test("should 404 for a path that is not found", async ({ page }) => {
+    const res = await page.goto("/isr/dynamic-params-false/11");
+    expect(res?.status()).toEqual(404);
+    expect(res?.headers()["cache-control"]).toBe("private, no-cache, no-store, max-age=0, must-revalidate");
+    await expect(page.getByText("404")).toBeAttached();
+  });
+});

examples/e2e/app-router/e2e/middleware.redirect.test.ts

@@ -1,4 +1,11 @@
 import { expect, test } from "@playwright/test";
+import { validateMd5 } from "../../utils";
+
+/*
+ * `curl -s https://opennext.js.org/share.png | md5sum`
+ * This is the MD5 hash of the image. It is used to validate the image content.
+ */
+const OPENNEXT_PNG_MD5 = "405f45cc3397b09717a13ebd6f1e027b";
 
 test("Middleware Redirect", async ({ page, context }) => {
   await page.goto("/");
@@ -18,3 +25,14 @@ test("Middleware Redirect", async ({ page, context }) => {
   el = page.getByText("Redirect Destination", { exact: true });
   await expect(el).toBeVisible();
 });
+
+test("Middleware Rewrite External Image", async ({ page }) => {
+  await page.goto("/rewrite-external");
+  page.on("response", async (response) => {
+    expect(response.status()).toBe(200);
+    expect(response.headers()["content-type"]).toBe("image/png");
+    expect(response.headers()["cache-control"]).toBe("max-age=600");
+    const bodyBuffer = await response.body();
+    expect(validateMd5(bodyBuffer, OPENNEXT_PNG_MD5)).toBe(true);
+  });
+});

examples/e2e/app-router/middleware.ts

@@ -24,7 +24,11 @@ export function middleware(request: NextRequest) {
       },
     });
   }
-  const requestHeaders = new Headers();
+  if (path === "/rewrite-external") {
+    const u = new URL("https://opennext.js.org/share.png");
+    return NextResponse.rewrite(u);
+  }
+  const requestHeaders = new Headers(request.headers);
   // Setting the Request Headers, this should be available in RSC
   requestHeaders.set("request-header", "request-header");
   requestHeaders.set("search-params", `mw/${request.nextUrl.searchParams.get("searchParams") || ""}`);

examples/e2e/pages-router/e2e/streaming.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "@playwright/test";
+
+const SADE_SMOOTH_OPERATOR_LYRIC = `Diamond life, lover boy
+He move in space with minimum waste and maximum joy
+City lights and business nights
+When you require streetcar desire for higher heights
+No place for beginners or sensitive hearts
+When sentiment is left to chance
+No place to be ending but somewhere to start
+No need to ask, he's a smooth operator
+Smooth operator, smooth operator
+Smooth operator`;
+
+test("streaming should work in api route", async ({ page }) => {
+  await page.goto("/sse");
+
+  // wait for first line to be present
+  await page.getByTestId("line").first().waitFor();
+  const initialLines = await page.getByTestId("line").count();
+  // fail if all lines appear at once
+  // this is a safeguard to ensure that the response is streamed and not buffered all at once
+  expect(initialLines).toBe(1);
+
+  const seenLines: Array<{ line: string; time: number }> = [];
+  const startTime = Date.now();
+
+  // we loop until we see all lines
+  while (seenLines.length < SADE_SMOOTH_OPERATOR_LYRIC.split("\n").length) {
+    const lines = await page.getByTestId("line").all();
+    if (lines.length > seenLines.length) {
+      expect(lines.length).toBe(seenLines.length + 1);
+      const newLine = lines[lines.length - 1];
+      seenLines.push({
+        line: await newLine.innerText(),
+        time: Date.now() - startTime,
+      });
+    }
+    // wait for a bit before checking again
+    await page.waitForTimeout(200);
+  }
+
+  expect(seenLines.map((n) => n.line)).toEqual(SADE_SMOOTH_OPERATOR_LYRIC.split("\n"));
+  for (let i = 1; i < seenLines.length; i++) {
+    expect(seenLines[i].time - seenLines[i - 1].time).toBeGreaterThan(500);
+  }
+
+  await expect(page.getByTestId("video")).toBeVisible();
+});

examples/e2e/pages-router/src/pages/api/streaming/index.ts

@@ -0,0 +1,42 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const SADE_SMOOTH_OPERATOR_LYRIC = `Diamond life, lover boy
+He move in space with minimum waste and maximum joy
+City lights and business nights
+When you require streetcar desire for higher heights
+No place for beginners or sensitive hearts
+When sentiment is left to chance
+No place to be ending but somewhere to start
+No need to ask, he's a smooth operator
+Smooth operator, smooth operator
+Smooth operator`;
+
+function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  res.setHeader("Content-Type", "text/event-stream");
+  res.setHeader("Connection", "keep-alive");
+  res.setHeader("Cache-Control", "no-cache, no-transform");
+  res.setHeader("Transfer-Encoding", "chunked");
+
+  res.write(`data: ${JSON.stringify({ type: "start", model: "ai-lyric-model" })}\n\n`);
+  await sleep(1000);
+
+  const lines = SADE_SMOOTH_OPERATOR_LYRIC.split("\n");
+  for (const line of lines) {
+    res.write(`data: ${JSON.stringify({ type: "content", body: line })}\n\n`);
+    await sleep(1000);
+  }
+
+  res.write(`data: ${JSON.stringify({ type: "complete" })}\n\n`);
+
+  res.end();
+}

examples/e2e/pages-router/src/pages/sse/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Event = {
+  type: "start" | "content" | "complete";
+  model?: string;
+  body?: string;
+};
+
+export default function SSE() {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [finished, setFinished] = useState(false);
+
+  useEffect(() => {
+    const e = new EventSource("/api/streaming");
+
+    e.onmessage = (msg) => {
+      console.log(msg);
+      try {
+        const data = JSON.parse(msg.data) as Event;
+        if (data.type === "complete") {
+          e.close();
+          setFinished(true);
+        }
+        if (data.type === "content") {
+          setEvents((prev) => prev.concat(data));
+        }
+      } catch (err) {
+        console.error(err, msg);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        padding: "20px",
+        marginBottom: "20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+      }}
+    >
+      <h1
+        style={{
+          fontSize: "2rem",
+          marginBottom: "20px",
+        }}
+      >
+        Sade - Smooth Operator
+      </h1>
+      <div>
+        {events.map((e, i) => (
+          <p data-testid="line" key={i}>
+            {e.body}
+          </p>
+        ))}
+      </div>
+      {finished && (
+        <iframe
+          data-testid="video"
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/4TYv2PhG89A?si=e1fmpiXZZ1PBKPE5"
+          title="YouTube video player"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      )}
+    </div>
+  );
+}