E2E Tests: Update Multi Entity Saving test to improve reliability (#3…

…7139)

* Add docs

* Add explanatory comment in the before/after all functions

* Add changelog entry for e2e-test-utils

packages/e2e-test-utils/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Added `getOption` and `setOption` functions to make it easier to set and reset options such as the site title and site tagline ([#37139](https://github.com/WordPress/gutenberg/pull/37139)).
+
 ### Breaking Changes
 
 -   The peer `puppeteer` dependency has been replaced with `puppeteer-core` requiring version `>=11` (see [Breaking Changes](https://github.com/puppeteer/puppeteer/releases/tag/v11.0.0), [#36040](https://github.com/WordPress/gutenberg/pull/36040)).

packages/e2e-test-utils/README.md

@@ -363,6 +363,18 @@ _Returns_
 
 -   `Promise`: Promise resolving with post content markup.
 
+### getOption
+
+Returns a site option, from the options admin page.
+
+_Parameters_
+
+-   _setting_ `string`: The option, used to get the option by id.
+
+_Returns_
+
+-   `string`: The value of the option.
+
 ### getPageError
 
 Returns a promise resolving to one of either a string or null. A string will
@@ -633,6 +645,15 @@ _Parameters_
 -   _$1.plainText_ `string`: Plain text to set.
 -   _$1.html_ `string`: HTML to set.
 
+### setOption
+
+Sets a site option, from the options-general admin page.
+
+_Parameters_
+
+-   _setting_ `string`: The option, used to get the option by id.
+-   _value_ `string`: The value to set the option to.
+
 ### setPostContent
 
 Sets code editor content

packages/e2e-test-utils/src/get-option.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { switchUserToAdmin } from './switch-user-to-admin';
+import { visitAdminPage } from './visit-admin-page';
+import { switchUserToTest } from './switch-user-to-test';
+
+/**
+ * Returns a site option, from the options admin page.
+ *
+ * @param {string} setting The option, used to get the option by id.
+ * @return {string} The value of the option.
+ */
+export async function getOption( setting ) {
+	await switchUserToAdmin();
+	await visitAdminPage( 'options.php' );
+
+	const value = await page.$eval(
+		`#${ setting }`,
+		( element ) => element.value
+	);
+	await switchUserToTest();
+	return value;
+}

packages/e2e-test-utils/src/index.js

@@ -38,6 +38,7 @@ export { getEditedPostContent } from './get-edited-post-content';
 export { getCurrentPostContent } from './get-current-post-content';
 export { hasBlockSwitcher } from './has-block-switcher';
 export { getPageError } from './get-page-error';
+export { getOption } from './get-option';
 export {
 	insertBlock,
 	insertPattern,
@@ -74,6 +75,7 @@ export { publishPostWithPrePublishChecksDisabled } from './publish-post-with-pre
 export { saveDraft } from './save-draft';
 export { selectBlockByClientId } from './select-block-by-client-id';
 export { setBrowserViewport } from './set-browser-viewport';
+export { setOption } from './set-option';
 export { setPostContent } from './set-post-content';
 export { switchEditorModeTo } from './switch-editor-mode-to';
 export { switchUserToAdmin } from './switch-user-to-admin';

packages/e2e-test-utils/src/set-option.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { switchUserToAdmin } from './switch-user-to-admin';
+import { visitAdminPage } from './visit-admin-page';
+import { switchUserToTest } from './switch-user-to-test';
+import { pressKeyWithModifier } from './press-key-with-modifier';
+
+/**
+ * Sets a site option, from the options-general admin page.
+ *
+ * @param {string} setting The option, used to get the option by id.
+ * @param {string} value   The value to set the option to.
+ */
+export async function setOption( setting, value ) {
+	await switchUserToAdmin();
+	await visitAdminPage( 'options-general.php' );
+
+	await page.focus( `#${ setting }` );
+	await pressKeyWithModifier( 'primary', 'a' );
+	await page.type( `#${ setting }`, value );
+
+	await Promise.all( [
+		page.click( '#submit' ),
+		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+	] );
+
+	await switchUserToTest();
+}

packages/e2e-tests/specs/editor/blocks/site-title.test.js

@@ -5,42 +5,13 @@ import {
 	createNewPost,
 	createUser,
 	deleteUser,
+	getOption,
 	insertBlock,
 	loginUser,
 	pressKeyWithModifier,
-	switchUserToAdmin,
-	switchUserToTest,
-	visitAdminPage,
+	setOption,
 } from '@wordpress/e2e-test-utils';
 
-async function getOption( setting ) {
-	await switchUserToAdmin();
-	await visitAdminPage( 'options.php' );
-
-	const value = await page.$eval(
-		`#${ setting }`,
-		( element ) => element.value
-	);
-	await switchUserToTest();
-	return value;
-}
-
-async function setOption( setting, value ) {
-	await switchUserToAdmin();
-	await visitAdminPage( 'options-general.php' );
-
-	await page.focus( `#${ setting }` );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.type( `#${ setting }`, value );
-
-	await Promise.all( [
-		page.click( '#submit' ),
-		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
-	] );
-
-	await switchUserToTest();
-}
-
 const saveEntities = async () => {
 	const savePostSelector = '.editor-post-publish-button__button';
 	const savePanelSelector = '.entities-saved-states__panel';

packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js

@@ -4,8 +4,10 @@
 import {
 	createNewPost,
 	disablePrePublishChecks,
+	getOption,
 	insertBlock,
 	publishPost,
+	setOption,
 	trashAllPosts,
 	activateTheme,
 	clickButton,
@@ -44,14 +46,25 @@ describe( 'Multi-entity save flow', () => {
 		}
 	};
 
+	let originalSiteTitle, originalBlogDescription;
+
 	beforeAll( async () => {
 		await activateTheme( 'tt1-blocks' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
+
+		// Get the current Site Title and Site Tagline, so that we can reset
+		// them back to the original values once the test suite has finished.
+		originalSiteTitle = await getOption( 'blogname' );
+		originalBlogDescription = await getOption( 'blogdescription' );
 	} );
 
 	afterAll( async () => {
 		await activateTheme( 'twentytwentyone' );
+
+		// Reset the Site Title and Site Tagline back to their original values.
+		await setOption( 'blogname', originalSiteTitle );
+		await setOption( 'blogdescription', originalBlogDescription );
 	} );
 
 	describe( 'Post Editor', () => {
@@ -185,7 +198,9 @@ describe( 'Multi-entity save flow', () => {
 
 			await insertBlock( 'Site Title' );
 			// Ensure title is retrieved before typing.
-			await page.waitForXPath( '//a[contains(text(), "gutenberg")]' );
+			await page.waitForXPath(
+				`//a[contains(text(), "${ originalSiteTitle }")]`
+			);
 			const editableSiteTitleSelector =
 				'.wp-block-site-title a[contenteditable="true"]';
 			await page.waitForSelector( editableSiteTitleSelector );
@@ -211,23 +226,16 @@ describe( 'Multi-entity save flow', () => {
 			await checkboxInputs[ 1 ].click();
 			await page.click( entitiesSaveSelector );
 
+			// Wait for the snackbar notice that the post has been published.
+			await page.waitForSelector( '.components-snackbar' );
+
 			await clickButton( 'Update…' );
 			await page.waitForSelector( savePanelSelector );
+
+			await page.waitForSelector( checkboxInputSelector );
 			checkboxInputs = await page.$$( checkboxInputSelector );
-			expect( checkboxInputs ).toHaveLength( 1 );
 
-			// Reset site entity to default value to not affect other tests.
-			await page.evaluate( () => {
-				wp.data
-					.dispatch( 'core' )
-					.editEntityRecord( 'root', 'site', undefined, {
-						title: 'gutenberg',
-						description: 'Just another WordPress site',
-					} );
-				wp.data
-					.dispatch( 'core' )
-					.saveEditedEntityRecord( 'root', 'site', undefined );
-			} );
+			expect( checkboxInputs ).toHaveLength( 1 );
 		} );
 	} );