-
Notifications
You must be signed in to change notification settings - Fork 26k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
9141586
commit b095e9e
Showing
4 changed files
with
76 additions
and
0 deletions.
There are no files selected for viewing
45 changes: 45 additions & 0 deletions
45
test/e2e/app-dir/actions/app-action-progressive-enhancement.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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') | ||
}) | ||
} | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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') | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters