@wordpress/e2e-tests 3.1.1 → 4.0.0

package/specs/editor/various/block-locking.test.js

@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	clickButton,
+	clickMenuItem,
+	clickBlockToolbarButton,
+	getEditedPostContent,
+	insertBlock,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Block Grouping', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	describe( 'General', () => {
+		it( 'can prevent removal', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'Some paragraph' );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Lock' );
+
+			const [ checkbox ] = await page.$x(
+				'//label[contains(text(), "Prevent removal")]'
+			);
+			await checkbox.click();
+
+			await clickButton( 'Apply' );
+
+			const [ removeBlock ] = await page.$x(
+				'//*[@role="menu"]//*[text()="Remove Paragraph"]'
+			);
+
+			expect( removeBlock ).toBeFalsy();
+		} );
+
+		it( 'can disable movement', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'First paragraph' );
+
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'Second paragraph' );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Lock' );
+
+			const [ checkbox ] = await page.$x(
+				'//label[contains(text(), "Disable movement")]'
+			);
+			await checkbox.click();
+
+			await clickButton( 'Apply' );
+
+			// Hide options.
+			await clickBlockToolbarButton( 'Options' );
+
+			const blockMover = await page.$( '.block-editor-block-mover' );
+			expect( blockMover ).toBeNull();
+
+			const [ lockButton ] = await page.$x(
+				'//button[@aria-label="Unlock Paragraph"]'
+			);
+			expect( lockButton ).toBeTruthy();
+		} );
+
+		it( 'can lock everything', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'Some paragraph' );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Lock' );
+
+			const [ checkbox ] = await page.$x(
+				'//label//*[contains(text(), "Lock all")]'
+			);
+			await checkbox.click();
+
+			await clickButton( 'Apply' );
+
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+				"<!-- wp:paragraph {\\"lock\\":{\\"move\\":true,\\"remove\\":true}} -->
+				<p>Some paragraph</p>
+				<!-- /wp:paragraph -->"
+			` );
+		} );
+
+		it( 'can unlock from toolbar', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'Some paragraph' );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Lock' );
+
+			const [ lockCheckbox ] = await page.$x(
+				'//label//*[contains(text(), "Lock all")]'
+			);
+			await lockCheckbox.click();
+
+			await clickButton( 'Apply' );
+
+			await clickBlockToolbarButton( 'Unlock Paragraph' );
+
+			const [ unlockCheckbox ] = await page.$x(
+				'//label//*[contains(text(), "Lock all")]'
+			);
+			await unlockCheckbox.click();
+
+			await clickButton( 'Apply' );
+
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+				"<!-- wp:paragraph {\\"lock\\":{\\"move\\":false,\\"remove\\":false}} -->
+				<p>Some paragraph</p>
+				<!-- /wp:paragraph -->"
+			` );
+		} );
+	} );
+} );

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -207,4 +207,27 @@ describe( 'Order of block keyboard navigation', () => {
 		await page.keyboard.press( 'ArrowRight' );
 		await expect( await getActiveLabel() ).toBe( 'Move up' );
 	} );
+
+	it( 'allows the first element within a block to receive focus', async () => {
+		// Insert a image block.
+		await insertBlock( 'Image' );
+
+		// Make sure the upload button has focus.
+		const uploadButton = await page.waitForXPath(
+			'//button[contains( text(), "Upload" ) ]'
+		);
+		await expect( uploadButton ).toHaveFocus();
+
+		// Try to focus the image block wrapper.
+		await page.keyboard.press( 'ArrowUp' );
+		await expect( await getActiveLabel() ).toBe( 'Block: Image' );
+	} );
+
+	it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
+		// Insert a group block.
+		await insertBlock( 'Group' );
+
+		// If active label matches, that means focus did not change from group block wrapper.
+		await expect( await getActiveLabel() ).toBe( 'Block: Group' );
+	} );
 } );

package/specs/editor/various/list-view.test.js

