Update button block corner radius test to px (#33562)

* Update button block corner radius test to px * Incorporate PR feedback to make tests pass * Remove unnecessary step from buttons test
WordPress · Jul 26, 2021 · 979c34a · 979c34a
1 parent 9d5ad61
commit 979c34a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js
@@ -30,11 +30,11 @@ afterAll( () => {
 describe( 'when a button is shown', () => {
 	it( 'adjusts the border radius', async () => {
 		const initialHtml = `<!-- wp:buttons -->
-		<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5%"}}} -->
-		<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5%" >Hello</a></div>
+		<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
+		<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
 		<!-- /wp:button --></div>
 		<!-- /wp:buttons -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByA11yLabel } = await initializeEditor( {
 			initialHtml,
 		} );
 
@@ -66,14 +66,18 @@ describe( 'when a button is shown', () => {
 		);
 		fireEvent.press( settingsButton );
 
-		const radiusSlider = await waitFor( () =>
-			getByTestId( 'Slider Border Radius' )
+		const radiusStepper = await waitFor( () =>
+			getByA11yLabel( /Border Radius/ )
 		);
-		fireEvent( radiusSlider, 'valueChange', '25' );
+
+		const incrementButton = await waitFor( () =>
+			within( radiusStepper ).getByTestId( 'Increment' )
+		);
+		fireEvent( incrementButton, 'onPressIn' );
 
 		const expectedHtml = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"25%"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link" href="" style="border-radius:25%">Hello</a></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"6px"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link" href="" style="border-radius:6px">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );

diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
@@ -56,6 +56,7 @@ function Stepper( {
 			) }
 			{ children }
 			<TouchableOpacity
+				testID={ 'Increment' }
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }

diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
@@ -49,6 +49,7 @@ function Stepper( {
 				<Icon icon={ minus } size={ 24 } color={ buttonStyle.color } />
 			</TouchableOpacity>
 			<TouchableOpacity
+				testID={ 'Increment' }
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }

diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
@@ -126,6 +126,9 @@ module.exports = {
 	arrow: {
 		color: 'red',
 	},
+	button: {
+		color: 'red',
+	},
 	textInput: {
 		color: 'black',
 	},