diff --git a/packages/e2e-test-utils-playwright/src/page/index.ts b/packages/e2e-test-utils-playwright/src/page/index.ts index bdf9e22c48d86..0e83e389fb35a 100644 --- a/packages/e2e-test-utils-playwright/src/page/index.ts +++ b/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; diff --git a/packages/e2e-test-utils-playwright/src/page/site-editor.ts b/packages/e2e-test-utils-playwright/src/page/site-editor.ts new file mode 100644 index 0000000000000..db05af31b3d89 --- /dev/null +++ b/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 ); + } ); + } +} diff --git a/packages/e2e-tests/specs/site-editor/document-settings.test.js b/packages/e2e-tests/specs/site-editor/document-settings.test.js deleted file mode 100644 index f4ce8ad727567..0000000000000 --- a/packages/e2e-tests/specs/site-editor/document-settings.test.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * WordPress dependencies - */ -import { - deleteAllTemplates, - activateTheme, - visitSiteEditor, -} from '@wordpress/e2e-test-utils'; - -async function getDocumentSettingsTitle() { - const titleElement = await page.waitForSelector( - '.edit-site-document-actions__title' - ); - - return titleElement.evaluate( ( el ) => el.textContent ); -} - -async function getDocumentSettingsSecondaryTitle() { - const secondaryTitleElement = await page.waitForSelector( - '.edit-site-document-actions__secondary-item' - ); - - return secondaryTitleElement.evaluate( ( el ) => el.textContent ); -} - -describe( 'Document Settings', () => { - beforeAll( async () => { - await activateTheme( 'emptytheme' ); - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - afterAll( async () => { - await activateTheme( 'twentytwentyone' ); - } ); - - beforeEach( async () => { - await visitSiteEditor(); - } ); - - describe( 'when a template is selected from the navigation sidebar', () => { - it( 'should display the selected templates name in the document header', async () => { - // Navigate to a template. - await visitSiteEditor( { - postId: 'emptytheme//index', - postType: 'wp_template', - } ); - - // Evaluate the document settings title. - const actual = await getDocumentSettingsTitle(); - - expect( actual ).toEqual( 'Editing template: Index' ); - } ); - - describe( 'and a template part is clicked in the template', () => { - it.skip( "should display the selected template part's name in the document header", async () => { - // Select the header template part via list view. - await page.click( - '.edit-post-header-toolbar__list-view-toggle' - ); - const headerTemplatePartListViewButton = await page.waitForXPath( - '//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]' - ); - headerTemplatePartListViewButton.click(); - await page.click( - 'button[aria-label="Close List View Sidebar"]' - ); - - // Evaluate the document settings secondary title. - const actual = await getDocumentSettingsSecondaryTitle(); - - expect( actual ).toEqual( 'Editing template part: header' ); - } ); - } ); - } ); - - describe( 'when a template part is selected from the navigation sidebar', () => { - it( "should display the selected template part's name in the document header", async () => { - // Navigate to a template part. - await visitSiteEditor( { - postId: 'emptytheme//header', - postType: 'wp_template_part', - } ); - - // Evaluate the document settings title. - const actual = await getDocumentSettingsTitle(); - - expect( actual ).toEqual( 'Editing template part: header' ); - } ); - } ); -} ); diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js new file mode 100644 index 0000000000000..658f38129fd40 --- /dev/null +++ b/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' ); + } ); +} );