test: first batch of actual integration tests

Author: pieh

tests/fixtures/use-cache/app/api/revalidate/[...slug]/route.ts

@@ -0,0 +1,12 @@
+import { revalidateTag } from 'next/cache'
+import { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest, { params }) {
+  const { slug } = await params
+
+  const tagToInvalidate = slug.join('/')
+
+  revalidateTag(tagToInvalidate)
+
+  return Response.json({ tagToInvalidate })
+}

tests/fixtures/use-cache/app/cache-fetch-no-store/page.tsx

@@ -0,0 +1,34 @@
+import { unstable_cacheTag as cacheTag, unstable_cacheLife as cacheLife } from 'next/cache'
+import {
+  getDataImplementation,
+  Data,
+  ResultComponentProps,
+  PageComponentImplementation,
+  ResultComponentImplementation,
+  BasePageComponentProps,
+} from '../../../../../helpers'
+
+async function getData(route: string) {
+  'use cache'
+  cacheTag(`data/${route}`)
+  cacheLife('1year')
+
+  return await getDataImplementation(route)
+}
+
+async function ResultComponent(props: ResultComponentProps) {
+  return <ResultComponentImplementation {...props} />
+}
+
+export default async function PageComponent({ params }: BasePageComponentProps) {
+  return (
+    <PageComponentImplementation
+      routeRoot="default/dynamic/use-cache-data/ttl-1year"
+      params={params}
+      getData={getData}
+      ResultComponent={ResultComponent}
+    />
+  )
+}
+
+export const dynamic = 'force-dynamic'

tests/fixtures/use-cache/app/cache-fetch/[slug]/page.tsx

@@ -0,0 +1,34 @@
+import { unstable_cacheTag as cacheTag, unstable_cacheLife as cacheLife } from 'next/cache'
+import {
+  getDataImplementation,
+  Data,
+  ResultComponentProps,
+  PageComponentImplementation,
+  ResultComponentImplementation,
+  BasePageComponentProps,
+} from '../../../../../helpers'
+
+async function getData(route: string) {
+  'use cache'
+  cacheTag(`data/${route}`)
+  cacheLife('5seconds')
+
+  return await getDataImplementation(route)
+}
+
+async function ResultComponent(props: ResultComponentProps) {
+  return <ResultComponentImplementation {...props} />
+}
+
+export default async function PageComponent({ params }: BasePageComponentProps) {
+  return (
+    <PageComponentImplementation
+      routeRoot="default/dynamic/use-cache-data/ttl-5seconds"
+      params={params}
+      getData={getData}
+      ResultComponent={ResultComponent}
+    />
+  )
+}
+
+export const dynamic = 'force-dynamic'

tests/fixtures/use-cache/app/cache-fetch/page.tsx

@@ -0,0 +1,62 @@
+export type Data = {
+  data: string
+  time: string
+}
+
+export async function getDataImplementation(route: string): Promise<Data> {
+  console.log(`[${route}]`, 'Fetch Data')
+  const res = await fetch(`https://strangerthings-quotes.vercel.app/api/quotes`)
+  return {
+    data: (await res.json())[0].quote,
+    time: new Date().toISOString(),
+  }
+}
+
+export type ResultComponentProps = Data & { route: string }
+
+export async function ResultComponentImplementation({ route, data, time }: ResultComponentProps) {
+  console.log(`[${route}]`, 'Render ResultComponent')
+
+  return (
+    <>
+      <dt>Quote (getData)</dt>
+      <dd data-testid="getData-data">{data}</dd>
+      <dt>Time (getData)</dt>
+      <dd data-testid="getData-time">{time}</dd>
+      <dt>Time (GetDataResult)</dt>
+      <dd data-testid="ResultComponent-time">{new Date().toISOString()}</dd>
+    </>
+  )
+}
+
+export type BasePageComponentProps = {
+  params: Promise<{ slug: string }>
+}
+
+export async function PageComponentImplementation({
+  getData,
+  ResultComponent,
+  params,
+  routeRoot,
+}: BasePageComponentProps & {
+  routeRoot: string
+  getData: typeof getDataImplementation
+  ResultComponent: typeof ResultComponentImplementation
+}) {
+  const { slug } = await params
+  const route = `${routeRoot}/${slug}`
+  const data = await getData(route)
+
+  console.log(`[${route}]`, 'Render PageComponent')
+
+  return (
+    <>
+      <h1>Hello, use-cache - {route}</h1>
+      <dl>
+        <ResultComponent {...data} route={route} />
+        <dt>Time (PageComponent)</dt>
+        <dd data-testid="PageComponent-time">{new Date().toISOString()}</dd>
+      </dl>
+    </>
+  )
+}

tests/fixtures/use-cache/app/default/dynamic/use-cache-data/ttl-1year/[slug]/page.tsx

@@ -1,3 +1,7 @@
+const INFINITE_CACHE = 0xfffffffe
+
+const ONE_YEAR = 365 * 24 * 60 * 60
+
 /**
  * @type {import('next').NextConfig}
  */
@@ -8,13 +12,18 @@ const nextConfig = {
   },
   experimental: {
     useCache: true,
-    // cacheLife: {
-    //   frequent: {
-    //     stale: 19,
-    //     revalidate: 100,
-    //     expire: 250,
-    //   },
-    // },
+    cacheLife: {
+      '5seconds': {
+        stale: 5,
+        revalidate: 5,
+        expire: INFINITE_CACHE,
+      },
+      '1year': {
+        stale: ONE_YEAR,
+        revalidate: ONE_YEAR,
+        expire: INFINITE_CACHE,
+      },
+    },
   },
 }