Fix controlled blocks e2e tests after template part support from post editor

packages/e2e-test-utils/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Added `createReusableBlock` function to make it easier to create a simple reusable block ([#37333](https://github.com/WordPress/gutenberg/pull/37333)).
+
 ### 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)).

packages/e2e-test-utils/README.md

@@ -161,6 +161,15 @@ _Parameters_
 -   _object.excerpt_ `[string]`: Excerpt of the new post.
 -   _object.showWelcomeGuide_ `[boolean]`: Whether to show the welcome guide.
 
+### createReusableBlock
+
+Creates a simple reusable block with a paragraph block.
+
+_Parameters_
+
+-   _content_ `string`: Paragraph block's content
+-   _title_ `title`: Reusable block's name.
+
 ### createURL
 
 Creates new URL by parsing base URL, WPPath and query string.

packages/e2e-test-utils/src/create-reusable-block.js

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { insertBlock } from './inserter';
+import { clickMenuItem } from './click-menu-item';
+import { clickBlockToolbarButton } from './click-block-toolbar-button';
+
+/**
+ * Creates a simple reusable block with a paragraph block.
+ *
+ * @param {string} content Paragraph block's content
+ * @param {title}  title   Reusable block's name.
+ */
+export const createReusableBlock = async ( content, title ) => {
+	const reusableBlockNameInputSelector =
+		'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+	// Insert a paragraph block
+	await insertBlock( 'Paragraph' );
+	await page.keyboard.type( content );
+
+	await clickBlockToolbarButton( 'Options' );
+	await clickMenuItem( 'Add to Reusable blocks' );
+	const nameInput = await page.waitForSelector(
+		reusableBlockNameInputSelector
+	);
+	await nameInput.click();
+	await page.keyboard.type( title );
+	await page.keyboard.press( 'Enter' );
+
+	// Wait for creation to finish
+	await page.waitForXPath(
+		'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
+	);
+
+	// Check that we have a reusable block on the page
+	const block = await page.waitForSelector(
+		'.block-editor-block-list__block[data-type="core/block"]'
+	);
+	expect( block ).not.toBeNull();
+};

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

@@ -15,6 +15,7 @@ export { clickMenuItem } from './click-menu-item';
 export { clickOnCloseModalButton } from './click-on-close-modal-button';
 export { clickOnMoreMenuItem } from './click-on-more-menu-item';
 export { createNewPost } from './create-new-post';
+export { createReusableBlock } from './create-reusable-block';
 export { createUser } from './create-user';
 export { createURL } from './create-url';
 export { deactivatePlugin } from './deactivate-plugin';

packages/e2e-tests/specs/editor/various/block-grouping.test.js

@@ -13,6 +13,7 @@ import {
 	getAvailableBlockTransforms,
 	activatePlugin,
 	deactivatePlugin,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 async function insertBlocksOfSameType() {
@@ -122,24 +123,7 @@ describe( 'Block Grouping', () => {
 			};
 
 			const paragraphText = 'hi';
-			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( paragraphText );
-
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Add to Reusable blocks' );
-			const nameInput = await page.waitForSelector(
-				reusableBlockNameInputSelector
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'Block' );
-			await page.keyboard.press( 'Enter' );
-
-			// Wait for creation to finish
-			await page.waitForXPath(
-				'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-			);
+			await createReusableBlock( paragraphText, 'Block' );
 			// Group
 			await clickBlockToolbarButton( 'Options' );
 			await clickMenuItem( 'Group' );

packages/e2e-tests/specs/editor/various/reusable-blocks.test.js

@@ -14,6 +14,7 @@ import {
 	toggleGlobalBlockInserter,
 	openDocumentSettingsSidebar,
 	saveDraft,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
@@ -44,32 +45,6 @@ const clearAllBlocks = async () => {
 	} );
 };
 
-const createReusableBlock = async ( content, title ) => {
-	// Insert a paragraph block
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( content );
-
-	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Add to Reusable blocks' );
-	const nameInput = await page.waitForSelector(
-		reusableBlockNameInputSelector
-	);
-	await nameInput.click();
-	await page.keyboard.type( title );
-	await page.keyboard.press( 'Enter' );
-
-	// Wait for creation to finish
-	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-	);
-
-	// Check that we have a reusable block on the page
-	const block = await page.waitForSelector(
-		'.block-editor-block-list__block[data-type="core/block"]'
-	);
-	expect( block ).not.toBeNull();
-};
-
 describe( 'Reusable blocks', () => {
 	afterAll( async () => {
 		await trashAllPosts( 'wp_block' );

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

@@ -11,6 +11,7 @@ import {
 	trashAllPosts,
 	activateTheme,
 	clickButton,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -23,13 +24,9 @@ describe( 'Multi-entity save flow', () => {
 	const checkedBoxSelector = '.components-checkbox-control__checked';
 	const checkboxInputSelector = '.components-checkbox-control__input';
 	const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
-	const templatePartSelector = '*[data-type="core/template-part"]';
-	const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
 	const savePanelSelector = '.entities-saved-states__panel';
 	const closePanelButtonSelector =
 		'.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
-	const createNewButtonSelector =
-		'//button[contains(text(), "New template part")]';
 
 	// Reusable assertions across Post/Site editors.
 	const assertAllBoxesChecked = async () => {
@@ -52,6 +49,7 @@ describe( 'Multi-entity save flow', () => {
 		await activateTheme( 'tt1-blocks' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
+		await trashAllPosts( 'wp_block' );
 
 		// 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.
@@ -79,8 +77,6 @@ describe( 'Multi-entity save flow', () => {
 		const saveA11ySelector =
 			'.edit-post-layout__toggle-entities-saved-states-panel-button';
 		const publishPanelSelector = '.editor-post-publish-panel';
-		const confirmTitleButtonSelector =
-			'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
 
 		// Reusable assertions inside Post editor.
 		const assertMultiSaveEnabled = async () => {
@@ -97,9 +93,10 @@ describe( 'Multi-entity save flow', () => {
 			expect( multiSaveButton ).toBeNull();
 		};
 
-		// Template parts can't be used in posts, so this test needs to be rebuilt using perhaps reusable blocks.
-		it.skip( 'Save flow should work as expected.', async () => {
+		it( 'Save flow should work as expected.', async () => {
+			await createNewPost();
 			// Edit the page some.
+			await page.waitForSelector( '.editor-post-title' );
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
 			await page.keyboard.press( 'Enter' );
@@ -113,21 +110,11 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( publishPanelSelector, false );
 			await assertExistance( savePanelSelector, false );
 
-			// Add a template part and edit it.
-			await insertBlock( 'Template Part' );
-			const createNewButton = await page.waitForXPath(
-				createNewButtonSelector
-			);
-			await createNewButton.click();
-			const confirmTitleButton = await page.waitForSelector(
-				confirmTitleButtonSelector
-			);
-			await confirmTitleButton.click();
-
-			await page.waitForSelector( activatedTemplatePartSelector );
-			await page.click( '.block-editor-button-block-appender' );
-			await page.click( '.editor-block-list-item-paragraph' );
-			await page.keyboard.type( 'some words...' );
+			// Add a reusable block and edit it.
+			await createReusableBlock( 'Hi!', 'Test' );
+			await page.waitForSelector( 'p[data-type="core/paragraph"]' );
+			await page.click( 'p[data-type="core/paragraph"]' );
+			await page.keyboard.type( 'Oh!' );
 
 			// Should trigger multi-entity save button once template part edited.
 			await assertMultiSaveEnabled();
@@ -191,13 +178,11 @@ describe( 'Multi-entity save flow', () => {
 			await assertMultiSaveDisabled();
 			await assertExistance( saveA11ySelector, false );
 
-			// Update template part.
-			await page.click( templatePartSelector );
-			await page.click(
-				`${ templatePartSelector } .wp-block[data-type="core/paragraph"]`
-			);
-			await page.keyboard.type( '...some more words...' );
-			await page.keyboard.press( 'Enter' );
+			// Update reusable block again.
+			await page.click( 'p[data-type="core/paragraph"]' );
+			// We need to click again due to the clickthrough overlays in reusable blocks.
+			await page.click( 'p[data-type="core/paragraph"]' );
+			await page.keyboard.type( 'R!' );
 
 			// Multi-entity saving should be enabled.
 			await assertMultiSaveEnabled();