add: e2e for api routes in pages router (#764)

* add e2e for api routes in pages router

* add next issue link

* lint

Author: sommeeeer

Diff for: examples/pages-router/src/pages/api/dynamic/[slug].ts

@@ -0,0 +1,6 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { slug } = req.query;
+  res.status(200).json({ slug });
+}

Diff for: examples/pages-router/src/pages/api/dynamic/catch-all-optional/[[...slug]].ts

@@ -0,0 +1,5 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ optional: "true" });
+}

Diff for: examples/pages-router/src/pages/api/dynamic/catch-all/[...slug].ts

@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { slug } = req.query;
+  if (!Array.isArray(slug)) {
+    return res.status(500).json({ error: "Invalid" });
+  }
+  res.status(200).json({ slug });
+}

Diff for: examples/pages-router/src/pages/api/dynamic/precedence/route.ts

@@ -0,0 +1,5 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ precedence: "true" });
+}

Diff for: examples/pages-router/src/pages/api/hello.ts

@@ -1,4 +1,4 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+// Next.js API route support: https://nextjs.org/docs/pages/building-your-application/routing/api-routes
 import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
@@ -9,5 +9,5 @@ export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>,
 ) {
-  res.status(200).json({ hello: "world" });
+  res.status(200).json({ hello: "OpenNext rocks!" });
 }

Diff for: packages/tests-e2e/tests/pagesRouter/api.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "@playwright/test";
+
+test("should not fail on an api route", async ({ page }) => {
+  const result = await page.goto("/api/hello");
+  expect(result?.status()).toBe(200);
+  const body = await result?.json();
+  expect(body).toEqual({ hello: "OpenNext rocks!" });
+});
+
+test("should work with dynamic api route", async ({ page }) => {
+  const result = await page.goto("/api/dynamic/opennext");
+  expect(result?.status()).toBe(200);
+  const body = await result?.json();
+  expect(body).toEqual({ slug: "opennext" });
+});
+
+test("should work with catch all api route", async ({ page }) => {
+  const result = await page.goto("/api/dynamic/catch-all/first/second/third");
+  expect(result?.status()).toBe(200);
+  const body = await result?.json();
+  expect(body).toEqual({ slug: ["first", "second", "third"] });
+});
+
+test("dynamic route should take precedence over catch all", async ({
+  page,
+}) => {
+  const result = await page.goto("/api/dynamic/catch-all");
+  expect(result?.status()).toBe(200);
+  const body = await result?.json();
+  expect(body).toEqual({ slug: "catch-all" });
+});
+
+test("should work with optional catch all api route", async ({ page }) => {
+  const result = await page.goto("/api/dynamic/catch-all-optional");
+  expect(result?.status()).toBe(200);
+  const body = await result?.json();
+  expect(body).toEqual({ optional: "true" });
+});
+
+// This should work but it doesn't. It seems that the predefined api route is not taking precedence.
+// Its broken in `next start` aswell.
+// Issue currently open in Next: https://github.com/vercel/next.js/issues/76765
+test.skip("predefined api route should take presedence", async ({ page }) => {
+  const result = await page.goto("/api/dynamic/precedence");
+  expect(result?.status()).toBe(200);
+  const body = await result?.json();
+  expect(body).toEqual({ precedence: "true" });
+});