@wordpress/e2e-tests 3.0.7 → 3.0.10-next.a55ed9455a.0

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

@@ -9,9 +9,58 @@ import {
 	disablePrePublishChecks,
 	arePrePublishChecksEnabled,
 	setBrowserViewport,
+	openPublishPanel,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Publishing', () => {
+	describe.each( [ 'post', 'page' ] )(
+		'%s locking prevent saving',
+		( postType ) => {
+			beforeEach( async () => {
+				await createNewPost( postType );
+			} );
+
+			it( `disables the publish button when a ${ postType } is locked`, async () => {
+				await page.type(
+					'.editor-post-title__input',
+					'E2E Test Post lock check publish button'
+				);
+				await page.evaluate( () =>
+					wp.data
+						.dispatch( 'core/editor' )
+						.lockPostSaving( 'futurelock' )
+				);
+
+				await openPublishPanel();
+
+				expect(
+					await page.$(
+						'.editor-post-publish-button[aria-disabled="true"]'
+					)
+				).not.toBeNull();
+			} );
+
+			it( `disables the save shortcut when a ${ postType } is locked`, async () => {
+				await page.type(
+					'.editor-post-title__input',
+					'E2E Test Post check save shortcut'
+				);
+				await page.evaluate( () =>
+					wp.data
+						.dispatch( 'core/editor' )
+						.lockPostSaving( 'futurelock' )
+				);
+				await pressKeyWithModifier( 'primary', 'S' );
+
+				expect( await page.$( '.editor-post-saved-state' ) ).toBeNull();
+				expect(
+					await page.$( '.editor-post-save-draft' )
+				).not.toBeNull();
+			} );
+		}
+	);
+
 	describe.each( [ 'post', 'page' ] )( 'a %s', ( postType ) => {
 		let werePrePublishChecksEnabled;
 
@@ -69,7 +118,7 @@ describe( 'Publishing', () => {
 			it( `should publish the ${ postType } without opening the post-publish sidebar.`, async () => {
 				await page.type( '.editor-post-title__input', 'E2E Test Post' );
 
-				// The "Publish" button should be shown instead of the "Publish..." toggle
+				// The "Publish" button should be shown instead of the "Publish..." toggle.
 				expect(
 					await page.$( '.editor-post-publish-panel__toggle' )
 				).toBeNull();

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

@@ -26,7 +26,7 @@ const reusableBlockInspectorNameInputSelector =
 const saveAll = async () => {
 	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:
+	// Wait for the Publish button to become enabled in case the editor is autosaving ATM:.
 	const publishButton = await page.waitForSelector(
 		publishButtonSelector + '[aria-disabled="false"]'
 	);
@@ -41,7 +41,7 @@ const saveAll = async () => {
 const saveAllButDontPublish = async () => {
 	await saveAll();
 
-	// no need to publish the post.
+	// No need to publish the post.
 	const cancelPublish = await page.waitForSelector(
 		'.editor-post-publish-panel__header-cancel-button button'
 	);
@@ -49,7 +49,7 @@ const saveAllButDontPublish = async () => {
 };
 
 const clearAllBlocks = async () => {
-	// Remove all blocks from the post so that we're working with a clean slate
+	// Remove all blocks from the post so that we're working with a clean slate.
 	await page.evaluate( () => {
 		const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
 		const clientIds = blocks.map( ( block ) => block.clientId );
@@ -70,10 +70,10 @@ describe( 'Reusable blocks', () => {
 		await createReusableBlock( 'Hello there!', 'Greeting block' );
 		await clearAllBlocks();
 
-		// Insert the reusable block we created above
+		// Insert the reusable block we created above.
 		await insertReusableBlock( 'Greeting block' );
 
-		// Change the block's title
+		// Change the block's title.
 		await openDocumentSettingsSidebar();
 		const nameInput = await page.waitForSelector(
 			reusableBlockInspectorNameInputSelector
@@ -82,20 +82,20 @@ describe( 'Reusable blocks', () => {
 		await pressKeyWithModifier( 'primary', 'a' );
 		await page.keyboard.type( 'Surprised greeting block' );
 
-		// Quickly focus the paragraph block
+		// Quickly focus the paragraph block.
 		await page.click(
 			'.block-editor-block-list__block[data-type="core/block"] p'
 		);
-		await page.keyboard.press( 'Escape' ); // Enter navigation mode
-		await page.keyboard.press( 'Enter' ); // Enter edit mode
+		await page.keyboard.press( 'Escape' ); // Enter navigation mode.
+		await page.keyboard.press( 'Enter' ); // Enter edit mode.
 
-		// Change the block's content
+		// Change the block's content.
 		await page.keyboard.type( 'Oh! ' );
 
-		// Save the reusable block
+		// Save the reusable block.
 		await saveAllButDontPublish();
 
-		// Check that its content is up to date
+		// Check that its content is up to date.
 		const text = await page.$eval(
 			'.block-editor-block-list__block[data-type="core/block"] p',
 			( element ) => element.innerText
@@ -104,19 +104,19 @@ describe( 'Reusable blocks', () => {
 
 		await clearAllBlocks();
 
-		// Insert the reusable block we edited above
+		// Insert the reusable block we edited above.
 		await insertReusableBlock( 'Surprised greeting block' );
 
-		// Convert block to a regular block
+		// Convert block to a regular block.
 		await clickBlockToolbarButton( 'Convert to regular blocks' );
 
-		// Check that we have a paragraph block on the page
+		// Check that we have a paragraph block on the page.
 		const paragraphBlock = await page.$(
 			'.block-editor-block-list__block[data-type="core/paragraph"]'
 		);
 		expect( paragraphBlock ).not.toBeNull();
 
-		// Check that its content is up to date
+		// Check that its content is up to date.
 		const paragraphContent = await page.$eval(
 			'.block-editor-block-list__block[data-type="core/paragraph"]',
 			( element ) => element.innerText
@@ -145,13 +145,13 @@ describe( 'Reusable blocks', () => {
 		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
 		await page.focus( 'p[aria-label="Paragraph block"]' );
 
-		// Change the block's content
+		// Change the block's content.
 		await page.keyboard.type( 'Einen ' );
 
-		// Save the reusable block and update the post
+		// Save the reusable block and update the post.
 		await saveAll();
 
-		// Check that its content is up to date
+		// Check that its content is up to date.
 		const paragraphContent = await page.$eval(
 			'p[aria-label="Paragraph block"]',
 			( element ) => element.innerText
@@ -180,21 +180,21 @@ describe( 'Reusable blocks', () => {
 	it( 'can be created from multiselection and converted back to regular blocks', async () => {
 		await createNewPost();
 
-		// Insert a Two paragraphs block
+		// Insert a Two paragraphs block.
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Hello there!' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Second paragraph' );
 
-		// Select all the blocks
+		// Select all the blocks.
 		await pressKeyWithModifier( 'primary', 'a' );
 		await pressKeyWithModifier( 'primary', 'a' );
 
-		// Convert block to a reusable block
+		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
 		await clickMenuItem( 'Add to Reusable blocks' );
 
-		// Set title
+		// Set title.
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);
@@ -202,20 +202,20 @@ describe( 'Reusable blocks', () => {
 		await page.keyboard.type( 'Multi-selection reusable block' );
 		await page.keyboard.press( 'Enter' );
 
-		// Wait for creation to finish
+		// Wait for creation to finish.
 		await page.waitForXPath(
 			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
 		);
 
 		await clearAllBlocks();
 
-		// Insert the reusable block we edited above
+		// Insert the reusable block we edited above.
 		await insertReusableBlock( 'Multi-selection reusable block' );
 
-		// Convert block to a regular block
+		// Convert block to a regular block.
 		await clickBlockToolbarButton( 'Convert to regular blocks' );
 
-		// Check that we have two paragraph blocks on the page
+		// Check that we have two paragraph blocks on the page.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -236,25 +236,25 @@ describe( 'Reusable blocks', () => {
 
 		await page.waitForNavigation();
 
-		// Click the block to give it focus
+		// Click the block to give it focus.
 		const blockSelector = 'p[data-title="Paragraph"]';
 		await page.waitForSelector( blockSelector );
 		await page.click( blockSelector );
 
-		// Delete the block, leaving the reusable block empty
+		// Delete the block, leaving the reusable block empty.
 		await clickBlockToolbarButton( 'Options' );
 		const deleteButton = await page.waitForXPath(
 			'//button/span[text()="Remove Paragraph"]'
 		);
 		deleteButton.click();
 
-		// Wait for the Update button to become enabled
+		// Wait for the Update button to become enabled.
 		const publishButtonSelector = '.editor-post-publish-button__button';
 		await page.waitForSelector(
 			publishButtonSelector + '[aria-disabled="false"]'
 		);
 
-		// Save the reusable block
+		// Save the reusable block.
 		await page.click( publishButtonSelector );
 		await page.waitForXPath(
 			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block updated."]'
@@ -268,7 +268,7 @@ describe( 'Reusable blocks', () => {
 	} );
 
 	it( 'Should show a proper message when the reusable block is missing', async () => {
-		// Insert a non-existant reusable block
+		// Insert a non-existant reusable block.
 		await page.evaluate( () => {
 			const { createBlock } = window.wp.blocks;
 			const { dispatch } = window.wp.data;

package/specs/editor/various/rich-text.test.js

@@ -402,7 +402,7 @@ describe( 'RichText', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		// Dismiss color picker popover
+		// Dismiss color picker popover.
 		await page.keyboard.press( 'Escape' );
 
 		// Navigate to the block.

package/specs/editor/various/splitting-merging.test.js

@@ -16,19 +16,19 @@ describe( 'splitting and merging blocks', () => {
 	} );
 
 	it( 'should split and merge paragraph blocks using Enter and Backspace', async () => {
-		// Use regular inserter to add paragraph block and text
+		// Use regular inserter to add paragraph block and text.
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'FirstSecond' );
 
 		// Move caret between 'First' and 'Second' and press Enter to split
-		// paragraph blocks
+		// paragraph blocks.
 		await pressKeyTimes( 'ArrowLeft', 6 );
 		await page.keyboard.press( 'Enter' );
 
-		// Assert that there are now two paragraph blocks with correct content
+		// Assert that there are now two paragraph blocks with correct content.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		// Press Backspace to merge paragraph blocks
+		// Press Backspace to merge paragraph blocks.
 		await page.keyboard.press( 'Backspace' );
 
 		// Ensure that caret position is correctly placed at the between point.
@@ -76,12 +76,12 @@ describe( 'splitting and merging blocks', () => {
 		//
 		// See: https://github.com/WordPress/gutenberg/issues/8388
 
-		// First paragraph
+		// First paragraph.
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'First' );
 		await page.keyboard.press( 'Enter' );
 
-		// Second paragraph
+		// Second paragraph.
 		await page.keyboard.down( 'Shift' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.up( 'Shift' );

package/specs/editor/various/style-variation.test.js

@@ -14,7 +14,7 @@ describe( 'adding blocks', () => {
 	} );
 
 	it( 'Should switch to the plain style of the quote block', async () => {
-		// Inserting a quote block
+		// Inserting a quote block.
 		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote content' );
 
@@ -25,7 +25,7 @@ describe( 'adding blocks', () => {
 		);
 		await plainStyleButton.click();
 
-		// Check the content
+		// Check the content.
 		const content = await getEditedPostContent();
 		expect( content ).toMatchInlineSnapshot( `
 		"<!-- wp:quote {\\"className\\":\\"is-style-plain\\"} -->

package/specs/editor/various/switch-to-draft.test.js

@@ -0,0 +1,256 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	openDocumentSettingsSidebar,
+	publishPost,
+	setBrowserViewport,
+	trashAllPosts,
+} from '@wordpress/e2e-test-utils';
+
+async function prepTestPost( postType, viewport ) {
+	// Create a post
+	await createNewPost( { postType } );
+
+	await page.type(
+		'.editor-post-title__input',
+		`Switch scheduled ${ postType } to draft`
+	);
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type(
+		`This will be a scheduled ${ postType } edited in a ${ viewport } viewport`
+	);
+
+	// Unselect the blocks.
+	await page.evaluate( () => {
+		wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
+	} );
+}
+
+async function publishTestPost( postType, viewport ) {
+	// Create a post
+	await prepTestPost( postType, viewport );
+
+	// Publish the post
+	await publishPost();
+
+	const publishedSnackBar = await page.waitForXPath(
+		`//*[@aria-label="Dismiss this notice"][@role="button"]/div[contains(text(),"published")]`
+	);
+
+	const snackBarText = await (
+		await publishedSnackBar.getProperty( 'textContent' )
+	 ).jsonValue();
+
+	expect( snackBarText.toLowerCase() ).toBe(
+		`${ postType } published.view ${ postType }`
+	);
+
+	const closePublishingPanel = await page.waitForXPath(
+		'//button[@aria-label="Close panel"]'
+	);
+	await closePublishingPanel.click();
+}
+
+async function scheduleTestPost( postType, viewport ) {
+	// Create a post
+	await prepTestPost( postType, viewport );
+
+	if ( viewport === 'small' ) {
+		await openDocumentSettingsSidebar();
+	}
+	// Set a publish date for the next month.
+	await page.click( '.edit-post-post-schedule__toggle' );
+	await page.click(
+		'div[aria-label="Move forward to switch to the next month."]'
+	);
+
+	await (
+		await page.$x(
+			'//*[@role="application"][@aria-label="Calendar"]//td[@role="button"]/*[text() = "15"]'
+		)
+	 )[ 0 ].click();
+
+	await page.click( '.edit-post-post-schedule__toggle' );
+
+	if ( viewport === 'small' ) {
+		const closeDocumentSettingsButton = await page.waitForXPath(
+			'//div[@aria-label="Editor settings"]//button[@aria-label="Close settings"]'
+		);
+		await closeDocumentSettingsButton.click();
+	}
+
+	// Important: target an ellipsis (…) and not three dots (...)
+	const scheduleButton = await page.waitForXPath(
+		'//button[text()="Schedule…"]'
+	);
+	await scheduleButton.click();
+	const secondScheduleButton = await page.waitForXPath(
+		'//button[text()="Schedule"]'
+	);
+	await secondScheduleButton.click();
+
+	const closePublishingPanel = await page.waitForXPath(
+		'//button[@aria-label="Close panel"]'
+	);
+	await closePublishingPanel.click();
+}
+
+async function verifyRevertToDraft( postType ) {
+	const revertedSnackBar = await page.waitForXPath(
+		`//*[@aria-label="Dismiss this notice"][@role="button"]/div[contains(text(),"reverted")]`
+	);
+
+	const revertedSnackBarText = await (
+		await revertedSnackBar.getProperty( 'textContent' )
+	 ).jsonValue();
+
+	expect( revertedSnackBarText.toLowerCase() ).toBe(
+		`${ postType } reverted to draft.`
+	);
+}
+
+describe( 'Clicking "Switch to draft" on a published post/page', () => {
+	beforeAll( async () => {
+		await trashAllPosts( 'post' );
+		await trashAllPosts( 'page' );
+	} );
+	afterEach( async () => {
+		await setBrowserViewport( 'large' );
+	} );
+
+	[ 'large', 'small' ].forEach( ( viewport ) => {
+		describe( `in a ${ viewport } viewport`, () => {
+			[ 'post', 'page' ].forEach( ( postType ) => {
+				const buttonText =
+					viewport === 'large' ? 'Switch to draft' : 'Draft';
+				beforeEach( async () => {
+					await setBrowserViewport( viewport );
+				} );
+
+				it( `should leave a published ${ postType } published if canceled`, async () => {
+					publishTestPost( postType, viewport );
+
+					const switchToDraftButton = await page.waitForXPath(
+						`//button[contains(text(), "${ buttonText }")]`
+					);
+					await switchToDraftButton.click();
+
+					// Process the ConfirmDialog
+					await page.waitForXPath(
+						'//*[text()="Are you sure you want to unpublish this post?"]'
+					);
+					const [ cancelButton ] = await page.$x(
+						'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
+					);
+					await cancelButton.click();
+
+					const postStatus = await page.evaluate( () => {
+						return wp.data
+							.select( 'core/editor' )
+							.getEditedPostAttribute( 'status' );
+					} );
+					expect( postStatus ).toBe( 'publish' );
+				} );
+				it( `should revert a published ${ postType } to a draft if confirmed`, async () => {
+					// Switch to draft
+					const switchToDraftButton = await page.waitForXPath(
+						`//button[contains(text(), "${ buttonText }")]`
+					);
+					await switchToDraftButton.click();
+
+					// Process the ConfirmDialog
+					await page.waitForXPath(
+						'//*[text()="Are you sure you want to unpublish this post?"]'
+					);
+					const [ confirmButton ] = await page.$x(
+						'//*[@role="dialog"]//button[text()="OK"]'
+					);
+					await confirmButton.click();
+
+					await verifyRevertToDraft( postType );
+
+					const postStatus = await page.evaluate( () => {
+						return wp.data
+							.select( 'core/editor' )
+							.getEditedPostAttribute( 'status' );
+					} );
+					expect( postStatus ).toBe( 'draft' );
+				} );
+			} );
+		} );
+	} );
+} );
+describe( 'Clicking "Switch to draft" on a scheduled post/page', () => {
+	beforeAll( async () => {
+		await trashAllPosts( 'post' );
+		await trashAllPosts( 'page' );
+	} );
+	afterEach( async () => {
+		await setBrowserViewport( 'large' );
+	} );
+
+	[ 'large', 'small' ].forEach( ( viewport ) => {
+		describe( `in a ${ viewport } viewport`, () => {
+			[ 'post', 'page' ].forEach( ( postType ) => {
+				const buttonText =
+					viewport === 'large' ? 'Switch to draft' : 'Draft';
+				beforeEach( async () => {
+					await setBrowserViewport( viewport );
+				} );
+
+				it( `should leave a scheduled ${ postType } scheduled if canceled`, async () => {
+					scheduleTestPost( postType, viewport );
+
+					const switchToDraftButton = await page.waitForXPath(
+						`//button[contains(text(), "${ buttonText }")]`
+					);
+					await switchToDraftButton.click();
+
+					// Process the ConfirmDialog
+					await page.waitForXPath(
+						'//*[text()="Are you sure you want to unschedule this post?"]'
+					);
+					const [ cancelButton ] = await page.$x(
+						'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
+					);
+					await cancelButton.click();
+
+					// Confirm post is still scheduled
+					const postStatus = await page.evaluate( () => {
+						return wp.data
+							.select( 'core/editor' )
+							.getEditedPostAttribute( 'status' );
+					} );
+					expect( postStatus ).toBe( 'future' );
+				} );
+				it( `should revert a scheduled ${ postType } to a draft if confirmed`, async () => {
+					// Switch to draft
+					const switchToDraftButton = await page.waitForXPath(
+						`//button[contains(text(), "${ buttonText }")]`
+					);
+					await switchToDraftButton.click();
+
+					// Process the ConfirmDialog
+					await page.waitForXPath(
+						'//*[text()="Are you sure you want to unschedule this post?"]'
+					);
+					const [ confirmButton ] = await page.$x(
+						'//*[@role="dialog"]//button[text()="OK"]'
+					);
+					await confirmButton.click();
+
+					await verifyRevertToDraft( postType );
+
+					const postStatus = await page.evaluate( () => {
+						return wp.data
+							.select( 'core/editor' )
+							.getEditedPostAttribute( 'status' );
+					} );
+					expect( postStatus ).toBe( 'draft' );
+				} );
+			} );
+		} );
+	} );
+} );

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

@@ -200,7 +200,7 @@ describe( 'Taxonomies', () => {
 			return;
 		}
 
-		// At the start there are no tag tokens
+		// At the start there are no tag tokens.
 		expect( await page.$$( TAG_TOKEN_SELECTOR ) ).toHaveLength( 0 );
 
 		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );

package/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -98,7 +98,7 @@ describe( 'Toolbar roving tabindex', () => {
 	it( 'ensures table block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Table' );
 		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
-		// Move focus to the first toolbar item
+		// Move focus to the first toolbar item.
 		await page.keyboard.press( 'Home' );
 		await expectLabelToHaveFocus( 'Table' );
 		await page.click( '.blocks-table__placeholder-button' );