From faef0784eeb6a1ce49f60f86617facc9a35599b9 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Thu, 4 Apr 2024 11:22:39 -0400
Subject: [PATCH] chore: re-enables fields-relationship tests

---
 packages/ui/src/fields/Relationship/index.tsx | 21 +++++++++++++++++--
 test/fields-relationship/e2e.spec.ts          | 17 +++++++++------
 tsconfig.json                                 |  4 ++--
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 6fe2be5f92..a98072daf5 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -378,7 +378,11 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
   // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
   // Note - effect should not run on first run
   useEffect(() => {
-    if (hasLoadedFirstPageRef.current && menuIsOpen) {
+    // If the menu is open while filterOptions changes
+    // due to latency of getFormState and fast clicking into this field,
+    // re-fetch options
+
+    if (hasLoadedFirstPageRef.current && menuIsOpen.current) {
       setIsLoading(true)
       void getResults({
         lastLoadedPage: {},
@@ -390,11 +394,24 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
       })
     }
 
+    // If the menu is not open, still reset the field state
+    // because we need to get new options next time the menu
+    // opens by the user
+
     dispatchOptions({ type: 'CLEAR' })
     setLastFullyLoadedRelation(-1)
     setLastLoadedPage({})
     hasLoadedFirstPageRef.current = false
-  }, [relationTo, filterOptions, locale, menuIsOpen, getResults, valueRef, hasLoadedFirstPageRef])
+  }, [
+    relationTo,
+    filterOptions,
+    locale,
+    menuIsOpen,
+    getResults,
+    valueRef,
+    hasLoadedFirstPageRef,
+    path,
+  ])
 
   const onSave = useCallback<DocumentDrawerProps['onSave']>(
     (args) => {
diff --git a/test/fields-relationship/e2e.spec.ts b/test/fields-relationship/e2e.spec.ts
index 9ab3d0f008..45b81f0e24 100644
--- a/test/fields-relationship/e2e.spec.ts
+++ b/test/fields-relationship/e2e.spec.ts
@@ -244,8 +244,10 @@ describe('fields - relationship', () => {
 
     // fill the first relation field
     const field = page.locator('#field-relationship')
+
     await field.click({ delay: 100 })
     const options = page.locator('.rs__option')
+
     await options.nth(0).click()
     await expect(field).toContainText(relationOneDoc.id)
 
@@ -262,18 +264,21 @@ describe('fields - relationship', () => {
     await options.nth(1).click()
     await expect(field).toContainText(anotherRelationOneDoc.id)
 
+    // Need to wait form state to come back
+    // before clicking save
+    await wait(2000)
+
     // Now, save the document. This should fail, as the filitered field doesn't match the selected relationship value
     await page.locator('#action-save').click()
     await expect(page.locator('.Toastify')).toContainText(`is invalid: ${fieldName}`)
 
-    // TODO: Playwright is not passing because of a race condition
-    // that is difficult to pinpoint.
-    // Need to revisit this
-
     // 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)
@@ -283,12 +288,12 @@ describe('fields - relationship', () => {
   }
 
   // TODO: Flaky test. Fix this! (This is an actual issue not just an e2e flake)
-  test.skip('should allow dynamic filterOptions', async () => {
+  test('should allow dynamic filterOptions', async () => {
     await runFilterOptionsTest('relationshipFiltered')
   })
 
   // TODO: Flaky test. Fix this! (This is an actual issue not just an e2e flake)
-  test.skip('should allow dynamic async filterOptions', async () => {
+  test('should allow dynamic async filterOptions', async () => {
     await runFilterOptionsTest('relationshipFilteredAsync')
   })
 
diff --git a/tsconfig.json b/tsconfig.json
index 64ddd9d30e..3009a940ca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,7 +37,7 @@
     ],
     "paths": {
       "@payload-config": [
-        "./test/uploads/config.ts"
+        "./test/fields-relationship/config.ts"
       ],
       "@payloadcms/live-preview": [
         "./packages/live-preview/src"
@@ -160,4 +160,4 @@
     ".next/types/**/*.ts",
     "scripts/**/*.ts"
   ]
-}
+}
\ No newline at end of file