chore: stabalize live preview test suite

test/helpers/e2e/navigateToDoc.ts

@@ -3,7 +3,8 @@ import type { AdminUrlUtil } from 'helpers/adminUrlUtil.js'
 
 export const navigateToDoc = async (page: Page, urlUtil: AdminUrlUtil) => {
   await page.goto(urlUtil.list)
-  await page.waitForURL(urlUtil.list)
+  const regex = new RegExp(`^${urlUtil.list}(?:\\?.*)?$`)
+  await page.waitForURL(regex)
   const cellLink = page.locator(`tbody tr:first-child td a`).first()
   const linkURL = await cellLink.getAttribute('href')
   await page.goto(`${urlUtil.serverURL}${linkURL}`)

test/live-preview/collections/Categories.ts

@@ -1,7 +1,9 @@
 import type { CollectionConfig } from 'payload'
 
+import { categoriesSlug } from '../shared.js'
+
 const Categories: CollectionConfig = {
-  slug: 'categories',
+  slug: categoriesSlug,
   admin: {
     useAsTitle: 'title',
   },

test/live-preview/collections/Media.ts

@@ -1,7 +1,9 @@
 import type { CollectionConfig } from 'payload'
 
+import { mediaSlug } from '../shared.js'
+
 export const Media: CollectionConfig = {
-  slug: 'media',
+  slug: mediaSlug,
   upload: true,
   access: {
     read: () => true,

test/live-preview/collections/Pages.ts

@@ -8,7 +8,7 @@ import { CallToAction } from '../blocks/CallToAction/index.js'
 import { Content } from '../blocks/Content/index.js'
 import { MediaBlock } from '../blocks/MediaBlock/index.js'
 import { hero } from '../fields/hero.js'
-import { pagesSlug, postsSlug, tenantsSlug } from '../shared.js'
+import { mediaSlug, pagesSlug, postsSlug, tenantsSlug } from '../shared.js'
 
 export const Pages: CollectionConfig = {
   slug: pagesSlug,
@@ -187,7 +187,7 @@ export const Pages: CollectionConfig = {
         {
           name: 'image',
           type: 'upload',
-          relationTo: 'media',
+          relationTo: mediaSlug,
         },
       ],
     },

test/live-preview/collections/Posts.ts

@@ -5,7 +5,7 @@ import { CallToAction } from '../blocks/CallToAction/index.js'
 import { Content } from '../blocks/Content/index.js'
 import { MediaBlock } from '../blocks/MediaBlock/index.js'
 import { hero } from '../fields/hero.js'
-import { postsSlug, tenantsSlug } from '../shared.js'
+import { mediaSlug, postsSlug, tenantsSlug } from '../shared.js'
 
 export const Posts: CollectionConfig = {
   slug: postsSlug,
@@ -88,7 +88,7 @@ export const Posts: CollectionConfig = {
         {
           name: 'image',
           type: 'upload',
-          relationTo: 'media',
+          relationTo: mediaSlug,
         },
       ],
     },

test/live-preview/collections/SSR.ts

@@ -5,7 +5,7 @@ import { CallToAction } from '../blocks/CallToAction/index.js'
 import { Content } from '../blocks/Content/index.js'
 import { MediaBlock } from '../blocks/MediaBlock/index.js'
 import { hero } from '../fields/hero.js'
-import { ssrPagesSlug, tenantsSlug } from '../shared.js'
+import { mediaSlug, ssrPagesSlug, tenantsSlug } from '../shared.js'
 
 export const SSR: CollectionConfig = {
   slug: ssrPagesSlug,
@@ -79,7 +79,7 @@ export const SSR: CollectionConfig = {
         {
           name: 'image',
           type: 'upload',
-          relationTo: 'media',
+          relationTo: mediaSlug,
         },
       ],
     },

test/live-preview/collections/SSRAutosave.ts

@@ -5,7 +5,7 @@ import { CallToAction } from '../blocks/CallToAction/index.js'
 import { Content } from '../blocks/Content/index.js'
 import { MediaBlock } from '../blocks/MediaBlock/index.js'
 import { hero } from '../fields/hero.js'
-import { ssrAutosavePagesSlug, tenantsSlug } from '../shared.js'
+import { mediaSlug, ssrAutosavePagesSlug, tenantsSlug } from '../shared.js'
 
 export const SSRAutosave: CollectionConfig = {
   slug: ssrAutosavePagesSlug,
@@ -86,7 +86,7 @@ export const SSRAutosave: CollectionConfig = {
         {
           name: 'image',
           type: 'upload',
-          relationTo: 'media',
+          relationTo: mediaSlug,
         },
       ],
     },

test/live-preview/collections/Users.ts

@@ -1,7 +1,9 @@
 import type { CollectionConfig } from 'payload'
 
+import { usersSlug } from '../shared.js'
+
 export const Users: CollectionConfig = {
-  slug: 'users',
+  slug: usersSlug,
   auth: true,
   fields: [],
 }

test/live-preview/e2e.spec.ts

@@ -35,7 +35,7 @@ import {
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
-const { beforeAll, describe } = test
+const { beforeAll, beforeEach, describe } = test
 
 describe('Live Preview', () => {
   let page: Page
@@ -61,6 +61,15 @@ describe('Live Preview', () => {
     await ensureCompilationIsDone({ page, serverURL })
   })
 
+  beforeEach(async () => {
+    await reInitializeDB({
+      serverURL,
+      snapshotKey: 'livePreviewTest',
+    })
+
+    await ensureCompilationIsDone({ page, serverURL })
+  })
+
   test('collection — has tab', async () => {
     await navigateToDoc(page, pagesURLUtil)
 
@@ -213,12 +222,7 @@ describe('Live Preview', () => {
   })
 
   test('global — has route', async () => {
-    const url = page.url()
     await goToGlobalLivePreview(page, 'header', serverURL)
-
-    await expect(() => expect(page.url()).toBe(`${url}/preview`)).toPass({
-      timeout: POLL_TOPASS_TIMEOUT,
-    })
   })
 
   test('global — renders iframe', async () => {

test/live-preview/shared.ts

@@ -1,12 +1,11 @@
 export const pagesSlug = 'pages'
-
 export const tenantsSlug = 'tenants'
-
 export const ssrPagesSlug = 'ssr'
-
 export const ssrAutosavePagesSlug = 'ssr-autosave'
-
 export const postsSlug = 'posts'
+export const mediaSlug = 'media'
+export const categoriesSlug = 'categories'
+export const usersSlug = 'users'
 
 export const mobileBreakpoint = {
   label: 'Mobile',