test: Add loader e2e test showcasing usage

Author: franky47

packages/e2e/next/cypress/e2e/shared/loader.cy.ts

@@ -0,0 +1,5 @@
+import { testLoader } from 'e2e-shared/specs/loader.cy'
+
+testLoader({ path: '/app/loader', nextJsRouter: 'app' })
+
+testLoader({ path: '/pages/loader', nextJsRouter: 'pages' })

packages/e2e/next/src/app/app/loader/page.tsx

@@ -0,0 +1,11 @@
+import { LoaderRenderer, loadSearchParams } from 'e2e-shared/specs/loader'
+import type { SearchParams } from 'nuqs/server'
+
+type PageProps = {
+  searchParams: Promise<SearchParams>
+}
+
+export default async function Page({ searchParams }: PageProps) {
+  const serverValues = await loadSearchParams(searchParams)
+  return <LoaderRenderer serverValues={serverValues} />
+}

packages/e2e/next/src/pages/pages/loader.tsx

@@ -0,0 +1,22 @@
+import {
+  type SearchParams,
+  LoaderRenderer,
+  loadSearchParams
+} from 'e2e-shared/specs/loader'
+import { GetServerSidePropsContext } from 'next'
+
+type PageProps = {
+  serverValues: SearchParams
+}
+
+export default function Page({ serverValues }: PageProps) {
+  return <LoaderRenderer serverValues={serverValues} />
+}
+
+export async function getServerSideProps({ query }: GetServerSidePropsContext) {
+  return {
+    props: {
+      serverValues: loadSearchParams(query)
+    }
+  }
+}

packages/e2e/react-router/v6/cypress/e2e/shared/loader.cy.ts

@@ -0,0 +1,3 @@
+import { testLoader } from 'e2e-shared/specs/loader.cy'
+
+testLoader({ path: '/loader' })

packages/e2e/react-router/v6/src/react-router.tsx

@@ -37,6 +37,7 @@ const router = createBrowserRouter(
       <Route path="routing/useQueryStates/other" lazy={load(import('./routes/routing.useQueryStates.other'))} />
       <Route path='shallow/useQueryState'        lazy={load(import('./routes/shallow.useQueryState'))} />
       <Route path='shallow/useQueryStates'       lazy={load(import('./routes/shallow.useQueryStates'))} />
+      <Route path='loader'                       lazy={load(import('./routes/loader'))} />
     </Route>
   ))
 

packages/e2e/react-router/v6/src/routes/loader.tsx

@@ -0,0 +1,11 @@
+import { LoaderRenderer, loadSearchParams } from 'e2e-shared/specs/loader'
+import { useLoaderData, type LoaderFunctionArgs } from 'react-router-dom'
+
+export function loader({ request }: LoaderFunctionArgs) {
+  return loadSearchParams(request)
+}
+
+export default function Page() {
+  const serverValues = useLoaderData() as Awaited<ReturnType<typeof loader>>
+  return <LoaderRenderer serverValues={serverValues} />
+}

packages/e2e/react-router/v7/app/routes.ts

@@ -18,5 +18,6 @@ export default [
     route('/routing/useQueryStates/other',  './routes/routing.useQueryStates.other.tsx'),
     route('/shallow/useQueryState',         './routes/shallow.useQueryState.tsx'),
     route('/shallow/useQueryStates',        './routes/shallow.useQueryStates.tsx'),
+    route('/loader',                        './routes/loader.tsx')
   ])
 ] satisfies RouteConfig

packages/e2e/react-router/v7/app/routes/loader.tsx

@@ -0,0 +1,13 @@
+import { LoaderRenderer, loadSearchParams } from 'e2e-shared/specs/loader'
+import type { LoaderFunctionArgs } from 'react-router'
+import type { Route } from './+types/loader'
+
+export function loader({ request }: LoaderFunctionArgs) {
+  return loadSearchParams(request)
+}
+
+export default function Page({
+  loaderData: serverValues
+}: Route.ComponentProps) {
+  return <LoaderRenderer serverValues={serverValues} />
+}

packages/e2e/react-router/v7/cypress/e2e/shared/loader.cy.ts

@@ -0,0 +1,3 @@
+import { testLoader } from 'e2e-shared/specs/loader.cy'
+
+testLoader({ path: '/loader' })

packages/e2e/remix/app/routes/loader.tsx

@@ -0,0 +1,12 @@
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { LoaderRenderer, loadSearchParams } from 'e2e-shared/specs/loader'
+
+export function loader({ request }: LoaderFunctionArgs) {
+  return loadSearchParams(request)
+}
+
+export default function Page() {
+  const serverValues = useLoaderData<typeof loader>()
+  return <LoaderRenderer serverValues={serverValues} />
+}

packages/e2e/remix/cypress/e2e/shared/loader.cy.ts

@@ -0,0 +1,3 @@
+import { testLoader } from 'e2e-shared/specs/loader.cy'
+
+testLoader({ path: '/loader' })

packages/e2e/shared/specs/loader.cy.ts

@@ -0,0 +1,10 @@
+import { createTest } from '../create-test'
+
+export const testLoader = createTest('Loader', ({ path }) => {
+  it('loads state from the URL', () => {
+    cy.visit(path + '?test=pass&int=42')
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+    cy.get('#test').should('have.text', 'pass')
+    cy.get('#int').should('have.text', '42')
+  })
+})

packages/e2e/shared/specs/loader.tsx

@@ -0,0 +1,27 @@
+import {
+  createLoader,
+  type inferParserType,
+  parseAsInteger,
+  parseAsString
+} from 'nuqs/server'
+
+const searchParams = {
+  test: parseAsString,
+  int: parseAsInteger
+}
+
+export type SearchParams = inferParserType<typeof searchParams>
+export const loadSearchParams = createLoader(searchParams)
+
+type LoaderRendererProps = {
+  serverValues: inferParserType<typeof searchParams>
+}
+
+export function LoaderRenderer({ serverValues }: LoaderRendererProps) {
+  return (
+    <>
+      <pre id="test">{serverValues.test}</pre>
+      <pre id="int">{serverValues.int}</pre>
+    </>
+  )
+}