adds more tests

test/admin/collections/CustomFields/fields/Text/DescriptionClient.tsx

@@ -0,0 +1,10 @@
+'use client'
+import type { TextFieldDescriptionClientComponent } from 'payload'
+
+import React from 'react'
+
+export const CustomClientDescription: TextFieldDescriptionClientComponent = (props) => {
+  return (
+    <div id="custom-client-field-description">{`Description: the max length of this field is: ${props?.field?.maxLength}`}</div>
+  )
+}

test/admin/collections/CustomFields/fields/Text/DescriptionServer.tsx

@@ -0,0 +1,9 @@
+import type { TextFieldDescriptionServerComponent } from 'payload'
+
+import React from 'react'
+
+export const CustomServerDescription: TextFieldDescriptionServerComponent = (props) => {
+  return (
+    <div id="custom-server-field-description">{`Description: the max length of this field is: ${props?.field?.maxLength}`}</div>
+  )
+}

test/admin/collections/CustomFields/fields/Text/LabelClient.tsx

@@ -0,0 +1,10 @@
+'use client'
+import type { TextFieldLabelClientComponent } from 'payload'
+
+import React from 'react'
+
+export const CustomClientLabel: TextFieldLabelClientComponent = (props) => {
+  return (
+    <div id="custom-client-field-label">{`Label: the max length of this field is: ${props?.field?.maxLength}`}</div>
+  )
+}

test/admin/collections/CustomFields/fields/Text/LabelServer.tsx

@@ -0,0 +1,9 @@
+import type { TextFieldLabelServerComponent } from 'payload'
+
+import React from 'react'
+
+export const CustomServerLabel: TextFieldLabelServerComponent = (props) => {
+  return (
+    <div id="custom-server-field-label">{`Label: the max length of this field is: ${props?.field?.maxLength}`}</div>
+  )
+}

test/admin/collections/CustomFields/index.ts

@@ -6,16 +6,34 @@ export const CustomFields: CollectionConfig = {
   slug: customFieldsSlug,
   fields: [
     {
-      name: 'customTextField',
+      name: 'customTextServerField',
       type: 'text',
       maxLength: 100,
       admin: {
         placeholder: 'This is a placeholder',
         components: {
           afterInput: ['/collections/CustomFields/AfterInput.js#AfterInput'],
           beforeInput: ['/collections/CustomFields/BeforeInput.js#BeforeInput'],
-          Label: '/collections/CustomFields/fields/Text/Label.js#CustomLabel',
-          Description: '/collections/CustomFields/fields/Text/Description.js#CustomDescription',
+          Label: '/collections/CustomFields/fields/Text/LabelServer.js#CustomServerLabel',
+          Description:
+            '/collections/CustomFields/fields/Text/DescriptionServer.js#CustomServerDescription',
+          Error: '/collections/CustomFields/CustomError.js#CustomError',
+        },
+      },
+      minLength: 3,
+    },
+    {
+      name: 'customTextClientField',
+      type: 'text',
+      maxLength: 100,
+      admin: {
+        placeholder: 'This is a placeholder',
+        components: {
+          afterInput: ['/collections/CustomFields/AfterInput.js#AfterInput'],
+          beforeInput: ['/collections/CustomFields/BeforeInput.js#BeforeInput'],
+          Label: '/collections/CustomFields/fields/Text/LabelClient.js#CustomClientLabel',
+          Description:
+            '/collections/CustomFields/fields/Text/DescriptionClient.js#CustomClientDescription',
           Error: '/collections/CustomFields/CustomError.js#CustomError',
         },
       },

test/admin/e2e/1/e2e.spec.ts

@@ -555,24 +555,46 @@ describe('admin1', () => {
     test('renders custom label component', async () => {
       await page.goto(customFieldsURL.create)
       await page.waitForURL(customFieldsURL.create)
-      await expect(page.locator('#custom-field-label')).toBeVisible()
+      await expect(page.locator('#custom-client-field-label')).toBeVisible()
+      await expect(page.locator('#custom-server-field-label')).toBeVisible()
     })
 
     test('renders custom description component', async () => {
       await page.goto(customFieldsURL.create)
       await page.waitForURL(customFieldsURL.create)
-      await expect(page.locator('#custom-field-description')).toBeVisible()
+      await expect(page.locator('#custom-client-field-description')).toBeVisible()
+      await expect(page.locator('#custom-server-field-description')).toBeVisible()
     })
 
-    test('ensure custom components receive field props', async () => {
+    test('custom server components should receive field props', async () => {
       await page.goto(customFieldsURL.create)
       await page.waitForURL(customFieldsURL.create)
-      await expect(page.locator('#custom-field-label')).toContainText(
-        'The max length of this field is: 100',
-      )
-      await expect(page.locator('#custom-field-description')).toContainText(
-        'The max length of this field is: 100',
-      )
+      await expect(
+        page.locator('#custom-server-field-label', {
+          hasText: exactText('Label: the max length of this field is: 100'),
+        }),
+      ).toBeVisible()
+
+      await expect(
+        page.locator('#custom-server-field-description', {
+          hasText: exactText('Description: the max length of this field is: 100'),
+        }),
+      ).toBeVisible()
+    })
+
+    test('custom client components should receive field props', async () => {
+      await page.goto(customFieldsURL.create)
+      await page.waitForURL(customFieldsURL.create)
+      await expect(
+        page.locator('#custom-client-field-label', {
+          hasText: exactText('Label: the max length of this field is: 100'),
+        }),
+      ).toBeVisible()
+      await expect(
+        page.locator('#custom-client-field-description', {
+          hasText: exactText('Description: the max length of this field is: 100'),
+        }),
+      ).toBeVisible()
     })
 
     describe('field descriptions', () => {
@@ -606,28 +628,30 @@ describe('admin1', () => {
     test('should render custom error component', async () => {
       await page.goto(customFieldsURL.create)
       await page.waitForURL(customFieldsURL.create)
-      const input = page.locator('input[id="field-customTextField"]')
+      const input = page.locator('input[id="field-customTextClientField"]')
       await input.fill('ab')
       await expect(input).toHaveValue('ab')
-      const error = page.locator('.custom-error:near(input[id="field-customTextField"])')
+      const error = page.locator('.custom-error:near(input[id="field-customTextClientField"])')
       const submit = page.locator('button[type="button"][id="action-save"]')
       await submit.click()
       await expect(error).toHaveText('#custom-error')
     })
 
     test('should render beforeInput and afterInput', async () => {
       await page.goto(customFieldsURL.create)
-      const input = page.locator('input[id="field-customTextField"]')
+      const input = page.locator('input[id="field-customTextClientField"]')
 
       const prevSibling = await input.evaluateHandle((el) => {
         return el.previousElementSibling
       })
+
       const prevSiblingText = await page.evaluate((el) => el?.textContent, prevSibling)
       expect(prevSiblingText).toEqual('#before-input')
 
       const nextSibling = await input.evaluateHandle((el) => {
         return el.nextElementSibling
       })
+
       const nextSiblingText = await page.evaluate((el) => el?.textContent, nextSibling)
       expect(nextSiblingText).toEqual('#after-input')
     })

test/admin/payload-types.ts

@@ -172,7 +172,8 @@ export interface CustomViewsTwo {
  */
 export interface CustomField {
   id: string;
-  customTextField?: string | null;
+  customTextServerField?: string | null;
+  customTextClientField?: string | null;
   descriptionAsString?: string | null;
   descriptionAsFunction?: string | null;
   descriptionAsComponent?: string | null;