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

package/specs/editor/various/post-visibility.test.js

@@ -26,6 +26,15 @@ describe( 'Post visibility', () => {
 			);
 			await privateLabel.click();
 
+			await page.waitForXPath(
+				'//*[text()="Would you like to privately publish this post now?"]'
+			);
+
+			const [ confirmButton ] = await page.$x(
+				'//*[@role="dialog"]//button[text()="OK"]'
+			);
+			await confirmButton.click();
+
 			const currentStatus = await page.evaluate( () => {
 				return wp.data
 					.select( 'core/editor' )
@@ -34,6 +43,42 @@ describe( 'Post visibility', () => {
 
 			expect( currentStatus ).toBe( 'private' );
 		} );
+
+		it( `can be canceled when the viewport is ${ viewport }`, async () => {
+			await setBrowserViewport( viewport );
+
+			await createNewPost();
+
+			await openDocumentSettingsSidebar();
+
+			const initialStatus = await page.evaluate( () => {
+				return wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			await page.click( '.edit-post-post-visibility__toggle' );
+
+			const [ privateLabel ] = await page.$x(
+				'//label[text()="Private"]'
+			);
+			await privateLabel.click();
+			await page.waitForXPath(
+				'//*[text()="Would you like to privately publish this post now?"]'
+			);
+			const cancelButton = await page.waitForXPath(
+				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
+			);
+			await cancelButton.click();
+
+			const currentStatus = await page.evaluate( () => {
+				return wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			expect( currentStatus ).toBe( initialStatus );
+		} );
 	} );
 
 	it( 'visibility remains private even if the publish date is in the future', async () => {
@@ -60,6 +105,15 @@ describe( 'Post visibility', () => {
 		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
 		await privateLabel.click();
 
+		await page.waitForXPath(
+			'//*[text()="Would you like to privately publish this post now?"]'
+		);
+
+		const [ confirmButton ] = await page.$x(
+			'//*[@role="dialog"]//button[text()="OK"]'
+		);
+		await confirmButton.click();
+
 		// Enter a title for this post.
 		await page.type( '.editor-post-title__input', ' Changed' );
 

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

@@ -204,7 +204,7 @@ describe( 'Preview', () => {
 	it( 'should not revert title during a preview right after a save draft', async () => {
 		const editorPage = page;
 
-		// Type aaaaa in the title filed.
+		// Type aaaaa in the title field.
 		await editorPage.type( '.editor-post-title__input', 'aaaaa' );
 		await editorPage.keyboard.press( 'Tab' );
 
@@ -248,6 +248,71 @@ describe( 'Preview', () => {
 
 		await previewPage.close();
 	} );
+
+	// Verify correct preview. See: https://github.com/WordPress/gutenberg/issues/33616
+	it( 'should display the correct preview when switching between published and draft statuses', async () => {
+		const editorPage = page;
+
+		// Type Lorem in the title field.
+		await editorPage.type( '[aria-label="Add title"]', 'Lorem' );
+
+		// Open the preview page.
+		const previewPage = await openPreviewPage( editorPage );
+		await previewPage.waitForSelector( '.entry-title' );
+
+		// Title in preview should match input.
+		let previewTitle = await previewPage.$eval(
+			'.entry-title',
+			( node ) => node.textContent
+		);
+		expect( previewTitle ).toBe( 'Lorem' );
+
+		// Return to editor and publish post.
+		await editorPage.bringToFront();
+		await publishPost();
+
+		// Close the panel.
+		await page.waitForSelector( '.editor-post-publish-panel' );
+		await page.click( '.editor-post-publish-panel__header button' );
+
+		// Change the title and preview again.
+		await editorPage.type( '[aria-label="Add title"]', ' Ipsum' );
+		await editorPage.keyboard.press( 'Tab' );
+		await waitForPreviewDropdownOpen( editorPage );
+		await waitForPreviewNavigation( previewPage );
+
+		// Title in preview should match updated input.
+		previewTitle = await previewPage.$eval(
+			'.entry-title',
+			( node ) => node.textContent
+		);
+
+		expect( previewTitle ).toBe( 'Lorem Ipsum' );
+
+		// Return to editor and switch to Draft.
+		await editorPage.bringToFront();
+		await editorPage.waitForSelector( '.editor-post-switch-to-draft' );
+		await editorPage.click( '.editor-post-switch-to-draft' );
+		await page.keyboard.press( 'Enter' );
+
+		// Change the title.
+		await editorPage.type( '[aria-label="Add title"]', 'Draft ' );
+		await editorPage.keyboard.press( 'Tab' );
+
+		// Open the preview page.
+		await waitForPreviewDropdownOpen( editorPage );
+		await waitForPreviewNavigation( previewPage );
+
+		// Title in preview should match updated input.
+		previewTitle = await previewPage.$eval(
+			'.entry-title',
+			( node ) => node.textContent
+		);
+
+		expect( previewTitle ).toBe( 'Draft Lorem Ipsum' );
+
+		await previewPage.close();
+	} );
 } );
 
 describe( 'Preview with Custom Fields enabled', () => {

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

@@ -15,6 +15,7 @@ import {
 	openDocumentSettingsSidebar,
 	saveDraft,
 	createReusableBlock,
+	publishPost,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
@@ -23,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(
@@ -81,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(
@@ -112,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/style-variation.test.js

@@ -13,20 +13,24 @@ describe( 'adding blocks', () => {
 		await createNewPost();
 	} );
 
-	it( 'Should switch to the large style of the quote block', async () => {
+	it( 'Should switch to the plain style of the quote block', async () => {
 		// Inserting a quote block
 		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote content' );
 
 		await clickBlockToolbarButton( 'Quote' );
 
-		const largeStyleButton = await page.waitForXPath(
-			'//*[@role="menuitem"][contains(., "Large")]'
+		const plainStyleButton = await page.waitForXPath(
+			'//*[@role="menuitem"][contains(., "Plain")]'
 		);
-		await largeStyleButton.click();
+		await plainStyleButton.click();
 
 		// Check the content
 		const content = await getEditedPostContent();
-		expect( content ).toMatchSnapshot();
+		expect( content ).toMatchInlineSnapshot( `
+		"<!-- wp:quote {\\"className\\":\\"is-style-plain\\"} -->
+		<blockquote class=\\"wp-block-quote is-style-plain\\"><p>Quote content</p></blockquote>
+		<!-- /wp:quote -->"
+	` );
 	} );
 } );

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/performance/site-editor.test.js

@@ -12,6 +12,7 @@ import {
 	activateTheme,
 	canvas,
 	createNewPost,
+	visitSiteEditor,
 	saveDraft,
 	insertBlock,
 } from '@wordpress/e2e-test-utils';
@@ -19,7 +20,6 @@ import {
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../site-editor/utils';
 import {
 	readFile,
 	deleteFile,
@@ -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' );
@@ -83,8 +83,7 @@ describe( 'Site Editor Performance', () => {
 			new URL( document.location ).searchParams.get( 'post' )
 		);
 
-		await siteEditor.visit( { postId: id, postType: 'page' } );
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor( { postId: id, postType: 'page' } );
 
 		let i = 3;
 

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

@@ -1,12 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
+import {
+	trashAllPosts,
+	activateTheme,
+	visitSiteEditor,
+} from '@wordpress/e2e-test-utils';
 
 async function getDocumentSettingsTitle() {
 	const titleElement = await page.waitForSelector(
@@ -26,7 +25,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' );
 	} );
@@ -35,15 +34,14 @@ describe( 'Document Settings', () => {
 	} );
 
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	describe( 'when a template is selected from the navigation sidebar', () => {
 		it( 'should display the selected templates name in the document header', async () => {
 			// Navigate to a template
-			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+			await visitSiteEditor( {
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 
@@ -64,7 +62,7 @@ describe( 'Document Settings', () => {
 				);
 				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
@@ -78,8 +76,8 @@ describe( 'Document Settings', () => {
 	describe( 'when a template part is selected from the navigation sidebar', () => {
 		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',
+			await visitSiteEditor( {
+				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );
 

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

@@ -11,18 +11,18 @@ import {
 	openDocumentSettingsSidebar,
 	pressKeyWithModifier,
 	selectBlockByClientId,
+	visitSiteEditor,
+	clickSiteEditorMenuItem,
+	navigateSiteEditorBackToRoot,
+	openSiteEditorNavigationPanel,
+	siteEditorNavigateSequence,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { navigationPanel, siteEditor } from './utils';
-
 const clickTemplateItem = async ( menus, itemName ) => {
-	await navigationPanel.open();
-	await navigationPanel.backToRoot();
-	await navigationPanel.navigate( menus );
-	await navigationPanel.clickItemByText( itemName );
+	await openSiteEditorNavigationPanel();
+	await navigateSiteEditorBackToRoot();
+	await siteEditorNavigateSequence( menus );
+	await clickSiteEditorMenuItem( itemName );
 };
 
 const createTemplatePart = async (
@@ -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' );
 	} );
@@ -144,15 +144,14 @@ describe( 'Multi-entity editor states', () => {
 	} );
 
 	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 		expect( await openEntitySavePanel() ).toBe( false );
 	} );
 
 	// 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',
+		await visitSiteEditor( {
+			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
 		await page.waitForFunction( () =>
@@ -204,8 +203,7 @@ describe( 'Multi-entity editor states', () => {
 				true
 			);
 			await saveAllEntities();
-			await siteEditor.visit();
-			await siteEditor.disableWelcomeGuide();
+			await visitSiteEditor();
 
 			// Wait for site editor to load.
 			await canvas().waitForSelector(

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

@@ -12,13 +12,9 @@ import {
 	activateTheme,
 	clickButton,
 	createReusableBlock,
+	visitSiteEditor,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
-
 describe( 'Multi-entity save flow', () => {
 	// Selectors - usable between Post/Site editors.
 	const checkedBoxSelector = '.components-checkbox-control__checked';
@@ -46,7 +42,7 @@ 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' );
@@ -165,6 +161,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!' );
@@ -258,11 +259,10 @@ describe( 'Multi-entity save flow', () => {
 
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
-			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+			await visitSiteEditor( {
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
-			await siteEditor.disableWelcomeGuide();
 
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
@@ -270,7 +270,7 @@ describe( 'Multi-entity save flow', () => {
 				'//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' );
@@ -296,11 +296,10 @@ 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',
+			await visitSiteEditor( {
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
-			await siteEditor.disableWelcomeGuide();
 
 			// Insert a paragraph at the bottom.
 			await insertBlock( 'Paragraph' );
@@ -308,26 +307,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

@@ -7,13 +7,9 @@ import {
 	getAllBlocks,
 	selectBlockByClientId,
 	insertBlock,
+	visitSiteEditor,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
-
 async function toggleSidebar() {
 	await page.click(
 		'.edit-site-header__actions button[aria-label="Settings"]'
@@ -42,7 +38,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' );
 	} );
@@ -52,8 +48,7 @@ describe( 'Settings sidebar', () => {
 		await activateTheme( 'twentytwentyone' );
 	} );
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	describe( 'Template tab', () => {
@@ -69,8 +64,8 @@ describe( 'Settings sidebar', () => {
 			await toggleSidebar();
 
 			const templateCardBeforeNavigation = await getTemplateCard();
-			await siteEditor.visit( {
-				postId: 'tt1-blocks//404',
+			await visitSiteEditor( {
+				postId: 'emptytheme//singular',
 				postType: 'wp_template',
 			} );
 			const templateCardAfterNavigation = await getTemplateCard();
@@ -80,8 +75,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

@@ -8,12 +8,12 @@ import os from 'os';
 /**
  * WordPress dependencies
  */
-import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
+import {
+	trashAllPosts,
+	activateTheme,
+	visitSiteEditor,
+	clickOnMoreMenuItem,
+} from '@wordpress/e2e-test-utils';
 
 async function waitForFileExists( filePath, timeout = 10000 ) {
 	const start = Date.now();
@@ -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' );
 	} );
@@ -40,8 +40,7 @@ describe( 'Site Editor Templates Export', () => {
 	} );
 
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	it( 'clicking export should download edit-site-export.zip file', async () => {
@@ -53,7 +52,7 @@ describe( 'Site Editor Templates Export', () => {
 			downloadPath: directory,
 		} );
 
-		await siteEditor.clickOnMoreMenuItem( 'Export' );
+		await clickOnMoreMenuItem( 'Export', 'site-editor' );
 		const filePath = path.join( directory, 'edit-site-export.zip' );
 		await waitForFileExists( filePath );
 		expect( fs.existsSync( filePath ) ).toBe( true );