test: update e2e suites

next.config.js

@@ -12,6 +12,7 @@ const nextConfig = {
     },
     serverComponentsExternalPackages: ['drizzle-kit', 'drizzle-kit/utils', 'pino', 'pino-pretty'],
   },
+  reactStrictMode: false,
   // typescript: {
   //   ignoreBuildErrors: true,
   // },

packages/next/src/pages/Document/index.tsx

@@ -43,7 +43,7 @@ export const Document = async ({
 
   const isEditing = Boolean(globalSlug || (collectionSlug && !!id))
 
-  const route = `/${collectionSlug || globalSlug + '/' + params.segments.join('/')}`
+  const route = `/${collectionSlug || globalSlug + (params.segments?.length ? `/${params.segments.join('/')}` : '')}`
 
   const { config, payload, permissions, user, collectionConfig, globalConfig, locale, i18n } =
     await initPage({

packages/next/src/utilities/initPage.ts

@@ -62,6 +62,7 @@ export const initPage = async ({
     const stringifiedSearchParams = Object.keys(searchParams ?? {}).length
       ? `?${qs.stringify(searchParams)}`
       : ''
+
     redirect(`${routes.admin}/login?redirect=${routes.admin + route + stringifiedSearchParams}`)
   }
 

playwright.config.ts

@@ -11,7 +11,7 @@ const config: PlaywrightTestConfig = {
     video: 'retain-on-failure',
   },
   expect: {
-    timeout: 20000,
+    timeout: 45000,
   },
   workers: 16,
 }

pnpm-lock.yaml

@@ -5394,7 +5394,7 @@ packages:
   /@types/react-transition-group@4.4.10:
     resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
     dependencies:
-      '@types/react': 18.2.15
+      '@types/react': 18.2.57
     dev: false
 
   /@types/react@18.0.21:
@@ -5412,6 +5412,14 @@ packages:
       '@types/scheduler': 0.16.8
       csstype: 3.1.3
 
+  /@types/react@18.2.57:
+    resolution: {integrity: sha512-ZvQsktJgSYrQiMirAN60y4O/LRevIV8hUzSOSNB6gfR3/o3wCBFQx3sPwIYtuDMeiVgsSS3UzCV26tEzgnfvQw==}
+    dependencies:
+      '@types/prop-types': 15.7.11
+      '@types/scheduler': 0.16.8
+      csstype: 3.1.3
+    dev: false
+
   /@types/responselike@1.0.3:
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
     dependencies:
@@ -11167,7 +11175,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.11.19
+      '@types/node': 20.6.2
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true

test/_community/e2e.spec.ts

@@ -14,7 +14,7 @@ describe('Admin Panel', () => {
   let url: AdminUrlUtil
 
   beforeAll(async ({ browser }) => {
-    const { serverURL } = await initPayloadE2E(config)
+    const { serverURL } = await initPayloadE2E({ config, dirname: __dirname })
     url = new AdminUrlUtil(serverURL, 'posts')
 
     const context = await browser.newContext()

test/access-control/e2e.spec.ts

@@ -1,14 +1,15 @@
 import type { Page } from '@playwright/test'
+import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
 
 import type { ReadOnlyCollection, RestrictedVersion } from './payload-types'
 
-import payload from '../../packages/payload/src'
 import wait from '../../packages/payload/src/utilities/wait'
 import { exactText, initPageConsoleErrorCatch, openDocControls, openNav } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 import {
   docLevelAccessSlug,
   readOnlySlug,
@@ -28,6 +29,7 @@ import {
  */
 
 const { beforeAll, describe } = test
+let payload: Payload
 describe('access control', () => {
   let page: Page
   let url: AdminUrlUtil
@@ -37,8 +39,7 @@ describe('access control', () => {
   let serverURL: string
 
   beforeAll(async ({ browser }) => {
-    const config = await initPayloadE2E(__dirname)
-    serverURL = config.serverURL
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
 
     url = new AdminUrlUtil(serverURL, slug)
     restrictedUrl = new AdminUrlUtil(serverURL, restrictedSlug)

test/admin/e2e.spec.ts

@@ -3,9 +3,9 @@ import type { Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 import qs from 'qs'
 
+import type { Payload } from '../../packages/payload/src'
 import type { Geo, Post } from './payload-types'
 
-import payload from '../../packages/payload/src'
 import { mapAsync } from '../../packages/payload/src/utilities/mapAsync'
 import wait from '../../packages/payload/src/utilities/wait'
 import {
@@ -20,6 +20,7 @@ import {
 } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 import { clearAndSeedEverything } from './seed'
 import {
   customEditLabel,
@@ -50,6 +51,8 @@ const { beforeAll, beforeEach, describe } = test
 const title = 'Title'
 const description = 'Description'
 
+let payload: Payload
+
 describe('admin', () => {
   let page: Page
   let geoUrl: AdminUrlUtil
@@ -58,7 +61,7 @@ describe('admin', () => {
   let serverURL: string
 
   beforeAll(async ({ browser }) => {
-    serverURL = (await initPayloadE2E(__dirname)).serverURL
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
     geoUrl = new AdminUrlUtil(serverURL, geoCollectionSlug)
     url = new AdminUrlUtil(serverURL, postsCollectionSlug)
     customViewsURL = new AdminUrlUtil(serverURL, customViews2CollectionSlug)

test/auth/e2e.spec.ts

@@ -5,6 +5,7 @@ import { expect, test } from '@playwright/test'
 import { initPageConsoleErrorCatch, login, saveDocAndAssert } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 import { slug } from './shared'
 
 /**
@@ -22,7 +23,7 @@ describe('auth', () => {
   let url: AdminUrlUtil
 
   beforeAll(async ({ browser }) => {
-    const { serverURL } = await initPayloadE2E(__dirname)
+    const { serverURL } = await initPayloadE2E({ config, dirname: __dirname })
     url = new AdminUrlUtil(serverURL, slug)
 
     const context = await browser.newContext()

test/buildConfigWithDefaults.ts

@@ -5,7 +5,6 @@ import type { Config, SanitizedConfig } from '../packages/payload/src/config/typ
 import { mongooseAdapter } from '../packages/db-mongodb/src'
 import { postgresAdapter } from '../packages/db-postgres/src'
 import { buildConfig as buildPayloadConfig } from '../packages/payload/src/config/build'
-import { slateEditor } from '../packages/richtext-slate/src'
 
 // process.env.PAYLOAD_DATABASE = 'postgres'
 

test/field-error-states/e2e.spec.ts

@@ -4,6 +4,7 @@ import { expect, test } from '@playwright/test'
 
 import { initPageConsoleErrorCatch } from '../helpers'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 
 const { beforeAll, describe } = test
 
@@ -12,7 +13,7 @@ describe('field error states', () => {
   let page: Page
 
   beforeAll(async ({ browser }) => {
-    ;({ serverURL } = await initPayloadE2E(__dirname))
+    ;({ serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
     const context = await browser.newContext()
     page = await context.newPage()
     initPageConsoleErrorCatch(page)

test/fields-relationship/PrePopulateFieldUI/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import useField from '../../../packages/payload/src/admin/components/forms/useField'
+import useField from '../../../packages/ui/src/forms/useField'
 import { collection1Slug } from '../collectionSlugs'
 
 export const PrePopulateFieldUI: React.FC<{

test/fields-relationship/e2e.spec.ts

@@ -2,6 +2,7 @@ import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
 
+import type { Payload } from '../../packages/payload/src'
 import type {
   FieldsRelationship as CollectionWithRelationships,
   RelationOne,
@@ -10,7 +11,6 @@ import type {
   RelationWithTitle,
 } from './payload-types'
 
-import payload from '../../packages/payload/src'
 import { mapAsync } from '../../packages/payload/src/utilities/mapAsync'
 import wait from '../../packages/payload/src/utilities/wait'
 import { initPageConsoleErrorCatch, openDocControls, saveDocAndAssert } from '../helpers'
@@ -26,9 +26,12 @@ import {
   relationWithTitleSlug,
   slug,
 } from './collectionSlugs'
+import config from './config'
 
 const { beforeAll, beforeEach, describe } = test
 
+let payload: Payload
+
 describe('fields - relationship', () => {
   let url: AdminUrlUtil
   let page: Page
@@ -42,8 +45,7 @@ describe('fields - relationship', () => {
   let serverURL: string
 
   beforeAll(async ({ browser }) => {
-    const { serverURL: serverURLFromConfig } = await initPayloadE2E(__dirname)
-    serverURL = serverURLFromConfig
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
 
     url = new AdminUrlUtil(serverURL, slug)
 

test/fields/collections/Blocks/components/AddCustomBlocks/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import { useForm } from '../../../../../../packages/payload/src/admin/components/forms/Form/context'
-import useField from '../../../../../../packages/payload/src/admin/components/forms/useField'
+import { useForm } from '../../../../../../packages/ui/src/forms/Form/context'
+import useField from '../../../../../../packages/ui/src/forms/useField'
 import './index.scss'
 
 const baseClass = 'custom-blocks-field-management'

test/fields/e2e.spec.ts

@@ -1,9 +1,9 @@
 import type { Page } from '@playwright/test'
+import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
 import path from 'path'
 
-import payload from '../../packages/payload/src'
 import { mapAsync } from '../../packages/payload/src/utilities/mapAsync'
 import wait from '../../packages/payload/src/utilities/wait'
 import {
@@ -18,6 +18,7 @@ import { RESTClient } from '../helpers/rest'
 import { jsonDoc } from './collections/JSON/shared'
 import { numberDoc } from './collections/Number/shared'
 import { textDoc } from './collections/Text/shared'
+import config from './config'
 import { clearAndSeedEverything } from './seed'
 import {
   collapsibleFieldsSlug,
@@ -29,6 +30,7 @@ import {
 
 const { afterEach, beforeAll, beforeEach, describe } = test
 
+let payload: Payload
 let client: RESTClient
 let page: Page
 let serverURL: string
@@ -36,8 +38,8 @@ let serverURL: string
 
 describe('fields', () => {
   beforeAll(async ({ browser }) => {
-    const config = await initPayloadE2E(__dirname)
-    serverURL = config.serverURL
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
+
     client = new RESTClient(null, { defaultSlug: 'users', serverURL })
     await client.login()
 

test/fields/lexical.e2e.spec.ts

@@ -3,20 +3,22 @@ import type { SerializedEditorState, SerializedParagraphNode, SerializedTextNode
 
 import { expect, test } from '@playwright/test'
 
+import type { Payload } from '../../packages/payload/src'
 import type { SerializedBlockNode } from '../../packages/richtext-lexical/src'
 import type { LexicalField } from './payload-types'
 
-import payload from '../../packages/payload/src'
 import { initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
 import { RESTClient } from '../helpers/rest'
 import { lexicalDocData } from './collections/Lexical/data'
+import config from './config'
 import { clearAndSeedEverything } from './seed'
 import { lexicalFieldsSlug } from './slugs'
 
 const { beforeAll, describe, beforeEach } = test
 
+let payload: Payload
 let client: RESTClient
 let page: Page
 let serverURL: string
@@ -35,8 +37,7 @@ async function navigateToLexicalFields() {
 
 describe('lexical', () => {
   beforeAll(async ({ browser }) => {
-    const config = await initPayloadE2E(__dirname)
-    serverURL = config.serverURL
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
     client = new RESTClient(null, { serverURL, defaultSlug: 'rich-text-fields' })
     await client.login()
 

test/helpers/configHelpers.ts

@@ -1,6 +1,5 @@
 import getPort from 'get-port'
 import path from 'path'
-import shelljs from 'shelljs'
 
 import type { Payload } from '../../packages/payload/src'
 import type { SanitizedConfig } from '../../packages/payload/src/config/types'
@@ -10,12 +9,14 @@ import { bootAdminPanel } from './bootAdminPanel'
 
 type InitializedPayload = { payload: Payload; serverURL: string }
 
-export async function initPayloadE2E(
-  config: Promise<SanitizedConfig>,
-): Promise<InitializedPayload> {
-  const webpackCachePath = path.resolve(__dirname, '../../node_modules/.cache/webpack')
-  shelljs.rm('-rf', webpackCachePath)
+export async function initPayloadE2E(args: {
+  config: Promise<SanitizedConfig>
+  dirname: string
+}): Promise<InitializedPayload> {
+  const { config, dirname } = args
 
+  // process.env.TURBOPACK = '1' // Not working due to turbopack pulling in mongoose, pg
+  process.env.PAYLOAD_CONFIG_PATH = path.resolve(dirname, './config.ts')
   process.env.PAYLOAD_DROP_DATABASE = 'true'
   process.env.NODE_ENV = 'test'
 

test/live-preview/e2e.spec.ts

@@ -1,15 +1,19 @@
 import type { Page } from '@playwright/test'
+import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
 
 import { exactText, initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 import { mobileBreakpoint } from './shared'
 import { startLivePreviewDemo } from './startLivePreviewDemo'
 
 const { beforeAll, describe } = test
 
+let payload: Payload
+
 describe('Live Preview', () => {
   let page: Page
   let serverURL: string
@@ -34,9 +38,8 @@ describe('Live Preview', () => {
   }
 
   beforeAll(async ({ browser }) => {
-    const { serverURL: incomingServerURL, payload } = await initPayloadE2E(__dirname)
-    url = new AdminUrlUtil(incomingServerURL, 'pages')
-    serverURL = incomingServerURL
+    ;({ serverURL, payload } = await initPayloadE2E({ config, dirname: __dirname }))
+    url = new AdminUrlUtil(serverURL, 'pages')
     const context = await browser.newContext()
     page = await context.newPage()
 

test/localization/e2e.spec.ts

@@ -1,10 +1,10 @@
 import type { Page } from '@playwright/test'
+import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
 
 import type { LocalizedPost } from './payload-types'
 
-import payload from '../../packages/payload/src'
 import wait from '../../packages/payload/src/utilities/wait'
 import {
   changeLocale,
@@ -13,7 +13,8 @@ import {
   saveDocAndAssert,
 } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
-import { initPayloadTest } from '../helpers/configHelpers'
+import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 import {
   englishTitle,
   localizedPostsSlug,
@@ -41,15 +42,15 @@ const arabicTitle = 'arabic title'
 const description = 'description'
 
 let page: Page
+let payload: Payload
+let serverURL: string
 
 describe('Localization', () => {
   beforeAll(async ({ browser }) => {
-    const { serverURL } = await initPayloadTest({
-      __dirname,
-      init: {
-        local: false,
-      },
-    })
+    ;({ payload, serverURL } = await initPayloadE2E({
+      config,
+      dirname: __dirname,
+    }))
 
     url = new AdminUrlUtil(serverURL, localizedPostsSlug)
     urlWithRequiredLocalizedFields = new AdminUrlUtil(serverURL, withRequiredLocalizedFields)

test/plugin-seo/e2e.spec.ts

@@ -1,28 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import { expect, test } from '@playwright/test'
-
-import { AdminUrlUtil } from '../helpers/adminUrlUtil'
-import { initPayloadE2E } from '../helpers/configHelpers'
-
-const { beforeAll, describe } = test
-let url: AdminUrlUtil
-
-describe('SEO Plugin', () => {
-  beforeAll(async () => {
-    const { serverURL } = await initPayloadE2E(__dirname)
-    url = new AdminUrlUtil(serverURL, 'pages')
-  })
-
-  test('test', async () => {
-    await expect(true).toBe(true)
-  })
-
-  // it.todo('e2e: should auto-generate meta title when button is clicked')
-
-  // it.todo('e2e: should properly merge top-level tabs when `tabbedUI` is enabled')
-
-  // it.todo('e2e: should render a preview image of a mock search engine result')
-
-  // it.todo('e2e: should render the length indicator with the correct progress and color')
-})

test/refresh-permissions/GlobalViewWithRefresh.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react'
 
-import type { Props } from '../../packages/payload/src/admin/components/views/Global/types'
+import type { EditViewProps as Props } from '../../packages/ui/src'
 
-import { useAuth } from '../../packages/payload/src/admin/components/utilities/Auth'
-import DefaultGlobalView from '../../packages/payload/src/admin/components/views/Global/Default'
+import { useAuth } from '../../packages/ui/src/providers/Auth'
+import { DefaultEditView } from '../../packages/ui/src/views/Edit'
 
 const GlobalView: React.FC<Props> = (props) => {
   const { onSave } = props
@@ -16,7 +16,7 @@ const GlobalView: React.FC<Props> = (props) => {
     [onSave, refreshPermissions],
   )
 
-  return <DefaultGlobalView {...props} onSave={modifiedOnSave} />
+  return <DefaultEditView {...props} onSave={modifiedOnSave} />
 }
 
 export default GlobalView

test/refresh-permissions/e2e.spec.ts

@@ -4,6 +4,7 @@ import { expect, test } from '@playwright/test'
 
 import { closeNav, initPageConsoleErrorCatch, openNav } from '../helpers'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 
 const { beforeAll, describe } = test
 
@@ -12,7 +13,7 @@ describe('refresh-permissions', () => {
   let page: Page
 
   beforeAll(async ({ browser }) => {
-    ;({ serverURL } = await initPayloadE2E(__dirname))
+    ;({ serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
     const context = await browser.newContext()
     page = await context.newPage()
 

test/uploads/e2e.spec.ts

@@ -1,22 +1,25 @@
 import type { Page } from '@playwright/test'
+import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
 import path from 'path'
 
 import type { Media } from './payload-types'
 
-import payload from '../../packages/payload/src'
 import wait from '../../packages/payload/src/utilities/wait'
 import { initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
 import { RESTClient } from '../helpers/rest'
 import { adminThumbnailSrc } from './collections/admin-thumbnail'
+import config from './config'
 import { adminThumbnailSlug, audioSlug, mediaSlug, relationSlug } from './shared'
 
 const { beforeAll, describe } = test
 
+let payload: Payload
 let client: RESTClient
+let serverURL: string
 let mediaURL: AdminUrlUtil
 let audioURL: AdminUrlUtil
 let relationURL: AdminUrlUtil
@@ -28,7 +31,7 @@ describe('uploads', () => {
   let audioDoc: Media
 
   beforeAll(async ({ browser }) => {
-    const { serverURL } = await initPayloadE2E(__dirname)
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
     client = new RESTClient(null, { serverURL, defaultSlug: 'users' })
     await client.login()
 

test/versions/collections/Drafts.ts

@@ -1,6 +1,6 @@
 import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
 
-import { extractTranslations } from 'payload/dist/translations-new/extractTranslations'
+import { extractTranslations } from '../../../packages/payload/src/translations/extractTranslations'
 import CollectionVersionButton from '../elements/CollectionVersionButton'
 import CollectionVersionsButton from '../elements/CollectionVersionsButton'
 import { CustomPublishButton } from '../elements/CustomSaveButton'

test/versions/e2e.spec.ts

@@ -24,10 +24,10 @@
  */
 
 import type { Page } from '@playwright/test'
+import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
 
-import payload from '../../packages/payload/src'
 import wait from '../../packages/payload/src/utilities/wait'
 import { globalSlug } from '../admin/slugs'
 import {
@@ -39,6 +39,7 @@ import {
 } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
+import config from './config'
 import { clearAndSeedEverything } from './seed'
 import { titleToDelete } from './shared'
 import {
@@ -52,6 +53,8 @@ import {
 
 const { beforeAll, beforeEach, describe } = test
 
+let payload: Payload
+
 describe('versions', () => {
   let page: Page
   let url: AdminUrlUtil
@@ -60,8 +63,7 @@ describe('versions', () => {
   let disablePublishURL: AdminUrlUtil
 
   beforeAll(async ({ browser }) => {
-    const config = await initPayloadE2E(__dirname)
-    serverURL = config.serverURL
+    ;({ payload, serverURL } = await initPayloadE2E({ config, dirname: __dirname }))
     const context = await browser.newContext()
     page = await context.newPage()