@@ -72,8 +72,8 @@ describe( 'List view', () => {
 		await pressKeyWithModifier( 'access', 'o' );
 
 		// The last inserted paragraph block should be selected in List View.
-		await page.waitForXPath(
-			'//a[contains(., "Paragraph(selected block)")]'
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
 		);
 
 		// Go to the image block in list view.
@@ -81,17 +81,18 @@ describe( 'List view', () => {
 		const listViewImageBlock = await page.waitForXPath(
 			'//a[contains(., "Image")]'
 		);
-		expect( listViewImageBlock ).toHaveFocus();
+		await expect( listViewImageBlock ).toHaveFocus();
 
 		// Select the image block in the canvas.
 		await page.keyboard.press( 'Enter' );
 
-		const canvasImageBlock = await page.waitForSelector(
-			'figure[aria-label="Block: Image"]'
+		const uploadButton = await page.waitForXPath(
+			'//button[contains( text(), "Upload" ) ]'
 		);
-		expect( canvasImageBlock ).toHaveFocus();
+		await expect( uploadButton ).toHaveFocus();
 
 		// Delete the image block in the canvas.
+		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'Backspace' );
 
 		// List view should have two rows.
@@ -103,6 +104,135 @@ describe( 'List view', () => {
 		expect( console ).not.toHaveErrored();
 	} );
 
+	// Check for regression of https://github.com/WordPress/gutenberg/issues/39026
+	it( 'should select previous block after removing selected one', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Image' );
+		await insertBlock( 'Heading' );
+		await insertBlock( 'Paragraph' );
+
+		// Open list view.
+		await openListView();
+
+		// The last inserted paragraph block should be selected in List View.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
+		);
+
+		// Paragraph options button.
+		const paragraphOptionsButton = await page.waitForSelector(
+			'tr.block-editor-list-view-leaf:last-child button[aria-label="Options for Paragraph block"]'
+		);
+
+		await paragraphOptionsButton.click();
+
+		const paragraphRemoveButton = await page.waitForXPath(
+			'//button[contains(., "Remove Paragraph")]'
+		);
+
+		// Remove paragraph.
+		await paragraphRemoveButton.click();
+
+		// Heading block should be selected as previous block.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
+		);
+	} );
+
+	// Check for regression of https://github.com/WordPress/gutenberg/issues/39026
+	it( 'should select next block after removing the very first block', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Image' );
+		await insertBlock( 'Heading' );
+		await insertBlock( 'Paragraph' );
+
+		// Open list view.
+		await openListView();
+
+		// The last inserted paragraph block should be selected in List View.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
+		);
+
+		// Go to the image block in list view.
+		await pressKeyTimes( 'ArrowUp', 2 );
+		await pressKeyTimes( 'Enter', 1 );
+
+		// Image block should have selected.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Image"]'
+		);
+
+		// Image options dropdown.
+		const imageOptionsButton = await page.waitForSelector(
+			'tr.block-editor-list-view-leaf:first-child button[aria-label="Options for Image block"]'
+		);
+
+		await imageOptionsButton.click();
+
+		const imageRemoveButton = await page.waitForXPath(
+			'//button[contains(., "Remove Image")]'
+		);
+
+		// Remove Image block.
+		await imageRemoveButton.click();
+
+		// Heading block should be selected as next block.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
+		);
+	} );
+
+	/**
+	 * When all the blocks gets removed from the editor, it inserts a default paragraph block;
+	 * make sure that paragraph block gets selected after removing blocks from ListView.
+	 */
+	it( 'should select default paragraph block after removing all blocks', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Image' );
+		await insertBlock( 'Heading' );
+
+		// Open list view.
+		await openListView();
+
+		// The last inserted heading block should be selected in List View.
+		const headingBlock = await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
+		);
+
+		await headingBlock.click();
+
+		// Select all two blocks.
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+
+		// Both Image and Heading blocks should have selected.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
+		);
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Image"]'
+		);
+
+		const imageOptionsButton = await page.waitForSelector(
+			'tr.block-editor-list-view-leaf:first-child button[aria-label="Options for Image block"]'
+		);
+
+		// Blocks options dropdown.
+		await imageOptionsButton.click();
+
+		const blocksRemoveButton = await page.waitForXPath(
+			'//button[contains(., "Remove blocks")]'
+		);
+
+		// Remove all blocks.
+		await blocksRemoveButton.click();
+
+		// Newly created default paragraph block should be selected.
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
+		);
+	} );
+
 	it( 'should expand nested list items', async () => {
 		// Insert some blocks of different types.
 		await insertBlock( 'Cover' );
@@ -163,7 +293,9 @@ describe( 'List view', () => {
 		await pressKeyWithModifier( 'access', 'o' );
 
 		// The last inserted group block should be selected in list view.
-		await page.waitForXPath( '//a[contains(., "Group(selected block)")]' );
+		await page.waitForSelector(
+			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Group"]'
+		);
 
 		// Press Home to go to the first inserted block (image).
 		await page.keyboard.press( 'Home' );

package/specs/editor/various/multi-block-selection.test.js

@@ -79,14 +79,13 @@ async function testNativeSelection() {
 
 		const firstElement = elements[ 0 ];
 		const lastElement = elements[ elements.length - 1 ];
-		const { startContainer, endContainer } = selection.getRangeAt( 0 );
 
-		if ( ! firstElement.contains( startContainer ) ) {
-			throw 'expected selection to start in the first selected block';
+		if ( ! selection.containsNode( firstElement, true ) ) {
+			throw 'expected selection to include in the first selected block';
 		}
 
-		if ( ! lastElement.contains( endContainer ) ) {
-			throw 'expected selection to end in the last selected block';
+		if ( ! selection.containsNode( lastElement, true ) ) {
+			throw 'expected selection to include in the last selected block';
 		}
 	} );
 }
@@ -172,10 +171,10 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '12' );
 		await page.keyboard.press( 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowRight' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
 		await pressKeyWithModifier( 'shift', 'ArrowUp' );
 		await testNativeSelection();
-		// This delete all blocks.
+		// This deletes all blocks.
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -331,7 +330,6 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.up( 'Shift' );
 		await transformBlockTo( 'Group' );
-		await page.keyboard.press( 'ArrowDown' );
 
 		// Click the first paragraph in the first Group block while pressing `shift` key.
 		const firstParagraph = await page.waitForXPath( "//p[text()='first']" );
@@ -355,6 +353,7 @@ describe( 'Multi-block selection', () => {
 		await page.mouse.move( x + 20, y );
 		await page.mouse.down();
 		await page.keyboard.up( 'Shift' );
+		await page.mouse.up();
 		await page.keyboard.type( 'hi' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 		"<!-- wp:group -->
@@ -655,7 +654,6 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'Enter' );
 		// Select two columns.
 		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Enter' );
 		// Navigate to appender.
 		await page.keyboard.press( 'ArrowRight' );
@@ -831,4 +829,150 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.up( 'Shift' );
 		expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4 ] );
 	} );
+
+	it( 'should forward delete across blocks', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '.' );
+		await page.keyboard.press( 'Enter' );
+		// "## " creates h2.
+		await page.keyboard.type( '## ]2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+
+		// Test setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Delete' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '&' );
+
+		// Expect a heading with "1&2" as its content.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should write over selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ']2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+
+		// Test setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '...' );
+
+		// Expect a heading with "1&2" as its content.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should handle Enter across blocks', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '.' );
+		await page.keyboard.press( 'Enter' );
+		// "## " creates h2.
+		await page.keyboard.type( '## ]2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+
+		// Test setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Enter' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '&' );
+
+		// Expect two blocks with "&" in between.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should merge into quote with correct selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '> 1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ']2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+
+		// Test setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '&' );
+
+		// Expect two blocks with "&" in between.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should select separator (single element block)', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '/hr' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'a' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+
+		// Test setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '&' );
+
+		// Expect two blocks with "&" in between.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should partially select with shift + click', async () => {
+		await clickBlockAppender();
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ']2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.down( 'Shift' );
+		await page.click( 'strong' );
+		await page.keyboard.up( 'Shift' );
+
+		// Test setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '&' );
+
+		// Expect two blocks with "&" in between.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

package/specs/editor/various/post-editor-template-mode.test.js

@@ -239,7 +239,7 @@ describe( 'Delete Post Template Confirmation Dialog', () => {
 			if ( isWelcomeGuideActive === true ) {
 				await page.evaluate( () =>
 					wp.data
-						.dispatch( 'core/edit-post' )
+						.dispatch( 'core/preferences' )
 						.toggle( 'core/edit-post', 'welcomeGuide' )
 				);
 				await page.reload();

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

@@ -13,11 +13,17 @@ async function focusBlockToolbar() {
 }
 
 async function expectLabelToHaveFocus( label ) {
-	await expect(
-		await page.evaluate( () =>
+	let ariaLabel = await page.evaluate( () =>
+		document.activeElement.getAttribute( 'aria-label' )
+	);
+	// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
+	if ( ariaLabel !== label ) {
+		await page.keyboard.press( 'ArrowUp' );
+		ariaLabel = await page.evaluate( () =>
 			document.activeElement.getAttribute( 'aria-label' )
-		)
-	).toBe( label );
+		);
+	}
+	await expect( ariaLabel ).toBe( label );
 }
 
 async function testBlockToolbarKeyboardNavigation(

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

@@ -26,8 +26,8 @@ const addParagraphsAndColumnsDemo = async () => {
 		`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Columns')]`
 	);
 	await page.keyboard.press( 'Enter' );
-	await page.click( ':focus [aria-label="Two columns; equal split"]' );
-	await page.click( ':focus .block-editor-button-block-appender' );
+	await page.click( 'button[aria-label="Two columns; equal split"]' );
+	await page.click( '.block-editor-button-block-appender' );
 	await page.waitForSelector( '.block-editor-inserter__search input:focus' );
 	await page.keyboard.type( 'Paragraph' );
 	await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
@@ -628,9 +628,12 @@ describe( 'Writing Flow', () => {
 			`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Wide width')]`
 		);
 		await wideButton.click();
+		// Focus the block content
+		await page.keyboard.press( 'Tab' );
 
 		// Select the previous block.
 		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
 
 		// Confirm correct setup.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -650,13 +653,17 @@ describe( 'Writing Flow', () => {
 		const inserter = await page.$(
 			'.block-editor-block-list__insertion-point'
 		);
+		// Find the space between the inserter and the image block.
 		const inserterRect = await inserter.boundingBox();
 		const lowerInserterY = inserterRect.y + ( 2 * inserterRect.height ) / 3;
 
+		// Clicking that in-between space should select the image block.
 		await page.mouse.click( x, lowerInserterY );
 
 		const type = await page.evaluate( () =>
-			document.activeElement.getAttribute( 'data-type' )
+			document.activeElement
+				.closest( '[data-block]' )
+				.getAttribute( 'data-type' )
 		);
 
 		expect( type ).toBe( 'core/image' );
@@ -666,8 +673,6 @@ describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '/table' );
 		await page.keyboard.press( 'Enter' );
-		// Move into the placeholder UI.
-		await page.keyboard.press( 'ArrowDown' );
 		// Tab to the "Create table" button.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );