tests: add routing tests

Author: orinokai

tests/e2e/routing.test.ts

@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test'
+import { test } from '../utils/playwright-helpers.js'
+
+const ssrRoutes = [
+  ['/static', 'pages router, static rendering, static routing'],
+  ['/prerendered', 'pages router, prerendering, static routing'],
+  ['/posts/prerendered/1', 'pages router, prerendering, dynamic routing'],
+  ['/dynamic', 'pages router, dynamic rendering, static routing'],
+  ['/posts/dynamic/1', 'pages router, dynamic rendering, dynamic routing'],
+  ['/api/okay', 'pages router, api route, static routing'],
+  ['/api/posts/1', 'pages router, api route, dynamic routing'],
+  ['/static-fetch-1', 'app router, prerendering, static routing'],
+  ['/static-fetch/1', 'app router, prerendering, dynamic routing'],
+  ['/static-fetch-dynamic-1', 'app router, dynamic rendering, static routing'],
+  ['/static-fetch-dynamic/1', 'app router, dynamic rendering, dynamic routing'],
+  ['/api/revalidate-handler', 'app router, route handler, static routing'],
+  ['/api/static/1', 'app router, route handler, dynamic routing'],
+]
+
+const notFoundRoutes = [
+  ['/non-existing', 'default'],
+  ['/prerendered/3', 'prerendering, dynamic routing'],
+  ['/dynamic/3', 'dynamic rendering, dynamic routing'],
+  ['/api/non-existing', 'route handler, static routing'],
+]
+
+test(`routing works correctly`, async ({ page, serverComponents }) => {
+  for (const [path, description] of ssrRoutes) {
+    const url = new URL(path, serverComponents.url).href
+    const response = await page.goto(url)
+    expect(response?.status(), `expected 200 response for ${description}`).toBe(200)
+  }
+  for (const [path, description] of notFoundRoutes) {
+    const url = new URL(path, serverComponents.url).href
+    const response = await page.goto(url)
+    expect(response?.status(), `expected 404 response for ${description}`).toBe(404)
+  }
+})

tests/fixtures/server-components/app/static-fetch-dynamic/page.js renamed to tests/fixtures/server-components/app/static-fetch-dynamic-1/page.js

@@ -0,0 +1,33 @@
+export async function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }]
+}
+
+async function getData(params) {
+  const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`, {
+    next: {
+      tags: [`show-${params.id}`],
+    },
+  })
+  return res.json()
+}
+
+export default async function Page({ params }) {
+  const data = await getData(params)
+
+  return (
+    <>
+      <h1>Hello, Force Dynamically Rendered Server Component</h1>
+      <p>Paths /1 and /2 prerendered; other paths not found</p>
+      <dl>
+        <dt>Show</dt>
+        <dd>{data.name}</dd>
+        <dt>Param</dt>
+        <dd>{params.id}</dd>
+        <dt>Time</dt>
+        <dd data-testid="date-now">{new Date().toISOString()}</dd>
+      </dl>
+    </>
+  )
+}
+
+export const dynamic = 'force-dynamic'

tests/fixtures/server-components/app/static-fetch-dynamic/[id]/page.js

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

tests/fixtures/server-components/next-env.d.ts

@@ -0,0 +1,3 @@
+export default async function handler(req, res) {
+  return res.send({ code: 200, message: 'okay' })
+}

tests/fixtures/server-components/pages/api/okay.js

@@ -0,0 +1,4 @@
+export default function handler(req, res) {
+  const { id } = req.query
+  res.send({ code: 200, message: `okay ${id}` })
+}

tests/fixtures/server-components/pages/api/posts/[id].js

@@ -0,0 +1,11 @@
+export default function Yar({ title }) {
+  return <h1>{title}</h1>
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      title: 'My Page',
+    },
+  }
+}

tests/fixtures/server-components/pages/dynamic.js

@@ -0,0 +1,25 @@
+export default function Page({ params }) {
+  return (
+    <>
+      <h1>Hello, Dyanmically fetched show</h1>
+      <dl>
+        <dt>Param</dt>
+        <dd>{params.id}</dd>
+        <dt>Time</dt>
+        <dd data-testid="date-now">{new Date().toISOString()}</dd>
+      </dl>
+    </>
+  )
+}
+
+export async function getServerSideProps({ params }) {
+  const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
+  const data = await res.json()
+
+  return {
+    props: {
+      params,
+      data,
+    },
+  }
+}

tests/fixtures/server-components/pages/posts/dynamic/[id].js

@@ -0,0 +1,33 @@
+export default function Page({ params }) {
+  return (
+    <>
+      <h1>Hello, Statically fetched show</h1>
+      <p>Paths /1 and /2 prerendered; other paths not found</p>
+      <dl>
+        <dt>Param</dt>
+        <dd>{params.id}</dd>
+        <dt>Time</dt>
+        <dd data-testid="date-now">{new Date().toISOString()}</dd>
+      </dl>
+    </>
+  )
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
+  const data = await res.json()
+
+  return {
+    props: {
+      params,
+      data,
+    },
+  }
+}

tests/fixtures/server-components/pages/posts/prerendered/[id].js

@@ -0,0 +1,11 @@
+export default function Yar({ title }) {
+  return <h1>{title}</h1>
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      title: 'My Page',
+    },
+  }
+}