Merge pull request #565 from tomusborne/add-unit-migration-tests

Tweak: Add unit migration tests

package.json

@@ -14,7 +14,8 @@
     "lint:php": "composer php",
     "lint:js": "wp-scripts lint-js ./src",
     "clean": "git checkout -- assets/dist && git clean -fd assets/dist",
-    "action-package": "grunt action-package"
+    "action-package": "grunt action-package",
+    "test:unit": "wp-scripts test-unit-js"
   },
   "repository": {
     "type": "git",

src/customizer-controls/font-manager/GeneratePressTypographyControlForm.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import TypographyList from './TypographyList';
-import { selectorHasMarginBottom } from './utils';
+import { getMigratedUnits, selectorHasMarginBottom } from './utils';
 import { isEmpty } from 'lodash';
 
 const GeneratePressTypographyControlForm = ( props ) => {
@@ -42,27 +42,10 @@ const GeneratePressTypographyControlForm = ( props ) => {
 	 * @since 3.4.0
 	 */
 	function migrateOldUnits( fontValues = [] ) {
-		const numberFields = [ 'fontSize', 'lineHeight', 'letterSpacing', 'marginBottom' ];
 		let updateValues = false;
 
 		fontValues.forEach( ( font, index ) => {
-			const newValues = {};
-
-			numberFields.forEach( ( field ) => {
-				const unit = font[ field + 'Unit' ] || '';
-
-				[ '', 'Tablet', 'Mobile' ].forEach( ( device ) => {
-					const fieldName = field + device;
-
-					if ( 'number' === typeof font[ fieldName ] ) {
-						newValues[ fieldName ] = String( font[ fieldName ] + unit );
-					}
-				} );
-
-				if ( unit ) {
-					newValues[ field + 'Unit' ] = '';
-				}
-			} );
+			const newValues = getMigratedUnits( font );
 
 			if ( ! isEmpty( newValues ) ) {
 				fontValues[ index ] = {

src/customizer-controls/font-manager/utils.js

@@ -143,6 +143,29 @@ const groupBy = function( arr, key, common ) {
 	}, {} );
 };
 
+function getMigratedUnits( font ) {
+	const numberFields = [ 'fontSize', 'lineHeight', 'letterSpacing', 'marginBottom' ];
+	const newValues = {};
+
+	numberFields.forEach( ( field ) => {
+		const unit = font[ field + 'Unit' ] || '';
+
+		[ '', 'Tablet', 'Mobile' ].forEach( ( device ) => {
+			const fieldName = field + device;
+
+			if ( 'number' === typeof font[ fieldName ] ) {
+				newValues[ fieldName ] = String( font[ fieldName ] + unit );
+			}
+		} );
+
+		if ( unit ) {
+			newValues[ field + 'Unit' ] = '';
+		}
+	} );
+
+	return newValues;
+}
+
 export {
 	getElements,
 	getElementLabel,
@@ -154,4 +177,5 @@ export {
 	getElementGroups,
 	objectMapToArray,
 	groupBy,
+	getMigratedUnits,
 };

src/tests/getMigratedUnits.test.js

@@ -0,0 +1,44 @@
+import { getMigratedUnits } from '../customizer-controls/font-manager/utils';
+
+describe( 'Customizer unit migration', () => {
+	it( 'should migrate separate units', () => {
+		const fontValues = [
+			{
+				fontSize: 12,
+				fontSizeUnit: 'px',
+				lineHeight: 2,
+				letterSpacing: 1,
+				letterSpacingUnit: 'px',
+				fontFamily: 'Ubuntu',
+			},
+			{
+				lineHeight: 1,
+				lineHeightUnit: 'rem',
+			},
+		];
+
+		fontValues.forEach( ( font, index ) => {
+			const newValues = getMigratedUnits( font );
+
+			fontValues[ index ] = {
+				...fontValues[ index ],
+				...newValues,
+			};
+		} );
+
+		expect( fontValues ).toEqual( [
+			{
+				fontFamily: 'Ubuntu',
+				fontSize: '12px',
+				fontSizeUnit: '',
+				lineHeight: '2',
+				letterSpacing: '1px',
+				letterSpacingUnit: '',
+			},
+			{
+				lineHeight: '1rem',
+				lineHeightUnit: '',
+			},
+		] );
+	} );
+} );