setModified: (modified: boolean) => void
diff --git a/packages/ui/src/utilities/buildFormState.ts b/packages/ui/src/utilities/buildFormState.ts
index 8127be5d3..e92d1ca35 100644
--- a/packages/ui/src/utilities/buildFormState.ts
+++ b/packages/ui/src/utilities/buildFormState.ts
@@ -107,6 +107,7 @@ export const buildFormState = async (
globalSlug,
initialBlockData,
initialBlockFormState,
+ mockRSCs,
operation,
renderAllFields,
req,
@@ -205,6 +206,7 @@ export const buildFormState = async (
fields,
fieldSchemaMap: schemaMap,
initialBlockData: blockData,
+ mockRSCs,
operation,
permissions: docPermissions?.fields || {},
preferences: docPreferences || { fields: {} },
diff --git a/test/database/up-down-migration/migrations/20250328_185055.ts b/test/database/up-down-migration/migrations/20250328_185055.ts
index 02bc61092..3e6ffda86 100644
--- a/test/database/up-down-migration/migrations/20250328_185055.ts
+++ b/test/database/up-down-migration/migrations/20250328_185055.ts
@@ -1,4 +1,4 @@
-import type { MigrateDownArgs, MigrateUpArgs} from '@payloadcms/db-sqlite';
+import type { MigrateDownArgs, MigrateUpArgs } from '@payloadcms/db-sqlite'
import { sql } from '@payloadcms/db-sqlite'
diff --git a/test/form-state/collections/Posts/ArrayRowLabel.tsx b/test/form-state/collections/Posts/ArrayRowLabel.tsx
new file mode 100644
index 000000000..f0d95f337
--- /dev/null
+++ b/test/form-state/collections/Posts/ArrayRowLabel.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const ArrayRowLabel = () => {
+ return This is a custom component
+}
diff --git a/test/form-state/collections/Posts/index.ts b/test/form-state/collections/Posts/index.ts
index c82c47b41..577896b05 100644
--- a/test/form-state/collections/Posts/index.ts
+++ b/test/form-state/collections/Posts/index.ts
@@ -69,6 +69,11 @@ export const PostsCollection: CollectionConfig = {
{
name: 'array',
type: 'array',
+ admin: {
+ components: {
+ RowLabel: './collections/Posts/ArrayRowLabel.js#ArrayRowLabel',
+ },
+ },
fields: [
{
name: 'richText',
diff --git a/test/form-state/e2e.spec.ts b/test/form-state/e2e.spec.ts
index 7c3ed9c0f..ac5a23353 100644
--- a/test/form-state/e2e.spec.ts
+++ b/test/form-state/e2e.spec.ts
@@ -20,6 +20,7 @@ import {
import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
import { TEST_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
+import { postsSlug } from './collections/Posts/index.js'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
@@ -36,7 +37,7 @@ test.describe('Form State', () => {
test.beforeAll(async ({ browser }, testInfo) => {
testInfo.setTimeout(TEST_TIMEOUT_LONG)
;({ payload, serverURL } = await initPayloadE2ENoConfig({ dirname }))
- postsUrl = new AdminUrlUtil(serverURL, 'posts')
+ postsUrl = new AdminUrlUtil(serverURL, postsSlug)
context = await browser.newContext()
page = await context.newPage()
@@ -146,6 +147,64 @@ test.describe('Form State', () => {
)
})
+ test('should send `lastRenderedPath` only when necessary', async () => {
+ await page.goto(postsUrl.create)
+ const field = page.locator('#field-title')
+ await field.fill('Test')
+
+ // The `array` itself SHOULD have a `lastRenderedPath` because it was rendered on initial load
+ await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
+ action: await page.locator('#field-array .array-field__add-row').click(),
+ url: postsUrl.create,
+ expect: (body) =>
+ Boolean(
+ body?.[0]?.args?.formState?.['array'] && body[0].args.formState['array'].lastRenderedPath,
+ ),
+ })
+
+ await page.waitForResponse(
+ (response) =>
+ response.url() === postsUrl.create &&
+ response.status() === 200 &&
+ response.headers()['content-type'] === 'text/x-component',
+ )
+
+ // The `array` itself SHOULD still have a `lastRenderedPath`
+ // The rich text field in the first row SHOULD ALSO have a `lastRenderedPath` bc it was rendered in the first request
+ await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
+ action: await page.locator('#field-array .array-field__add-row').click(),
+ url: postsUrl.create,
+ expect: (body) =>
+ Boolean(
+ body?.[0]?.args?.formState?.['array'] &&
+ body[0].args.formState['array'].lastRenderedPath &&
+ body[0].args.formState['array.0.richText']?.lastRenderedPath,
+ ),
+ })
+
+ await page.waitForResponse(
+ (response) =>
+ response.url() === postsUrl.create &&
+ response.status() === 200 &&
+ response.headers()['content-type'] === 'text/x-component',
+ )
+
+ // The `array` itself SHOULD still have a `lastRenderedPath`
+ // The rich text field in the first row SHOULD ALSO have a `lastRenderedPath` bc it was rendered in the first request
+ // The rich text field in the second row SHOULD ALSO have a `lastRenderedPath` bc it was rendered in the second request
+ await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
+ action: await page.locator('#field-array .array-field__add-row').click(),
+ url: postsUrl.create,
+ expect: (body) =>
+ Boolean(
+ body?.[0]?.args?.formState?.['array'] &&
+ body[0].args.formState['array'].lastRenderedPath &&
+ body[0].args.formState['array.0.richText']?.lastRenderedPath &&
+ body[0].args.formState['array.1.richText']?.lastRenderedPath,
+ ),
+ })
+ })
+
test('should queue onChange functions', async () => {
await page.goto(postsUrl.create)
const field = page.locator('#field-title')
@@ -182,7 +241,7 @@ test.describe('Form State', () => {
await cdpSession.detach()
})
- test('should not cause nested custom fields to disappear when queuing form state (1)', async () => {
+ test('should not cause nested custom components to disappear when adding a row then editing a field', async () => {
await page.goto(postsUrl.create)
const field = page.locator('#field-title')
await field.fill('Test')
@@ -193,23 +252,12 @@ test.describe('Form State', () => {
delay: 'Slow 3G',
})
- // Add a row and immediately type into another field
- // Test that the rich text field within the row does not disappear
await assertNetworkRequests(
page,
postsUrl.create,
async () => {
- // Ensure `requiresRender` is `true` is set for the first request
- await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
- action: page.locator('#field-array .array-field__add-row').click(),
- expect: (body) => body[0]?.args?.formState?.array?.requiresRender === true,
- })
-
- // Ensure `requiresRender` is `false` for the second request
- await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
- action: page.locator('#field-title').fill('Title 2'),
- expect: (body) => body[0]?.args?.formState?.array?.requiresRender === false,
- })
+ await page.locator('#field-array .array-field__add-row').click()
+ await page.locator('#field-title').fill('Test 2')
// use `waitForSelector` to ensure the element doesn't appear and then disappear
// eslint-disable-next-line playwright/no-wait-for-selector
@@ -237,7 +285,7 @@ test.describe('Form State', () => {
await cdpSession.detach()
})
- test('should not cause nested custom fields to disappear when queuing form state (2)', async () => {
+ test('should not cause nested custom components to disappear when adding rows back-to-back', async () => {
await page.goto(postsUrl.create)
const field = page.locator('#field-title')
await field.fill('Test')
@@ -254,17 +302,8 @@ test.describe('Form State', () => {
page,
postsUrl.create,
async () => {
- // Ensure `requiresRender` is `true` is set for the first request
- await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
- action: page.locator('#field-array .array-field__add-row').click(),
- expect: (body) => body[0]?.args?.formState?.array?.requiresRender === true,
- })
-
- // Ensure `requiresRender` is `true` is set for the second request
- await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
- action: page.locator('#field-array .array-field__add-row').click(),
- expect: (body) => body[0]?.args?.formState?.array?.requiresRender === true,
- })
+ await page.locator('#field-array .array-field__add-row').click()
+ await page.locator('#field-array .array-field__add-row').click()
// use `waitForSelector` to ensure the element doesn't appear and then disappear
// eslint-disable-next-line playwright/no-wait-for-selector
@@ -292,12 +331,6 @@ test.describe('Form State', () => {
},
)
- // Ensure `requiresRender` is `false` for the third request
- await assertRequestBody<{ args: { formState: FormState } }[]>(page, {
- action: page.locator('#field-title').fill('Title 2'),
- expect: (body) => body[0]?.args?.formState?.array?.requiresRender === false,
- })
-
await cdpSession.send('Network.emulateNetworkConditions', {
offline: false,
latency: 0,
diff --git a/test/form-state/int.spec.ts b/test/form-state/int.spec.ts
index 532cbc809..1deb4ff90 100644
--- a/test/form-state/int.spec.ts
+++ b/test/form-state/int.spec.ts
@@ -21,11 +21,8 @@ const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
describe('Form State', () => {
- // --__--__--__--__--__--__--__--__--__
- // Boilerplate test setup/teardown
- // --__--__--__--__--__--__--__--__--__
beforeAll(async () => {
- ;({ payload, restClient } = await initPayloadInt(dirname))
+ ;({ payload, restClient } = await initPayloadInt(dirname, undefined, true))
const data = await restClient
.POST('/users/login', {
@@ -57,6 +54,7 @@ describe('Form State', () => {
})
const { state } = await buildFormState({
+ mockRSCs: true,
id: postData.id,
collectionSlug: postsSlug,
data: postData,
@@ -95,7 +93,6 @@ describe('Form State', () => {
validateUsingEvent: {},
blocks: {
initialValue: 0,
- requiresRender: false,
rows: [],
value: 0,
},
@@ -113,6 +110,7 @@ describe('Form State', () => {
})
const { state } = await buildFormState({
+ mockRSCs: true,
id: postData.id,
collectionSlug: postsSlug,
data: postData,
@@ -134,9 +132,89 @@ describe('Form State', () => {
title: {
value: postData.title,
initialValue: postData.title,
+ lastRenderedPath: 'title',
},
})
})
- it.todo('should skip validation if specified')
+ it('should not render custom components when `lastRenderedPath` exists', async () => {
+ const req = await createLocalReq({ user }, payload)
+
+ const { state: stateWithRow } = await buildFormState({
+ mockRSCs: true,
+ collectionSlug: postsSlug,
+ formState: {
+ array: {
+ rows: [
+ {
+ id: '123',
+ },
+ ],
+ },
+ 'array.0.id': {
+ value: '123',
+ initialValue: '123',
+ },
+ },
+ docPermissions: undefined,
+ docPreferences: {
+ fields: {},
+ },
+ documentFormState: undefined,
+ operation: 'update',
+ renderAllFields: false,
+ req,
+ schemaPath: postsSlug,
+ })
+
+ // Ensure that row 1 _DOES_ return with rendered components
+ expect(stateWithRow?.['array.0.richText']?.lastRenderedPath).toStrictEqual('array.0.richText')
+ expect(stateWithRow?.['array.0.richText']?.customComponents?.Field).toBeDefined()
+
+ const { state: stateWithTitle } = await buildFormState({
+ mockRSCs: true,
+ collectionSlug: postsSlug,
+ formState: {
+ array: {
+ rows: [
+ {
+ id: '123',
+ },
+ {
+ id: '456',
+ },
+ ],
+ },
+ 'array.0.id': {
+ value: '123',
+ initialValue: '123',
+ },
+ 'array.0.richText': {
+ lastRenderedPath: 'array.0.richText',
+ },
+ 'array.1.id': {
+ value: '456',
+ initialValue: '456',
+ },
+ },
+ docPermissions: undefined,
+ docPreferences: {
+ fields: {},
+ },
+ documentFormState: undefined,
+ operation: 'update',
+ renderAllFields: false,
+ schemaPath: postsSlug,
+ req,
+ })
+
+ // Ensure that row 1 _DOES NOT_ return with rendered components
+ expect(stateWithTitle?.['array.0.richText']).toHaveProperty('lastRenderedPath')
+ expect(stateWithTitle?.['array.0.richText']).not.toHaveProperty('customComponents')
+
+ // Ensure that row 2 _DOES_ return with rendered components
+ expect(stateWithTitle?.['array.1.richText']).toHaveProperty('lastRenderedPath')
+ expect(stateWithTitle?.['array.1.richText']).toHaveProperty('customComponents')
+ expect(stateWithTitle?.['array.1.richText']?.customComponents?.Field).toBeDefined()
+ })
})
diff --git a/test/helpers/e2e/assertRequestBody.ts b/test/helpers/e2e/assertRequestBody.ts
index 987309279..a2e46c3c0 100644
--- a/test/helpers/e2e/assertRequestBody.ts
+++ b/test/helpers/e2e/assertRequestBody.ts
@@ -2,15 +2,38 @@ import type { Page } from '@playwright/test'
import { expect } from '@playwright/test'
+/**
+ * A helper function to assert the body of a network request.
+ * This is useful for reading the body of a request and testing whether it is correct.
+ * For example, if you have a form that submits data to an API, you can use this function to
+ * assert that the data being sent is correct.
+ * @param page The Playwright page
+ * @param options Options
+ * @param options.action The action to perform that will trigger the request
+ * @param options.expect A function to run after the request is made to assert the request body
+ * @returns The request body
+ * @example
+ * const requestBody = await assertRequestBody(page, {
+ * action: page.click('button'),
+ * expect: (requestBody) => expect(requestBody.foo).toBe('bar')
+ * })
+ */
export const assertRequestBody = async (
page: Page,
options: {
action: Promise | void
expect?: (requestBody: T) => boolean | Promise
+ requestMethod?: string
+ url: string
},
): Promise => {
const [request] = await Promise.all([
- page.waitForRequest((request) => request.method() === 'POST'), // Adjust condition as needed
+ page.waitForRequest((request) =>
+ Boolean(
+ request.url().startsWith(options.url) &&
+ (request.method() === options.requestMethod || 'POST'),
+ ),
+ ),
await options.action,
])
diff --git a/test/helpers/e2e/assertResponseBody.ts b/test/helpers/e2e/assertResponseBody.ts
new file mode 100644
index 000000000..54e74ed40
--- /dev/null
+++ b/test/helpers/e2e/assertResponseBody.ts
@@ -0,0 +1,86 @@
+import type { Page } from '@playwright/test'
+
+import { expect } from '@playwright/test'
+
+function parseRSC(rscText: string) {
+ // Next.js streams use special delimiters like "\n"
+ const chunks = rscText.split('\n').filter((line) => line.trim() !== '')
+
+ // find the chunk starting with '1:', remove the '1:' prefix and parse the rest
+ const match = chunks.find((chunk) => chunk.startsWith('1:'))
+
+ if (match) {
+ const jsonString = match.slice(2).trim()
+ if (jsonString) {
+ try {
+ return JSON.parse(jsonString)
+ } catch (err) {
+ console.error('Failed to parse JSON:', err)
+ }
+ }
+ }
+
+ return null
+}
+
+/**
+ * A helper function to assert the response of a network request.
+ * This is useful for reading the response of a request and testing whether it is correct.
+ * For example, if you have a form that submits data to an API, you can use this function to
+ * assert that the data sent back is correct.
+ * @param page The Playwright page
+ * @param options Options
+ * @param options.action The action to perform that will trigger the request
+ * @param options.expect A function to run after the request is made to assert the response body
+ * @param options.url The URL to match in the network requests
+ * @returns The request body
+ * @example
+ * const responseBody = await assertResponseBody(page, {
+ * action: page.click('button'),
+ * expect: (responseBody) => expect(responseBody.foo).toBe('bar')
+ * })
+ */
+export const assertResponseBody = async (
+ page: Page,
+ options: {
+ action: Promise | void
+ expect?: (requestBody: T) => boolean | Promise
+ requestMethod?: string
+ responseContentType?: string
+ url?: string
+ },
+): Promise => {
+ const [response] = await Promise.all([
+ page.waitForResponse((response) =>
+ Boolean(
+ response.url().includes(options.url || '') &&
+ response.status() === 200 &&
+ response
+ .headers()
+ ['content-type']?.includes(options.responseContentType || 'application/json'),
+ ),
+ ),
+ await options.action,
+ ])
+
+ if (!response) {
+ throw new Error('No response received')
+ }
+
+ const responseBody = await response.text()
+ const responseType = response.headers()['content-type']?.split(';')[0]
+
+ let parsedBody: T = undefined as T
+
+ if (responseType === 'text/x-component') {
+ parsedBody = parseRSC(responseBody)
+ } else if (typeof responseBody === 'string') {
+ parsedBody = JSON.parse(responseBody) as T
+ }
+
+ if (typeof options.expect === 'function') {
+ expect(await options.expect(parsedBody)).toBeTruthy()
+ }
+
+ return parsedBody
+}
diff --git a/test/queues/config.ts b/test/queues/config.ts
index 5bdc9c8c4..28d01a801 100644
--- a/test/queues/config.ts
+++ b/test/queues/config.ts
@@ -10,8 +10,10 @@ import { updatePostStep1, updatePostStep2 } from './runners/updatePost.js'
import { clearAndSeedEverything } from './seed.js'
import { externalWorkflow } from './workflows/externalWorkflow.js'
import { inlineTaskTestWorkflow } from './workflows/inlineTaskTest.js'
+import { inlineTaskTestDelayedWorkflow } from './workflows/inlineTaskTestDelayed.js'
import { longRunningWorkflow } from './workflows/longRunning.js'
import { noRetriesSetWorkflow } from './workflows/noRetriesSet.js'
+import { parallelTaskWorkflow } from './workflows/parallelTaskWorkflow.js'
import { retries0Workflow } from './workflows/retries0.js'
import { retriesBackoffTestWorkflow } from './workflows/retriesBackoffTest.js'
import { retriesRollbackTestWorkflow } from './workflows/retriesRollbackTest.js'
@@ -24,8 +26,6 @@ import { updatePostJSONWorkflow } from './workflows/updatePostJSON.js'
import { workflowAndTasksRetriesUndefinedWorkflow } from './workflows/workflowAndTasksRetriesUndefined.js'
import { workflowRetries2TasksRetries0Workflow } from './workflows/workflowRetries2TasksRetries0.js'
import { workflowRetries2TasksRetriesUndefinedWorkflow } from './workflows/workflowRetries2TasksRetriesUndefined.js'
-import { inlineTaskTestDelayedWorkflow } from './workflows/inlineTaskTestDelayed.js'
-import { parallelTaskWorkflow } from './workflows/parallelTaskWorkflow.js'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
diff --git a/test/queues/int.spec.ts b/test/queues/int.spec.ts
index 315e6581c..5e22c9b5a 100644
--- a/test/queues/int.spec.ts
+++ b/test/queues/int.spec.ts
@@ -1390,7 +1390,7 @@ describe('Queues', () => {
limit: amount,
depth: 0,
})
- expect(simpleDocs.docs.length).toBe(amount)
+ expect(simpleDocs.docs).toHaveLength(amount)
// Ensure all docs are created (= all tasks are run once)
for (let i = 1; i <= simpleDocs.docs.length; i++) {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index e2b64e3bc..c9793d25c 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,7 @@
}
],
"paths": {
- "@payload-config": ["./test/form-state/config.ts"],
+ "@payload-config": ["./test/_community/config.ts"],
"@payloadcms/admin-bar": ["./packages/admin-bar/src"],
"@payloadcms/live-preview": ["./packages/live-preview/src"],
"@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],