From 36f4c332014ccbc13b439af2155fa51c2eccf802 Mon Sep 17 00:00:00 2001
From: Paul Von Schrottky <paul.von.schrottky@automattic.com>
Date: Mon, 5 Jul 2021 21:42:10 -0400
Subject: [PATCH] Add setup for button radius test

---
 .../src/buttons/test/edit.native.js           | 104 ++++++++++++++++++
 test/native/__mocks__/styleMock.js            |   4 +
 2 files changed, 108 insertions(+)
 create mode 100644 packages/block-library/src/buttons/test/edit.native.js

diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js
new file mode 100644
index 0000000000000..b0aa22cc7da4c
--- /dev/null
+++ b/packages/block-library/src/buttons/test/edit.native.js
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+// import { Image } from 'react-native';
+import { render, fireEvent } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { BottomSheetSettings, BlockEdit } from '@wordpress/block-editor';
+import { SlotFillProvider } from '@wordpress/components';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+// import { IMAGE_BACKGROUND_TYPE } from '../../cover/shared';
+import { name, metadata, settings } from '../index';
+
+// Avoid errors due to mocked stylesheet files missing required selectors
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	withPreferredColorScheme: jest.fn( ( Component ) => ( props ) => (
+		<Component
+			{ ...props }
+			preferredColorScheme={ {} }
+			getStylesFromColorScheme={ jest.fn( () => ( {} ) ) }
+		/>
+	) ),
+} ) );
+
+const ButtonsEdit = ( props ) => (
+	<SlotFillProvider>
+		<BlockEdit isSelected name={ name } clientId={ 0 } { ...props } />
+		<BottomSheetSettings isVisible={ false } />
+	</SlotFillProvider>
+);
+
+const setAttributes = jest.fn();
+const attributes = {
+	marginLeft: 10,
+	// backgroundType: IMAGE_BACKGROUND_TYPE,
+	// focalPoint: { x: '0.25', y: '0.75' },
+	// hasParallax: false,
+	// overlayColor: { color: '#000000' },
+	// url: 'mock-url',
+};
+
+beforeAll( () => {
+	// // Mock Image.getSize to avoid failed attempt to size non-existant image
+	// const getSizeSpy = jest.spyOn( Image, 'getSize' );
+	// getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
+
+	// Register required blocks
+	registerBlockType( name, {
+		...metadata,
+		...settings,
+	} );
+	registerBlockType( 'core/paragraph', {
+		category: 'text',
+		title: 'Paragraph',
+		edit: () => {},
+		save: () => {},
+	} );
+
+	registerBlockType( 'core/button', {
+		category: 'text',
+		title: 'Button',
+		edit: () => {},
+		save: () => {},
+	} );
+} );
+
+afterAll( () => {
+	// // Restore mocks
+	// Image.getSize.mockRestore();
+
+	unregisterBlockType( name );
+	unregisterBlockType( 'core/paragraph' );
+	unregisterBlockType( 'core/button' );
+} );
+
+describe( 'when corner radius is changed', () => {
+	it( 'corner radius is changed', async () => {
+		const { debug, getByLabelText } = render(
+			<ButtonsEdit
+				attributes={ {
+					...attributes,
+					url: undefined,
+					backgroundType: undefined,
+				} }
+				setAttributes={ setAttributes }
+			/>
+		);
+		debug();
+		fireEvent( getByLabelText( 'Border Radius' ), 'valueChange', '31' );
+
+		// expect( setAttributes ).toHaveBeenCalledWith(
+		// 	expect.objectContaining( {
+		// 		focalPoint: { ...attributes.focalPoint, y: '0.52' },
+		// 	} )
+		// );
+	} );
+} );
diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index d369d27b92654..6321f29e3b38b 100644
--- a/test/native/__mocks__/styleMock.js
+++ b/test/native/__mocks__/styleMock.js
@@ -119,4 +119,8 @@ module.exports = {
 	ripple: {
 		backgroundColor: 'white',
 	},
+	spacing: {
+		marginLeft: 6,
+		marginRight: 6,
+	},
 };