diff --git a/test/e2e/app-dir/actions/app-action-form-state.test.ts b/test/e2e/app-dir/actions/app-action-form-state.test.ts index ddabf7246988a..400a47eef33f1 100644 --- a/test/e2e/app-dir/actions/app-action-form-state.test.ts +++ b/test/e2e/app-dir/actions/app-action-form-state.test.ts @@ -53,5 +53,21 @@ createNextDescribe( return browser.elementByCss('#hydrated').text() }, 'hydrated') }) + + it('should send the action to the provided permalink with form state when JS disabled', async () => { + const browser = await next.browser('/client/form-state/page-2', { + disableJavaScript: true, + }) + + // Simulate a progressively enhanced form request + await browser.eval( + `document.getElementById('name-input').value = 'test-permalink'` + ) + await browser.eval(`document.getElementById('form-state-form').submit()`) + + await check(() => { + return browser.elementByCss('#form-state').text() + }, 'initial-state:test-permalink') + }) } ) diff --git a/test/e2e/app-dir/actions/app/client/form-state/page-2/page.js b/test/e2e/app-dir/actions/app/client/form-state/page-2/page.js new file mode 100644 index 0000000000000..47e341239da71 --- /dev/null +++ b/test/e2e/app-dir/actions/app/client/form-state/page-2/page.js @@ -0,0 +1,31 @@ +'use client' + +import { experimental_useFormState } from 'react-dom' +import { appendName } from '../actions' +import { useEffect, useState } from 'react' + +export default function Page() { + const [state, appendNameFormAction] = experimental_useFormState( + appendName, + 'initial-state', + '/client/form-state' + ) + + const [hydrated, setHydrated] = useState(false) + useEffect(() => { + setHydrated(true) + }, []) + + return ( + <> +
+ {hydrated ?hydrated
: null} + > + ) +} diff --git a/test/e2e/app-dir/actions/app/client/form-state/page.js b/test/e2e/app-dir/actions/app/client/form-state/page.js index 523a092ab6060..32fa63c858d82 100644 --- a/test/e2e/app-dir/actions/app/client/form-state/page.js +++ b/test/e2e/app-dir/actions/app/client/form-state/page.js @@ -7,7 +7,8 @@ import { useEffect, useState } from 'react' export default function Page() { const [state, appendNameFormAction] = experimental_useFormState( appendName, - 'initial-state' + 'initial-state', + '/client/form-state' ) const [hydrated, setHydrated] = useState(false)