From f4acc74eeeb40fb563f8edc49927c1a4891bb9e4 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Tue, 26 Mar 2024 15:03:18 -0300
Subject: [PATCH] chore: added iframe content test for live-preview test
 (#5476)

---
 .../(pages)/[slug]/page.client.tsx             |  4 ++++
 app/live-preview/_css/app.scss                 |  4 ++++
 test/live-preview/e2e.spec.ts                  | 18 ++++++++++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/live-preview/(pages)/[slug]/page.client.tsx b/app/live-preview/(pages)/[slug]/page.client.tsx
index d44ed30fd..3abad9a7b 100644
--- a/app/live-preview/(pages)/[slug]/page.client.tsx
+++ b/app/live-preview/(pages)/[slug]/page.client.tsx
@@ -7,6 +7,7 @@ import type { Page as PageType } from '../../../../test/live-preview/payload-typ
 
 import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
 import { Blocks } from '../../_components/Blocks/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
 import { Hero } from '../../_components/Hero/index.js'
 
 export const PageClient: React.FC<{
@@ -20,6 +21,9 @@ export const PageClient: React.FC<{
 
   return (
     <React.Fragment>
+      <Gutter>
+        <h1 id="page-title">{data.title}</h1>
+      </Gutter>
       <Hero {...data?.hero} />
       <Blocks
         blocks={[
diff --git a/app/live-preview/_css/app.scss b/app/live-preview/_css/app.scss
index d0a687f3f..79c383110 100644
--- a/app/live-preview/_css/app.scss
+++ b/app/live-preview/_css/app.scss
@@ -92,6 +92,10 @@ p {
   }
 }
 
+#page-title {
+  @extend %h6;
+}
+
 ul,
 ol {
   padding-left: var(--base);
diff --git a/test/live-preview/e2e.spec.ts b/test/live-preview/e2e.spec.ts
index e83daff8f..d46874257 100644
--- a/test/live-preview/e2e.spec.ts
+++ b/test/live-preview/e2e.spec.ts
@@ -85,11 +85,25 @@ describe('Live Preview', () => {
     await expect(iframe).toBeVisible()
   })
 
-  test('collection - can edit fields', async () => {
+  test('collection - can edit fields and can preview updated value', async () => {
     await goToCollectionPreview(page)
+    const titleValue = 'Title 1'
     const field = page.locator('#field-title')
+    const frame = page.frameLocator('iframe.live-preview-iframe').first()
+
     await expect(field).toBeVisible()
-    await field.fill('Title 1')
+
+    // Forces the test to wait for the nextjs route to render before we try editing a field
+    await expect(() => expect(frame.locator('#page-title')).toBeVisible()).toPass({
+      timeout: 45000,
+    })
+
+    await field.fill(titleValue)
+
+    await expect(() => expect(frame.locator('#page-title')).toHaveText(titleValue)).toPass({
+      timeout: 45000,
+    })
+
     await saveDocAndAssert(page)
   })