@wordpress/e2e-tests 4.9.0 → 5.0.0

package/specs/editor/blocks/quote.test.js

@@ -143,8 +143,11 @@ describe( 'Quote', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		await page.keyboard.press( 'Backspace' );
+		// Allow time for selection to update.
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
+		await page.keyboard.type( '2' );
 
-		// Expect the paragraph to be deleted.
+		// Expect the paragraph to be merged into the quote block.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 

package/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap

@@ -41,7 +41,7 @@ exports[`cpt locking template_lock all should not error when deleting the cotent
 `;
 
 exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = `
-"<!-- wp:group {\\"templateLock\\":false} -->
+"<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
 <p>p1</p>
 <!-- /wp:paragraph -->
@@ -55,7 +55,7 @@ exports[`cpt locking template_lock all unlocked group should allow blocks to be
 `;
 
 exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = `
-"<!-- wp:group {\\"templateLock\\":false} -->
+"<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
 <p></p>

package/specs/editor/various/__snapshots__/block-grouping.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
 <h2>Group Heading</h2>
 <!-- /wp:heading -->
@@ -17,7 +17,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of d
 `;
 
 exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via block transforms 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
 <p>First Paragraph</p>
 <!-- /wp:paragraph -->
@@ -33,7 +33,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 `;
 
 exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via options toolbar 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
 <p>First Paragraph</p>
 <!-- /wp:paragraph -->
@@ -49,7 +49,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 `;
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
 <h2>Group Heading</h2>
 <!-- /wp:heading -->
@@ -79,7 +79,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 `;
 
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
-"<!-- wp:group {\\"align\\":\\"full\\"} -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"},\\"align\\":\\"full\\"} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
 <h2>Group Heading</h2>
 <!-- /wp:heading -->

package/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap

