From 8ec240a24f72c9207f152af0da76241496a7cfbd Mon Sep 17 00:00:00 2001
From: tbradsha <32492176+tbradsha@users.noreply.github.com>
Date: Fri, 29 Mar 2024 12:22:59 -0600
Subject: [PATCH] Fix E2E test that opens page template (#89057)

---
 .../full-side-editor-data-views-component.ts  | 35 +++++++++++++++++++
 .../calypso-e2e/src/lib/components/index.ts   |  1 +
 .../src/lib/pages/full-site-editor-page.ts    | 13 +++++++
 test/e2e/specs/fse/fse__temp-smoke-test.ts    |  3 +-
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/calypso-e2e/src/lib/components/full-side-editor-data-views-component.ts

diff --git a/packages/calypso-e2e/src/lib/components/full-side-editor-data-views-component.ts b/packages/calypso-e2e/src/lib/components/full-side-editor-data-views-component.ts
new file mode 100644
index 0000000000000..008152273c8d2
--- /dev/null
+++ b/packages/calypso-e2e/src/lib/components/full-side-editor-data-views-component.ts
@@ -0,0 +1,35 @@
+import { Page } from 'playwright';
+import { EditorComponent } from './editor-component';
+
+const selectors = {
+	primaryFieldByText: ( primaryFieldText: string ) =>
+		`.dataviews-view-table__primary-field:has-text("${ primaryFieldText }")`,
+};
+
+/**
+ * Represents an instance of the WordPress.com FSE Editor's DataViews.
+ * This is used for data layouts (e.g. tables, grids, and lists).
+ */
+export class FullSiteEditorDataViewsComponent {
+	private page: Page;
+	private editor: EditorComponent;
+
+	/**
+	 * Constructs an instance of the component.
+	 *
+	 * @param {Page} page The underlying page.
+	 * @param {EditorComponent} editor The EditorComponent instance.
+	 */
+	constructor( page: Page, editor: EditorComponent ) {
+		this.page = page;
+		this.editor = editor;
+	}
+
+	/**
+	 * Clicks on a button with the exact name.
+	 */
+	async clickPrimaryFieldByExactText( primaryFieldText: string ): Promise< void > {
+		const editorParent = await this.editor.parent();
+		await editorParent.locator( selectors.primaryFieldByText( primaryFieldText ) ).click();
+	}
+}
diff --git a/packages/calypso-e2e/src/lib/components/index.ts b/packages/calypso-e2e/src/lib/components/index.ts
index e900b717b804f..da334c11f3d90 100644
--- a/packages/calypso-e2e/src/lib/components/index.ts
+++ b/packages/calypso-e2e/src/lib/components/index.ts
@@ -34,6 +34,7 @@ export * from './editor-block-toolbar-component';
 export * from './template-part-list-component';
 export * from './template-part-modal-component';
 export * from './full-side-editor-nav-sidebar-component';
+export * from './full-side-editor-data-views-component';
 export * from './editor-dimensions-component';
 export * from './jetpack-instant-search-modal-component';
 
diff --git a/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts b/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts
index 291cecd6074ec..78e0cd3722bb5 100644
--- a/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts
+++ b/packages/calypso-e2e/src/lib/pages/full-site-editor-page.ts
@@ -15,6 +15,7 @@ import {
 	BlockToolbarButtonIdentifier,
 	TemplatePartListComponent,
 	FullSiteEditorNavSidebarComponent,
+	FullSiteEditorDataViewsComponent,
 	TemplatePartModalComponent,
 	OpenInlineInserter,
 	EditorInlineBlockInserterComponent,
@@ -56,6 +57,7 @@ export class FullSiteEditorPage {
 	private editorBlockToolbarComponent: EditorBlockToolbarComponent;
 	private fullSiteEditorSavePanelComponent: FullSiteEditorSavePanelComponent;
 	private fullSiteEditorNavSidebarComponent: FullSiteEditorNavSidebarComponent;
+	private fullSiteEditorDataViewsComponent: FullSiteEditorDataViewsComponent;
 	private templatePartModalComponent: TemplatePartModalComponent;
 	private templatePartListComponent: TemplatePartListComponent;
 	private cookieBannerComponent: CookieBannerComponent;
@@ -79,6 +81,10 @@ export class FullSiteEditorPage {
 			page,
 			this.editor
 		);
+		this.fullSiteEditorDataViewsComponent = new FullSiteEditorDataViewsComponent(
+			page,
+			this.editor
+		);
 		this.editorSidebarBlockInserterComponent = new EditorSidebarBlockInserterComponent(
 			page,
 			this.editor
@@ -167,6 +173,13 @@ export class FullSiteEditorPage {
 		await this.fullSiteEditorNavSidebarComponent.clickNavButtonByExactText( text );
 	}
 
+	/**
+	 * Clicks DataViews primary field to open editor.
+	 */
+	async openTemplateEditor( text: string ): Promise< void > {
+		await this.fullSiteEditorDataViewsComponent.clickPrimaryFieldByExactText( text );
+	}
+
 	/**
 	 * Ensures the nav sidebar is at the top level ("Design")
 	 */
diff --git a/test/e2e/specs/fse/fse__temp-smoke-test.ts b/test/e2e/specs/fse/fse__temp-smoke-test.ts
index b934080695a66..fb204197807ab 100644
--- a/test/e2e/specs/fse/fse__temp-smoke-test.ts
+++ b/test/e2e/specs/fse/fse__temp-smoke-test.ts
@@ -103,8 +103,7 @@ describe( DataHelper.createSuiteTitle( 'Site Editor Smoke Test' ), function () {
 
 		await fullSiteEditorPage.ensureNavigationTopLevel();
 		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Templates' );
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Index' );
-		await fullSiteEditorPage.clickFullSiteNavigatorButton( 'Edit' );
+		await fullSiteEditorPage.openTemplateEditor( 'Index' );
 	} );
 
 	it( 'Editor canvas loads', async function () {