Test Progressive Enhancement of Server Actions (#52062)

Adds a regression test for testing progressive enhancement of Server
Actions. Both when passed from a Server Component and when imported into
a Client Component.

#51723 landed a bit too early which broke this but it'll be fixed again
once React is upgraded.

Co-authored-by: Shu Ding <g@shud.in>

Author: sebmarkbage

test/e2e/app-dir/actions/app-action-progressive-enhancement.test.ts

@@ -0,0 +1,45 @@
+/* eslint-disable jest/no-standalone-expect */
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'app-dir action progressive enhancement',
+  {
+    files: __dirname,
+    dependencies: {
+      react: 'latest',
+      nanoid: 'latest',
+      'react-dom': 'latest',
+      'server-only': 'latest',
+    },
+  },
+  ({ next, isNextDev, isNextStart, isNextDeploy }) => {
+    it('should support formData and redirect without JS', async () => {
+      const browser = await next.browser('/server', {
+        disableJavaScript: true,
+      })
+
+      await browser.eval(`document.getElementById('name').value = 'test'`)
+      await browser.elementByCss('#submit').click()
+
+      await check(() => {
+        return browser.eval('window.location.pathname + window.location.search')
+      }, '/header?name=test&constructor=FormData&hidden-info=hi')
+    })
+
+    it('should support actions from client without JS', async () => {
+      const browser = await next.browser('/server', {
+        disableJavaScript: true,
+      })
+
+      await browser.eval(
+        `document.getElementById('client-name').value = 'test'`
+      )
+      await browser.elementByCss('#there').click()
+
+      await check(() => {
+        return browser.eval('window.location.pathname + window.location.search')
+      }, '/header?name=test&constructor=FormData&hidden-info=hi')
+    })
+  }
+)

test/e2e/app-dir/actions/app/server/actions.js

@@ -1,9 +1,23 @@
 'use server'
 
+import { redirect } from 'next/navigation'
+
 export async function inc(value) {
   return value + 1
 }
 
 export default async function dec(value) {
   return value - 1
 }
+
+export async function redirectAction(formData) {
+  'use server'
+  redirect(
+    '/header?name=' +
+      formData.get('name') +
+      '&constructor=' +
+      formData.constructor.name +
+      '&hidden-info=' +
+      formData.get('hidden-info')
+  )
+}

test/e2e/app-dir/actions/app/server/client-form.js

@@ -0,0 +1,15 @@
+'use client'
+
+import { redirectAction } from './actions'
+
+export default function Form() {
+  return (
+    <form>
+      <input type="text" name="hidden-info" value="hi" hidden />
+      <input type="text" name="name" id="client-name" required />
+      <button formAction={redirectAction} type="submit" id="there">
+        Go there
+      </button>
+    </form>
+  )
+}

test/e2e/app-dir/actions/app/server/page.js

@@ -1,5 +1,6 @@
 import Counter from './counter'
 import Form from './form'
+import ClientForm from './client-form'
 
 import dec, { inc } from './actions'
 import { log } from './actions-2'
@@ -17,6 +18,7 @@ export default function Page() {
         }}
       />
       <Form />
+      <ClientForm />
       <form>
         <button id="log" formAction={log}>
           log