tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
Files
c9040b60952d2dbf12e595193fafbcc9d55bf59a
payloadcms/test/fields/e2e.spec.ts
Jacob Fletcher c96fa613bc feat!: on demand rsc (#8364) 
Currently, Payload renders all custom components on initial compile of
the admin panel. This is problematic for two key reasons:
1. Custom components do not receive contextual data, i.e. fields do not
receive their field data, edit views do not receive their document data,
etc.
2. Components are unnecessarily rendered before they are used

This was initially required to support React Server Components within
the Payload Admin Panel for two key reasons:
1. Fields can be dynamically rendered within arrays, blocks, etc.
2. Documents can be recursively rendered within a "drawer" UI, i.e.
relationship fields
3. Payload supports server/client component composition 

In order to achieve this, components need to be rendered on the server
and passed as "slots" to the client. Currently, the pattern for this is
to render custom server components in the "client config". Then when a
view or field is needed to be rendered, we first check the client config
for a "pre-rendered" component, otherwise render our client-side
fallback component.

But for the reasons listed above, this pattern doesn't exactly make
custom server components very useful within the Payload Admin Panel,
which is where this PR comes in. Now, instead of pre-rendering all
components on initial compile, we're able to render custom components
_on demand_, only as they are needed.

To achieve this, we've established [this
pattern](https://github.com/payloadcms/payload/pull/8481) of React
Server Functions in the Payload Admin Panel. With Server Functions, we
can iterate the Payload Config and return JSX through React's
`text/x-component` content-type. This means we're able to pass
contextual props to custom components, such as data for fields and
views.

## Breaking Changes

1. Add the following to your root layout file, typically located at
`(app)/(payload)/layout.tsx`:

    ```diff
    /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
    /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
    + import type { ServerFunctionClient } from 'payload'

    import config from '@payload-config'
    import { RootLayout } from '@payloadcms/next/layouts'
    import { handleServerFunctions } from '@payloadcms/next/utilities'
    import React from 'react'

    import { importMap } from './admin/importMap.js'
    import './custom.scss'

    type Args = {
      children: React.ReactNode
    }

+ const serverFunctions: ServerFunctionClient = async function (args) {
    +  'use server'
    +  return handleServerFunctions({
    +    ...args,
    +    config,
    +    importMap,
    +  })
    + }

    const Layout = ({ children }: Args) => (
      <RootLayout
        config={config}
        importMap={importMap}
    +  serverFunctions={serverFunctions}
      >
        {children}
      </RootLayout>
    )

    export default Layout
    ```

2. If you were previously posting to the `/api/form-state` endpoint, it
no longer exists. Instead, you'll need to invoke the `form-state` Server
Function, which can be done through the _new_ `getFormState` utility:

    ```diff
    - import { getFormState } from '@payloadcms/ui'
    - const { state } = await getFormState({
    -   apiRoute: '',
    -   body: {
    -     // ...
    -   },
    -   serverURL: ''
    - })

    + const { getFormState } = useServerFunctions()
    +
    + const { state } = await getFormState({
    +   // ...
    + })
    ```

## Breaking Changes

```diff
- useFieldProps()
- useCellProps()
```

More details coming soon.

---------

Co-authored-by: Alessio Gravili <alessio@gravili.de>
Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>
Co-authored-by: James <james@trbl.design>
2024-11-11 13:59:05 -05:00

592 lines
21 KiB
TypeScript
Raw Blame History

import type { Page } from '@playwright/test'
import { expect, test } from '@playwright/test'
import path from 'path'
import { wait } from 'payload/shared'
import { fileURLToPath } from 'url'
import type { PayloadTestSDK } from '../helpers/sdk/index.js'
import type { Config } from './payload-types.js'
import { ensureCompilationIsDone, initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers.js'
import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
import { reInitializeDB } from '../helpers/reInitializeDB.js'
import { RESTClient } from '../helpers/rest.js'
import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
import { jsonDoc } from './collections/JSON/shared.js'
import {
arrayFieldsSlug,
blockFieldsSlug,
collapsibleFieldsSlug,
tabsFields2Slug,
tabsFieldsSlug,
} from './slugs.js'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
const { beforeAll, beforeEach, describe } = test
let payload: PayloadTestSDK<Config>
let client: RESTClient
let page: Page
let serverURL: string
// If we want to make this run in parallel: test.describe.configure({ mode: 'parallel' })
describe('fields', () => {
beforeAll(async ({ browser }, testInfo) => {
testInfo.setTimeout(TEST_TIMEOUT_LONG)
process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
;({ payload, serverURL } = await initPayloadE2ENoConfig({
dirname,
// prebuild,
}))
const context = await browser.newContext()
page = await context.newPage()
initPageConsoleErrorCatch(page)
await ensureCompilationIsDone({ page, serverURL })
})
beforeEach(async () => {
await reInitializeDB({
serverURL,
snapshotKey: 'fieldsTest',
uploadsDir: path.resolve(dirname, './collections/Upload/uploads'),
})
if (client) {
await client.logout()
}
client = new RESTClient(null, { defaultSlug: 'users', serverURL })
await client.login()
await ensureCompilationIsDone({ page, serverURL })
})
describe('indexed', () => {
let url: AdminUrlUtil
beforeEach(() => {
url = new AdminUrlUtil(serverURL, 'indexed-fields')
})
// TODO - This test is flaky. Rarely, but sometimes it randomly fails.
test('should display unique constraint error in ui', async () => {
const uniqueText = 'uniqueText'
const doc = await payload.create({
collection: 'indexed-fields',
data: {
group: {
unique: uniqueText,
},
localizedUniqueRequiredText: 'text',
text: 'text',
uniqueRequiredText: 'text',
uniqueText,
},
})
await payload.update({
id: doc.id,
collection: 'indexed-fields',
data: {
localizedUniqueRequiredText: 'es text',
},
locale: 'es',
})
await page.goto(url.create)
await page.waitForURL(url.create)
await page.locator('#field-text').fill('test')
await page.locator('#field-uniqueText').fill(uniqueText)
await page.locator('#field-localizedUniqueRequiredText').fill('localizedUniqueRequired2')
await wait(500)
// attempt to save
await page.click('#action-save', { delay: 200 })
// toast error
await expect(page.locator('.payload-toast-container')).toContainText(
'The following field is invalid: uniqueText',
)
await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toContain('create')
// field specific error
await expect(page.locator('.field-type.text.error #field-uniqueText')).toBeVisible()
// reset first unique field
await page.locator('#field-uniqueText').clear()
// nested in a group error
await page.locator('#field-group__unique').fill(uniqueText)
await wait(1000)
// attempt to save
await page.locator('#action-save').click()
// toast error
await expect(page.locator('.payload-toast-container')).toContainText(
'The following field is invalid: group.unique',
)
await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toContain('create')
// field specific error inside group
await expect(page.locator('.field-type.text.error #field-group__unique')).toBeVisible()
})
})
describe('json', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, 'json-fields')
})
test('should display field in list view', async () => {
await page.goto(url.list)
const jsonCell = page.locator('.row-1 .cell-json')
await expect(jsonCell).toHaveText(JSON.stringify(jsonDoc.json))
})
test('should create', async () => {
const input = '{"foo": "bar"}'
await page.goto(url.create)
await page.waitForURL(url.create)
const jsonCodeEditor = page.locator('.json-field .code-editor').first()
await expect(() => expect(jsonCodeEditor).toBeVisible()).toPass({
timeout: POLL_TOPASS_TIMEOUT,
})
const jsonFieldInputArea = page.locator('.json-field .inputarea').first()
await jsonFieldInputArea.fill(input)
await saveDocAndAssert(page)
const jsonField = page.locator('.json-field').first()
await expect(jsonField).toContainText('"foo": "bar"')
})
test('should not unflatten json field containing keys with dots', async () => {
const input = '{"foo.with.periods": "bar"}'
await page.goto(url.create)
await page.waitForURL(url.create)
const jsonCodeEditor = page.locator('.group-field .json-field .code-editor').first()
await expect(() => expect(jsonCodeEditor).toBeVisible()).toPass({
timeout: POLL_TOPASS_TIMEOUT,
})
const json = page.locator('.group-field .json-field .inputarea')
await json.fill(input)
await saveDocAndAssert(page, '.form-submit button')
await expect(page.locator('.group-field .json-field')).toContainText(
'"foo.with.periods": "bar"',
)
})
})
describe('radio', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, 'radio-fields')
})
test('should show i18n label in list', async () => {
await page.goto(url.list)
await expect(page.locator('.cell-radio')).toHaveText('Value One')
})
test('should show i18n label while editing', async () => {
await page.goto(url.create)
await expect(page.locator('label[for="field-radio"]')).toHaveText('Radio en')
})
test('should show i18n radio labels', async () => {
await page.goto(url.create)
await expect(page.locator('label[for="field-radio-one"] .radio-input__label')).toHaveText(
'Value One',
)
})
})
describe('select', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, 'select-fields')
})
test('should use i18n option labels', async () => {
await page.goto(url.create)
const field = page.locator('#field-selectI18n')
await field.click({ delay: 100 })
const options = page.locator('.rs__option')
// Select an option
await options.locator('text=One').click()
await saveDocAndAssert(page)
await expect(field.locator('.rs__value-container')).toContainText('One')
})
})
describe('collapsible', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, collapsibleFieldsSlug)
})
test('should render collapsible as collapsed if initCollapsed is true', async () => {
await page.goto(url.create)
const collapsedCollapsible = page.locator(
'#field-collapsible-_index-1 .collapsible__toggle--collapsed',
)
await expect(collapsedCollapsible).toBeVisible()
})
test('should render CollapsibleLabel using a function', async () => {
const label = 'custom row label'
await page.goto(url.create)
await page.locator('#field-collapsible-_index-3-1 #field-nestedTitle').fill(label)
await wait(100)
const customCollapsibleLabel = page.locator(
`#field-collapsible-_index-3-1 .collapsible-field__row-label-wrap :text("${label}")`,
)
await expect(customCollapsibleLabel).toContainText(label)
})
test('should render CollapsibleLabel using a component', async () => {
const label = 'custom row label as component'
await page.goto(url.create)
await page.locator('#field-arrayWithCollapsibles').scrollIntoViewIfNeeded()
const arrayWithCollapsibles = page.locator('#field-arrayWithCollapsibles')
await expect(arrayWithCollapsibles).toBeVisible()
await page.locator('#field-arrayWithCollapsibles >> .array-field__add-row').click()
await page
.locator(
'#arrayWithCollapsibles-row-0 #field-collapsible-arrayWithCollapsibles__0___index-0 #field-arrayWithCollapsibles__0__innerCollapsible',
)
.fill(label)
await wait(100)
const customCollapsibleLabel = page.locator(
`#field-arrayWithCollapsibles >> #arrayWithCollapsibles-row-0 >> .collapsible-field__row-label-wrap :text("${label}")`,
)
await expect(customCollapsibleLabel).toHaveCSS('text-transform', 'uppercase')
})
})
describe('sortable arrays', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, arrayFieldsSlug)
})
test('should have disabled admin sorting', async () => {
await page.goto(url.create)
const field = page.locator('#field-disableSort > div > div > .array-actions__action-chevron')
expect(await field.count()).toEqual(0)
})
test('the drag handle should be hidden', async () => {
await page.goto(url.create)
const field = page.locator(
'#field-disableSort > .blocks-field__rows > div > div > .collapsible__drag',
)
expect(await field.count()).toEqual(0)
})
})
describe('sortable blocks', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, blockFieldsSlug)
})
test('should have disabled admin sorting', async () => {
await page.goto(url.create)
const field = page.locator('#field-disableSort > div > div > .array-actions__action-chevron')
expect(await field.count()).toEqual(0)
})
test('the drag handle should be hidden', async () => {
await page.goto(url.create)
const field = page.locator(
'#field-disableSort > .blocks-field__rows > div > div > .collapsible__drag',
)
expect(await field.count()).toEqual(0)
})
})
describe('row', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, 'row-fields')
})
test('should show row fields as table columns', async () => {
await page.goto(url.create)
// fill the required fields, including the row field
const idInput = page.locator('input#field-id')
await idInput.fill('123')
const titleInput = page.locator('input#field-title')
await titleInput.fill('Row 123')
await page.locator('#action-save').click()
await wait(200)
await expect(page.locator('.payload-toast-container')).toContainText('successfully')
// ensure the 'title' field is visible in the table header
await page.goto(url.list)
const titleHeading = page.locator('th#heading-title')
await expect(titleHeading).toBeVisible()
// ensure the 'title' field shows the correct value in the table cell
const titleCell = page.locator('.row-1 td.cell-title')
await expect(titleCell).toBeVisible()
await expect(titleCell).toContainText('Row 123')
})
test('should not show duplicative ID field', async () => {
await page.goto(url.create)
// fill the required fields, including the custom ID field
const idInput = page.locator('input#field-id')
await idInput.fill('456')
const titleInput = page.locator('input#field-title')
await titleInput.fill('Row 456')
await page.locator('#action-save').click()
await wait(200)
await expect(page.locator('.payload-toast-container')).toContainText('successfully')
// ensure there are not two ID fields in the table header
await page.goto(url.list)
const idHeadings = page.locator('th#heading-id')
await expect(idHeadings).toBeVisible()
await expect(idHeadings).toHaveCount(1)
})
test('should render row fields inline and with explicit widths', async () => {
await page.goto(url.create)
const fieldA = page.locator('input#field-field_with_width_a')
const fieldB = page.locator('input#field-field_with_width_b')
await expect(fieldA).toBeVisible()
await expect(fieldB).toBeVisible()
const fieldABox = await fieldA.boundingBox()
const fieldBBox = await fieldB.boundingBox()
await expect(() => {
expect(fieldABox.y).toEqual(fieldBBox.y)
expect(fieldABox.width).toEqual(fieldBBox.width)
}).toPass()
const field_30_percent = page.locator(
'.field-type.text:has(input#field-field_with_width_30_percent)',
)
const field_60_percent = page.locator(
'.field-type.text:has(input#field-field_with_width_60_percent)',
)
const field_20_percent = page.locator(
'.field-type.text:has(input#field-field_with_width_20_percent)',
)
const collapsible_30_percent = page.locator(
'.collapsible-field:has(#field-field_within_collapsible_a)',
)
const field_20_percent_width_within_row_a = page.locator(
'.field-type.text:has(input#field-field_20_percent_width_within_row_a)',
)
const field_no_set_width_within_row_b = page.locator(
'.field-type.text:has(input#field-no_set_width_within_row_b)',
)
const field_no_set_width_within_row_c = page.locator(
'.field-type.text:has(input#field-no_set_width_within_row_c)',
)
const field_20_percent_width_within_row_d = page.locator(
'.field-type.text:has(input#field-field_20_percent_width_within_row_d)',
)
await expect(field_30_percent).toBeVisible()
await expect(field_60_percent).toBeVisible()
await expect(field_20_percent).toBeVisible()
await expect(collapsible_30_percent).toBeVisible()
await expect(field_20_percent_width_within_row_a).toBeVisible()
await expect(field_no_set_width_within_row_b).toBeVisible()
await expect(field_no_set_width_within_row_c).toBeVisible()
await expect(field_20_percent_width_within_row_d).toBeVisible()
const field_30_boundingBox = await field_30_percent.boundingBox()
const field_60_boundingBox = await field_60_percent.boundingBox()
const field_20_boundingBox = await field_20_percent.boundingBox()
const collapsible_30_boundingBox = await collapsible_30_percent.boundingBox()
const field_20_percent_width_within_row_a_box =
await field_20_percent_width_within_row_a.boundingBox()
const field_no_set_width_within_row_b_box =
await field_no_set_width_within_row_b.boundingBox()
const field_no_set_width_within_row_c_box =
await field_no_set_width_within_row_c.boundingBox()
const field_20_percent_width_within_row_d_box =
await field_20_percent_width_within_row_d.boundingBox()
await expect(() => {
expect(field_30_boundingBox.y).toEqual(field_60_boundingBox.y)
expect(field_30_boundingBox.x).toEqual(field_20_boundingBox.x)
expect(field_30_boundingBox.y).not.toEqual(field_20_boundingBox.y)
expect(field_30_boundingBox.height).toEqual(field_60_boundingBox.height)
expect(collapsible_30_boundingBox.width).toEqual(field_30_boundingBox.width)
expect(field_20_percent_width_within_row_a_box.y).toEqual(
field_no_set_width_within_row_b_box.y,
)
expect(field_no_set_width_within_row_b_box.y).toEqual(field_no_set_width_within_row_c_box.y)
expect(field_no_set_width_within_row_c_box.y).toEqual(
field_20_percent_width_within_row_d_box.y,
)
expect(field_20_percent_width_within_row_a_box.width).toEqual(
field_20_percent_width_within_row_d_box.width,
)
expect(field_no_set_width_within_row_b_box.width).toEqual(
field_no_set_width_within_row_c_box.width,
)
}).toPass()
})
test('should render nested row fields in the correct position', async () => {
await page.goto(url.create)
// These fields are not given explicit `width` values
await page.goto(url.create)
const fieldA = page.locator('input#field-field_within_collapsible_a')
await expect(fieldA).toBeVisible()
const fieldB = page.locator('input#field-field_within_collapsible_b')
await expect(fieldB).toBeVisible()
const fieldABox = await fieldA.boundingBox()
const fieldBBox = await fieldB.boundingBox()
await expect(() => {
// Check that the top value of the fields are the same
expect(fieldABox.y).toEqual(fieldBBox.y)
expect(fieldABox.height).toEqual(fieldBBox.height)
}).toPass()
})
})
describe('ui', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, 'ui-fields')
})
test('should show custom: client configuration', async () => {
await page.goto(url.create)
const uiField = page.locator('#uiCustomClient')
await expect(uiField).toBeVisible()
await expect(uiField).toContainText('client-side-configuration')
})
})
describe('conditional logic', () => {
let url: AdminUrlUtil
beforeAll(() => {
url = new AdminUrlUtil(serverURL, 'conditional-logic')
})
test('should toggle conditional field when data changes', async () => {
await page.goto(url.create)
const toggleField = page.locator('label[for=field-toggleField]')
await toggleField.click()
const fieldToToggle = page.locator('input#field-fieldToToggle')
await expect(fieldToToggle).toBeVisible()
})
test('should show conditional field based on user data', async () => {
await page.goto(url.create)
const userConditional = page.locator('input#field-userConditional')
await expect(userConditional).toBeVisible()
})
test('should show conditional field based on fields nested within data', async () => {
await page.goto(url.create)
const parentGroupFields = page.locator(
'div#field-parentGroup > .group-field__wrap > .render-fields',
)
await expect(parentGroupFields).toHaveCount(1)
const toggle = page.locator('label[for=field-parentGroup__enableParentGroupFields]')
await toggle.click()
const toggledField = page.locator('input#field-parentGroup__siblingField')
await expect(toggledField).toBeVisible()
})
test('should show conditional field based on fields nested within siblingData', async () => {
await page.goto(url.create)
const toggle = page.locator('label[for=field-parentGroup__enableParentGroupFields]')
await toggle.click()
const fieldRelyingOnSiblingData = page.locator('input#field-reliesOnParentGroup')
await expect(fieldRelyingOnSiblingData).toBeVisible()
})
})
describe('tabs', () => {
// tabsFieldsSlug is used for testing tabs
let tabsFieldsUrl: AdminUrlUtil
// tabsFields2Slug is used for testing nested tabs
let tabsFieldsUrl2: AdminUrlUtil
beforeAll(() => {
tabsFieldsUrl = new AdminUrlUtil(serverURL, tabsFieldsSlug)
tabsFieldsUrl2 = new AdminUrlUtil(serverURL, tabsFields2Slug)
})
test('should correctly save nested unnamed and named tabs', async () => {
await page.goto(tabsFieldsUrl2.create)
await page.locator('#field-tabsInArray .array-field__add-row').click()
await page.locator('#field-tabsInArray__0__text').fill('tab 1 text')
await page.locator('.tabs-field__tabs button:nth-child(2)').click()
await page.locator('#field-tabsInArray__0__tab2__text2').fill('tab 2 text')
await saveDocAndAssert(page)
await expect(page.locator('#field-tabsInArray__0__text')).toHaveValue('tab 1 text')
await page.locator('.tabs-field__tabs button:nth-child(2)').click()
await expect(page.locator('#field-tabsInArray__0__tab2__text2')).toHaveValue('tab 2 text')
})
test('should save preferences for tab order', async () => {
await page.goto(tabsFieldsUrl.list)
const firstItem = page.locator('.cell-id a').nth(0)
const href = await firstItem.getAttribute('href')
await firstItem.click()
const regex = new RegExp(href.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
await page.waitForURL(regex)
await page.locator('.tabs-field__tabs button:nth-child(2)').nth(0).click()
await page.reload()
const tab2 = page.locator('.tabs-field__tabs button:nth-child(2)').nth(0)
await expect(async () => await expect(tab2).toHaveClass(/--active/)).toPass({
timeout: POLL_TOPASS_TIMEOUT,
})
})
})
})
Reference in New Issue View Git Blame Copy Permalink