@wordpress/e2e-tests 5.6.0 → 6.1.0

package/specs/experiments/blocks/post-comments-form.test.js

@@ -6,8 +6,7 @@ import {
 	activateTheme,
 	setOption,
 	visitSiteEditor,
-	openSiteEditorNavigationPanel,
-	navigateSiteEditorBackToRoot,
+	enterEditMode,
 	deleteAllTemplates,
 	canvas,
 } from '@wordpress/e2e-test-utils';
@@ -24,15 +23,15 @@ describe( 'Post Comments Form', () => {
 
 			// Navigate to "Singular" post template
 			await visitSiteEditor();
-			await openSiteEditorNavigationPanel();
-			await navigateSiteEditorBackToRoot();
 			await expect( page ).toClick(
-				'.components-navigation__item-title',
+				'.edit-site-sidebar-navigation-item',
 				{ text: /templates/i }
 			);
-			await expect( page ).toClick( '.components-heading > a', {
-				text: /singular/i,
-			} );
+			await expect( page ).toClick(
+				'.edit-site-sidebar-navigation-item',
+				{ text: /singular/i }
+			);
+			await enterEditMode();
 
 			// Insert post comments form
 			await insertBlock( 'Post Comments Form' );

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

@@ -15,6 +15,7 @@ import {
 	closeGlobalBlockInserter,
 	openListView,
 	closeListView,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -32,6 +33,34 @@ import {
 
 jest.setTimeout( 1000000 );
 
+async function loadHtmlIntoTheBlockEditor( html ) {
+	await page.evaluate( ( _html ) => {
+		const { parse } = window.wp.blocks;
+		const { dispatch } = window.wp.data;
+		const blocks = parse( _html );
+
+		blocks.forEach( ( block ) => {
+			if ( block.name === 'core/image' ) {
+				delete block.attributes.id;
+				delete block.attributes.url;
+			}
+		} );
+
+		dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	}, html );
+}
+
+async function load1000Paragraphs() {
+	await page.evaluate( () => {
+		const { createBlock } = window.wp.blocks;
+		const { dispatch } = window.wp.data;
+		const blocks = Array.from( { length: 1000 } ).map( () =>
+			createBlock( 'core/paragraph' )
+		);
+		dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	} );
+}
+
 describe( 'Post Editor Performance', () => {
 	const results = {
 		serverResponse: [],
@@ -41,6 +70,7 @@ describe( 'Post Editor Performance', () => {
 		firstContentfulPaint: [],
 		firstBlock: [],
 		type: [],
+		typeContainer: [],
 		focus: [],
 		listViewOpen: [],
 		inserterOpen: [],
@@ -50,29 +80,6 @@ describe( 'Post Editor Performance', () => {
 	const traceFile = __dirname + '/trace.json';
 	let traceResults;
 
-	beforeAll( async () => {
-		const html = readFile(
-			join( __dirname, '../../assets/large-post.html' )
-		);
-
-		await createNewPost();
-		await page.evaluate( ( _html ) => {
-			const { parse } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = parse( _html );
-
-			blocks.forEach( ( block ) => {
-				if ( block.name === 'core/image' ) {
-					delete block.attributes.id;
-					delete block.attributes.url;
-				}
-			} );
-
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
-		}, html );
-		await saveDraft();
-	} );
-
 	afterAll( async () => {
 		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
 		writeFileSync(
@@ -83,6 +90,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	beforeEach( async () => {
+		await createNewPost();
 		// Disable auto-save to avoid impacting the metrics.
 		await page.evaluate( () => {
 			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
@@ -93,11 +101,17 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Loading', async () => {
-		// Measuring loading time.
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
+		await saveDraft();
 		let i = 5;
 		while ( i-- ) {
 			await page.reload();
-			await page.waitForSelector( '.wp-block' );
+			await page.waitForSelector( '.edit-post-layout', {
+				timeout: 120000,
+			} );
+			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 			const {
 				serverResponse,
 				firstPaint,
@@ -117,7 +131,9 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Typing', async () => {
-		// Measuring typing performance.
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
 		await insertBlock( 'Paragraph' );
 		let i = 20;
 		await page.tracing.start( {
@@ -151,18 +167,59 @@ describe( 'Post Editor Performance', () => {
 		}
 	} );
 
-	it( 'Selecting blocks', async () => {
-		// Measuring block selection performance.
-		await createNewPost();
-		await page.evaluate( () => {
-			const { createBlock } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = Array.from( { length: 1000 } ).map( () =>
-				createBlock( 'core/paragraph' )
-			);
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	it( 'Typing within containers', async () => {
+		await loadHtmlIntoTheBlockEditor(
+			readFile(
+				join(
+					__dirname,
+					'../../assets/small-post-with-containers.html'
+				)
+			)
+		);
+		// Select the block where we type in
+		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().click( 'p[aria-label="Paragraph block"]' );
+		// Ignore firsted typed character because it's different
+		// It probably deserves a dedicated metric.
+		// (isTyping triggers so it's slower)
+		await page.keyboard.type( 'x' );
+
+		let i = 10;
+		await page.tracing.start( {
+			path: traceFile,
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
 		} );
-		const paragraphs = await page.$$( '.wp-block' );
+
+		while ( i-- ) {
+			// Wait for the browser to be idle before starting the monitoring.
+			// eslint-disable-next-line no-restricted-syntax
+			await page.waitForTimeout( 500 );
+			await page.keyboard.type( 'x' );
+		}
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitForTimeout( 500 );
+		await page.tracing.stop();
+		traceResults = JSON.parse( readFile( traceFile ) );
+		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+			getTypingEventDurations( traceResults );
+		if (
+			keyDownEvents.length === keyPressEvents.length &&
+			keyPressEvents.length === keyUpEvents.length
+		) {
+			// The first character typed triggers a longer time (isTyping change)
+			// It can impact the stability of the metric, so we exclude it.
+			for ( let j = 1; j < keyDownEvents.length; j++ ) {
+				results.typeContainer.push(
+					keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+				);
+			}
+		}
+	} );
+
+	it( 'Selecting blocks', async () => {
+		await load1000Paragraphs();
+		const paragraphs = await canvas().$$( '.wp-block' );
 		await page.tracing.start( {
 			path: traceFile,
 			screenshots: false,
@@ -182,8 +239,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening persistent list view', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
+		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
 				path: traceFile,
@@ -202,8 +258,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening the inserter', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
+		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
 				path: traceFile,
@@ -225,8 +280,7 @@ describe( 'Post Editor Performance', () => {
 		function sum( arr ) {
 			return arr.reduce( ( a, b ) => a + b, 0 );
 		}
-
-		// Measure time to search the inserter and get results.
+		await load1000Paragraphs();
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
@@ -258,7 +312,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Hovering Inserter Items', async () => {
-		// Measure inserter hover performance.
+		await load1000Paragraphs();
 		const paragraphBlockItem =
 			'.block-editor-inserter__menu .editor-block-list-item-paragraph';
 		const headingBlockItem =

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

@@ -15,6 +15,7 @@ import {
 	saveDraft,
 	insertBlock,
 	deleteAllTemplates,
+	enterEditMode,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -50,6 +51,7 @@ describe( 'Site Editor Performance', () => {
 			firstContentfulPaint: [],
 			firstBlock: [],
 			type: [],
+			typeContainer: [],
 			focus: [],
 			inserterOpen: [],
 			inserterHover: [],
@@ -114,6 +116,7 @@ describe( 'Site Editor Performance', () => {
 		await canvas().waitForSelector(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
+		await enterEditMode();
 		await canvas().click(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);

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

@@ -5,6 +5,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	enterEditMode,
 	toggleGlobalStyles,
 	openGlobalStylesPanel,
 } from '@wordpress/e2e-test-utils';
@@ -26,6 +27,7 @@ describe( 'Global styles sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 	describe( 'blocks list', () => {
 		it( 'should filter results properly', async () => {

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

@@ -13,7 +13,9 @@ import {
 	clickButton,
 	createReusableBlock,
 	visitSiteEditor,
+	enterEditMode,
 	deleteAllTemplates,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Multi-entity save flow', () => {
@@ -93,8 +95,8 @@ describe( 'Multi-entity save flow', () => {
 		it( 'Save flow should work as expected.', async () => {
 			await createNewPost();
 			// Edit the page some.
-			await page.waitForSelector( '.editor-post-title' );
-			await page.click( '.editor-post-title' );
+			await canvas().waitForSelector( '.editor-post-title' );
+			await canvas().click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
 			await page.keyboard.press( 'Enter' );
 
@@ -109,8 +111,8 @@ describe( 'Multi-entity save flow', () => {
 
 			// Add a reusable block and edit it.
 			await createReusableBlock( 'Hi!', 'Test' );
-			await page.waitForSelector( 'p[data-type="core/paragraph"]' );
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().waitForSelector( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			await page.keyboard.type( 'Oh!' );
 
 			// Should trigger multi-entity save button once template part edited.
@@ -168,7 +170,7 @@ describe( 'Multi-entity save flow', () => {
 			} );
 
 			// Update the post.
-			await page.click( '.editor-post-title' );
+			await canvas().click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
 
 			// Verify update button is enabled.
@@ -181,9 +183,9 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistence( saveA11ySelector, false );
 
 			// Update reusable block again.
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			// We need to click again due to the clickthrough overlays in reusable blocks.
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			await page.keyboard.type( 'R!' );
 
 			// Multi-entity saving should be enabled.
@@ -202,19 +204,19 @@ describe( 'Multi-entity save flow', () => {
 			);
 			const editableSiteTitleSelector =
 				'.wp-block-site-title a[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTitleSelector );
-			await page.focus( editableSiteTitleSelector );
+			await canvas().waitForSelector( editableSiteTitleSelector );
+			await canvas().focus( editableSiteTitleSelector );
 			await page.keyboard.type( '...' );
 
 			await insertBlock( 'Site Tagline' );
 			// Wait for the placeholder.
-			await page.waitForXPath(
+			await canvas().waitForXPath(
 				'//span[@data-rich-text-placeholder="Write site tagline…"]'
 			);
 			const editableSiteTagLineSelector =
 				'.wp-block-site-tagline[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTagLineSelector );
-			await page.focus( editableSiteTagLineSelector );
+			await canvas().waitForSelector( editableSiteTagLineSelector );
+			await canvas().focus( editableSiteTagLineSelector );
 			await page.keyboard.type( 'Just another WordPress site' );
 
 			await clickButton( 'Publish' );
@@ -265,6 +267,8 @@ describe( 'Multi-entity save flow', () => {
 				postType: 'wp_template',
 			} );
 
+			await enterEditMode();
+
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-edit-mode__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
@@ -302,6 +306,8 @@ describe( 'Multi-entity save flow', () => {
 				postType: 'wp_template',
 			} );
 
+			await enterEditMode();
+
 			// Insert a paragraph at the bottom.
 			await insertBlock( 'Paragraph' );
 

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

@@ -8,6 +8,7 @@ import {
 	selectBlockByClientId,
 	insertBlock,
 	visitSiteEditor,
+	enterEditMode,
 } from '@wordpress/e2e-test-utils';
 
 async function toggleSidebar() {
@@ -49,6 +50,7 @@ describe( 'Settings sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 
 	describe( 'Template tab', () => {
@@ -68,6 +70,7 @@ describe( 'Settings sidebar', () => {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
 			} );
+			await enterEditMode();
 			const templateCardAfterNavigation = await getTemplateCard();
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {

package/specs/site-editor/site-editor-export.test.js

@@ -12,6 +12,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	enterEditMode,
 	clickOnMoreMenuItem,
 } from '@wordpress/e2e-test-utils';
 
@@ -41,6 +42,7 @@ describe( 'Site Editor Templates Export', () => {
 
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 
 	it( 'clicking export should download emptytheme.zip file', async () => {

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

@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Quote can be converted to a pullquote 1`] = `
-"<!-- wp:pullquote -->
-<figure class=\\"wp-block-pullquote\\"><blockquote><p>one<br>two</p><cite>cite</cite></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders a paragraph for the cite, if it exists 1`] = `
-"<!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>cite</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders a void paragraph if both the cite and quote are void 1`] = `""`;
-
-exports[`Quote can be converted to paragraphs and renders one paragraph block per <p> within quote 1`] = `
-"<!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders only one paragraph for the cite, if the quote is void 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>cite</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be created by converting a heading 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:heading -->
-<h2>test</h2>
-<!-- /wp:heading --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by converting a paragraph 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>test</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by converting multiple paragraphs 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by typing "/quote" 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>I’m a quote</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by typing > in front of text of a paragraph block 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>test</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by using > at the start of a paragraph block 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>A quote</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Another paragraph</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be split at the end 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be split at the end 2`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;