Add gradient color test

Automattic · Mar 4, 2021 · 4a57880 · 4a57880
1 parent e40a295
commit 4a57880
Showing 1 changed file with 38 additions and 13 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/button/test/edit.js b/projects/plugins/jetpack/extensions/blocks/button/test/edit.js
@@ -12,14 +12,13 @@ import '@testing-library/jest-dom/extend-expect';
  * Internal dependencies
  */
 import { ButtonEdit } from '../edit';
+import { __experimentalUseGradient } from '@wordpress/block-editor';
 
 const defaultAttributes = {
     borderRadius: 15,
     element: "button",
     placeholder: "Add text",
     text: "Contact Us",
-    gradient: undefined,
-    customGradient: undefined,
 };
 
 const defaultProps = {
@@ -39,42 +38,59 @@ const defaultProps = {
     },
 };
 
+const gradientProps = {
+    gradientClass: 'has-green-to-yellow-gradient-background',
+    gradientValue: 'linear-gradient(160deg, rgb(209, 228, 221) 0%, rgb(238, 234, 221) 100%)',
+    setGradient: jest.fn(),
+};
+
 jest.mock( '../constants', () => ( {
-    IS_GRADIENT_AVAILABLE: false
+    IS_GRADIENT_AVAILABLE: true
+} ) );
+
+jest.mock( '@wordpress/block-editor', () => ( {
+    ...jest.requireActual( '@wordpress/block-editor' ),
+    __experimentalUseGradient: jest.fn().mockReturnValue( {
+        gradientClass: undefined,
+        gradientValue: undefined,
+        setGradient: jest.fn()
+    } ),
 } ) );
 
+function renderButton( props ) {
+    const { container } = render( <ButtonEdit { ...props } /> );
+    return within( container ).getByRole( 'textbox' );
+}
+
 test( 'loads and displays button with buttonText attribute assigned to button', () => {
-    render( <ButtonEdit { ...defaultProps } /> );
+    renderButton( defaultProps );
 
 	expect( screen.getByText( 'Contact Us' ) ).toBeInTheDocument();
 } );
 
 test( 'displays button as multiline textbox for updating the buttonText attribute', () => {
-	render( <ButtonEdit { ...defaultProps } /> );
+    renderButton( defaultProps );
 
 	expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'aria-multiline' );
 	expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'contenteditable' );
 } );
 
 test( 'assigns background color class and styles to the button', () => {
-	const { container } = render( <ButtonEdit { ...defaultProps } /> );
-    const button = within( container ).getByRole( 'textbox' );
+    const button = renderButton( defaultProps );
 
     expect( button ).toHaveClass( 'has-black-background-color' );
     expect( button ).toHaveStyle( { backgroundColor: '#000000' } );
 } );
 
 test( 'applies text color class and style to the button', () => {
-    const { container } = render( <ButtonEdit { ...defaultProps } /> );
-    const button = within( container ).getByRole( 'textbox' );
+    const button = renderButton( defaultProps );
 
     expect( button ).toHaveClass( 'has-white-color' );
     expect( button ).toHaveStyle( { color: '#FFFFFF' } );
 } );
 
 test( 'applies border radius style to the button', () => {
-    const { container } = render( <ButtonEdit { ...defaultProps } /> );
-    const button = within( container ).getByRole( 'textbox' );
+    const button = renderButton( defaultProps );
 
     expect( button ).toHaveStyle( { borderRadius: '15px' } );
 } );
@@ -85,8 +101,17 @@ test( 'applies class when 0 border radius selected', () => {
         borderRadius: 0
     };
     const props = { ...defaultProps, attributes };
-    const { container } = render( <ButtonEdit { ...props } /> );
-    const button = within( container ).getByRole( 'textbox' );
+    const button = renderButton( props );
 
     expect( button ).toHaveClass( 'no-border-radius' );
 } );
+
+test( 'applies gradient color class and style to the button', () => {
+    __experimentalUseGradient.mockReturnValueOnce = gradientProps;
+
+    const props = { ...defaultProps, backgroundColor: {} };
+    const button = renderButton( props );
+
+    expect( button ).toHaveClass( gradientProps.gradientClass );
+    expect( button ).toHaveStyle( { background: gradientProps.gradientValue } );
+} );