test: Add native HTML form test (#829)

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

@@ -0,0 +1,25 @@
+import { testForm } from 'e2e-shared/specs/form.cy'
+
+testForm({
+  path: '/app/form/useQueryState',
+  hook: 'useQueryState',
+  nextJsRouter: 'app'
+})
+
+testForm({
+  path: '/app/form/useQueryStates',
+  hook: 'useQueryStates',
+  nextJsRouter: 'app'
+})
+
+testForm({
+  path: '/pages/form/useQueryState',
+  hook: 'useQueryState',
+  nextJsRouter: 'pages'
+})
+
+testForm({
+  path: '/pages/form/useQueryStates',
+  hook: 'useQueryStates',
+  nextJsRouter: 'pages'
+})

packages/e2e/next/src/app/app/(shared)/form/useQueryState/page.tsx

@@ -0,0 +1,10 @@
+import { TestFormUseQueryState } from 'e2e-shared/specs/form'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <TestFormUseQueryState />
+    </Suspense>
+  )
+}

packages/e2e/next/src/app/app/(shared)/form/useQueryStates/page.tsx

@@ -0,0 +1,10 @@
+import { TestFormUseQueryStates } from 'e2e-shared/specs/form'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <TestFormUseQueryStates />
+    </Suspense>
+  )
+}

packages/e2e/next/src/pages/pages/form/useQueryState.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryState } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryState

packages/e2e/next/src/pages/pages/form/useQueryStates.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryStates } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryStates

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

@@ -0,0 +1,11 @@
+import { testForm } from 'e2e-shared/specs/form.cy'
+
+testForm({
+  path: '/form/useQueryState',
+  hook: 'useQueryState'
+})
+
+testForm({
+  path: '/form/useQueryStates',
+  hook: 'useQueryStates'
+})

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

@@ -38,6 +38,8 @@ const router = createBrowserRouter(
       <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 path="form/useQueryState"           lazy={load(import('./routes/form.useQueryState'))} />
+      <Route path="form/useQueryStates"          lazy={load(import('./routes/form.useQueryStates'))} />
     </Route>
   ))
 

packages/e2e/react-router/v6/src/routes/form.useQueryState.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryState } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryState

packages/e2e/react-router/v6/src/routes/form.useQueryStates.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryStates } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryStates

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

@@ -18,6 +18,8 @@ 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')
+    route('/loader',                        './routes/loader.tsx'),
+    route('/form/useQueryState',            './routes/form.useQueryState.tsx'),
+    route('/form/useQueryStates',           './routes/form.useQueryStates.tsx'),
   ])
 ] satisfies RouteConfig

packages/e2e/react-router/v7/app/routes/form.useQueryState.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryState } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryState

packages/e2e/react-router/v7/app/routes/form.useQueryStates.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryStates } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryStates

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

@@ -0,0 +1,11 @@
+import { testForm } from 'e2e-shared/specs/form.cy'
+
+testForm({
+  path: '/form/useQueryState',
+  hook: 'useQueryState'
+})
+
+testForm({
+  path: '/form/useQueryStates',
+  hook: 'useQueryStates'
+})

packages/e2e/react/cypress/e2e/shared/form.cy.ts

@@ -0,0 +1,11 @@
+import { testForm } from 'e2e-shared/specs/form.cy'
+
+testForm({
+  path: '/form/useQueryState',
+  hook: 'useQueryState'
+})
+
+testForm({
+  path: '/form/useQueryStates',
+  hook: 'useQueryStates'
+})

packages/e2e/react/src/routes.tsx

@@ -17,6 +17,8 @@ const routes: Record<string, React.LazyExoticComponent<() => JSX.Element>> = {
   '/routing/useQueryStates/other':  lazy(() => import('./routes/routing.useQueryStates.other')),
   '/shallow/useQueryState':         lazy(() => import('./routes/shallow.useQueryState')),
   '/shallow/useQueryStates':        lazy(() => import('./routes/shallow.useQueryStates')),
+  '/form/useQueryState':            lazy(() => import('./routes/form.useQueryState')),
+  '/form/useQueryStates':           lazy(() => import('./routes/form.useQueryStates')),
 }
 
 export function Router() {

packages/e2e/react/src/routes/form.useQueryState.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryState } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryState

packages/e2e/react/src/routes/form.useQueryStates.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryStates } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryStates

packages/e2e/remix/app/routes/form.useQueryState.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryState } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryState

packages/e2e/remix/app/routes/form.useQueryStates.tsx

@@ -0,0 +1,3 @@
+import { TestFormUseQueryStates } from 'e2e-shared/specs/form'
+
+export default TestFormUseQueryStates

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

@@ -0,0 +1,11 @@
+import { testForm } from 'e2e-shared/specs/form.cy'
+
+testForm({
+  path: '/form/useQueryState',
+  hook: 'useQueryState'
+})
+
+testForm({
+  path: '/form/useQueryStates',
+  hook: 'useQueryStates'
+})

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

@@ -0,0 +1,25 @@
+import { createTest } from '../create-test'
+
+export const testForm = createTest('Form', ({ path }) => {
+  it('supports native HTML forms to update search params', () => {
+    cy.visit(path)
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+    cy.get('input').type('pass')
+    cy.get('form').submit()
+    cy.get('#state').should('have.text', 'pass')
+    cy.go('back')
+    cy.get('#state').should('have.text', '')
+  })
+
+  it('supports loading initial form state from the URL', () => {
+    cy.visit(path + '?test=init')
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+    cy.get('input').should('have.value', 'init')
+    cy.get('#state').should('have.text', 'init')
+    cy.get('input').clear().type('pass')
+    cy.get('form').submit()
+    cy.get('#state').should('have.text', 'pass')
+    cy.go('back')
+    cy.get('#state').should('have.text', 'init')
+  })
+})

packages/e2e/shared/specs/form.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { parseAsString, useQueryState, useQueryStates } from 'nuqs'
+
+type FormProps = {
+  defaultValue: string
+}
+
+const testParser = parseAsString.withDefault('')
+
+function Form({ defaultValue }: FormProps) {
+  return (
+    <form>
+      <input type="text" id="test" name="test" defaultValue={defaultValue} />
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+
+export function TestFormUseQueryState() {
+  const [state] = useQueryState('test', testParser)
+  return (
+    <>
+      <pre id="state">{state}</pre>
+      <Form defaultValue={state} />
+    </>
+  )
+}
+
+export function TestFormUseQueryStates() {
+  const [{ state }] = useQueryStates(
+    {
+      state: testParser
+    },
+    {
+      urlKeys: {
+        state: 'test'
+      }
+    }
+  )
+  return (
+    <>
+      <pre id="state">{state}</pre>
+      <Form defaultValue={state} />
+    </>
+  )
+}