Adding more control tests

Automattic · Mar 5, 2021 · a950f03 · a950f03
1 parent f15a0d2
commit a950f03
Showing 1 changed file with 128 additions and 9 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js
@@ -20,18 +20,18 @@ const setTextColor = jest.fn();
 const setAttributes = jest.fn();
 
 const defaultProps = {
-	buttonBackgroundColor: { color: '' },
-	borderColor: { color: '' },
+	buttonBackgroundColor: { color: '#000000' },
+	borderColor: { color: '#000000' },
 	buttonGradient: {
 		buttonGradient: 10,
 		setGradient,
 	},
 	borderRadius: 10,
 	borderWeight: 10,
 	buttonOnNewLine: false,
-	emailFieldBackgroundColor: { color: '' },
-	fallbackButtonBackgroundColor: 'white',
-	fallbackTextColor: 'white',
+	emailFieldBackgroundColor: { color: '#000000' },
+	fallbackButtonBackgroundColor: '#000000',
+	fallbackTextColor: '#000000',
 	fontSize: 1,
 	isGradientAvailable: true,
 	padding: 3,
@@ -41,7 +41,7 @@ const defaultProps = {
 	showSubscribersTotal: true,
 	spacing: 4,
 	subscriberCount: 100,
-	textColor: 'white',
+	textColor: '#000000',
 };
 
 beforeEach( () => {
@@ -60,12 +60,20 @@ describe( 'Inspector controls', () => {
 			expect( screen.queryByText( 'Background Colors' ) ).not.toBeInTheDocument();
 		} );
 
-		test( 'sets country code attribute', () => {
+		test( 'sets solid background color', async () => {
 			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
 			userEvent.click( screen.getByText( 'Solid' ) );
-			userEvent.click( screen.getByLabelText( 'Color: Black' ) );
+			userEvent.click( screen.queryAllByLabelText( /Color\:/i, { selector: 'button' } )[0] );
 
-			expect( setButtonBackgroundColor ).toHaveBeenCalledWith( { countryCode: '1US' } );
+			expect( setButtonBackgroundColor.mock.calls[0][0] ).toMatch(/#[a-z0-9]{6,6}/);
+		} );
+
+		test( 'sets a button background color', async () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Solid' ) );
+			userEvent.click( screen.queryAllByLabelText( /Color\:/i, { selector: 'button' } )[0] );
+
+			expect( setButtonBackgroundColor.mock.calls[0][0] ).toMatch(/#[a-z0-9]{6,6}/);
 		} );
 	} );
 
@@ -76,5 +84,116 @@ describe( 'Inspector controls', () => {
 			expect( screen.getByText( 'Background Colors' ) ).toBeInTheDocument();
 			expect( screen.queryByText( 'Color Settings' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'sets gradient background color', async () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Gradient' ) );
+			userEvent.click( screen.queryAllByLabelText( /Gradient\:/i, { selector: 'button' } )[0] );
+
+			expect( setGradient.mock.calls[0][0] ).toMatch(/linear\-gradient\((.+)\)/);
+		} );
+	} );
+
+	describe( 'Text settings panel', () => {
+		test( 'displays correctly', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+
+			expect( screen.getByText( 'Text Settings' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Border settings panel', () => {
+		test( 'displays correctly', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+
+			expect( screen.getByText( 'Border Settings' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Spacing settings panel', () => {
+		test( 'displays correctly', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+
+			expect( screen.getByText( 'Spacing Settings' ) ).toBeInTheDocument();
+		} );
+
+		test( 'set space inside', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Spacing Settings' ), { selector: 'button' } );
+			// For some reason, userEvent.type is not triggering the onChange event
+			userEvent.clear( screen.getAllByLabelText( 'Space Inside' )[0] );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				padding: undefined,
+			} );
+		} );
+
+		test( 'set space between', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Spacing Settings' ), { selector: 'button' } );
+			// For some reason, userEvent.type is not triggering the onChange event
+			userEvent.clear( screen.getAllByLabelText( 'Space Between' )[0] );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				spacing: undefined,
+			} );
+		} );
+	} );
+
+	describe( 'Border settings panel', () => {
+		test( 'displays correctly', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+
+			expect( screen.getByText( 'Border Settings' ) ).toBeInTheDocument();
+		} );
+
+		test( 'set border radius', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Border Settings' ), { selector: 'button' } );
+			// For some reason, userEvent.type is not triggering the onChange event
+			userEvent.clear( screen.getAllByLabelText( 'Border Radius' )[0] );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				padding: undefined,
+			} );
+		} );
+
+		test( 'set border weight', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Border Settings' ), { selector: 'button' } );
+			// For some reason, userEvent.type is not triggering the onChange event
+			userEvent.clear( screen.getAllByLabelText( 'Border Weight' )[0] );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				spacing: undefined,
+			} );
+		} );
+	} );
+
+	describe( 'Display settings panel', () => {
+		test( 'displays correctly', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			expect( screen.getByText( 'Display Settings' ) ).toBeInTheDocument();
+		} );
+
+		test( 'toggles subscriber count', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Display Settings' ), { selector: 'button' } );
+			userEvent.click( screen.getByLabelText( 'Show subscriber count' ) );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				showSubscribersTotal: false,
+			} );
+		} );
+
+		test( 'toggles place button on new line', () => {
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			userEvent.click( screen.getByText( 'Display Settings' ), { selector: 'button' } );
+			userEvent.click( screen.getByLabelText( 'Place button on new line' ) );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				buttonOnNewLine: true,
+			} );
+		} );
 	} );
 } );