RNMobile: Add integration test to verify button block border radius f…

…unctionality (#33211)

* Add setup for button radius test

* Tweak query in test

* Clean up bottons tests

* Clean up buttons test further

* RNMobile: Fix reusable block test assertion

The test should assert the existance of a React element but because of a missing `await`, was instead asserting an unresolved Promise instead. Since the unresolved Promise is a value, `toBeDefined` was returning `true` and the test was passing.
Fixing the test involves resolving the Promise using `await` so that what's asserted is an actual React element.

* Update useResizeObserver mock

Co-authored-by: Carlos Garcia <[email protected]>

packages/block-library/src/block/test/edit.native.js

@@ -182,7 +182,7 @@ describe( 'Reusable block', () => {
 			},
 		} );
 
-		const headingInnerBlock = waitFor( () =>
+		const headingInnerBlock = await waitFor( () =>
 			within( reusableBlock ).getByA11yLabel(
 				'Heading Block. Row 1. Level 2. First Reusable block'
 			)

packages/block-library/src/buttons/test/edit.native.js

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	waitFor,
+	getEditorHtml,
+	within,
+	initializeEditor,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'when a button is shown', () => {
+	it( 'adjusts the border radius', async () => {
+		const initialHtml = `<!-- wp:buttons -->
+		<div class="wp-block-buttons"><!-- wp:button -->
+		<div class="wp-block-button"><a class="wp-block-button__link">Hello</a></div>
+		<!-- /wp:button --></div>
+		<!-- /wp:buttons -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		const buttonsBlock = await waitFor( () =>
+			getByA11yLabel( /Buttons Block\. Row 1/ )
+		);
+		fireEvent.press( buttonsBlock );
+
+		// onLayout event has to be explicitly dispatched in BlockList component,
+		// otherwise the inner blocks are not rendered.
+		const innerBlockListWrapper = await waitFor( () =>
+			within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 100,
+				},
+			},
+		} );
+
+		const buttonInnerBlock = await waitFor( () =>
+			within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
+		);
+		fireEvent.press( buttonInnerBlock );
+
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		const radiusSlider = await waitFor( () =>
+			getByTestId( 'Slider Border Radius' )
+		);
+		fireEvent( radiusSlider, 'valueChange', '25' );
+
+		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="">Hello</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+} );

test/native/__mocks__/styleMock.js

@@ -119,4 +119,11 @@ module.exports = {
 	ripple: {
 		backgroundColor: 'white',
 	},
+	spacing: {
+		marginLeft: 6,
+		marginRight: 6,
+	},
+	arrow: {
+		color: 'red',
+	},
 };

test/native/setup.js

@@ -190,3 +190,14 @@ jest.mock( 'react-native/Libraries/Components/Switch/Switch', () => {
 		'react-native/Libraries/Components/Switch/Switch'
 	);
 } );
+
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useViewportMatch: jest.fn(),
+		useResizeObserver: jest.fn( () => [
+			mockComponent( 'ResizeObserverMock' )( {} ),
+			{ width: 100, height: 100 },
+		] ),
+	};
+} );