chore(alpha): update fields-relationship e2e tests (#5553)

* fix: handles filter options in form state merge

* chore: fix and reintegrate fields-relationship e2e tests

* chore: update withMergedProps function for e2e tests

.github/workflows/main.yml

@@ -249,7 +249,7 @@ jobs:
           # - admin
           - auth
           - field-error-states
-          # - fields-relationship
+          - fields-relationship
           # - fields
           - fields/lexical
           - live-preview

packages/ui/src/elements/withMergedProps/index.tsx

@@ -28,7 +28,7 @@ export function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({
 }): React.FC<CompleteReturnProps> {
   // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props
   const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {
-    const mergedProps = deepMerge(toMergeIntoProps, passedProps)
+    const mergedProps = deepMerge(passedProps, toMergeIntoProps)
     return <Component {...mergedProps} />
   }
 

packages/ui/src/forms/Form/mergeServerFormState.ts

@@ -1,5 +1,7 @@
 import type { FormState } from 'payload/types'
 
+import deepEquals from 'deep-equal'
+
 import { mergeErrorPaths } from './mergeErrorPaths.js'
 
 const serverPropsToAccept = ['passesCondition', 'valid', 'errorMessage']
@@ -38,6 +40,16 @@ export const mergeServerFormState = (
         newFieldState.errorPaths = errorPathsResult.result
       }
 
+      /**
+       * Handle filterOptions
+       */
+      if (incomingState[path]?.filterOptions || newFieldState.filterOptions) {
+        if (!deepEquals(incomingState[path]?.filterOptions, newFieldState.filterOptions)) {
+          changed = true
+          newFieldState.filterOptions = incomingState[path].filterOptions
+        }
+      }
+
       /**
        * Handle the rest which is in serverPropsToAccept
        */

test/fields-relationship/config.ts

@@ -192,7 +192,7 @@ export default buildConfigWithDefaults({
     },
     {
       admin: {
-        useAsTitle: 'meta.title',
+        useAsTitle: 'name',
       },
       fields: [
         ...baseRelationshipFields,

test/fields-relationship/e2e.spec.ts

@@ -251,7 +251,7 @@ describe('fields - relationship', () => {
     // then verify that the filtered field's options match
     let filteredField = page.locator(`#field-${fieldName} .react-select`)
     await filteredField.click({ delay: 100 })
-    const filteredOptions = filteredField.locator('.rs__option')
+    let filteredOptions = filteredField.locator('.rs__option')
     await expect(filteredOptions).toHaveCount(1) // one doc
     await filteredOptions.nth(0).click()
     await expect(filteredField).toContainText(relationOneDoc.id)
@@ -268,6 +268,7 @@ describe('fields - relationship', () => {
     // then verify that the filtered field's options match
     filteredField = page.locator(`#field-${fieldName} .react-select`)
     await filteredField.click({ delay: 100 })
+    filteredOptions = filteredField.locator('.rs__option')
     await expect(filteredOptions).toHaveCount(2) // two options because the currently selected option is still there
     await filteredOptions.nth(1).click()
     await expect(filteredField).toContainText(anotherRelationOneDoc.id)