Migrate document settings test to playwright (#40258)

* Add ported version of site editor document settings test

* Delete old puppeteer test

* Fix test title, not a template part being tested

* Use the spec suffix

* Rename test description

* Remove the EditorTitle utility class

* Remove unnecessary deletion of templates and template parts

* Improve selectors

* use toHaveText

* Select the iframe using its title

packages/e2e-test-utils-playwright/src/page/index.ts

@@ -21,6 +21,7 @@ import { openPreviewPage } from './preview';
 import { setBrowserViewport } from './set-browser-viewport';
 import { showBlockToolbar } from './show-block-toolbar';
 import { visitAdminPage } from './visit-admin-page';
+import { visitSiteEditor } from './site-editor';
 
 class PageUtils {
 	browser: Browser;
@@ -43,6 +44,7 @@ class PageUtils {
 	setClipboardData = setClipboardData;
 	showBlockToolbar = showBlockToolbar;
 	visitAdminPage = visitAdminPage;
+	visitSiteEditor = visitSiteEditor;
 	openDocumentSettingsSidebar = openDocumentSettingsSidebar;
 	openPreviewPage = openPreviewPage;
 	setBrowserViewport = setBrowserViewport;

packages/e2e-test-utils-playwright/src/page/site-editor.ts

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import type { PageUtils } from './index';
+
+const VISUAL_EDITOR_SELECTOR = 'iframe[title="Editor canvas"i]';
+
+interface SiteEditorQueryParams {
+	postId: string | number;
+	postType: string;
+}
+
+/**
+ * Visits the Site Editor main page
+ *
+ * By default, it also skips the welcome guide. The option can be disabled if need be.
+ *
+ * @param  this
+ * @param  query            Query params to be serialized as query portion of URL.
+ * @param  skipWelcomeGuide Whether to skip the welcome guide as part of the navigation.
+ */
+export async function visitSiteEditor(
+	this: PageUtils,
+	query: SiteEditorQueryParams,
+	skipWelcomeGuide = true
+) {
+	const path = addQueryArgs( '', {
+		page: 'gutenberg-edit-site',
+		...query,
+	} ).slice( 1 );
+
+	await this.visitAdminPage( 'themes.php', path );
+	await this.page.waitForSelector( VISUAL_EDITOR_SELECTOR );
+
+	if ( skipWelcomeGuide ) {
+		await this.page.evaluate( () => {
+			// TODO, type `window.wp`.
+			// @ts-ignore
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'core/edit-site', 'welcomeGuide', false );
+
+			// @ts-ignore
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.toggle( 'core/edit-site', 'welcomeGuideStyles', false );
+		} );
+	}
+}

test/e2e/specs/site-editor/title.spec.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor title', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'displays the selected template name in the title for the index template', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		// Navigate to a template.
+		await pageUtils.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+		} );
+
+		const title = await page.locator(
+			'role=region[name="Header"i] >> role=heading[level=1]'
+		);
+
+		await expect( title ).toHaveText( 'Editing template: Index' );
+	} );
+
+	test( 'displays the selected template name in the title for the header template', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		// Navigate to a template part.
+		await pageUtils.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+		} );
+
+		const title = await page.locator(
+			'role=region[name="Header"i] >> role=heading[level=1]'
+		);
+
+		await expect( title ).toHaveText( 'Editing template part: header' );
+	} );
+
+	test( "displays the selected template part's name in the secondary title when a template part is selected from List View", async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+		} );
+
+		// Select the header template part via list view.
+		await page.click( 'role=button[name="List View"i]' );
+		const listView = await page.locator(
+			'role=treegrid[name="Block navigation structure"i]'
+		);
+		await listView.locator( 'role=gridcell >> text="header"' ).click();
+		await page.click( 'role=button[name="Close List View Sidebar"i]' );
+
+		// Evaluate the document settings secondary title.
+		const secondaryTitle = await page.locator(
+			'.edit-site-document-actions__secondary-item'
+		);
+
+		await expect( secondaryTitle ).toHaveText( 'header' );
+	} );
+} );