Button block: Add tests (#19002)

* Pull controls out of ButtonEdit into separate component * [not verified] First pass at adding tests * Add tests for ButtonEdit * [not verified] Add gradient color test * [not verified] Refactor tests and add fixtures * [not verified] Add fixtures * [not verified] Linting * [not verified] Add changelog * [not verified] Update changelog, no public message required * Clean up: move all panels to the controls * Temporarily mock out the width controls * Mock button width panel in Controls tests
Automattic · Mar 18, 2021 · a78c2df · a78c2df
1 parent 046bdfd
commit a78c2df
Show file tree

Hide file tree

Showing 11 changed files with 416 additions and 30 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-button-tests b/projects/plugins/jetpack/changelog/add-button-tests
@@ -0,0 +1,3 @@
+Significance: patch
+Type: compat
+Comment: Button Block: add tests (no public changelog required).
diff --git a/projects/plugins/jetpack/extensions/blocks/button/button-colors-panel.js b/projects/plugins/jetpack/extensions/blocks/button/button-colors-panel.js
@@ -11,9 +11,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { IS_GRADIENT_AVAILABLE } from './constants';
 
 export default function ButtonColorsPanel( {
+	isGradientAvailable,
 	backgroundColor,
 	fallbackBackgroundColor,
 	fallbackTextColor,
@@ -37,7 +37,7 @@ export default function ButtonColorsPanel( {
 		/>
 	);
 
-	if ( IS_GRADIENT_AVAILABLE ) {
+	if ( isGradientAvailable ) {
 		return (
 			<PanelColorGradientSettings
 				settings={ [

diff --git a/projects/plugins/jetpack/extensions/blocks/button/controls.js b/projects/plugins/jetpack/extensions/blocks/button/controls.js
@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import ButtonBorderPanel from './button-border-panel';
+import ButtonColorsPanel from './button-colors-panel';
+import ButtonWidthPanel from './button-width-panel';
+
+export default function ButtonControls( {
+	attributes,
+	backgroundColor,
+	fallbackBackgroundColor,
+	fallbackTextColor,
+	setAttributes,
+	setBackgroundColor,
+	setTextColor,
+	textColor,
+	gradientValue,
+	setGradient,
+	isGradientAvailable,
+} ) {
+	const { align, borderRadius, width } = attributes;
+
+	return (
+		<>
+			<ButtonColorsPanel
+				{ ...{
+					backgroundColor,
+					fallbackBackgroundColor,
+					fallbackTextColor,
+					gradientValue,
+					setBackgroundColor,
+					setGradient,
+					setTextColor,
+					textColor,
+					isGradientAvailable,
+				} }
+			/>
+			<ButtonBorderPanel borderRadius={ borderRadius } setAttributes={ setAttributes } />
+			<ButtonWidthPanel
+				align={ align }
+				width={ width }
+				onChange={ newWidth => setAttributes( { width: newWidth } ) }
+			/>
+		</>
+	);
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/button/edit.js b/projects/plugins/jetpack/extensions/blocks/button/edit.js
@@ -20,9 +20,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import applyFallbackStyles from './apply-fallback-styles';
-import ButtonBorderPanel from './button-border-panel';
-import ButtonColorsPanel from './button-colors-panel';
-import ButtonWidthPanel from './button-width-panel';
+import ButtonControls from './controls';
 import { IS_GRADIENT_AVAILABLE } from './constants';
 import usePassthroughAttributes from './use-passthrough-attributes';
 import './editor.scss';
@@ -37,18 +35,8 @@ const usePrevious = value => {
 	return ref.current;
 };
 
-function ButtonEdit( {
-	attributes,
-	backgroundColor,
-	className,
-	clientId,
-	fallbackBackgroundColor,
-	fallbackTextColor,
-	setAttributes,
-	setBackgroundColor,
-	setTextColor,
-	textColor,
-} ) {
+export function ButtonEdit( props ) {
+	const { attributes, backgroundColor, className, clientId, setAttributes, textColor } = props;
 	const { align, borderRadius, element, placeholder, text, width } = attributes;
 	const previousAlign = usePrevious( align );
 
@@ -117,24 +105,14 @@ function ButtonEdit( {
 				withoutInteractiveFormatting
 			/>
 			<InspectorControls>
-				<ButtonColorsPanel
+				<ButtonControls
 					{ ...{
-						backgroundColor,
-						fallbackBackgroundColor,
-						fallbackTextColor,
 						gradientValue,
-						setBackgroundColor,
 						setGradient,
-						setTextColor,
-						textColor,
+						isGradientAvailable: IS_GRADIENT_AVAILABLE,
+						...props,
 					} }
 				/>
-				<ButtonBorderPanel borderRadius={ borderRadius } setAttributes={ setAttributes } />
-				<ButtonWidthPanel
-					align={ align }
-					width={ width }
-					onChange={ newWidth => setAttributes( { width: newWidth } ) }
-				/>
 			</InspectorControls>
 		</div>
 	);

diff --git a/projects/plugins/jetpack/extensions/blocks/button/test/controls.js b/projects/plugins/jetpack/extensions/blocks/button/test/controls.js
@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * Internal dependencies
+ */
+import ButtonControls from '../controls';
+
+// Temporarily mock out the ButtonWidthControl, which is causing errors due to missing
+// dependencies in the jest test runner.
+jest.mock( '../button-width-panel', () => ( {
+    __esModule: true,
+	default: () => <div>Mocked Width Settings</div>,
+} ) );
+
+const defaultAttributes = {
+    align: undefined,
+    width: undefined,
+};
+
+const setAttributes = jest.fn();
+const setBackgroundColor = jest.fn();
+const setTextColor = jest.fn();
+const setGradient = jest.fn();
+
+const defaultProps = {
+    attributes: defaultAttributes,
+    backgroundColor: {
+        class: undefined,
+        color: undefined,
+    },
+    fallbackBackgroundColor: 'rgba(0, 0, 0, 0)',
+    fallbackTextColor: undefined,
+    setAttributes: setAttributes,
+    setBackgroundColor: setBackgroundColor,
+    setTextColor: setTextColor,
+    textColor: {
+        class: undefined,
+        color: undefined,
+    },
+    gradientValue: undefined,
+    setGradient: setGradient,
+    isGradientAvailable: false,
+};
+
+beforeEach( () => {
+    setAttributes.mockClear();
+    setBackgroundColor.mockClear();
+    setTextColor.mockClear();
+    setGradient.mockClear();
+} );
+
+describe( 'Inspector settings', () => {
+    describe( 'Color settings when gradients are not available', () => {
+        test( 'loads and displays Color Settings panel', () => {
+            render( <ButtonControls { ...defaultProps } /> );
+
+            expect( screen.getByText( 'Background & Text Color' ) ).toBeInTheDocument();
+            expect( screen.getByText( 'Text Color' ) ).toBeInTheDocument();
+            expect( screen.getByText( 'Background' ) ).toBeInTheDocument();
+        } );
+
+        test( 'loads and displays only default background color options', () => {
+            render( <ButtonControls { ...defaultProps } /> );
+            const backgroundColorPanel = screen.getByText( 'Background' ).closest( 'fieldset' );
+
+            expect( within( backgroundColorPanel ).queryByText( 'Solid' ) ).not.toBeInTheDocument();
+            expect( within( backgroundColorPanel ).queryByText( 'Gradient' ) ).not.toBeInTheDocument();
+        } );
+
+        test( 'sets text color attribute', () => {
+            render( <ButtonControls { ...defaultProps } /> );
+
+            const textColors = screen.getByText( 'Text Color' ).closest( 'fieldset' );
+            userEvent.click( within( textColors ).getAllByLabelText( 'Color: ', { exact: false } )[ 0 ] );
+
+            expect( setTextColor.mock.calls[ 0 ] [ 0 ] ).toMatch( /#[a-z0-9]{6,6}/ );
+        } );
+
+        test( 'sets background color attribute', () => {
+            render( <ButtonControls { ...defaultProps } /> );
+
+            const backgroundSection = screen.getByText( 'Background' ).closest( 'fieldset' );
+            const backgroundColorOption = within( backgroundSection ).getAllByLabelText( 'Color: ', { exact: false } )[ 0 ];
+            userEvent.click( backgroundColorOption );
+
+            expect( setBackgroundColor.mock.calls[ 0 ] [ 0 ] ).toMatch( /#[a-z0-9]{6,6}/ );
+        } );
+    } );
+
+    describe( 'Color settings when gradients are available', () => {
+        test( 'loads and displays Gradient Color Settings panel', () => {
+            render( <ButtonControls { ...defaultProps } isGradientAvailable={ true } /> );
+
+            expect( screen.getByText( 'Background & Text Color' ) ).toBeInTheDocument();
+            expect( screen.getByText( 'Text Color' ) ).toBeInTheDocument();
+            expect( screen.getByText( 'Background' ) ).toBeInTheDocument();
+        } );
+
+        test( 'loads and displays solid and gradient background color options', () => {
+            render( <ButtonControls { ...defaultProps } isGradientAvailable={ true } /> );
+            const backgroundSection = screen.getByText( 'Background' ).closest( 'fieldset' );
+
+            expect( within( backgroundSection ).getByText( 'Solid' ) ).toBeInTheDocument();
+            expect( within( backgroundSection ).getByText( 'Gradient' ) ).toBeInTheDocument();
+        } );
+
+        test( 'sets text color attribute', () => {
+            render( <ButtonControls { ...defaultProps } isGradientAvailable={ true } /> );
+
+            const textColors = screen.getByText( 'Text Color' ).closest( 'fieldset' );
+            userEvent.click( within( textColors ).getAllByLabelText( 'Color: ', { exact: false } )[ 0 ] );
+
+            expect( setTextColor.mock.calls[ 0 ] [ 0 ] ).toMatch( /#[a-z0-9]{6,6}/ );
+        } );
+
+        test( 'sets solid background color attribute', () => {
+            render( <ButtonControls { ...defaultProps } isGradientAvailable={ true } /> );
+
+            const backgroundSection = screen.getByText( 'Background' ).closest( 'fieldset' );
+
+            userEvent.click( within( backgroundSection ).getByText( 'Solid' ) );
+            userEvent.click( within( backgroundSection ).getAllByLabelText( 'Color: ', { exact: false } )[ 0 ] );
+
+            expect( setBackgroundColor.mock.calls[ 0 ] [ 0 ] ).toMatch( /#[a-z0-9]{6,6}/ );
+        } );
+
+        test( 'sets gradient background color attribute', () => {
+            render( <ButtonControls { ...defaultProps } isGradientAvailable={ true } /> );
+
+            const backgroundSection = screen.getByText( 'Background' ).closest( 'fieldset' );
+            userEvent.click( within( backgroundSection ).getByText( 'Gradient' ) );
+            userEvent.click( within( backgroundSection ).getAllByLabelText( 'Gradient: ', { exact: false } )[ 0 ] );
+
+            expect( setGradient.mock.calls[ 0 ][ 0 ] ).toMatch( /linear\-gradient\((.+)\)/ );
+        } );
+    } );
+
+    describe( 'Border settings', () => {
+        test( 'loads and displays border radius', () => {
+            render( <ButtonControls { ...defaultProps } /> );
+
+            expect( screen.getByText( 'Border Settings' ) ).toBeInTheDocument();
+        } );
+
+        test( 'sets the border radius attribute', () => {
+            render( <ButtonControls { ...defaultProps } /> );
+
+            const borderPanel = screen.getByText( 'Border Settings' ).closest( 'div' );
+            const input = within( borderPanel ).getAllByLabelText( 'Border radius' )[ 1 ];
+
+            userEvent.type( input, '5' );
+            expect( setAttributes ).toHaveBeenCalledWith( { borderRadius: 5 } );
+        } );
+    } );
+} );