feat(templates): added int and e2e tests to blank and website templates (#12866)

This PR adds int tests with vitest and e2e tests with playwright
directly into our templates.

The following are also updated:
- bumps core turbo to 2.5.4 in monorepo
- blank and website templates moved up to be part of the monorepo
workspace
- this means we now have thes templates filtered out in pnpm commands in
package.json
- they will now by default use workspace packages which we can use for
manual testing and int and e2e tests
  - note that turbo doesnt work with these for dev in monorepo context
- CPA script will fetch latest version and then replace `workspace:*` or
the pinned version in the package.json before installation
- blank template no longer uses _template as a base, this is to simplify
management for workspace
- updated the generate template variations script

Author: paulpopus

.github/workflows/main.yml

@@ -523,24 +523,30 @@ jobs:
       #     report-tag: ${{ matrix.suite }}
       #     job-summary: true
 
-  # Build listed templates with packed local packages
-  build-templates:
+  # Build listed templates with packed local packages and then runs their int and e2e tests
+  build-and-test-templates:
     runs-on: ubuntu-24.04
     needs: build
     strategy:
+      fail-fast: false
       matrix:
         include:
           - template: blank
             database: mongodb
+
           - template: website
             database: mongodb
+
           - template: with-payload-cloud
             database: mongodb
+
           - template: with-vercel-mongodb
             database: mongodb
+
           # Postgres
           - template: with-postgres
             database: postgres
+
           - template: with-vercel-postgres
             database: postgres
 
@@ -615,6 +621,45 @@ jobs:
         env:
           NODE_OPTIONS: --max-old-space-size=8096
 
+      - name: Store Playwright's Version
+        run: |
+          # Extract the version number using a more targeted regex pattern with awk
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --depth=0 | awk '/@playwright\/test/ {print $2}')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Setup Playwright - Browsers and Dependencies
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Setup Playwright - Dependencies-only
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps chromium
+
+      - name: Runs Template Int Tests
+        run: pnpm --filter ${{ matrix.template }} run test:int
+        env:
+          NODE_OPTIONS: --max-old-space-size=8096
+          PAYLOAD_DATABASE: ${{ matrix.database }}
+          POSTGRES_URL: ${{ env.POSTGRES_URL }}
+          MONGODB_URL: mongodb://localhost:27017/payloadtests
+
+      - name: Runs Template E2E Tests
+        run: PLAYWRIGHT_JSON_OUTPUT_NAME=results_${{ matrix.template }}.json pnpm --filter ${{ matrix.template }} test:e2e
+        env:
+          NODE_OPTIONS: --max-old-space-size=8096
+          PAYLOAD_DATABASE: ${{ matrix.database }}
+          POSTGRES_URL: ${{ env.POSTGRES_URL }}
+          MONGODB_URL: mongodb://localhost:27017/payloadtests
+          NEXT_TELEMETRY_DISABLED: 1
+
   tests-type-generation:
     runs-on: ubuntu-24.04
     needs: [changes, build]
@@ -650,7 +695,7 @@ jobs:
     needs:
       - lint
       - build
-      - build-templates
+      - build-and-test-templates
       - tests-unit
       - tests-int
       - tests-e2e

docs/plugins/sentry.mdx

@@ -75,9 +75,7 @@ import * as Sentry from '@sentry/nextjs'
 const config = buildConfig({
   collections: [Pages, Media],
   plugins: [
-    sentryPlugin({
-      Sentry,
-    }),
+    sentryPlugin({ Sentry })
   ],
 })
 
