From 81c91c81ab5f95d06833ab9136864a6932f68b82 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 14 Nov 2023 11:50:53 +1100
Subject: [PATCH] This PR adds a follow up E2E test for
 https://github.com/WordPress/gutenberg/pull/52674 It also adds an aria label
 to the edit template button to indicate its state (pressed or not pressed).

---
 .../page-panels/edit-template.js              |  1 +
 .../sidebar-edit-mode/page-panels/style.scss  |  6 ++
 test/e2e/specs/site-editor/pages.spec.js      | 98 +++++++++++++++++++
 3 files changed, 105 insertions(+)

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
index 8067453a51821..fde2b63d6e833 100644
--- 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
index e1a8e4acb7227..64d72db4e15fd 100644
--- 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
index d1f32b9f209d7..5b7567dd4dffa 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -136,6 +136,103 @@ test.describe( 'Pages', () => {
 			)
 		).toBeVisible();
 	} );
+
+	test( 'toggle template preview', async ( { page, editor } ) => {
+		await draftNewPage( page );
+		await editor.openDocumentSettingsSidebar();
+
+		// Header template area and page content are visible.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+		).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.
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Group',
+				} )
+				.getByRole( 'document', {
+					name: 'Block: Content',
+				} )
+		).toBeVisible();
+		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(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+		).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Title',
+			} )
+		).toBeVisible();
+	} );
+
 	test( 'swap template and reset to default', async ( {
 		admin,
 		page,
@@ -195,6 +292,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,