@wordpress/e2e-tests 2.5.17 → 3.0.0

package/specs/editor/various/reusable-blocks.test.js

@@ -14,6 +14,8 @@ import {
 	toggleGlobalBlockInserter,
 	openDocumentSettingsSidebar,
 	saveDraft,
+	createReusableBlock,
+	publishPost,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
@@ -22,11 +24,22 @@ const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
 
 const saveAll = async () => {
-	await page.click( '.editor-post-publish-button__button.has-changes-dot' );
-	await page.waitForSelector(
-		'button.editor-entities-saved-states__save-button'
+	const publishButtonSelector =
+		'.editor-post-publish-button__button.has-changes-dot';
+	// Wait for the Publish button to become enabled in case the editor is autosaving ATM:
+	const publishButton = await page.waitForSelector(
+		publishButtonSelector + '[aria-disabled="false"]'
 	);
-	await page.click( 'button.editor-entities-saved-states__save-button' );
+	await publishButton.click();
+
+	const saveButtonSelector =
+		'button.editor-entities-saved-states__save-button';
+	const saveButton = await page.waitForSelector( saveButtonSelector );
+	await saveButton.click();
+};
+
+const saveAllButDontPublish = async () => {
+	await saveAll();
 
 	// no need to publish the post.
 	const cancelPublish = await page.waitForSelector(
@@ -44,32 +57,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' );
@@ -106,7 +93,7 @@ describe( 'Reusable blocks', () => {
 		await page.keyboard.type( 'Oh! ' );
 
 		// Save the reusable block
-		await saveAll();
+		await saveAllButDontPublish();
 
 		// Check that its content is up to date
 		const text = await page.$eval(
@@ -137,6 +124,41 @@ describe( 'Reusable blocks', () => {
 		expect( paragraphContent ).toMatch( 'Oh! Hello there!' );
 	} );
 
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/33072.
+	it( 'can be saved when modified inside of a published post', async () => {
+		await createReusableBlock(
+			'Guten Berg!',
+			'Alternative greeting block'
+		);
+
+		// Make sure the reusable block has loaded properly before attempting to publish the post.
+		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
+
+		await publishPost();
+
+		// Close publish panel.
+		const closePublishPanelSelector =
+			'.editor-post-publish-panel__header button[aria-label="Close panel"]';
+		await page.waitForSelector( closePublishPanelSelector );
+		await page.click( closePublishPanelSelector );
+
+		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await page.focus( 'p[aria-label="Paragraph block"]' );
+
+		// Change the block's content
+		await page.keyboard.type( 'Einen ' );
+
+		// Save the reusable block and update the post
+		await saveAll();
+
+		// Check that its content is up to date
+		const paragraphContent = await page.$eval(
+			'p[aria-label="Paragraph block"]',
+			( element ) => element.innerText
+		);
+		expect( paragraphContent ).toMatch( 'Einen Guten Berg!' );
+	} );
+
 	it( 'can be inserted after refresh', async () => {
 		await createReusableBlock( 'Awesome Paragraph', 'Awesome block' );
 

package/specs/editor/various/undo.test.js

@@ -420,4 +420,25 @@ describe( 'undo', () => {
 		// Expect "1".
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should be able to undo and redo when transient changes have been made and we update/publish', async () => {
+		// Typing consecutive characters in a `Paragraph` block updates the same
+		// block attribute as in the previous action and results in transient edits
+		// and skipping `undo` history steps.
+		const text = 'tonis';
+		await clickBlockAppender();
+		await page.keyboard.type( text );
+		await publishPost();
+		await pressKeyWithModifier( 'primary', 'z' );
+		expect( await getEditedPostContent() ).toBe( '' );
+		await page.waitForSelector(
+			'.editor-history__redo[aria-disabled="false"]'
+		);
+		await page.click( '.editor-history__redo[aria-disabled="false"]' );
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>tonis</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );

package/specs/editor/various/writing-flow.test.js

@@ -45,9 +45,11 @@ const addParagraphsAndColumnsDemo = async () => {
 	await page.keyboard.press( 'Enter' ); // Insert paragraph.
 	await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
 
-	// Arrow down from last of layouts exits nested context to default
-	// appender of root level.
-	await page.keyboard.press( 'ArrowDown' );
+	await page.keyboard.press( 'Escape' ); // Enter navigation mode
+	await page.keyboard.press( 'ArrowLeft' ); // move to the column block
+	await page.keyboard.press( 'ArrowLeft' ); // move to the columns block
+	await page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected
+	await page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 	await page.keyboard.type( 'Second paragraph' );
 };
 
@@ -289,6 +291,8 @@ describe( 'Writing Flow', () => {
 		// See: https://github.com/WordPress/gutenberg/issues/9626
 
 		await insertBlock( 'Shortcode' );
+		await insertBlock( 'Paragraph' );
+		await await page.click( '.wp-block-shortcode' );
 
 		// Should remain in title upon ArrowRight:
 		await page.keyboard.press( 'ArrowRight' );
@@ -304,7 +308,7 @@ describe( 'Writing Flow', () => {
 		);
 		expect( isInShortcodeBlock ).toBe( true );
 
-		// Should navigate into blocks list upon ArrowDown:
+		// Should navigate to the next block.
 		await page.keyboard.press( 'ArrowDown' );
 		const isInParagraphBlock = await page.evaluate(
 			() => !! document.activeElement.closest( '.wp-block-paragraph' )

package/specs/performance/site-editor.test.js

@@ -31,7 +31,7 @@ jest.setTimeout( 1000000 );
 
 describe( 'Site Editor Performance', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template', 'auto-draft' );
 		await trashAllPosts( 'wp_template_part' );

package/specs/site-editor/document-settings.test.js

@@ -26,7 +26,7 @@ async function getDocumentSettingsSecondaryTitle() {
 
 describe( 'Document Settings', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -43,7 +43,7 @@ describe( 'Document Settings', () => {
 		it( 'should display the selected templates name in the document header', async () => {
 			// Navigate to a template
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 
@@ -60,11 +60,11 @@ describe( 'Document Settings', () => {
 					'.edit-post-header-toolbar__list-view-toggle'
 				);
 				const headerTemplatePartListViewButton = await page.waitForXPath(
-					'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+					'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 				);
 				headerTemplatePartListViewButton.click();
 				await page.click(
-					'button[aria-label="Close list view sidebar"]'
+					'button[aria-label="Close List View Sidebar"]'
 				);
 
 				// Evaluate the document settings secondary title
@@ -79,7 +79,7 @@ describe( 'Document Settings', () => {
 		it( "should display the selected template part's name in the document header", async () => {
 			// Navigate to a template part
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//header',
+				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );
 

package/specs/site-editor/multi-entity-editing.test.js

@@ -134,7 +134,7 @@ const removeErrorMocks = () => {
 
 describe( 'Multi-entity editor states', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -152,7 +152,7 @@ describe( 'Multi-entity editor states', () => {
 	// Skip reason: This should be rewritten to use other methods to switching to different templates.
 	it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
 		await siteEditor.visit( {
-			postId: 'tt1-blocks//header',
+			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
 		await page.waitForFunction( () =>

package/specs/site-editor/multi-entity-saving.test.js

@@ -4,11 +4,14 @@
 import {
 	createNewPost,
 	disablePrePublishChecks,
+	getOption,
 	insertBlock,
 	publishPost,
+	setOption,
 	trashAllPosts,
 	activateTheme,
 	clickButton,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -21,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 () => {
@@ -44,14 +43,26 @@ describe( 'Multi-entity save flow', () => {
 		}
 	};
 
+	let originalSiteTitle, originalBlogDescription;
+
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		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.
+		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', () => {
@@ -66,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 () => {
@@ -84,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' );
@@ -100,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();
@@ -165,6 +165,11 @@ describe( 'Multi-entity save flow', () => {
 				'//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
 			);
 
+			// Unselect the blocks to avoid clicking the block toolbar.
+			await page.evaluate( () => {
+				wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
+			} );
+
 			// Update the post.
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
@@ -178,13 +183,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();
@@ -197,7 +200,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 );
@@ -223,23 +228,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 );
 		} );
 	} );
 
@@ -266,7 +264,7 @@ describe( 'Multi-entity save flow', () => {
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 			await siteEditor.disableWelcomeGuide();
@@ -274,10 +272,10 @@ describe( 'Multi-entity save flow', () => {
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
-				'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 			);
 			headerTemplatePartListViewButton.click();
-			await page.click( 'button[aria-label="Close list view sidebar"]' );
+			await page.click( 'button[aria-label="Close List View Sidebar"]' );
 
 			// Insert something to dirty the editor.
 			await insertBlock( 'Paragraph' );
@@ -304,7 +302,7 @@ describe( 'Multi-entity save flow', () => {
 		it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
 			// Navigate to site editor.
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 			await siteEditor.disableWelcomeGuide();
@@ -315,26 +313,18 @@ describe( 'Multi-entity save flow', () => {
 			// Open the block settings.
 			await page.click( 'button[aria-label="Settings"]' );
 
-			// Click on font size selector.
-			await page.click( 'button[aria-label="Font size"]' );
-
-			// Click on a different font size.
-			const extraSmallFontSize = await page.waitForXPath(
-				'//li[contains(text(), "Extra small")]'
+			// Change the font size
+			await page.click(
+				'.components-font-size-picker__controls button[aria-label="Small"]'
 			);
-			await extraSmallFontSize.click();
 
 			// Save all changes.
 			await saveAllChanges();
 
-			// Click on font size selector again.
-			await page.click( 'button[aria-label="Font size"]' );
-
-			// Select another font size.
-			const normalFontSize = await page.waitForXPath(
-				'//li[contains(text(), "Normal")]'
+			// Change the font size
+			await page.click(
+				'.components-font-size-picker__controls button[aria-label="Medium"]'
 			);
-			await normalFontSize.click();
 
 			// Assert that the save button has been re-enabled.
 			const saveButton = await page.waitForSelector(

package/specs/site-editor/settings-sidebar.test.js

@@ -42,7 +42,7 @@ async function getTemplateCard() {
 
 describe( 'Settings sidebar', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -70,7 +70,7 @@ describe( 'Settings sidebar', () => {
 
 			const templateCardBeforeNavigation = await getTemplateCard();
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//404',
+				postId: 'emptytheme//singular',
 				postType: 'wp_template',
 			} );
 			const templateCardAfterNavigation = await getTemplateCard();
@@ -80,8 +80,8 @@ describe( 'Settings sidebar', () => {
 				description: 'Displays posts.',
 			} );
 			expect( templateCardAfterNavigation ).toMatchObject( {
-				title: '404',
-				description: 'Displays when no content is found.',
+				title: 'Singular',
+				description: 'Displays a single post or page.',
 			} );
 		} );
 	} );

package/specs/site-editor/site-editor-export.test.js

@@ -30,7 +30,7 @@ async function waitForFileExists( filePath, timeout = 10000 ) {
 
 describe( 'Site Editor Templates Export', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );

package/specs/site-editor/site-editor-inserter.test.js

@@ -10,7 +10,7 @@ import { siteEditor } from './utils';
 
 describe( 'Site Editor Inserter', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );