@wordpress/e2e-tests 2.5.9 → 3.0.1-next.33ec3857e2.0

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';
-	const createNewButtonSelector =
-		'//button[contains(text(), "New template part")]';
+		'.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
 
 	// 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 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 () => {
@@ -87,6 +96,7 @@ describe( 'Multi-entity save flow', () => {
 		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();
@@ -145,7 +145,10 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( savePanelSelector, false );
 
 			// Close publish panel.
-			await page.click( closePanelButtonSelector );
+			const closePanelButton = await page.waitForSelector(
+				closePanelButtonSelector
+			);
+			await closePanelButton.click();
 
 			// Verify saving is disabled.
 			const draftSaved = await page.waitForSelector( draftSavedSelector );
@@ -154,25 +157,32 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( saveA11ySelector, false );
 
 			await publishPost();
+			// Wait for the success notice specifically for the published post.
+			// `publishPost()` has a similar check but it only checks for the
+			// existence of any snackbars. In this case, there's another "Site updated"
+			// notice which will be sufficient for that and thus creating a false-positive.
+			await page.waitForXPath(
+				'//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
+			);
 
 			// Update the post.
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
 
 			// Verify update button is enabled.
-			const enabledSaveButton = await page.$( enabledSavePostSelector );
+			const enabledSaveButton = await page.waitForSelector(
+				enabledSavePostSelector
+			);
 			expect( enabledSaveButton ).not.toBeNull();
 			// Verify multi-entity saving not enabled.
 			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();
@@ -185,7 +195,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 +223,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 );
 		} );
 	} );
 
@@ -238,6 +243,19 @@ describe( 'Multi-entity save flow', () => {
 		const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
 		const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
 
+		const saveAllChanges = async () => {
+			// Clicking button should open panel with boxes checked.
+			await page.click( activeSaveSiteSelector );
+			await page.waitForSelector( savePanelSelector );
+			await assertAllBoxesChecked();
+
+			// Save a11y button should not be present with save panel open.
+			await assertExistance( saveA11ySelector, false );
+
+			// Saving should result in items being saved.
+			await page.click( entitiesSaveSelector );
+		};
+
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
 			await siteEditor.visit( {
@@ -249,7 +267,7 @@ 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"]' );
@@ -267,20 +285,55 @@ describe( 'Multi-entity save flow', () => {
 			// Save a11y button should be present.
 			await assertExistance( saveA11ySelector, true );
 
-			// Clicking button should open panel with boxes checked.
-			await page.click( activeSaveSiteSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
+			// Save all changes.
+			await saveAllChanges();
 
-			// Save a11y button should not be present with save panel open.
-			await assertExistance( saveA11ySelector, false );
-
-			// Saving should result in items being saved.
-			await page.click( entitiesSaveSelector );
 			const disabledButton = await page.waitForSelector(
 				disabledSaveSiteSelector
 			);
 			expect( disabledButton ).not.toBeNull();
 		} );
+
+		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',
+				postType: 'wp_template',
+			} );
+			await siteEditor.disableWelcomeGuide();
+
+			// Insert a paragraph at the bottom.
+			await insertBlock( 'Paragraph' );
+
+			// 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")]'
+			);
+			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")]'
+			);
+			await normalFontSize.click();
+
+			// Assert that the save button has been re-enabled.
+			const saveButton = await page.waitForSelector(
+				activeSaveSiteSelector
+			);
+			expect( saveButton ).not.toBeNull();
+		} );
 	} );
 } );

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

@@ -77,12 +77,11 @@ describe( 'Settings sidebar', () => {
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {
 				title: 'Index',
-				description:
-					'The default template used when no other template is available. This is a required template in WordPress.',
+				description: 'Displays posts.',
 			} );
 			expect( templateCardAfterNavigation ).toMatchObject( {
 				title: '404',
-				description: 'Template shown when no content is found.',
+				description: 'Displays when no content is found.',
 			} );
 		} );
 	} );

package/specs/site-editor/template-part.test.js

@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import {
-	createNewPost,
 	insertBlock,
-	disablePrePublishChecks,
 	trashAllPosts,
 	activateTheme,
 	getAllBlocks,
@@ -260,72 +258,94 @@ describe( 'Template Part', () => {
 				finalTemplateParts.length - initialTemplateParts.length
 			).toBe( 1 );
 		} );