@@ -101,7 +99,7 @@ export default buildConfig({
     pg, // Inject the patched pg driver for Sentry instrumentation
   }),
   plugins: [
-    sentryPlugin({ Sentry }),
+    sentryPlugin({ Sentry })
   ],
 })
 ```

examples/astro/website/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "website",
+  "name": "astro-website",
   "version": "0.0.1",
   "type": "module",
   "scripts": {

package.json

@@ -11,11 +11,11 @@
     "bf": "pnpm run build:force",
     "build": "pnpm run build:core",
     "build:admin-bar": "turbo build --filter \"@payloadcms/admin-bar\"",
-    "build:all": "turbo build",
+    "build:all": "turbo build --filter \"!blank\" --filter \"!website\"",
     "build:app": "next build",
     "build:app:analyze": "cross-env ANALYZE=true next build",
     "build:clean": "pnpm clean:build",
-    "build:core": "turbo build --filter \"!@payloadcms/plugin-*\" --filter \"!@payloadcms/storage-*\"",
+    "build:core": "turbo build --filter \"!@payloadcms/plugin-*\" --filter \"!@payloadcms/storage-*\" --filter \"!blank\" --filter \"!website\"",
     "build:core:force": "pnpm clean:build && pnpm build:core --no-cache --force",
     "build:create-payload-app": "turbo build --filter create-payload-app",
     "build:db-mongodb": "turbo build --filter \"@payloadcms/db-mongodb\"",
@@ -79,9 +79,9 @@
     "docker:start": "docker compose -f test/docker-compose.yml up -d",
     "docker:stop": "docker compose -f test/docker-compose.yml down",
     "force:build": "pnpm run build:core:force",
-    "lint": "turbo run lint --log-order=grouped --continue",
+    "lint": "turbo run lint --log-order=grouped --continue --filter \"!blank\" --filter \"!website\"",
     "lint-staged": "lint-staged",
-    "lint:fix": "turbo run lint:fix --log-order=grouped --continue",
+    "lint:fix": "turbo run lint:fix --log-order=grouped --continue --filter \"!blank\" --filter \"!website\"",
     "obliterate-playwright-cache-macos": "rm -rf ~/Library/Caches/ms-playwright && find /System/Volumes/Data/private/var/folders -type d -name 'playwright*' -exec rm -rf {} +",
     "prepare": "husky",
     "prepare-run-test-against-prod": "pnpm bf && rm -rf test/packed && rm -rf test/node_modules && rm -rf app && rm -f test/pnpm-lock.yaml && pnpm run script:pack --all --no-build --dest test/packed && pnpm runts test/setupProd.ts && cd test && pnpm i --ignore-workspace && cd ..",
@@ -181,7 +181,7 @@
     "tempy": "1.0.1",
     "tstyche": "^3.1.1",
     "tsx": "4.19.2",
-    "turbo": "^2.3.3",
+    "turbo": "^2.5.4",
     "typescript": "5.7.3"
   },
   "packageManager": "[email protected]",

packages/create-payload-app/src/lib/create-project.spec.ts

@@ -7,7 +7,7 @@ import path from 'path'
 
 import type { CliArgs, DbType, ProjectExample, ProjectTemplate } from '../types.js'
 
-import { createProject } from './create-project.js'
+import { createProject, updatePackageJSONDependencies } from './create-project.js'
 import { dbReplacements } from './replacements.js'
 import { getValidTemplates } from './templates.js'
 
@@ -179,5 +179,37 @@ describe('createProject', () => {
         expect(content).toContain(dbReplacement.configReplacement().join('\n'))
       })
     })
+
+    describe('updates package.json', () => {
+      it('updates package name and bumps workspace versions', async () => {
+        const latestVersion = '3.0.0'
+        const initialJSON = {
+          name: 'test-project',
+          version: '1.0.0',
+          dependencies: {
+            '@payloadcms/db-mongodb': 'workspace:*',
+            payload: 'workspace:*',
+            '@payloadcms/ui': 'workspace:*',
+          },
+        }
+
+        const correctlyModifiedJSON = {
+          name: 'test-project',
+          version: '1.0.0',
+          dependencies: {
+            '@payloadcms/db-mongodb': `${latestVersion}`,
+            payload: `${latestVersion}`,
+            '@payloadcms/ui': `${latestVersion}`,
+          },
+        }
+
+        updatePackageJSONDependencies({
+          latestVersion,
+          packageJson: initialJSON,
+        })
+
+        expect(initialJSON).toEqual(correctlyModifiedJSON)
+      })
+    })
   })
 })

packages/create-payload-app/src/lib/create-project.ts

@@ -129,7 +129,11 @@ export async function createProject(
   const spinner = p.spinner()
   spinner.start('Checking latest Payload version...')
 
-  await updatePackageJSON({ projectDir, projectName })
+  const payloadVersion = await getLatestPackageVersion({ packageName: 'payload' })
+
+  spinner.stop(`Found latest version of Payload ${payloadVersion}`)
+
+  await updatePackageJSON({ latestVersion: payloadVersion, projectDir, projectName })
 
   if ('template' in args) {
     if (args.template.type === 'plugin') {
@@ -177,17 +181,105 @@ export async function createProject(
   }
 }
 
+/**
+ * Reads the package.json file into an object and then does the following:
+ * - Sets the `name` property to the provided `projectName`.
+ * - Bumps the payload packages from workspace:* to the latest version.
+ * - Writes the updated object back to the package.json file.
+ */
 export async function updatePackageJSON(args: {
+  /**
+   * The latest version of Payload to use in the package.json.
+   */
+  latestVersion: string
   projectDir: string
+  /**
+   * The name of the project to set in package.json.
+   */
   projectName: string
 }): Promise<void> {
-  const { projectDir, projectName } = args
+  const { latestVersion, projectDir, projectName } = args
   const packageJsonPath = path.resolve(projectDir, 'package.json')
   try {
     const packageObj = await fse.readJson(packageJsonPath)
     packageObj.name = projectName
+
+    updatePackageJSONDependencies({
+      latestVersion,
+      packageJson: packageObj,
+    })
+
     await fse.writeJson(packageJsonPath, packageObj, { spaces: 2 })
   } catch (err: unknown) {
     warning(`Unable to update name in package.json. ${err instanceof Error ? err.message : ''}`)
   }
 }
+
+/**
+ * Recursively updates a JSON object to replace all instances of `workspace:` with the latest version pinned.
+ *
+ * Does not return and instead modifies the `packageJson` object in place.
+ */
+export function updatePackageJSONDependencies(args: {
+  latestVersion: string
+  packageJson: Record<string, unknown>
+}): void {
+  const { latestVersion, packageJson } = args
+
+  const updatedDependencies = Object.entries(packageJson.dependencies || {}).reduce(
+    (acc, [key, value]) => {
+      if (typeof value === 'string' && value.startsWith('workspace:')) {
+        acc[key] = `${latestVersion}`
+      } else if (key === 'payload' || key.startsWith('@payloadcms')) {
+        acc[key] = `${latestVersion}`
+      } else {
+        acc[key] = value
+      }
+      return acc
+    },
+    {} as Record<string, string>,
+  )
+  packageJson.dependencies = updatedDependencies
+}
+
+/**
+ * Fetches the latest version of a package from the NPM registry.
+ *
+ * Used in determining the latest version of Payload to use in the generated templates.
+ */
+async function getLatestPackageVersion({
+  packageName = 'payload',
+}: {
+  /**
+   * Package name to fetch the latest version for based on the NPM registry URL
+   *
+   * Eg. for `'payload'`, it will fetch the version from `https://registry.npmjs.org/payload`
+   *
+   * @default 'payload'
+   */
+  packageName?: string
+}): Promise<string> {
+  try {
+    const response = await fetch(`https://registry.npmjs.org/-/package/${packageName}/dist-tags`)
+    const data = await response.json()
+
+    // Monster chaining for type safety just checking for data.latest
+    const latestVersion =
+      data &&
+      typeof data === 'object' &&
+      'latest' in data &&
+      data.latest &&
+      typeof data.latest === 'string'
+        ? data.latest
+        : null
+
+    if (!latestVersion) {
+      throw new Error(`No latest version found for package: ${packageName}`)
+    }
+
+    return latestVersion
+  } catch (error) {
+    console.error('Error fetching Payload version:', error)
+    throw error
+  }
+}

