From a594a0f1413f20adb3042cb646886d899a40795d Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 9 May 2023 13:04:17 +1000
Subject: [PATCH] Removing label from Apply button given that the text suffices
 Ensuring we save any unsaved changes after then unsaved changes tests to
 avoid lingering unsaved changes. Updated a typo in a non-related e2e file

---
 .../global-styles/screen-revisions/index.js   |   1 -
 test/e2e/specs/site-editor/style-book.spec.js |   2 +-
 .../user-global-styles-revisions.spec.js      | 125 +++++++++---------
 3 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index a0c7085b5f49f..92d5ae7d2bb68 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -125,7 +125,6 @@ function ScreenRevisions() {
 						<Button
 							variant="primary"
 							className="edit-site-global-styles-screen-revisions__button"
-							aria-label={ __( 'Load revision' ) }
 							disabled={
 								! globalStylesRevision?.id ||
 								globalStylesRevision?.id === 'unsaved'
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 28040d40796c8..5cdf1c2a0e59e 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -27,7 +27,7 @@ test.describe( 'Style Book', () => {
 		).toBeVisible();
 	} );
 
-	test( 'should disable toolbar butons when open', async ( { page } ) => {
+	test( 'should disable toolbar buttons when open', async ( { page } ) => {
 		await expect(
 			page.locator( 'role=button[name="Toggle block inserter"i]' )
 		).not.toBeVisible();
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index 5a5880ba7c8b5..8459d148c7f00 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -42,104 +42,86 @@ test.describe( 'Global styles revisions', () => {
 	} ) => {
 		const currentRevisions =
 			await userGlobalStylesRevisions.getGlobalStylesRevisions();
+		await userGlobalStylesRevisions.openStylesPanel();
+
+		// Change a style and save it.
+		await page.getByRole( 'button', { name: 'Colors styles' } ).click();
 
-		// Navigates to Styles -> Typography -> Text and click on a size.
 		await page
-			.getByRole( 'region', { name: 'Editor top bar' } )
-			.getByRole( 'button', { name: 'Styles' } )
+			.getByRole( 'button', { name: 'Color Background styles' } )
 			.click();
+		await page
+			.getByRole( 'button', { name: 'Color: Black' } )
+			.click( { force: true } );
+
+		await editor.saveSiteEditorEntities();
 
 		/*
-		 * There are not enough revisions to show the revisions UI yet, so let's create some.
-		 * The condition exists until we have way (and the requirement) to delete global styles revisions.
+		 * Change a style and save it again.
+		 * We need more than 2 revisions to show the UI.
 		 */
-		if ( currentRevisions.length < 1 ) {
-			// Change a style and save it.
-			await page
-				.getByRole( 'button', { name: 'Typography styles' } )
-				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Text styles' } )
-				.click();
-			await page
-				.getByRole( 'radiogroup', { name: 'Font size' } )
-				.getByRole( 'radio', { name: 'Large', exact: true } )
-				.click();
-			await editor.saveSiteEditorEntities();
-
-			// Change a style and save it again just for good luck.
-			// We need more than 2 revisions to show the UI.
-			await page
-				.getByRole( 'radiogroup', { name: 'Font size' } )
-				.getByRole( 'radio', { name: 'Medium', exact: true } )
-				.click();
-
-			await editor.saveSiteEditorEntities();
-
-			// Now there should be enough revisions to show the revisions UI.
-			await page
-				.getByRole( 'button', { name: 'Styles actions' } )
-				.click();
-			await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
-
-			const revisionButtons = page.getByRole( 'button', {
-				name: /^Changes saved by /,
-			} );
-
-			await expect( revisionButtons ).toHaveCount(
-				currentRevisions.length + 2
-			);
-		}
+		await page
+			.getByRole( 'button', { name: 'Color Background styles' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Color: Cyan bluish gray' } )
+			.click( { force: true } );
+
+		await editor.saveSiteEditorEntities();
+
+		// Now there should be enough revisions to show the revisions UI.
+		await userGlobalStylesRevisions.openRevisions();
 
-		const updatedCurrentRevisions =
-			await userGlobalStylesRevisions.getGlobalStylesRevisions();
-		// There are some revisions. Let's check that the UI looks how we expect it to.
-		await page.getByRole( 'button', { name: 'Styles actions' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
 		const revisionButtons = page.getByRole( 'button', {
 			name: /^Changes saved by /,
 		} );
 
 		await expect( revisionButtons ).toHaveCount(
-			updatedCurrentRevisions.length
+			currentRevisions.length + 2
 		);
 	} );
 
 	test( 'should warn of unsaved changes before loading reset revision', async ( {
 		page,
+		editor,
+		userGlobalStylesRevisions,
 	} ) => {
-		// Navigates to Styles -> Typography -> Text and click on a size.
-		await page
-			.getByRole( 'region', { name: 'Editor top bar' } )
-			.getByRole( 'button', { name: 'Styles' } )
-			.click();
-
+		await userGlobalStylesRevisions.openStylesPanel();
 		await page.getByRole( 'button', { name: 'Colors styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Color Background styles' } )
 			.click();
-		await page.getByRole( 'button', { name: 'Color: Black' } ).click();
-		await page.getByRole( 'button', { name: 'Styles actions' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Color: Luminous vivid amber' } )
+			.click( { force: true } );
+
+		await userGlobalStylesRevisions.openRevisions();
+
 		const unSavedButton = page.getByRole( 'button', {
 			name: /^Unsaved changes/,
 		} );
 
 		await expect( unSavedButton ).toBeVisible();
 
-		// await expect( image ).toHaveCSS( 'height', '3px' );
 		await page
 			.getByRole( 'button', { name: /^Changes saved by / } )
 			.last()
 			.click();
 
-		await page.getByRole( 'button', { name: 'Load revision' } ).click();
+		await page.getByRole( 'button', { name: 'Apply' } ).click();
 
 		const confirm = page.getByRole( 'dialog' );
 		await expect( confirm ).toBeVisible();
 		await expect( confirm ).toHaveText(
 			/^Loading this revision will discard all unsaved changes/
 		);
+
+		// This is to make sure there are no lingering unsaved changes.
+		await page
+			.getByRole( 'dialog' )
+			.getByRole( 'button', { name: 'Cancel' } )
+			.click();
+		await editor.saveSiteEditorEntities();
 	} );
 } );
 
@@ -148,6 +130,16 @@ class UserGlobalStylesRevisions {
 		this.page = page;
 		this.requestUtils = requestUtils;
 	}
+
+	async disableWelcomeGuide() {
+		// Turn off the welcome guide.
+		await this.page.evaluate( () => {
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'core/edit-site', 'welcomeGuideStyles', false );
+		} );
+	}
+
 	async getGlobalStylesRevisions() {
 		const stylesPostId =
 			await this.requestUtils.getCurrentThemeGlobalStylesPostId();
@@ -158,4 +150,19 @@ class UserGlobalStylesRevisions {
 		}
 		return [];
 	}
+
+	async openRevisions() {
+		await this.page
+			.getByRole( 'button', { name: 'Styles actions' } )
+			.click();
+		await this.page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
+	}
+
+	async openStylesPanel() {
+		await this.disableWelcomeGuide();
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+	}
 }