-
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
- Loading branch information
1 parent
5ff4817
commit ce89adf
Showing
4 changed files
with
79 additions
and
0 deletions.
There are no files selected for viewing
48 changes: 48 additions & 0 deletions
48
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,48 @@ | ||
/* eslint-disable jest/no-standalone-expect */ | ||
import { createNextDescribe } from 'e2e-utils' | ||
import { check } from 'next-test-utils' | ||
|
||
const GENERIC_RSC_ERROR = | ||
'Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.' | ||
|
||
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