@wordpress/e2e-tests 6.4.0 → 6.5.0

package/specs/performance/front-end-classic-theme.test.js

@@ -13,6 +13,7 @@ describe( 'Front End Performance', () => {
 	const results = {
 		timeToFirstByte: [],
 		largestContentfulPaint: [],
+		lcpMinusTtfb: [],
 	};
 
 	beforeAll( async () => {
@@ -28,24 +29,7 @@ describe( 'Front End Performance', () => {
 		);
 	} );
 
-	it( 'Time To First Byte (TTFB)', async () => {
-		// We derive the 75th percentile of the TTFB based on these results.
-		// By running it 16 times, the percentile value would be (75/100)*16=12,
-		// meaning that we discard the worst 4 values.
-		let i = 16;
-		while ( i-- ) {
-			await page.goto( createURL( '/' ) );
-			const navigationTimingJson = await page.evaluate( () =>
-				JSON.stringify( performance.getEntriesByType( 'navigation' ) )
-			);
-			const [ navigationTiming ] = JSON.parse( navigationTimingJson );
-			results.timeToFirstByte.push(
-				navigationTiming.responseStart - navigationTiming.startTime
-			);
-		}
-	} );
-
-	it( 'Largest Contentful Paint (LCP)', async () => {
+	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
 		// Based on https://addyosmani.com/blog/puppeteer-recipes/#performance-observer-lcp
 		function calcLCP() {
 			// By using -1 we know when it didn't record any event.
@@ -73,9 +57,6 @@ describe( 'Front End Performance', () => {
 			} );
 		}
 
-		// We derive the 75th percentile of the TTFB based on these results.
-		// By running it 16 times, the percentile value would be (75/100)*16=12,
-		// meaning that we discard the worst 4 values.
 		let i = 16;
 		while ( i-- ) {
 			await page.evaluateOnNewDocument( calcLCP );
@@ -84,10 +65,18 @@ describe( 'Front End Performance', () => {
 			// https://pptr.dev/api/puppeteer.page.goto#remarks
 			await page.goto( createURL( '/' ), { waitUntil: 'networkidle0' } );
 
-			const lcp = await page.evaluate(
-				() => window.largestContentfulPaint
-			);
+			const { lcp, ttfb } = await page.evaluate( () => {
+				const [ { responseStart, startTime } ] =
+					performance.getEntriesByType( 'navigation' );
+				return {
+					lcp: window.largestContentfulPaint,
+					ttfb: responseStart - startTime,
+				};
+			} );
+
 			results.largestContentfulPaint.push( lcp );
+			results.timeToFirstByte.push( ttfb );
+			results.lcpMinusTtfb.push( lcp - ttfb );
 		}
 	} );
 } );

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

@@ -29,6 +29,7 @@ import {
 	getHoverEventDurations,
 	getSelectionEventDurations,
 	getLoadingDurations,
+	sum,
 } from './utils';
 
 jest.setTimeout( 1000000 );
@@ -235,22 +236,26 @@ describe( 'Post Editor Performance', () => {
 	it( 'Selecting blocks', async () => {
 		await load1000Paragraphs();
 		const paragraphs = await canvas().$$( '.wp-block' );
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
 		await paragraphs[ 0 ].click();
 		for ( let j = 1; j <= 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 1000 );
+			await page.tracing.start( {
+				path: traceFile,
+				screenshots: false,
+				categories: [ 'devtools.timeline' ],
+			} );
 			await paragraphs[ j ].click();
+			await page.tracing.stop();
+			traceResults = JSON.parse( readFile( traceFile ) );
+			const allDurations = getSelectionEventDurations( traceResults );
+			results.focus.push(
+				allDurations.reduce( ( acc, eventDurations ) => {
+					return acc + sum( eventDurations );
+				}, 0 )
+			);
 		}
-		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
-		const [ focusEvents ] = getSelectionEventDurations( traceResults );
-		results.focus = focusEvents;
 	} );
 
 	it( 'Opening persistent list view', async () => {
@@ -292,9 +297,6 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Searching the inserter', async () => {
-		function sum( arr ) {
-			return arr.reduce( ( a, b ) => a + b, 0 );
-		}
 		await load1000Paragraphs();
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {

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

@@ -90,7 +90,6 @@ describe( 'Site Editor Performance', () => {
 		await visitSiteEditor( {
 			postId: id,
 			postType: 'page',
-			path: '/navigation/single',
 		} );
 	} );
 
@@ -148,7 +147,7 @@ describe( 'Site Editor Performance', () => {
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
 		await enterEditMode();
-		await canvas().click(
+		await canvas().focus(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
 		await insertBlock( 'Paragraph' );

package/specs/performance/utils.js

@@ -41,6 +41,10 @@ function isFocusEvent( item ) {
 	return isEvent( item ) && item.args.data.type === 'focus';
 }
 
+function isFocusInEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'focusin';
+}
+
 function isClickEvent( item ) {
 	return isEvent( item ) && item.args.data.type === 'click';
 }
@@ -68,7 +72,10 @@ export function getTypingEventDurations( trace ) {
 }
 
 export function getSelectionEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isFocusEvent ) ];
+	return [
+		getEventDurationsForType( trace, isFocusEvent ),
+		getEventDurationsForType( trace, isFocusInEvent ),
+	];
 }
 
 export function getClickEventDurations( trace ) {
@@ -113,3 +120,7 @@ export async function getLoadingDurations() {
 		};
 	} );
 }
+
+export function sum( arr ) {
+	return arr.reduce( ( a, b ) => a + b, 0 );
+}

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

@@ -265,7 +265,6 @@ describe( 'Multi-entity save flow', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
-				path: '/templates/single',
 			} );
 
 			await enterEditMode();
@@ -305,7 +304,6 @@ describe( 'Multi-entity save flow', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
-				path: '/templates/single',
 			} );
 
 			await enterEditMode();

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

@@ -69,7 +69,6 @@ describe( 'Settings sidebar', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
-				path: '/templates/single',
 			} );
 			await enterEditMode();
 			const templateCardAfterNavigation = await getTemplateCard();

package/specs/widgets/editing-widgets.test.js

@@ -384,6 +384,11 @@ describe( 'Widgets screen', () => {
 
 	describe( 'Function widgets', () => {
 		async function addMarquee( nbExpectedMarquees ) {
+			const [ firstWidgetArea ] = await findAll( {
+				role: 'document',
+				name: 'Block: Widget Area',
+			} );
+			await firstWidgetArea.focus();
 			const marqueeBlock = await getBlockInGlobalInserter(
 				'Marquee Greeting'
 			);
@@ -463,19 +468,19 @@ describe( 'Widgets screen', () => {
 			await saveWidgets();
 			let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
 			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-						Object {
-						  "sidebar-1": "<marquee>Howdy</marquee>",
-						}
-					` );
+			{
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
 			await page.reload();
 
 			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
 			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-						Object {
-						  "sidebar-1": "<marquee>Howdy</marquee>",
-						}
-					` );
+			{
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
 			await addMarquee( 2 );
 
@@ -493,10 +498,10 @@ describe( 'Widgets screen', () => {
 			await saveWidgets();
 			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
 			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-						Object {
-						  "sidebar-1": "<marquee>Howdy</marquee>",
-						}
-					` );
+			{
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
 			await page.reload();
 			const marqueesAfter = await findAll( {
@@ -825,11 +830,11 @@ describe( 'Widgets screen', () => {
 
 		const serializedWidgetAreas = await getSerializedWidgetAreas();
 		expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
+		{
+		  "sidebar-1": "<div class="widget widget_block widget_text"><div class="widget-content">
 		<p>First Paragraph</p>
 		</div></div>
-		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
+		<div class="widget widget_block widget_text"><div class="widget-content">
 		<p>Second Paragraph</p>
 		</div></div>",
 		}

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

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigation Creating and restarting converts uncontrolled inner blocks to an entity when modifications are made to the blocks 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A Test Page\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->"`;
-
-exports[`Navigation Placeholder menu selector actions allows a navigation block to be created from existing menus 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\"} /-->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"About\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Our team\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-<!-- /wp:navigation-submenu -->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"Shop\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
-<!-- wp:navigation-submenu {\\"label\\":\\"Winter apparel\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Chunky socks\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Hideous hats\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Glorious gloves\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Jazzy Jumpers\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-<!-- /wp:navigation-submenu -->
-<!-- /wp:navigation-submenu -->
-
-<!-- wp:navigation-link {\\"label\\":\\"Shipping\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Contact Us\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\"} /-->
-<!-- /wp:navigation-submenu -->"
-`;
-
-exports[`Navigation Placeholder menu selector actions creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
-
-exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
-`;
-
-exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"`;
-
-exports[`Navigation encodes URL when create block if needed 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"wordpress.org/шеллы\\",\\"url\\":\\"https://wordpress.org/%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"お問い合わせ\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
-`;