@@ -51,7 +51,7 @@ exports[`Navigating the block hierarchy should navigate using the list view side
 `;
 
 exports[`Navigating the block hierarchy should select the wrapper div for a group 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
 <p>just a paragraph</p>
 <!-- /wp:paragraph -->

package/specs/editor/various/__snapshots__/draggable-block.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Draggable block should drag and drop 1`] = `
+exports[`Draggable block can drag and drop to the bottom of a block list 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>
 <!-- /wp:paragraph -->
@@ -10,7 +10,27 @@ exports[`Draggable block should drag and drop 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Draggable block should drag and drop 2`] = `
+exports[`Draggable block can drag and drop to the bottom of a block list 2`] = `
+"<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Draggable block can drag and drop to the top of a block list 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Draggable block can drag and drop to the top of a block list 2`] = `
 "<!-- wp:paragraph -->
 <p>2</p>
 <!-- /wp:paragraph -->

package/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap

@@ -54,7 +54,7 @@ lines preserved[/myshortcode]
 `;
 
 exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from block appender 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
 <p>Paragraph inside group</p>
 <!-- /wp:paragraph --></div>

package/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap

@@ -27,7 +27,7 @@ exports[`Keep styles on block transforms Should keep the font size during a tran
 `;
 
 exports[`Keep styles on block transforms Should not include styles in the group block when grouping a block 1`] = `
-"<!-- wp:group -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
 <p class=\\"has-large-font-size\\">Line 1 to be made large</p>
 <!-- /wp:paragraph --></div>

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

@@ -267,13 +267,17 @@ exports[`Multi-block selection should select all from empty selection 1`] = `
 exports[`Multi-block selection should select all from empty selection 2`] = `""`;
 
 exports[`Multi-block selection should select separator (single element block) 1`] = `
-"<!-- wp:separator -->
-<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
-<!-- /wp:separator -->
+"<!-- wp:paragraph -->
+<p>a</p>
+<!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>a</p>
-<!-- /wp:paragraph -->"
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:separator -->
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
+<!-- /wp:separator -->"
 `;
 
 exports[`Multi-block selection should select separator (single element block) 2`] = `

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

@@ -148,8 +148,8 @@ describe( 'Block Grouping', () => {
 			await clickBlockToolbarButton( 'Options' );
 			await clickMenuItem( 'Group' );
 			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:group -->
-			<div class=\\"wp-block-group\\"><!-- wp:group -->
+			"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+			<div class=\\"wp-block-group\\"><!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 			<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
 			<p>1</p>
 			<!-- /wp:paragraph --></div>

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

@@ -7,51 +7,120 @@ import {
 	deactivatePlugin,
 	activatePlugin,
 	showBlockToolbar,
+	setBrowserViewport,
+	waitForWindowDimensions,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Draggable block', () => {
-	beforeAll( async () => {
-		await page.setDragInterception( true );
+	// Tests don't seem to pass if beforeAll and afterAll are used.
+	// Unsure why.
+	beforeEach( async () => {
 		await deactivatePlugin(
 			'gutenberg-test-plugin-disables-the-css-animations'
 		);
+
+		// Set the viewport at a larger size than normal to ensure scrolling doesn't occur.
+		// Scrolling can interfere with the drag coordinates.
+		await page.setViewport( { width: 960, height: 1024 } );
+		await waitForWindowDimensions( 960, 1024 );
+		await createNewPost();
+		await page.setDragInterception( true );
 	} );
 
-	afterAll( async () => {
+	afterEach( async () => {
 		await page.setDragInterception( false );
+
+		// Reset the viewport to normal large size.
+		await setBrowserViewport( 'large' );
 		await activatePlugin(
 			'gutenberg-test-plugin-disables-the-css-animations'
 		);
 	} );
 
-	beforeEach( async () => {
-		await createNewPost();
+	it( 'can drag and drop to the top of a block list', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		// Confirm correct setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await showBlockToolbar();
+		const dragHandle = await page.waitForSelector(
+			'.block-editor-block-mover__drag-handle'
+		);
+		const dragHandlePoint = await dragHandle.clickablePoint();
+
+		const firstParagraph = await page.$( '[data-type="core/paragraph"]' );
+		const targetPoint = await firstParagraph.clickablePoint();
+		const targetRect = await firstParagraph.boundingBox();
+		const target = {
+			x: targetPoint.x,
+			// Drag to the top half.
+			y: targetPoint.y - targetRect.height * 0.25,
+		};
+
+		const dragData = await page.mouse.drag( dragHandlePoint, target );
+		await page.mouse.dragEnter( target, dragData );
+		await page.mouse.dragOver( target, dragData );
+
+		// Wait for the insertion point to be visible.
+		const insertionPoint = await page.waitForSelector(
+			'.block-editor-block-list__insertion-point'
+		);
+
+		// Expect the insertion point to be visible above the first paragraph.
+		const insertionPointBoundingBox = await insertionPoint.boundingBox();
+		expect( insertionPointBoundingBox.y ).toBeLessThan( target.y );
+
+		await page.mouse.drop( target, dragData );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should drag and drop', async () => {
+	it( 'can drag and drop to the bottom of a block list', async () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowUp' );
 
 		// Confirm correct setup.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
+		const [ , secondParagraph ] = await page.$$(
+			'[data-type="core/paragraph"]'
+		);
+
 		await showBlockToolbar();
 		const dragHandle = await page.waitForSelector(
 			'.block-editor-block-mover__drag-handle'
 		);
 		const dragHandlePoint = await dragHandle.clickablePoint();
 
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const paragraphPoint = await paragraph.clickablePoint();
-		const paragraphRect = await paragraph.boundingBox();
+		const targetPoint = await secondParagraph.clickablePoint();
+		const targetRect = await secondParagraph.boundingBox();
+		const target = {
+			x: targetPoint.x,
+			// Drag to the bottom half.
+			y: targetPoint.y + targetRect.height * 0.25,
+		};
 
-		await page.mouse.dragAndDrop( dragHandlePoint, {
-			x: paragraphPoint.x,
-			// Drag to the top half.
-			y: paragraphPoint.y - paragraphRect.height / 4,
-		} );
+		const dragData = await page.mouse.drag( dragHandlePoint, target );
+		await page.mouse.dragEnter( target, dragData );
+		await page.mouse.dragOver( target, dragData );
+
+		// Wait for the insertion point to be visible.
+		const insertionPoint = await page.waitForSelector(
+			'.block-editor-block-list__insertion-point'
+		);
+
+		// Expect the insertion point to be visible below the first paragraph.
+		const insertionPointBoundingBox = await insertionPoint.boundingBox();
+		expect( insertionPointBoundingBox.y ).toBeGreaterThan( target.y );
+
+		await page.mouse.drop( target, dragData );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

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

@@ -356,7 +356,7 @@ describe( 'Multi-block selection', () => {
 		await page.mouse.up();
 		await page.keyboard.type( 'hi' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:group -->
+		"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 		<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
 		<p>hih text in group</p>
 		<!-- /wp:paragraph --></div>
@@ -907,11 +907,16 @@ describe( 'Multi-block selection', () => {
 
 	it( 'should select separator (single element block)', async () => {
 		await clickBlockAppender();
-		await page.keyboard.type( '/hr' );
+		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'a' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await page.keyboard.type( '/hr' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pressKeyWithModifier( 'shift', 'ArrowDown' );
+		await pressKeyWithModifier( 'shift', 'ArrowDown' );
 
 		// Test setup.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -921,7 +926,7 @@ describe( 'Multi-block selection', () => {
 		// Ensure selection is in the correct place.
 		await page.keyboard.type( '&' );
 
-		// Expect two blocks with "&" in between.
+		// Expect a paragraph with "&".
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -996,4 +1001,22 @@ describe( 'Multi-block selection', () => {
 			expect( selectedBlocks.length ).toBe( 2 );
 		} );
 	} );
+
+	it( 'should select by dragging into separator', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await insertBlock( 'Separator' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		const [ paragraph, hr ] = await page.$$( '[data-type]' );
+		const coord1 = await paragraph.clickablePoint();
+		const coord2 = await hr.clickablePoint();
+
+		await page.mouse.move( coord1.x, coord1.y );
+		await page.mouse.down();
+		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
+		await page.mouse.up();
+
+		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+	} );
 } );

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

@@ -91,12 +91,10 @@ describe( 'Post visibility', () => {
 
 		// Set a publish date for the next month.
 		await page.click( '*[aria-label^="Change date"]' );
-		await page.click(
-			'*[aria-label="Move forward to switch to the next month."]'
-		);
+		await page.click( '*[aria-label="View next month"]' );
 		await (
 			await page.$x(
-				'//*[@role="application"][@aria-label="Calendar"]//td[@role="button"]/*[text() = "15"]'
+				'//*[@role="application"][@aria-label="Calendar"]//button[text()="15"]'
 			)
 		 )[ 0 ].click();
 

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

@@ -57,13 +57,9 @@ describe( 'Scheduling', () => {
 		await createNewPost();
 
 		await page.click( '*[aria-label^="Change date"]' );
-		await page.click(
-			'*[aria-label="Move backward to switch to the previous month."]'
-		);
+		await page.click( '*[aria-label="View previous month"]' );
 		expect( await isDateTimeComponentFocused() ).toBe( true );
-		await page.click(
-			'*[aria-label="Move forward to switch to the next month."]'
-		);
+		await page.click( '*[aria-label="View next month"]' );
 		expect( await isDateTimeComponentFocused() ).toBe( true );
 	} );
 } );

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

@@ -62,13 +62,11 @@ async function scheduleTestPost( postType, viewport ) {
 	}
 	// Set a publish date for the next month.
 	await page.click( '.edit-post-post-schedule__toggle' );
-	await page.click(
-		'*[aria-label="Move forward to switch to the next month."]'
-	);
+	await page.click( '*[aria-label="View next month"]' );
 
 	await (
 		await page.$x(
-			'//*[@role="application"][@aria-label="Calendar"]//td[@role="button"]/*[text() = "15"]'
+			'//*[@role="application"][@aria-label="Calendar"]//button[text()="15"]'
 		)
 	 )[ 0 ].click();
 

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

@@ -157,9 +157,9 @@ describe( 'Post Editor Performance', () => {
 		await page.evaluate( () => {
 			const { createBlock } = window.wp.blocks;
 			const { dispatch } = window.wp.data;
-			const blocks = window.lodash
-				.times( 1000 )
-				.map( () => createBlock( 'core/paragraph' ) );
+			const blocks = Array.from( { length: 1000 } ).map( () =>
+				createBlock( 'core/paragraph' )
+			);
 			dispatch( 'core/block-editor' ).resetBlocks( blocks );
 		} );
 		const paragraphs = await page.$$( '.wp-block' );

package/specs/site-editor/global-styles-sidebar.test.js

@@ -36,7 +36,8 @@ describe( 'Global styles sidebar', () => {
 			const results = await page.$$(
 				'.edit-site-block-types-item-list div[role="listitem"]'
 			);
-			expect( results.length ).toEqual( 1 );
+			// Matches both Heading and Table of Contents blocks. (The latter contains "heading" in its description.)
+			expect( results.length ).toEqual( 2 );
 		} );
 	} );
 } );

package/specs/editor/plugins/wp-editor-meta-box.test.js

@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'WP Editor Meta Boxes', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-wp-editor-meta-box' );
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-wp-editor-meta-box' );
-	} );
-
-	it( 'Should save the changes', async () => {
-		// Add title to enable valid non-empty post save.
-		await page.type( '.editor-post-title__input', 'Hello Meta' );
-
-		// Type something.
-		await expect( page ).toClick( '#test_tinymce_id-html' );
-		await page.type( '#test_tinymce_id', 'Typing in a metabox' );
-		await page.click( '#test_tinymce_id-tmce' );
-
-		await publishPost();
-
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		await expect( page ).toClick( '#test_tinymce_id-html' );
-		await page.waitForSelector( '#test_tinymce_id' );
-		const content = await page.$eval(
-			'#test_tinymce_id',
-			( textarea ) => textarea.value
-		);
-
-		/*
-		 * `content` may or may not contain the <p> tags depending on hasWpautop value in this line:
-		 * https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L15
-		 *
-		 * Now, for the purposes of this e2e test we explicitly set wpautop to true in the test plugin:
-		 * https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/e2e-tests/plugins/wp-editor-metabox.php#L36
-		 *
-		 * If this test randomly fails because of the actual value being wrapped in <p> like <p>Typing in a metabox</p>, it means that
-		 * hasWpautop has been errorneously set to false in the line above. You may want to check:
-		 * * Is window.wp.editor.autop a function? It should be one since https://github.com/WordPress/gutenberg/pull/33228
-		 * * Is wpautop still true in the second link mentioned in this comment?
-		 *
-		 * For more context, see https://github.com/WordPress/gutenberg/pull/33228/files#r666897885
-		 */
-		expect( content ).toBe( 'Typing in a metabox' );
-	} );
-} );