-	} );
-
-	describe( 'Template part placeholder', () => {
-		// Test constants for template part.
-		const testContent = 'some words...';
-
-		// Selectors
-		const entitiesSaveSelector =
-			'.editor-entities-saved-states__save-button';
-		const savePostSelector = '.editor-post-publish-button__button';
-		const templatePartSelector = '*[data-type="core/template-part"]';
-		const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
-		const testContentSelector = `//p[contains(., "${ testContent }")]`;
-		const createNewButtonSelector =
-			'//button[contains(text(), "New template part")]';
-		const chooseExistingButtonSelector =
-			'//button[contains(text(), "Choose existing")]';
-		const confirmTitleButtonSelector =
-			'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
-
-		it( 'Should insert new template part on creation', async () => {
-			await createNewPost();
-			await disablePrePublishChecks();
-			// Create new template part.
-			await insertBlock( 'Template Part' );
-			await page.waitForXPath( chooseExistingButtonSelector );
-			const [ createNewButton ] = await page.$x(
-				createNewButtonSelector
-			);
-			await createNewButton.click();
-			const confirmTitleButton = await page.waitForSelector(
-				confirmTitleButtonSelector
-			);
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( 'Create New' );
-			await confirmTitleButton.click();
-
-			const newTemplatePart = await page.waitForSelector(
-				activatedTemplatePartSelector
-			);
-			expect( newTemplatePart ).toBeTruthy();
-
-			// Finish creating template part, insert some text, and save.
-			await page.click( '.block-editor-button-block-appender' );
-			await page.click( '.editor-block-list-item-paragraph' );
-			await page.keyboard.type( testContent );
-			await page.click( savePostSelector );
-			await page.click( entitiesSaveSelector );
-
-			await createNewPost();
-			// Try to insert the template part we created.
-			await insertBlock( 'Template Part' );
-			const chooseExistingButton = await page.waitForXPath(
-				chooseExistingButtonSelector
-			);
-			await chooseExistingButton.click();
-			const preview = await page.waitForSelector(
-				'[aria-label="Create New"]'
-			);
-			await preview.click();
-			await page.waitForSelector( activatedTemplatePartSelector );
-			const templatePartContent = await page.waitForXPath(
-				testContentSelector
-			);
-			expect( templatePartContent ).toBeTruthy();
+		describe( 'Template part placeholder', () => {
+			// Test constants for template part.
+			const testContent = 'some words...';
+
+			// Selectors
+			const entitiesSaveSelector =
+				'.editor-entities-saved-states__save-button';
+			const savePostSelector = '.edit-site-save-button__button';
+			const templatePartSelector = '*[data-type="core/template-part"]';
+			const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
+			const createNewButtonSelector =
+				'//button[contains(text(), "New template part")]';
+			const chooseExistingButtonSelector =
+				'//button[contains(text(), "Choose existing")]';
+			const confirmTitleButtonSelector =
+				'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
+
+			it( 'Should insert new template part on creation', async () => {
+				let siteEditorCanvas = canvas();
+				await awaitHeaderAndFooterLoad();
+
+				// Create new template part.
+				await insertBlock( 'Template Part' );
+				await siteEditorCanvas.waitForXPath(
+					chooseExistingButtonSelector
+				);
+				const [ createNewButton ] = await siteEditorCanvas.$x(
+					createNewButtonSelector
+				);
+				await createNewButton.click();
+				const confirmTitleButton = await page.waitForSelector(
+					confirmTitleButtonSelector
+				);
+				await page.keyboard.press( 'Tab' );
+				await page.keyboard.press( 'Tab' );
+				await page.keyboard.type( 'Create New' );
+				await confirmTitleButton.click();
+
+				const newTemplatePart = await siteEditorCanvas.waitForSelector(
+					activatedTemplatePartSelector
+				);
+				expect( newTemplatePart ).toBeTruthy();
+
+				// Finish creating template part, insert some text, and save.
+				await siteEditorCanvas.waitForSelector(
+					'.block-editor-button-block-appender'
+				);
+				await siteEditorCanvas.click(
+					'.block-editor-button-block-appender'
+				);
+				await page.waitForSelector(
+					'.editor-block-list-item-paragraph'
+				);
+				await page.click( '.editor-block-list-item-paragraph' );
+				await page.keyboard.type( testContent );
+				await page.click( savePostSelector );
+				await page.click( entitiesSaveSelector );
+
+				// Reload the page so as the new template part is available in the existing template parts.
+				await siteEditor.visit();
+				siteEditorCanvas = canvas();
+				await awaitHeaderAndFooterLoad();
+				// Try to insert the template part we created.
+				await insertBlock( 'Template Part' );
+				const chooseExistingButton = await siteEditorCanvas.waitForXPath(
+					chooseExistingButtonSelector
+				);
+				await chooseExistingButton.click();
+				await page.waitForSelector(
+					'.wp-block-template-part__selection-preview-container'
+				);
+				const preview = await page.waitForSelector(
+					'.wp-block-template-part__selection-preview-item[aria-label="Create New"]'
+				);
+				await preview.click();
+				// We now have the same template part two times in the page, so check accordingly.
+				const paragraphs = await siteEditorCanvas.$$eval(
+					'[data-type="core/template-part"] > p:first-child',
+					( options ) =>
+						options.map( ( option ) => option.textContent )
+				);
+				expect( paragraphs ).toHaveLength( 2 );
+				expect(
+					paragraphs.every(
+						( paragraph ) => paragraph === testContent
+					)
+				).toBeTruthy();
+			} );
 		} );
 	} );
 } );

package/specs/widgets/customizing-widgets.test.js

@@ -10,6 +10,7 @@ import {
 	clickBlockToolbarButton,
 	deleteAllWidgets,
 	createURL,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -831,6 +832,9 @@ describe( 'Widgets Customizer', () => {
 		await showMoreSettingsButton.click();
 
 		// Change `drop cap` (Any change made in this section is sufficient; not required to be `drop cap`).
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);