@wordpress/block-editor 15.6.1-next.36001005c.0 → 15.6.1

package/src/components/global-styles/test/typography-utils.js

@@ -2,6 +2,8 @@
  * Internal dependencies
  */
 import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestFontWeight,
 	findNearestFontStyle,
@@ -9,6 +11,717 @@ import {
 } from '../typography-utils';
 
 describe( 'typography utils', () => {
+	describe( 'getTypographyFontSizeValue', () => {
+		[
+			{
+				message:
+					'should return value when fluid typography is not active',
+				preset: {
+					size: '28px',
+				},
+				typographySettings: undefined,
+				expected: '28px',
+			},
+
+			{
+				message: 'should return value where font size is 0',
+				preset: {
+					size: 0,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: 0,
+			},
+
+			{
+				message: "should return value where font size is '0'",
+				preset: {
+					size: '0',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: '0',
+			},
+
+			{
+				message: 'should return value where `size` is `null`.',
+				preset: {
+					size: null,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: null,
+			},
+
+			{
+				message: 'should return value when fluid is `false`',
+				preset: {
+					size: '28px',
+					fluid: false,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '28px',
+			},
+
+			{
+				message: 'should return value when fluid config is empty`',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {},
+					},
+				},
+				expected: '28px',
+			},
+
+			{
+				message:
+					'should return  clamp value with `minViewportWidth` override',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minViewportWidth: '500px',
+						},
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)',
+			},
+
+			{
+				message:
+					'should return  clamp value with `maxViewportWidth` override',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '500px',
+						},
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
+			},
+
+			{
+				message:
+					'should return clamp value with `layout.wideSize` override',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+					layout: {
+						wideSize: '500px',
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
+			},
+
+			{
+				message:
+					'should return clamp value with `maxViewportWidth` preferred over fallback `layout.wideSize` value',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '1000px',
+						},
+					},
+					layout: {
+						wideSize: '500px',
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.485), 28px)',
+			},
+
+			{
+				message: 'should return already clamped value',
+				preset: {
+					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+			},
+
+			{
+				message: 'should return value with unsupported unit',
+				preset: {
+					size: '1000%',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '1000%',
+			},
+
+			{
+				message: 'should return clamp value with rem min and max units',
+				preset: {
+					size: '1.75rem',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
+			},
+
+			{
+				message:
+					'should override default max viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '1200px',
+						},
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 1.147), 1.75rem)',
+			},
+
+			{
+				message:
+					'should override default min viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minViewportWidth: '800px',
+						},
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.5rem) * 1.262), 1.75rem)',
+			},
+
+			{
+				message: 'should return clamp value with em min and max units',
+				preset: {
+					size: '1.75em',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
+			},
+
+			{
+				message: 'should return clamp value for floats',
+				preset: {
+					size: '70.175px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
+			},
+
+			{
+				message:
+					'should coerce integer to `px` and returns clamp value',
+				preset: {
+					size: 33,
+					fluid: true,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
+			},
+
+			{
+				message: 'should coerce float to `px` and returns clamp value',
+				preset: {
+					size: 70.175,
+					fluid: true,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
+			},
+
+			{
+				message:
+					'should return clamp value when `fluid` is empty array',
+				preset: {
+					size: '28px',
+					fluid: [],
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			},
+
+			{
+				message: 'should return clamp value when `fluid` is `null`',
+				preset: {
+					size: '28px',
+					fluid: null,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			},
+
+			{
+				message:
+					'returns clamp value where min and max fluid values defined',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			},
+
+			{
+				message:
+					'should apply maxViewportWidth as maximum viewport width',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '1100px',
+						},
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 7.051), 125px)',
+			},
+
+			{
+				message: 'returns clamp value where max is equal to size',
+				preset: {
+					size: '7.8125rem',
+					fluid: {
+						min: '4.375rem',
+						max: '7.8125rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
+			},
+
+			{
+				message:
+					'should return clamp value if min font size is greater than max',
+				preset: {
+					size: '3rem',
+					fluid: {
+						min: '5rem',
+						max: '32px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
+			},
+
+			{
+				message: 'should return value with invalid min/max fluid units',
+				preset: {
+					size: '10em',
+					fluid: {
+						min: '20vw',
+						max: '50%',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '10em',
+			},
+
+			{
+				message:
+					'should return value when size is < lower bounds and no fluid min/max set',
+				preset: {
+					size: '3px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '3px',
+			},
+
+			{
+				message:
+					'should return value when size is equal to lower bounds and no fluid min/max set',
+				preset: {
+					size: '14px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '14px',
+			},
+
+			{
+				message:
+					'should return clamp value with different min max units',
+				preset: {
+					size: '28px',
+					fluid: {
+						min: '20px',
+						max: '50rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
+			},
+
+			{
+				message:
+					'should return clamp value where no fluid max size is set',
+				preset: {
+					size: '50px',
+					fluid: {
+						min: '2.6rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
+			},
+
+			{
+				message:
+					'should return clamp value where no fluid min size is set',
+				preset: {
+					size: '28px',
+					fluid: {
+						max: '80px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when fluid values are set',
+				preset: {
+					size: '1.5rem',
+					fluid: {
+						min: '0.5rem',
+						max: '5rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when only fluid min is set',
+				preset: {
+					size: '20px',
+					fluid: {
+						min: '12px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when only fluid max is set',
+				preset: {
+					size: '0.875rem',
+					fluid: {
+						max: '20rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
+			},
+			{
+				message:
+					'should return clamp value when min and max font sizes are equal',
+				preset: {
+					size: '4rem',
+					fluid: {
+						min: '30px',
+						max: '30px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
+			},
+
+			{
+				message:
+					'should use default min font size value where min font size unit in fluid config is not supported',
+				preset: {
+					size: '15px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16%',
+						},
+					},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
+			},
+
+			// Equivalent custom config PHP unit tests in `test_should_convert_font_sizes_to_fluid_values()`.
+			{
+				message: 'should return clamp value using custom fluid config',
+				preset: {
+					size: '17px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16px',
+						},
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px)',
+			},
+
+			{
+				message:
+					'should return value when font size <= custom min font size bound',
+				preset: {
+					size: '15px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16px',
+						},
+					},
+				},
+				expected: '15px',
+			},
+
+			{
+				message:
+					'should apply scaled min font size for em values when custom min font size is not set',
+				preset: {
+					size: '12rem',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
+			},
+
+			{
+				message:
+					'should apply scaled min font size for px values when custom min font size is not set',
+				preset: {
+					size: '200px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
+			},
+
+			{
+				message:
+					'should not apply scaled min font size for minimum font size when custom min font size is set',
+				preset: {
+					size: '200px',
+					fluid: {
+						min: '100px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
+			},
+
+			{
+				message: 'should apply all custom fluid typography settings',
+				preset: {
+					size: '17px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16px',
+							maxViewportWidth: '1200px',
+							minViewportWidth: '640px',
+						},
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px)',
+			},
+
+			// Individual preset settings override global settings.
+			{
+				message:
+					'should convert individual preset size to fluid if fluid is disabled in global settings',
+				preset: {
+					size: '17px',
+					fluid: true,
+				},
+				settings: {
+					typography: {},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
+			},
+			{
+				message:
+					'should use individual preset settings if fluid is disabled in global settings',
+				preset: {
+					size: '17px',
+					fluid: {
+						min: '16px',
+						max: '26px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: false,
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
+			},
+		].forEach( ( { message, preset, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect( getTypographyFontSizeValue( preset, settings ) ).toBe(
+					expected
+				);
+			} );
+		} );
+	} );
+
 	describe( 'getMergedFontFamiliesAndFontFamilyFaces', () => {
 		[
 			{
@@ -653,4 +1366,97 @@ describe( 'typography utils', () => {
 			}
 		);
 	} );
+
+	describe( 'typography utils', () => {
+		[
+			{
+				message:
+					'should return `undefined` when settings is `undefined`',
+				settings: undefined,
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography is `undefined`',
+				settings: {},
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography.fluid is `undefined`',
+				settings: { typography: {} },
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `false` when typography.fluid is disabled by `false`',
+				settings: { typography: { fluid: false } },
+				expected: { fluid: false },
+			},
+
+			{
+				message: 'should return `{}` when typography.fluid is empty',
+				settings: { typography: { fluid: {} } },
+				expected: { fluid: {} },
+			},
+
+			{
+				message:
+					'should return false when typography.fluid is disabled and layout.wideSize is defined',
+				settings: {
+					typography: { fluid: false },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: false },
+			},
+
+			{
+				message:
+					'should return true when fluid is enabled by a boolean',
+				settings: { typography: { fluid: true } },
+				expected: { fluid: true },
+			},
+
+			{
+				message:
+					'should return fluid settings with merged `layout.wideSize`',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: {
+					fluid: { maxViewportWidth: '1000rem', minFontSize: '16px' },
+				},
+			},
+
+			{
+				message:
+					'should prioritize fluid `maxViewportWidth` over `layout.wideSize`',
+				settings: {
+					typography: { fluid: { maxViewportWidth: '10px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: { maxViewportWidth: '10px' } },
+			},
+			{
+				message: 'should not merge `layout.wideSize` if it is fluid',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: 'clamp(1000px, 85vw, 2000px)' },
+				},
+				expected: {
+					fluid: { minFontSize: '16px' },
+				},
+			},
+		].forEach( ( { message, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getFluidTypographyOptionsFromSettings( settings )
+				).toEqual( expected );
+			} );
+		} );
+	} );
 } );