test: add integration test cases for use-cache

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/default/use-cache-component/dynamic/ttl-1year/[slug]/page.tsx

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

tests/fixtures/use-cache/app/default/use-cache-component/dynamic/ttl-5seconds/[slug]/page.tsx

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

tests/fixtures/use-cache/app/default/use-cache-component/static/ttl-10seconds/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'
+import {
+  BasePageComponentProps,
+  generateStaticParamsImplementation,
+  getDataImplementation,
+  PageComponentImplementation,
+  ResultComponentImplementation,
+  ResultWrapperComponentProps,
+} from '../../../../../helpers'
+
+async function getData(route: string) {
+  return await getDataImplementation(route)
+}
+
+async function ResultWrapperComponent(props: ResultWrapperComponentProps) {
+  'use cache'
+  cacheTag(`component/${props.route}`)
+  cacheLife('10seconds') // longer TTL than page revalidate to test interaction
+  return <ResultComponentImplementation {...props} />
+}
+
+export default async function PageComponent({ params }: BasePageComponentProps) {
+  return (
+    <PageComponentImplementation
+      routeRoot="default/use-cache-component/static/ttl-10seconds"
+      params={params}
+      getData={getData}
+      ResultWrapperComponent={ResultWrapperComponent}
+    />
+  )
+}
+
+export function generateStaticParams() {
+  return generateStaticParamsImplementation()
+}
+
+export const revalidate = 5
+export const dynamic = 'force-static'

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

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

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

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

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

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

tests/fixtures/use-cache/app/default/use-cache-data/static/ttl-10seconds/[slug]/page.tsx

@@ -0,0 +1,39 @@
+import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'
+import {
+  BasePageComponentProps,
+  generateStaticParamsImplementation,
+  getDataImplementation,
+  PageComponentImplementation,
+  ResultComponentImplementation,
+  ResultWrapperComponentProps,
+} from '../../../../../helpers'
+
+async function getData(route: string) {
+  'use cache'
+  cacheTag(`data/${route}`)
+  cacheLife('10seconds') // longer TTL than page revalidate to test interaction
+
+  return await getDataImplementation(route)
+}
+
+async function ResultWrapperComponent(props: ResultWrapperComponentProps) {
+  return <ResultComponentImplementation {...props} />
+}
+
+export default async function PageComponent({ params }: BasePageComponentProps) {
+  return (
+    <PageComponentImplementation
+      routeRoot="default/use-cache-data/static/ttl-10seconds"
+      params={params}
+      getData={getData}
+      ResultWrapperComponent={ResultWrapperComponent}
+    />
+  )
+}
+
+export function generateStaticParams() {
+  return generateStaticParamsImplementation()
+}
+
+export const revalidate = 5
+export const dynamic = 'force-static'

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

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

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

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

tests/fixtures/use-cache/app/default/use-cache-page/dynamic/ttl-5seconds/[slug]/page.tsx

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