@wordpress/components 19.7.0 → 19.9.0

package/src/border-box-control/test/index.js

@@ -0,0 +1,354 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { BorderBoxControl } from '../';
+
+const colors = [
+	{ name: 'Gray', color: '#f6f7f7' },
+	{ name: 'Blue', color: '#72aee6' },
+	{ name: 'Red', color: '#e65054' },
+	{ name: 'Green', color: '#00a32a' },
+	{ name: 'Yellow', color: '#bd8600' },
+];
+
+const defaultBorder = {
+	color: '#72aee6',
+	style: 'solid',
+	width: '1px',
+};
+
+const defaultBorders = {
+	top: defaultBorder,
+	right: defaultBorder,
+	bottom: defaultBorder,
+	left: defaultBorder,
+};
+
+const mixedBorders = {
+	top: { color: '#f6f7f7', style: 'solid', width: '1px' },
+	right: { color: '#e65054', style: 'dashed', width: undefined },
+	bottom: { color: undefined, style: 'dotted', width: '2rem' },
+	left: { color: '#bd8600', style: undefined, width: '0.75em' },
+};
+
+const props = {
+	colors,
+	label: 'Border Box',
+	onChange: jest.fn().mockImplementation( ( newValue ) => {
+		props.value = newValue;
+	} ),
+	value: undefined,
+};
+
+const toggleLabelRegex = /Border color( and style)* picker/;
+const colorPickerRegex = /Border color picker/;
+
+const renderBorderBoxControl = ( customProps ) => {
+	return render( <BorderBoxControl { ...{ ...props, ...customProps } } /> );
+};
+
+const clickButton = ( name ) => {
+	fireEvent.click( screen.getByRole( 'button', { name } ) );
+};
+
+const queryButton = ( name ) => {
+	return screen.queryByRole( 'button', { name } );
+};
+
+const updateLinkedWidthInput = ( value ) => {
+	const widthInput = screen.getByRole( 'spinbutton' );
+	widthInput.focus();
+	fireEvent.change( widthInput, { target: { value } } );
+};
+
+const updateSplitWidthInput = ( value, index = 0 ) => {
+	const splitInputs = screen.getAllByRole( 'spinbutton' );
+	splitInputs[ index ].focus();
+	fireEvent.change( splitInputs[ index ], { target: { value } } );
+};
+
+describe( 'BorderBoxControl', () => {
+	describe( 'Linked view rendering', () => {
+		it( 'should render correctly when no value provided', () => {
+			renderBorderBoxControl();
+
+			const label = screen.getByText( props.label );
+			const colorButton = screen.getByLabelText( toggleLabelRegex );
+			const widthInput = screen.getByRole( 'spinbutton' );
+			const unitSelect = screen.getByRole( 'combobox' );
+			const slider = screen.getByRole( 'slider' );
+			const linkedButton = screen.getByLabelText( 'Unlink sides' );
+
+			expect( label ).toBeInTheDocument();
+			expect( colorButton ).toBeInTheDocument();
+			expect( widthInput ).toBeInTheDocument();
+			expect( widthInput ).not.toHaveAttribute( 'placeholder' );
+			expect( unitSelect ).toBeInTheDocument();
+			expect( slider ).toBeInTheDocument();
+			expect( linkedButton ).toBeInTheDocument();
+		} );
+
+		it( 'should hide label', () => {
+			renderBorderBoxControl( { hideLabelFromVision: true } );
+			const label = screen.getByText( props.label );
+
+			// As visually hidden labels are still included in the document
+			// and do not have `display: none` styling, we can't rely on
+			// `.toBeInTheDocument()` or `.toBeVisible()` assertions.
+			expect( label ).toHaveAttribute(
+				'data-wp-component',
+				'VisuallyHidden'
+			);
+		} );
+
+		it( 'should show correct width value when flat border value provided', () => {
+			renderBorderBoxControl( { value: defaultBorder } );
+			const widthInput = screen.getByRole( 'spinbutton' );
+
+			expect( widthInput.value ).toBe( '1' );
+		} );
+
+		it( 'should show correct width value when consistent split borders provided', () => {
+			renderBorderBoxControl( { value: defaultBorders } );
+			const widthInput = screen.getByRole( 'spinbutton' );
+
+			expect( widthInput.value ).toBe( '1' );
+		} );
+
+		it( 'should render placeholder when border values are mixed', () => {
+			renderBorderBoxControl( { value: mixedBorders } );
+
+			// First render of control with mixed values should show split view.
+			clickButton( 'Link sides' );
+
+			const widthInput = screen.getByRole( 'spinbutton' );
+			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+		} );
+
+		it( 'should render shared border width when switching to linked view', async () => {
+			// Render control with mixed border values but consistent widths.
+			renderBorderBoxControl( {
+				value: {
+					top: { color: 'red', width: '5px', style: 'solid' },
+					right: { color: 'blue', width: '5px', style: 'dashed' },
+					bottom: { color: 'green', width: '5px', style: 'solid' },
+					left: { color: 'yellow', width: '5px', style: 'dotted' },
+				},
+			} );
+
+			// First render of control with mixed values should show split view.
+			clickButton( 'Link sides' );
+			const linkedInput = screen.getByRole( 'spinbutton' );
+
+			expect( linkedInput.value ).toBe( '5' );
+		} );
+
+		it( 'should omit style options when requested', () => {
+			renderBorderBoxControl( { enableStyle: false } );
+
+			const colorButton = screen.getByLabelText( colorPickerRegex );
+			fireEvent.click( colorButton );
+
+			const styleLabel = screen.queryByText( 'Style' );
+			const solidButton = queryButton( 'Solid' );
+			const dashedButton = queryButton( 'Dashed' );
+			const dottedButton = queryButton( 'Dotted' );
+
+			expect( styleLabel ).not.toBeInTheDocument();
+			expect( solidButton ).not.toBeInTheDocument();
+			expect( dashedButton ).not.toBeInTheDocument();
+			expect( dottedButton ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Split view rendering', () => {
+		it( 'should render split view by default when mixed values provided', () => {
+			renderBorderBoxControl( { value: mixedBorders } );
+
+			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
+			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			const unitSelects = screen.getAllByRole( 'combobox' );
+			const sliders = screen.queryAllByRole( 'slider' );
+			const linkedButton = screen.getByLabelText( 'Link sides' );
+
+			expect( colorButtons.length ).toBe( 4 );
+			expect( widthInputs.length ).toBe( 4 );
+			expect( unitSelects.length ).toBe( 4 );
+			expect( sliders.length ).toBe( 0 );
+			expect( linkedButton ).toBeInTheDocument();
+		} );
+
+		it( 'should render correct width values in appropriate inputs', () => {
+			renderBorderBoxControl( { value: mixedBorders } );
+
+			const widthInputs = screen.getAllByRole( 'spinbutton' );
+
+			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
+			expect( widthInputs[ 1 ].value ).toBe( '0.75' ); // Left.
+			expect( widthInputs[ 2 ].value ).toBe( '' ); // Right.
+			expect( widthInputs[ 3 ].value ).toBe( '2' ); // Bottom.
+		} );
+
+		it( 'should render split view correctly when starting with flat border', () => {
+			renderBorderBoxControl( { value: defaultBorders } );
+			clickButton( 'Unlink sides' );
+
+			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
+			expect( widthInputs[ 1 ].value ).toBe( '1' ); // Left.
+			expect( widthInputs[ 2 ].value ).toBe( '1' ); // Right.
+			expect( widthInputs[ 3 ].value ).toBe( '1' ); // Bottom.
+		} );
+
+		it( 'should omit style options when requested', () => {
+			renderBorderBoxControl( { enableStyle: false } );
+			clickButton( 'Unlink sides' );
+
+			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
+
+			colorButtons.forEach( ( button ) => {
+				fireEvent.click( button );
+
+				const styleLabel = screen.queryByText( 'Style' );
+				const solidButton = queryButton( 'Solid' );
+				const dashedButton = queryButton( 'Dashed' );
+				const dottedButton = queryButton( 'Dotted' );
+
+				expect( styleLabel ).not.toBeInTheDocument();
+				expect( solidButton ).not.toBeInTheDocument();
+				expect( dashedButton ).not.toBeInTheDocument();
+				expect( dottedButton ).not.toBeInTheDocument();
+
+				fireEvent.click( button );
+			} );
+		} );
+	} );
+
+	describe( 'onChange handling', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+			props.value = undefined;
+		} );
+
+		describe( 'Linked value change handling', () => {
+			it( 'should set undefined when new border is empty', () => {
+				renderBorderBoxControl( { value: { width: '1px' } } );
+				updateLinkedWidthInput( '' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( undefined );
+			} );
+
+			it( 'should update with complete flat border', () => {
+				renderBorderBoxControl( { value: defaultBorder } );
+				updateLinkedWidthInput( '3' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...defaultBorder,
+					width: '3px',
+				} );
+			} );
+
+			it( 'should maintain mixed values if not explicitly set via linked control', () => {
+				renderBorderBoxControl( {
+					value: {
+						top: { color: '#72aee6' },
+						right: { color: '#f6f7f7', style: 'dashed' },
+						bottom: { color: '#e65054', style: 'dotted' },
+						left: { color: undefined },
+					},
+				} );
+
+				clickButton( 'Link sides' );
+				updateLinkedWidthInput( '4' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					top: { color: '#72aee6', width: '4px' },
+					right: { color: '#f6f7f7', style: 'dashed', width: '4px' },
+					bottom: { color: '#e65054', style: 'dotted', width: '4px' },
+					left: { color: undefined, width: '4px' },
+				} );
+			} );
+
+			it( 'should update with consistent split borders', () => {
+				renderBorderBoxControl( { value: defaultBorders } );
+				updateLinkedWidthInput( '10' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...defaultBorder,
+					width: '10px',
+				} );
+			} );
+
+			it( 'should set undefined borders when change results in empty borders', () => {
+				renderBorderBoxControl( {
+					value: {
+						top: { width: '1px' },
+						right: { width: '1px' },
+						bottom: { width: '1px' },
+						left: { width: '1px' },
+					},
+				} );
+				updateLinkedWidthInput( '' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( undefined );
+			} );
+
+			it( 'should set flat border when change results in consistent split borders', () => {
+				renderBorderBoxControl( {
+					value: {
+						top: { ...defaultBorder, width: '1px' },
+						right: { ...defaultBorder, width: '2px' },
+						bottom: { ...defaultBorder, width: '3px' },
+						left: { ...defaultBorder, width: '4px' },
+					},
+				} );
+
+				clickButton( 'Link sides' );
+				updateLinkedWidthInput( '10' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...defaultBorder,
+					width: '10px',
+				} );
+			} );
+		} );
+
+		describe( 'Split value change handling', () => {
+			it( 'should set split borders when the updated borders are mixed', () => {
+				const borders = {
+					top: { ...defaultBorder, width: '1px' },
+					right: { ...defaultBorder, width: '2px' },
+					bottom: { ...defaultBorder, width: '3px' },
+					left: { ...defaultBorder, width: '4px' },
+				};
+
+				renderBorderBoxControl( { value: borders } );
+				updateSplitWidthInput( '5' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...borders,
+					top: { ...defaultBorder, width: '5px' },
+				} );
+			} );
+
+			it( 'should set flat border when updated borders are consistent', () => {
+				const borders = {
+					top: { ...defaultBorder, width: '4px' },
+					right: { ...defaultBorder, width: '1px' },
+					bottom: { ...defaultBorder, width: '1px' },
+					left: { ...defaultBorder, width: '1px' },
+				};
+
+				renderBorderBoxControl( { value: borders } );
+				updateSplitWidthInput( '1' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( defaultBorder );
+			} );
+		} );
+	} );
+} );

