chore: deflake joins e2e tests (#11034)

Previously, data created by other tests was also leaking into unrelated tests, causing them to fail. The new reset-db-between-tests logic added by this PR fixes this. 

Additionally, this increases playwright timeouts for CI, and adds a specific timeout override for opening a drawer, as it was incredibly slow in CI

test/joins/e2e.spec.ts

@@ -13,34 +13,64 @@ import {
   exactText,
   initPageConsoleErrorCatch,
   saveDocAndAssert,
+  throttleTest,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { navigateToDoc } from '../helpers/e2e/navigateToDoc.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
-import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
+import { EXPECT_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import { categoriesJoinRestrictedSlug, categoriesSlug, postsSlug, uploadsSlug } from './shared.js'
+import { reInitializeDB } from '../helpers/reInitializeDB.js'
+import { RESTClient } from '../helpers/rest.js'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 let payload: PayloadTestSDK<Config>
 let serverURL: string
+let client: RESTClient
 
-test.describe('Join Field', () => {
+const { beforeAll, beforeEach, describe } = test
+
+describe('Join Field', () => {
   let page: Page
   let categoriesURL: AdminUrlUtil
   let uploadsURL: AdminUrlUtil
   let categoriesJoinRestrictedURL: AdminUrlUtil
   let categoryID: string | number
 
-  test.beforeAll(async ({ browser }, testInfo) => {
+  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<Config>({
       dirname,
     }))
+
     categoriesURL = new AdminUrlUtil(serverURL, categoriesSlug)
     uploadsURL = new AdminUrlUtil(serverURL, uploadsSlug)
     categoriesJoinRestrictedURL = new AdminUrlUtil(serverURL, categoriesJoinRestrictedSlug)
+
+    const context = await browser.newContext()
+    page = await context.newPage()
+    initPageConsoleErrorCatch(page)
+    await ensureCompilationIsDone({ page, serverURL })
+
+    //await throttleTest({ context, delay: 'Slow 4G', page })
+  })
+
+  beforeEach(async () => {
+    await reInitializeDB({
+      serverURL,
+      snapshotKey: 'joinsTest',
+      uploadsDir: [],
+    })
+
+    if (client) {
+      await client.logout()
+    }
+    client = new RESTClient({ defaultSlug: postsSlug, serverURL })
+    await client.login()
+
     const { docs } = await payload.find({
       collection: categoriesSlug,
       where: {
@@ -55,11 +85,6 @@ test.describe('Join Field', () => {
     }
 
     ;({ id: categoryID } = docs[0])
-
-    const context = await browser.newContext()
-    page = await context.newPage()
-    initPageConsoleErrorCatch(page)
-    await ensureCompilationIsDone({ page, serverURL })
   })
 
   test('should populate joined relationships in table cells of list view', async () => {
@@ -254,6 +279,8 @@ test.describe('Join Field', () => {
     const joinField = page.locator('#field-relatedPosts.field-type.join')
     await expect(joinField).toBeVisible()
 
+    await expect(joinField.locator('tbody tr')).toHaveCount(3)
+
     const addButton = joinField.locator('.relationship-table__actions button.doc-drawer__toggler', {
       hasText: exactText('Add new'),
     })
@@ -263,8 +290,9 @@ test.describe('Join Field', () => {
     await addButton.click()
     const drawer = page.locator('[id^=doc-drawer_posts_1_]')
     await expect(drawer).toBeVisible()
+
     const categoryField = drawer.locator('#field-category')
-    await expect(categoryField).toBeVisible()
+    await expect(categoryField).toBeVisible({ timeout: EXPECT_TIMEOUT * 5 })
     const categoryValue = categoryField.locator('.relationship--single-value__text')
     await expect(categoryValue).toHaveText('example')
     const titleField = drawer.locator('#field-title')

test/joins/seed.ts

@@ -19,7 +19,7 @@ import {
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
-export const seed = async (_payload) => {
+export const seed = async (_payload: Payload) => {
   await _payload.create({
     collection: 'users',
     data: {
@@ -90,7 +90,7 @@ export const seed = async (_payload) => {
   await _payload.create({
     collection: postsSlug,
     data: {
-      upload: uploadedImage.id,
+      upload: uploadedImage,
     },
   })
 
@@ -123,6 +123,6 @@ export async function clearAndSeedEverything(_payload: Payload) {
     _payload,
     collectionSlugs,
     seedFunction: seed,
-    snapshotKey: 'adminTest',
+    snapshotKey: 'joinsTest',
   })
 }