Merge bfc3cdc into 4213bd1

swissspidy · Jan 8, 2025 · 3383d21 · 3383d21
2 parents 4213bd1 + bfc3cdc
commit 3383d21
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 80 deletions.
diff --git a/env/blueprints/setup.json b/env/blueprints/setup.json
@@ -1,63 +1,59 @@
 {
-  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
-  "landingPage": "/wp-admin/",
-  "preferredVersions": {
-    "php": "8.0",
-    "wp": "latest"
-  },
-  "phpExtensionBundles": [
-    "kitchen-sink"
-  ],
-  "features": {
-    "networking": false
-  },
-  "plugins": [
-    "performance-lab"
-  ],
-  "constants": {
-    "WP_HTTP_BLOCK_EXTERNAL": "true"
-  },
-  "login": true,
-  "siteOptions": {
-    "permalink_structure": "/%postname%/"
-  },
-  "steps": [
-    {
-      "step": "defineWpConfigConsts",
-      "consts": {
-        "DISABLE_WP_CRON": true
-      }
-    },
-    {
-      "step": "installTheme",
-      "themeData": {
-        "resource": "wordpress.org/themes",
-        "slug": "twentytwentyone"
-      },
-      "ifAlreadyInstalled": "skip",
-      "options": {
-        "activate": true,
-        "importStarterContent": false
-      }
-    },
-    {
-      "step": "installTheme",
-      "themeData": {
-        "resource": "wordpress.org/themes",
-        "slug": "twentytwentythree"
-      },
-      "ifAlreadyInstalled": "skip",
-      "options": {
-        "activate": false,
-        "importStarterContent": false
-      }
-    },
-    {
-      "step": "importWxr",
-      "file": {
-        "resource": "url",
-        "url": "https://raw.githubusercontent.com/WordPress/theme-test-data/b47acf980696897936265182cb684dca648476c7/themeunittestdata.wordpress.xml"
-      }
-    }
-  ]
+	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
+	"landingPage": "/wp-admin/",
+	"preferredVersions": {
+		"php": "8.0",
+		"wp": "latest"
+	},
+	"phpExtensionBundles": [ "kitchen-sink" ],
+	"features": {
+		"networking": false
+	},
+	"plugins": [ "performance-lab" ],
+	"constants": {
+		"WP_HTTP_BLOCK_EXTERNAL": "true"
+	},
+	"login": true,
+	"siteOptions": {
+		"permalink_structure": "/%postname%/"
+	},
+	"steps": [
+		{
+			"step": "defineWpConfigConsts",
+			"consts": {
+				"DISABLE_WP_CRON": true
+			}
+		},
+		{
+			"step": "installTheme",
+			"themeData": {
+				"resource": "wordpress.org/themes",
+				"slug": "twentytwentyone"
+			},
+			"ifAlreadyInstalled": "skip",
+			"options": {
+				"activate": true,
+				"importStarterContent": false
+			}
+		},
+		{
+			"step": "installTheme",
+			"themeData": {
+				"resource": "wordpress.org/themes",
+				"slug": "twentytwentythree"
+			},
+			"ifAlreadyInstalled": "skip",
+			"options": {
+				"activate": false,
+				"importStarterContent": false
+			}
+		},
+		{
+			"step": "importWxr",
+			"file": {
+				"resource": "url",
+				"url": "https://raw.githubusercontent.com/WordPress/theme-test-data/b47acf980696897936265182cb684dca648476c7/themeunittestdata.wordpress.xml"
+			}
+		}
+	]
 }
diff --git a/env/tests/performance/cli/results.js b/env/tests/performance/cli/results.js
@@ -201,6 +201,41 @@ function formatValue( value, key ) {
 	return `${ value.toFixed( 2 ) } ms`;
 }
 
