Site editor template preview: add E2E test and aria-pressed attribute…

… to template preview toggle (#56096) * This PR adds a follow up E2E test for #52674 It also adds an aria label to the edit template button to indicate its state (pressed or not pressed). * Refactor test to account for order of page content blocks * remove saving from tests. unnecessary to the test
WordPress · Nov 14, 2023 · b09e9bd · b09e9bd
1 parent d27ffba
commit b09e9bd
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 0 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js
@@ -114,6 +114,7 @@ export default function EditTemplate() {
 									icon={
 										! isTemplateHidden ? check : undefined
 									}
+									isPressed={ ! isTemplateHidden }
 									onClick={ () => {
 										setPageContentFocusType(
 											isTemplateHidden

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -84,6 +84,11 @@
 	.components-popover__content {
 		min-width: 240px;
 	}
+	.components-button.is-pressed,
+	.components-button.is-pressed:hover {
+		background: inherit;
+		color: inherit;
+	}
 }
 
 .edit-site-page-panels-edit-slug__dropdown {
@@ -92,3 +97,4 @@
 		padding: $grid-unit-20;
 	}
 }
+
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
@@ -136,6 +136,128 @@ test.describe( 'Pages', () => {
 			)
 		).toBeVisible();
 	} );
+
+	test( 'toggle template preview', async ( { page, editor } ) => {
+		await draftNewPage( page );
+		await editor.openDocumentSettingsSidebar();
+
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.getByRole( 'document', {
+				name: 'Empty block; start writing or type forward slash to choose a block',
+			} )
+			.click();
+
+		// Add some content to the page.
+		await page.keyboard.type( 'Sweet paragraph 1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Sweet paragraph 2' );
+
+		// Header template area and page content are visible.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeVisible();
+
+		const paragraphs = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.getByText( 'Sweet paragraph ' );
+
+		await expect( paragraphs.nth( 0 ) ).toBeVisible();
+		await expect( paragraphs.nth( 1 ) ).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Title',
+			} )
+		).toBeVisible();
+
+		// Toggle template preview to "off".
+		const templateOptionsButton = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Template options' } );
+		await templateOptionsButton.click();
+		const templatePreviewButton = page
+			.getByRole( 'menu', { name: 'Template options' } )
+			.getByRole( 'menuitem', { name: 'Template preview' } );
+
+		await expect( templatePreviewButton ).toHaveAttribute(
+			'aria-pressed',
+			'true'
+		);
+		await templatePreviewButton.click();
+		await expect( templatePreviewButton ).toHaveAttribute(
+			'aria-pressed',
+			'false'
+		);
+
+		// Header template area should be hidden.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeHidden();
+
+		// Content block is still visible and wrapped in a container.
+		const paragraphsInGroup = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Group',
+			} )
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.getByText( 'Sweet paragraph ' );
+
+		await expect( paragraphsInGroup.nth( 0 ) ).toBeVisible();
+		await expect( paragraphsInGroup.nth( 1 ) ).toBeVisible();
+		// Check order of paragraphs.
+		// Important to ensure the blocks are rendered as they are in the template.
+		await expect( paragraphsInGroup.nth( 0 ) ).toHaveText(
+			'Sweet paragraph 1'
+		);
+		await expect( paragraphsInGroup.nth( 1 ) ).toHaveText(
+			'Sweet paragraph 2'
+		);
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Group',
+				} )
+				.getByRole( 'document', {
+					name: 'Block: Title',
+				} )
+		).toBeVisible();
+
+		// Remove focus from templateOptionsButton button.
+		await editor.canvas.locator( 'body' ).click();
+
+		// Toggle template preview to "on".
+		await templateOptionsButton.click();
+		await templatePreviewButton.click();
+		await expect( templatePreviewButton ).toHaveAttribute(
+			'aria-pressed',
+			'true'
+		);
+
+		// Header template area and page content are once again visible.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeVisible();
+		await expect( paragraphs.nth( 0 ) ).toBeVisible();
+		await expect( paragraphs.nth( 1 ) ).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Title',
+			} )
+		).toBeVisible();
+	} );
+
 	test( 'swap template and reset to default', async ( {
 		admin,
 		page,
@@ -195,6 +317,7 @@ test.describe( 'Pages', () => {
 		await resetButton.click();
 		await expect( templateOptionsButton ).toHaveText( 'Single Entries' );
 	} );
+
 	test( 'swap template options should respect the declared `postTypes`', async ( {
 		page,
 		editor,