Naming the anonymous control function to SubscriptionControls

Adding mocks for apiFetch in the edit tests Using zero values for default input[type=number] fields to receive more reliable userEvent.type results
Automattic · Mar 9, 2021 · 2e0bcab · 2e0bcab
1 parent ab76525
commit 2e0bcab
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js
@@ -33,7 +33,7 @@ import {
 	DEFAULT_FONTSIZE_VALUE,
 } from './constants';
 
-export default ( {
+export default function SubscriptionControls ( {
 	buttonBackgroundColor,
 	borderColor,
 	buttonGradient,
@@ -53,7 +53,7 @@ export default ( {
 	spacing,
 	subscriberCount,
 	textColor,
-} ) => {
+} ) {
 	return (
 		<>
 			{ isGradientAvailable && (
@@ -244,4 +244,5 @@ export default ( {
 			</PanelBody>
 		</>
 	);
-};
+}
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -32,7 +32,7 @@ import {
 	DEFAULT_SPACING_VALUE,
 	DEFAULT_FONTSIZE_VALUE,
 } from './constants';
-import Controls from './controls';
+import SubscriptionControls from './controls';
 
 const { getComputedStyle } = window;
 const isGradientAvailable = !! useGradient;
@@ -204,7 +204,7 @@ export function SubscriptionEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				<Controls
+				<SubscriptionControls
 					buttonBackgroundColor={ buttonBackgroundColor }
 					borderColor={ borderColor }
 					buttonGradient={ buttonGradient }

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js
@@ -10,10 +10,6 @@ import '@testing-library/jest-dom/extend-expect';
  */
 import SubscriptionsInspectorControls from '../controls';
 import {
-	DEFAULT_BORDER_RADIUS_VALUE,
-	DEFAULT_BORDER_WEIGHT_VALUE,
-	DEFAULT_PADDING_VALUE,
-	DEFAULT_SPACING_VALUE,
 	DEFAULT_FONTSIZE_VALUE,
 } from '../constants';
 
@@ -29,20 +25,20 @@ const defaultProps = {
 		buttonGradient: 10,
 		setGradient,
 	},
-	borderRadius: DEFAULT_BORDER_RADIUS_VALUE,
-	borderWeight: DEFAULT_BORDER_WEIGHT_VALUE,
+	borderRadius: 0,
+	borderWeight: 0,
 	buttonOnNewLine: false,
 	emailFieldBackgroundColor: { color: '#000000' },
 	fallbackButtonBackgroundColor: '#000000',
 	fallbackTextColor: '#000000',
 	fontSize: DEFAULT_FONTSIZE_VALUE,
 	isGradientAvailable: true,
-	padding: DEFAULT_PADDING_VALUE,
+	padding: 0,
 	setAttributes,
 	setButtonBackgroundColor,
 	setTextColor,
 	showSubscribersTotal: true,
-	spacing: DEFAULT_SPACING_VALUE,
+	spacing: 0,
 	subscriberCount: 100,
 	textColor: '#000000',
 };
@@ -136,10 +132,10 @@ describe( 'Inspector controls', () => {
 		test( 'set border weight', () => {
 			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
 			userEvent.click( screen.getByText( 'Border Settings' ), { selector: 'button' } );
-			userEvent.type( screen.getAllByLabelText( 'Border Weight' )[1], '10' );
+			userEvent.type( screen.getAllByLabelText( 'Border Weight' )[1], '5' );
 
 			expect( setAttributes ).toHaveBeenLastCalledWith( {
-				borderWeight: 10,
+				borderWeight: 5,
 			} );
 		} );
 	} );
@@ -154,22 +150,20 @@ describe( 'Inspector controls', () => {
 		test( 'set space inside', () => {
 			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
 			userEvent.click( screen.getByText( 'Spacing Settings' ), { selector: 'button' } );
-			// For some reason userEvent.type won't work on these inputs
-			userEvent.clear( screen.getAllByLabelText( 'Space Inside' )[1] );
+			userEvent.type( screen.getAllByLabelText( 'Space Inside' )[1], '5' );
 
 			expect( setAttributes ).toHaveBeenLastCalledWith( {
-				padding: undefined,
+				padding: 5,
 			} );
 		} );
 
 		test( 'set space between', () => {
 			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
 			userEvent.click( screen.getByText( 'Spacing Settings' ), { selector: 'button' } );
-			// For some reason userEvent.type won't work on these inputs
-			userEvent.clear( screen.getAllByLabelText( 'Space Between' )[1] );
+			userEvent.type( screen.getAllByLabelText( 'Space Between' )[1], '5' );
 
 			expect( setAttributes ).toHaveBeenLastCalledWith( {
-				spacing: undefined,
+				spacing: 5,
 			} );
 		} );
 	} );

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -38,6 +38,18 @@ const defaultProps = {
 	fontSize: 12,
 };
 
+const originalFetch = window.fetch;
+
+/**
+ * Mock return value for a successful fetch JSON return value.
+ *
+ * @return {Promise} Mock return value.
+ */
+const RESOLVED_FETCH_PROMISE = Promise.resolve( { count: 100 } );
+const DEFAULT_FETCH_MOCK_RETURN = Promise.resolve( {
+	status: 200,
+	json: () => RESOLVED_FETCH_PROMISE,
+} );
 
 jest.mock( '../constants', () => ( {
 	IS_GRADIENT_AVAILABLE: true
@@ -53,6 +65,19 @@ jest.mock( '@wordpress/block-editor', () => ( {
 } ) );
 
 describe( 'SubscriptionEdit', () => {
+	beforeEach( () => {
+		window.fetch = jest.fn();
+		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	} );
+
+	afterEach( async () => {
+		await act( () => RESOLVED_FETCH_PROMISE );
+	} );
+
+	afterAll( () => {
+		window.fetch = originalFetch;
+	} );
+
 	test( 'adds correct classes to container', () => {
 		const { container, rerender } = render( <SubscriptionEdit { ...defaultProps }  /> );
 
@@ -119,6 +144,5 @@ describe( 'SubscriptionEdit', () => {
 
 		expect( container.querySelector( '.wp-block-jetpack-subscriptions__show-subs' ) ).toBeInTheDocument();
 		expect( container.querySelector( 'p' ) ).toBeInTheDocument();
-
 	} );
 } );