Boost Score API: Move getScoreTier into the package (#53884)

Author: xavier-lc

projects/js-packages/boost-score-api/changelog/update-boost-score-api-score-tier

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add getScoreTier, which groups a speed score into good, medium or poor.

projects/js-packages/boost-score-api/src/index.ts

@@ -345,3 +345,21 @@ export function calculateDaysSince( timestamp: number ): number {
 
 	return differenceInDays;
 }
+
+export type ScoreTier = 'good' | 'medium' | 'poor';
+
+/**
+ * The tier a speed score falls in.
+ *
+ * @param {number} score - Speed score, 0 to 100.
+ * @return {ScoreTier} The tier.
+ */
+export function getScoreTier( score: number ): ScoreTier {
+	if ( score > 70 ) {
+		return 'good';
+	}
+	if ( score > 50 ) {
+		return 'medium';
+	}
+	return 'poor';
+}

projects/js-packages/boost-score-api/tests/index.test.ts

@@ -5,6 +5,7 @@ import {
 	getScoreLetter,
 	didScoresChange,
 	getScoreMovementPercentage,
+	getScoreTier,
 } from '../src/index';
 
 const mockData = {
@@ -290,3 +291,16 @@ describe( 'getScoreMovementPercentage', () => {
 		expect( getScoreMovementPercentage( changedMockData.scores ) ).toBe( 13 );
 	} );
 } );
+
+describe( 'getScoreTier', () => {
+	it.each( [
+		[ 0, 'poor' ],
+		[ 50, 'poor' ],
+		[ 51, 'medium' ],
+		[ 70, 'medium' ],
+		[ 71, 'good' ],
+		[ 100, 'good' ],
+	] )( 'puts a score of %i in the %s tier', ( score, tier ) => {
+		expect( getScoreTier( Number( score ) ) ).toBe( tier );
+	} );
+} );

projects/js-packages/components/changelog/update-boost-score-api-score-tier

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: BoostScoreBar takes its colour tiers from the score API package; no visible change.
+

projects/js-packages/components/components/boost-score-bar/index.tsx

@@ -1,11 +1,19 @@
+import { getScoreTier } from '@automattic/jetpack-boost-score-api';
 import { __ } from '@wordpress/i18n';
 import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
 import type { BoostScoreBarProps } from './types.ts';
+import type { ScoreTier } from '@automattic/jetpack-boost-score-api';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';
 
+const TIER_FILLS: Record< ScoreTier, string > = {
+	good: 'fill-good',
+	medium: 'fill-mediocre',
+	poor: 'fill-bad',
+};
+
 export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 	score,
 	isLoading,
@@ -38,15 +46,7 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 			return 'fill-loading';
 		}
 
-		if ( score > 70 ) {
-			return 'fill-good';
-		}
-
-		if ( score > 50 ) {
-			return 'fill-mediocre';
-		}
-
-		return 'fill-bad';
+		return TIER_FILLS[ getScoreTier( score ) ];
 	};
 
 	return (

projects/plugins/boost/_inc/overview/lib/score-utils.test.ts

@@ -2,7 +2,6 @@ import { getLocaleData, resetLocaleData, setLocaleData } from '@wordpress/i18n';
 import {
 	formatScoreDelta,
 	getScoreDelta,
-	getScoreTier,
 	getScoreTierColor,
 	getScoreTierLabel,
 } from './score-utils';
@@ -13,17 +12,6 @@ test( 'uses the shared score card color tokens for each tier', () => {
 	expect( getScoreTierColor( 'poor' ) ).toBe( 'var(--jetpack-boost-score-poor)' );
 } );
 
-test.each( [
-	[ 0, 'poor' ],
-	[ 50, 'poor' ],
-	[ 51, 'medium' ],
-	[ 70, 'medium' ],
-	[ 71, 'good' ],
-	[ 100, 'good' ],
-] )( 'keeps the existing score tier at %i', ( score, tier ) => {
-	expect( getScoreTier( Number( score ) ) ).toBe( tier );
-} );
-
 test.each( [
 	[ 'good', 'Good' ],
 	[ 'medium', 'Could improve' ],

projects/plugins/boost/_inc/overview/lib/score-utils.ts

@@ -1,12 +1,10 @@
+import { getScoreTier } from '@automattic/jetpack-boost-score-api';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import type { ScoreTier } from '@automattic/jetpack-boost-score-api';
 import type { SpeedScoresSet } from './use-speed-scores';
 
-export type ScoreTier = 'good' | 'medium' | 'poor';
-
-export function getScoreTier( score: number ): ScoreTier {
-	// Keep tiers aligned with js-packages/components/components/boost-score-bar/index.tsx.
-	return score > 70 ? 'good' : score > 50 ? 'medium' : 'poor';
-}
+export { getScoreTier };
+export type { ScoreTier };
 
 export function getScoreTierLabel( tier: ScoreTier ): string {
 	const labels = {

projects/plugins/boost/changelog/update-boost-score-api-score-tier

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: Import getScoreTier from the score API package; no visible change.
+