@wordpress/e2e-tests 5.6.0 → 6.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.1.0 (2023-01-02)
+
+## 6.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 5.6.0 (2022-11-16)
 
 ## 5.5.0 (2022-11-02)

package/assets/small-post-with-containers.html

@@ -0,0 +1,77 @@
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->

package/config/performance-reporter.js

@@ -36,6 +36,7 @@ class PerformanceReporter {
 			firstContentfulPaint,
 			firstBlock,
 			type,
+			typeContainer,
 			focus,
 			listViewOpen,
 			inserterOpen,
@@ -68,7 +69,7 @@ Average time to first block: ${ success(
 		if ( type && type.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Typing Performance:' ) }
+${ title( 'Typing:' ) }
 Average time to type character: ${ success( round( average( type ) ) + 'ms' ) }
 Slowest time to type character: ${ success(
 				round( Math.max( ...type ) ) + 'ms'
@@ -78,10 +79,25 @@ Fastest time to type character: ${ success(
 			) }` );
 		}
 
+		if ( typeContainer && typeContainer.length ) {
+			// eslint-disable-next-line no-console
+			console.log( `
+${ title( 'Typing within a container:' ) }
+Average time to type within a container: ${ success(
+				round( average( typeContainer ) ) + 'ms'
+			) }
+Slowest time to type within a container: ${ success(
+				round( Math.max( ...typeContainer ) ) + 'ms'
+			) }
+Fastest time to type within a container: ${ success(
+				round( Math.min( ...typeContainer ) ) + 'ms'
+			) }` );
+		}
+
 		if ( focus && focus.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Block Selection Performance:' ) }
+${ title( 'Block Selection:' ) }
 Average time to select a block: ${ success( round( average( focus ) ) + 'ms' ) }
 Slowest time to select a block: ${ success(
 				round( Math.max( ...focus ) ) + 'ms'
@@ -94,7 +110,7 @@ Fastest time to select a block: ${ success(
 		if ( listViewOpen && listViewOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Opening List View Performance:' ) }
+${ title( 'Opening List View:' ) }
 Average time to open list view: ${ success(
 				round( average( listViewOpen ) ) + 'ms'
 			) }
@@ -109,7 +125,7 @@ Fastest time to open list view: ${ success(
 		if ( inserterOpen && inserterOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Opening Global Inserter Performance:' ) }
+${ title( 'Opening Global Inserter:' ) }
 Average time to open global inserter: ${ success(
 				round( average( inserterOpen ) ) + 'ms'
 			) }
@@ -124,7 +140,7 @@ Fastest time to open global inserter: ${ success(
 		if ( inserterSearch && inserterSearch.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Inserter Search Performance:' ) }
+${ title( 'Inserter Search:' ) }
 Average time to type the inserter search input: ${ success(
 				round( average( inserterSearch ) ) + 'ms'
 			) }
@@ -139,7 +155,7 @@ Fastest time to type the inserter search input: ${ success(
 		if ( inserterHover && inserterHover.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Inserter Block Item Hover Performance:' ) }
+${ title( 'Inserter Block Item Hover:' ) }
 Average time to move mouse between two block item in the inserter: ${ success(
 				round( average( inserterHover ) ) + 'ms'
 			) }

package/config/setup-performance-test.js

@@ -34,6 +34,9 @@ beforeAll( async () => {
 	await trashAllPosts( 'wp_block' );
 	await setupBrowser();
 	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
+	await page.emulateMediaFeatures( [
+		{ name: 'prefers-reduced-motion', value: 'reduce' },
+	] );
 } );
 
 afterEach( async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "5.6.0",
+	"version": "6.1.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^8.6.0",
-		"@wordpress/jest-console": "^6.5.0",
-		"@wordpress/jest-puppeteer-axe": "^5.5.0",
-		"@wordpress/scripts": "^24.6.0",
-		"@wordpress/url": "^3.23.0",
+		"@wordpress/e2e-test-utils": "^9.1.0",
+		"@wordpress/jest-console": "^6.7.0",
+		"@wordpress/jest-puppeteer-axe": "^5.7.0",
+		"@wordpress/scripts": "^25.1.0",
+		"@wordpress/url": "^3.25.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -40,11 +40,11 @@
 	"peerDependencies": {
 		"jest": ">=27",
 		"puppeteer-core": ">=11",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
 }

package/plugins/inner-blocks-templates/index.js

@@ -3,6 +3,8 @@
 	const createBlock = wp.blocks.createBlock;
 	const el = wp.element.createElement;
 	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const useState = window.wp.element.useState;
+
 	const TEMPLATE = [
 		[
 			'core/paragraph',
@@ -171,4 +173,31 @@
 
 		save,
 	} );
+
+
+	function InnerBlocksAsyncTemplateEdit() {
+		const [ template, setTemplate ] = useState( [] );
+
+		setInterval( () => {
+			setTemplate( TEMPLATE_TWO_PARAGRAPHS );
+		}, 1000 );
+
+		return el( InnerBlocks, {
+			template,
+		} );
+	}
+
+	registerBlockType(
+		'test/test-inner-blocks-async-template',
+		{
+			title: 'Test Inner Blocks Async Template',
+			icon: 'cart',
+			category: 'text',
+
+			edit: InnerBlocksAsyncTemplateEdit,
+
+			// Purposely do not save inner blocks so that it's possible to test template resolution.
+			save() {},
+		}
+	);
 } )();

package/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -2,19 +2,19 @@
 
 exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
 "<!-- wp:heading {\\"level\\":4} -->
-<h4>4</h4>
+<h4 class=\\"wp-block-heading\\">4</h4>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading can be created by prefixing number sign and a space 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3>3</h3>
+<h3 class=\\"wp-block-heading\\">3</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
+<h2 class=\\"wp-block-heading has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -24,13 +24,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>a</h2>
+<h2 class=\\"wp-block-heading\\">a</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
 "<!-- wp:heading -->
-<h2>a</h2>
+<h2 class=\\"wp-block-heading\\">a</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -40,12 +40,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th
 
 exports[`Heading should not work with the list input rule 1`] = `
 "<!-- wp:heading -->
-<h2>1. H</h2>
+<h2 class=\\"wp-block-heading\\">1. H</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should work with the format input rules 1`] = `
 "<!-- wp:heading -->
-<h2><code>code</code></h2>
+<h2 class=\\"wp-block-heading\\"><code>code</code></h2>
 <!-- /wp:heading -->"
 `;

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

@@ -87,7 +87,7 @@ describe( 'Heading', () => {
 		await page.keyboard.press( 'Enter' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
-		<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
+		<h3 class=\\"wp-block-heading has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
 		<!-- /wp:heading -->"
 	` );
 	} );

package/specs/editor/plugins/block-directory-add.test.js

@@ -166,7 +166,7 @@ const matchUrl = ( reqUrl, urls ) => {
 };
 
 describe( 'adding blocks from block directory', () => {
-	beforeEach( async () => {
+	beforeAll( async () => {
 		await createNewPost();
 	} );
 

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

@@ -3,7 +3,7 @@
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -51,7 +51,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 {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
 "<!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -81,7 +81,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\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image {\\"align\\":\\"full\\"} -->

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

@@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class=\\"wp-block-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:cover -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class=\\"wp-block-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

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

@@ -8,15 +8,15 @@ exports[`Keep styles on block transforms Should keep colors during a transform 1
 
 exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
 "<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 1 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 2 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 2 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 3 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 3 to be made large</h2>
 <!-- /wp:heading -->"
 `;
 

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

@@ -6,7 +6,7 @@ exports[`List view allows a user to drag a block to a new sibling position 1`] =
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2></h2>
+<h2 class=\\"wp-block-heading\\"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->

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

@@ -84,13 +84,13 @@ exports[`Multi-block selection should forward delete across blocks 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>]2</h2>
+<h2 class=\\"wp-block-heading\\">]2</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Multi-block selection should forward delete across blocks 2`] = `
 "<!-- wp:heading -->
-<h2>1&amp;2</h2>
+<h2 class=\\"wp-block-heading\\">1&amp;2</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -128,7 +128,7 @@ exports[`Multi-block selection should handle Enter across blocks 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>]2</h2>
+<h2 class=\\"wp-block-heading\\">]2</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -142,7 +142,7 @@ exports[`Multi-block selection should handle Enter across blocks 2`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>2</h2>
+<h2 class=\\"wp-block-heading\\">2</h2>
 <!-- /wp:heading -->"
 `;
 

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

@@ -32,7 +32,7 @@ exports[`RichText should handle Home and End keys 1`] = `
 
 exports[`RichText should handle change in tag name gracefully 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3></h3>
+<h3 class=\\"wp-block-heading\\"></h3>
 <!-- /wp:heading -->"
 `;
 

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

@@ -16,7 +16,9 @@ describe( 'a11y', () => {
 
 	it( 'tabs header bar', async () => {
 		await pressKeyWithModifier( 'ctrl', '`' );
-
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
 		await page.keyboard.press( 'Tab' );
 
 		const isFocusedToggle = await page.$eval(

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

@@ -111,16 +111,14 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Move focus to the sidebar area.
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 		await tabToColumnsControl();
 
 		// Tweak the columns count by increasing it by one.
 		await page.keyboard.press( 'ArrowRight' );
 
 		// Navigate to the third column in the columns block.
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrlShift', '`' );
+		await pressKeyWithModifier( 'ctrlShift', '`' );
 		await pressKeyTimes( 'Tab', 4 );
 		await pressKeyTimes( 'ArrowDown', 4 );
 		await page.waitForSelector(

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

@@ -16,8 +16,8 @@ describe( 'Block Switcher', () => {
 
 	it( 'Should show the expected block transforms on the list block when the blocks are removed', async () => {
 		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '- List content' );
 		await page.keyboard.press( 'ArrowUp' );
 		await pressKeyWithModifier( 'alt', 'F10' );
 
@@ -43,8 +43,8 @@ describe( 'Block Switcher', () => {
 		} );
 
 		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '- List content' );
 		await page.keyboard.press( 'ArrowUp' );
 		await pressKeyWithModifier( 'alt', 'F10' );
 
@@ -63,6 +63,10 @@ describe( 'Block Switcher', () => {
 	} );
 
 	it( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async () => {
+		// Insert a list block.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '- List content' );
+
 		// Remove the paragraph and quote block from the list of registered blocks.
 		await page.evaluate( () => {
 			[
@@ -75,23 +79,20 @@ describe( 'Block Switcher', () => {
 			].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
 		} );
 
-		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
 		await page.keyboard.press( 'ArrowUp' );
 		await pressKeyWithModifier( 'alt', 'F10' );
 
 		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
+		expect( await hasBlockSwitcher() ).toBeFalsy();
 		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toHaveLength( 1 );
+		expect( await getAvailableBlockTransforms() ).toHaveLength( 0 );
 	} );
 
 	describe( 'Conditional tranformation options', () => {
 		describe( 'Columns tranforms', () => {
 			it( 'Should show Columns block only if selected blocks are between limits (1-6)', async () => {
-				await insertBlock( 'List' );
-				await page.keyboard.type( 'List content' );
+				await page.keyboard.press( 'Enter' );
+				await page.keyboard.type( '- List content' );
 				await page.keyboard.press( 'ArrowUp' );
 				await insertBlock( 'Heading' );
 				await page.keyboard.type( 'I am a header' );
@@ -103,8 +104,8 @@ describe( 'Block Switcher', () => {
 				);
 			} );
 			it( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async () => {
-				await insertBlock( 'List' );
-				await page.keyboard.type( 'List content' );
+				await page.keyboard.press( 'Enter' );
+				await page.keyboard.type( '- List content' );
 				await page.keyboard.press( 'ArrowUp' );
 				await insertBlock( 'Heading' );
 				await page.keyboard.type( 'I am a header' );

package/specs/editor/various/editor-modes.test.js

@@ -22,9 +22,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 	it( 'should switch between visual and HTML modes', async () => {
 		// This block should be in "visual" mode by default.
-		let visualBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
-		);
+		let visualBlock = await page.$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 
 		// Change editing mode from "Visual" to "HTML".
@@ -33,7 +31,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// Wait for the block to be converted to HTML editing mode.
 		const htmlBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
+			'[data-block] .block-editor-block-list__block-html-textarea'
 		);
 		expect( htmlBlock ).toHaveLength( 1 );
 
@@ -42,9 +40,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await clickMenuItem( 'Edit visually' );
 
 		// This block should be in "visual" mode by default.
-		visualBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
-		);
+		visualBlock = await page.$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 	} );
 

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

@@ -23,6 +23,9 @@ const navigateToContentEditorTop = async () => {
 	// Use 'Ctrl+`' to return to the top of the editor.
 	await pressKeyWithModifier( 'ctrl', '`' );
 	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
@@ -36,6 +39,10 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Open document settings' );
+
+	// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
+	await pressKeyWithModifier( 'shift', 'Tab' );
+	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
 };
 
 const tabThroughBlockToolbar = async () => {

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

@@ -70,7 +70,7 @@ async function testNativeSelection() {
 			return;
 		}
 
-		if ( ! selection.rangeCount === 1 ) {
+		if ( selection.rangeCount !== 1 ) {
 			throw 'expected one range';
 		}
 

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

@@ -108,7 +108,7 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Surprised greeting block' );
 
 		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
+		await clickBlockToolbarButton( 'Convert to regular block' );
 
 		// Check that we have a paragraph block on the page.
 		const paragraphBlock = await page.$(
@@ -343,7 +343,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert back to regular blocks.
 		await clickBlockToolbarButton( 'Select Reusable block' );
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
+		await clickBlockToolbarButton( 'Convert to regular block' );
 		await page.waitForXPath( selector, {
 			hidden: true,
 		} );

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

@@ -96,8 +96,6 @@ describe( 'Sidebar', () => {
 
 		// Region navigate to Sidebar.
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 
 		// Tab lands at first (presumed selected) option "Post".
 		await page.keyboard.press( 'Tab' );