packages/create-payload-app/src/lib/download-template.ts

@@ -17,7 +17,7 @@ export async function downloadTemplate({
 }) {
   const branchOrTag = template.url.split('#')?.[1] || 'latest'
   const url = `https://codeload.github.com/payloadcms/payload/tar.gz/${branchOrTag}`
-  const filter = `payload-${branchOrTag.replace(/^v/, '')}/templates/${template.name}/`
+  const filter = `payload-${branchOrTag.replace(/^v/, '').replaceAll('/', '-')}/templates/${template.name}/`
 
   if (debug) {
     debugLog(`Using template url: ${template.url}`)

packages/next/package.json

@@ -22,6 +22,10 @@
   ],
   "type": "module",
   "exports": {
+    "./css": {
+      "import": "./src/dummy.css",
+      "default": "./src/dummy.css"
+    },
     ".": {
       "import": "./src/index.js",
       "types": "./src/index.js",

packages/next/src/dummy.css

@@ -36,6 +36,16 @@
       "import": "./src/scss/styles.scss",
       "default": "./src/scss/styles.scss"
     },
+    "./icons/*": {
+      "import": "./src/icons/*/index.tsx",
+      "types": "./src/icons/*/index.tsx",
+      "default": "./src/icons/*/index.tsx"
+    },
+    "./elements/*": {
+      "import": "./src/elements/*/index.tsx",
+      "types": "./src/elements/*/index.tsx",
+      "default": "./src/elements/*/index.tsx"
+    },
     "./elements/RenderServerComponent": {
       "import": "./src/elements/RenderServerComponent/index.tsx",
       "types": "./src/elements/RenderServerComponent/index.tsx",