+/**
+ * Format key for readability.
+ *
+ * @param {string} key Key.
+ * @return {string} Formatted key.
+ */
+function formatKey( key ) {
+	switch ( key ) {
+		// Server-Timing.
+
+		case 'wpDbQueries':
+			return 'DB Queries';
+		case 'wpMemoryUsage':
+			return 'Memory';
+		case 'wpBeforeTemplate':
+			return 'Before Template';
+		case 'wpTemplate':
+			return 'Template';
+		case 'wpTotal':
+			return 'WP Total';
+
+		// Web vitals.
+
+		case 'timeToFirstByte':
+			return 'TTFB';
+		case 'lcpMinusTtfb':
+			return 'LCP - TTFB';
+		case 'largestContentfulPaint':
+			return 'LCP';
+
+		default:
+			return key;
+	}
+}
+
 for ( const [ url, results ] of Object.entries( afterStats ) ) {
 	const prevStat = beforeStats[ url ];
 
@@ -239,7 +274,7 @@ for ( const [ url, results ] of Object.entries( afterStats ) ) {
 				! delta ||
 				Math.abs( delta ) <= DELTA_VARIANCE
 			) {
-				diffResult[ key ] = formatValue(
+				diffResult[ formatKey( key ) ] = formatValue(
 					/** @type {number} */ ( value ),
 					key
 				);
@@ -248,7 +283,7 @@ for ( const [ url, results ] of Object.entries( afterStats ) ) {
 
 			const prefix = delta > 0 ? '+' : '';
 
-			diffResult[ key ] = `${ formatValue(
+			diffResult[ formatKey( key ) ] = `${ formatValue(
 				value,
 				key
 			) } (${ prefix }${ formatValue(

diff --git a/env/tests/performance/config/performance-reporter.ts b/env/tests/performance/config/performance-reporter.ts
@@ -36,14 +36,14 @@ class PerformanceReporter implements Reporter {
 		);
 
 		if ( performanceResults?.body ) {
-			const resultsByUrl = JSON.parse( performanceResults.body.toString( 'utf-8' ) ) as Record< string, Record< string, number[] > >;
+			const resultsByUrl = JSON.parse(
+				performanceResults.body.toString( 'utf-8' )
+			) as Record< string, Record< string, number[] > >;
 
-			for ( const [url, results ] of Object.entries(resultsByUrl)) {
+			for ( const [ url, results ] of Object.entries( resultsByUrl ) ) {
 				this.allResults[ url ] ??= [];
 
-				this.allResults[ url ].push(
-					results
-				);
+				this.allResults[ url ].push( results );
 			}
 		}
 	}
@@ -68,9 +68,7 @@ class PerformanceReporter implements Reporter {
 			console.log( `Status: ${ result.status }` );
 		}
 
-		for ( const [ url, results ] of Object.entries(
-			this.allResults
-		) ) {
+		for ( const [ url, results ] of Object.entries( this.allResults ) ) {
 			console.log( `\nURL: \`${ url }\`\n` );
 			console.table(
 				results.map( ( r ) =>

diff --git a/env/tests/performance/specs/main.spec.ts b/env/tests/performance/specs/main.spec.ts
@@ -43,22 +43,22 @@ test.describe( 'Tests', () => {
 
 				const serverTiming = await metrics.getServerTiming();
 
-				results[url] ??= {};
+				results[ url ] ??= {};
 
 				for ( const [ key, value ] of Object.entries( serverTiming ) ) {
-					results[url][ camelCaseDashes( key ) ] ??= [];
-					results[url][ camelCaseDashes( key ) ].push( value );
+					results[ url ][ camelCaseDashes( key ) ] ??= [];
+					results[ url ][ camelCaseDashes( key ) ].push( value );
 				}
 
 				const ttfb = await metrics.getTimeToFirstByte();
 				const lcp = await metrics.getLargestContentfulPaint();
 
-				results[url].largestContentfulPaint ??= [];
-				results[url].largestContentfulPaint.push( lcp );
-				results[url].timeToFirstByte ??= [];
-				results[url].timeToFirstByte.push( ttfb );
-				results[url].lcpMinusTtfb ??= [];
-				results[url].lcpMinusTtfb.push( lcp - ttfb );
+				results[ url ].largestContentfulPaint ??= [];
+				results[ url ].largestContentfulPaint.push( lcp );
+				results[ url ].timeToFirstByte ??= [];
+				results[ url ].timeToFirstByte.push( ttfb );
+				results[ url ].lcpMinusTtfb ??= [];
+				results[ url ].lcpMinusTtfb.push( lcp - ttfb );
 			} );
 		}
 	}