package/src/border-box-control/test/utils.js

@@ -0,0 +1,305 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getBorderDiff,
+	getCommonBorder,
+	getShorthandBorderStyle,
+	getSplitBorders,
+	hasMixedBorders,
+	hasSplitBorders,
+	isCompleteBorder,
+	isDefinedBorder,
+	isEmptyBorder,
+} from '../utils';
+
+const completeBorder = { color: '#000', style: 'solid', width: '1px' };
+const partialBorder = { color: undefined, style: undefined, width: '2px' };
+const partialWithExtraProp = { color: '#fff', unrelated: true };
+const nonBorder = { unrelatedProperty: true };
+
+const splitBorders = {
+	top: completeBorder,
+	right: completeBorder,
+	bottom: completeBorder,
+	left: completeBorder,
+};
+const undefinedSplitBorders = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+const mixedBorders = {
+	top: completeBorder,
+	right: completeBorder,
+	bottom: completeBorder,
+	left: { color: '#fff', style: 'dashed', width: '10px' },
+};
+const mixedBordersWithUndefined = {
+	top: undefined,
+	right: undefined,
+	bottom: completeBorder,
+	left: partialBorder,
+};
+
+describe( 'BorderBoxControl Utils', () => {
+	describe( 'isEmptyBorder', () => {
+		it( 'should determine a undefined, null, and {} to be empty', () => {
+			expect( isEmptyBorder( undefined ) ).toBe( true );
+			expect( isEmptyBorder( null ) ).toBe( true );
+			expect( isEmptyBorder( {} ) ).toBe( true );
+		} );
+
+		it( 'should determine object missing all border props to be empty', () => {
+			expect( isEmptyBorder( nonBorder ) ).toBe( true );
+		} );
+
+		it( 'should determine that a border object with all properties is not empty', () => {
+			expect( isEmptyBorder( completeBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine object with at least one border property as non-empty', () => {
+			expect( isEmptyBorder( partialWithExtraProp ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isDefinedBorder', () => {
+		it( 'should determine undefined is not a defined border', () => {
+			expect( isDefinedBorder( undefined ) ).toBe( false );
+		} );
+
+		it( 'should determine an empty object to be an undefined border', () => {
+			expect( isDefinedBorder( {} ) ).toBe( false );
+		} );
+
+		it( 'should determine an border object with undefined properties to be an undefined border', () => {
+			const emptyBorder = {
+				color: undefined,
+				style: undefined,
+				width: undefined,
+			};
+			expect( isDefinedBorder( emptyBorder ) ).toBe( false );
+		} );
+
+		it( 'should class an object with at least one side border as defined', () => {
+			expect( isDefinedBorder( mixedBordersWithUndefined ) ).toBe( true );
+		} );
+
+		it( 'should determine complete split borders object is defined border', () => {
+			expect( isDefinedBorder( splitBorders ) ).toBe( true );
+		} );
+
+		it( 'should determine border is not defined when all sides are empty', () => {
+			const mixedUndefinedBorders = {
+				top: undefined,
+				right: undefined,
+				bottom: {},
+				left: {
+					color: undefined,
+					style: undefined,
+					width: undefined,
+				},
+			};
+
+			expect( isDefinedBorder( undefinedSplitBorders ) ).toBe( false );
+			expect( isDefinedBorder( mixedUndefinedBorders ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isCompleteBorder', () => {
+		it( 'should determine a undefined, null, and {} to be incomplete', () => {
+			expect( isCompleteBorder( undefined ) ).toBe( false );
+			expect( isCompleteBorder( null ) ).toBe( false );
+			expect( isCompleteBorder( {} ) ).toBe( false );
+		} );
+
+		it( 'should determine objects missing border props to be incomplete', () => {
+			expect( isCompleteBorder( nonBorder ) ).toBe( false );
+			expect( isCompleteBorder( partialBorder ) ).toBe( false );
+			expect( isCompleteBorder( partialWithExtraProp ) ).toBe( false );
+		} );
+
+		it( 'should determine that a border object with all properties is complete', () => {
+			expect( isCompleteBorder( completeBorder ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'hasSplitBorders', () => {
+		it( 'should determine empty or undefined borders as not being split', () => {
+			expect( hasSplitBorders( undefined ) ).toBe( false );
+			expect( hasSplitBorders( {} ) ).toBe( false );
+		} );
+
+		it( 'should determine flat border object as not being split', () => {
+			expect( hasSplitBorders( completeBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine object with at least one side property as split', () => {
+			expect( hasSplitBorders( splitBorders ) ).toBe( true );
+			expect( hasSplitBorders( { top: completeBorder } ) ).toBe( true );
+		} );
+
+		it( 'should determine object with undefined sides but containing properties as split', () => {
+			expect( hasSplitBorders( undefinedSplitBorders ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'hasMixedBorders', () => {
+		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
+			expect( hasMixedBorders( undefined ) ).toBe( false );
+			expect( hasMixedBorders( {} ) ).toBe( false );
+			expect( hasMixedBorders( nonBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine flat border object as not being mixed', () => {
+			expect( hasMixedBorders( completeBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine split border object with some undefined side borders as mixed', () => {
+			expect( hasMixedBorders( mixedBordersWithUndefined ) ).toBe( true );
+		} );
+
+		it( 'should determine split border object with different side borders as mixed', () => {
+			expect( hasMixedBorders( mixedBorders ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'getSplitBorders', () => {
+		it( 'should return undefined when no border provided', () => {
+			expect( getSplitBorders( undefined ) ).toEqual( undefined );
+			expect( getSplitBorders( null ) ).toEqual( undefined );
+		} );
+
+		it( 'should return undefined when supplied border is empty', () => {
+			expect( getSplitBorders( {} ) ).toEqual( undefined );
+			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
+		} );
+
+		it( 'should return object with all sides populated when given valid border', () => {
+			expect( getSplitBorders( completeBorder ) ).toEqual( {
+				top: completeBorder,
+				right: completeBorder,
+				bottom: completeBorder,
+				left: completeBorder,
+			} );
+		} );
+	} );
+
+	describe( 'getBorderDiff', () => {
+		it( 'should return empty object when there are no differences', () => {
+			const diff = getBorderDiff( completeBorder, completeBorder );
+			expect( diff ).toEqual( {} );
+		} );
+
+		it( 'should only return differences for border related properties', () => {
+			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
+			expect( diff ).toEqual( {} );
+		} );
+
+		it( 'should return object with only border properties that have changed', () => {
+			const diff = getBorderDiff( completeBorder, {
+				...completeBorder,
+				color: '#21759b',
+				caffeine: 'cola',
+			} );
+			expect( diff ).toEqual( { color: '#21759b' } );
+		} );
+	} );
+
+	describe( 'getCommonBorder', () => {
+		it( 'should return undefined when no borders supplied', () => {
+			expect( getCommonBorder( undefined ) ).toEqual( undefined );
+		} );
+
+		it( 'should return border object with undefined properties when undefined borders given', () => {
+			const undefinedBorder = {
+				color: undefined,
+				style: undefined,
+				width: undefined,
+			};
+
+			expect( getCommonBorder( {} ) ).toEqual( undefinedBorder );
+			expect( getCommonBorder( undefinedSplitBorders ) ).toEqual(
+				undefinedBorder
+			);
+		} );
+
+		it( 'should return flat border object when split borders are the same', () => {
+			expect( getCommonBorder( splitBorders ) ).toEqual( completeBorder );
+		} );
+
+		it( 'should only set properties where every side border shares the same value', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '1px' },
+				right: { color: '#000', style: 'solid', width: '1px' },
+				bottom: { color: '#000', style: 'solid', width: '1px' },
+				left: { color: '#000', style: undefined, width: '1px' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: '1px',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+	} );
+
+	describe( 'getShorthandBorderStyle', () => {
+		it( 'should return undefined when no border provided', () => {
+			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
+			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
+			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
+		} );
+
+		it( 'should generate correct shorthand style from valid border', () => {
+			const style = getShorthandBorderStyle( completeBorder );
+			expect( style ).toEqual( '1px solid #000' );
+		} );
+
+		it( 'should generate correct style from partial border', () => {
+			const style = getShorthandBorderStyle( {
+				style: 'dashed',
+				width: '2px',
+			} );
+			expect( style ).toEqual( '2px dashed' );
+		} );
+
+		it( 'should default borders with either color or width to solid style', () => {
+			const widthOnlyStyle = getShorthandBorderStyle( { width: '5px' } );
+			const colorOnlyStyle = getShorthandBorderStyle( { color: '#000' } );
+
+			expect( widthOnlyStyle ).toEqual( '5px solid' );
+			expect( colorOnlyStyle ).toEqual( 'solid #000' );
+		} );
+
+		it( 'should not default border style to solid for zero width border', () => {
+			const zeroWidthStyle = getShorthandBorderStyle( { width: '0' } );
+			expect( zeroWidthStyle ).toEqual( '0' );
+		} );
+
+		it( 'should return undefined when no border or fallback supplied', () => {
+			expect( getShorthandBorderStyle() ).toBe( undefined );
+		} );
+
+		it( 'should return fallback border when border is undefined', () => {
+			const result = getShorthandBorderStyle( undefined, completeBorder );
+			expect( result ).toEqual( completeBorder );
+		} );
+
+		it( 'should return fallback border when empty border supplied', () => {
+			const result = getShorthandBorderStyle( {}, completeBorder );
+			expect( result ).toEqual( completeBorder );
+		} );
+
+		it( 'should use fallback border properties if missing from border', () => {
+			const result = getShorthandBorderStyle(
+				{ width: '1em' },
+				{ width: '5px', style: 'dashed', color: '#72aee6' }
+			);
+
+			expect( result ).toEqual( `1em dashed #72aee6` );
+		} );
+	} );
+} );