diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js index de83b2fe1692e..a24210b0bce2c 100644 --- a/packages/block-library/src/block/test/edit.native.js +++ b/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' ) 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..4bf8168f43c7c --- /dev/null +++ b/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 = ` +
+
Hello
+
+ `; + 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 = ` +
+
Hello
+
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); + } ); +} ); diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index d369d27b92654..502371023a152 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -119,4 +119,11 @@ module.exports = { ripple: { backgroundColor: 'white', }, + spacing: { + marginLeft: 6, + marginRight: 6, + }, + arrow: { + color: 'red', + }, }; diff --git a/test/native/setup.js b/test/native/setup.js index 26571a869dc01..a851d361a3a56 100644 --- a/test/native/setup.js +++ b/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 }, + ] ), + }; +} );