Block Library tests: fix finding blocks by label text

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

@@ -5,7 +5,6 @@ import {
 	getEditorHtml,
 	initializeEditor,
 	fireEvent,
-	waitFor,
 	within,
 } from 'test/helpers';
 
@@ -78,17 +77,16 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByLabelText, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml: '',
-				capabilities: { reusableBlock: true },
-			} );
+		const screen = await initializeEditor( {
+			initialHtml: '',
+			capabilities: { reusableBlock: true },
+		} );
 
 		// Open the inserter menu.
-		fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
+		fireEvent.press( await screen.findByLabelText( 'Add block' ) );
 
 		// Navigate to reusable tab.
-		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
+		const reusableSegment = await screen.findByText( 'Reusable' );
 		// onLayout event is required by Segment component.
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
@@ -99,7 +97,9 @@ describe( 'Reusable block', () => {
 		} );
 		fireEvent.press( reusableSegment );
 
-		const reusableBlockList = getByTestId( 'InserterUI-ReusableBlocks' );
+		const reusableBlockList = screen.getByTestId(
+			'InserterUI-ReusableBlocks'
+		);
 		// onScroll event used to force the FlatList to render all items.
 		fireEvent.scroll( reusableBlockList, {
 			nativeEvent: {
@@ -110,13 +110,11 @@ describe( 'Reusable block', () => {
 		} );
 
 		// Insert a reusable block.
-		fireEvent.press(
-			await waitFor( () => getByText( `Reusable block - 1` ) )
-		);
+		fireEvent.press( await screen.findByText( `Reusable block - 1` ) );
 
 		// Get the reusable block.
-		const reusableBlock = await waitFor( () =>
-			getByLabelText( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findAllByLabelText(
+			/Reusable block Block\. Row 1/
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -128,18 +126,16 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const reusableBlock = await waitFor( () =>
-			getByLabelText( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findAllByLabelText(
+			/Reusable block Block\. Row 1/
 		);
 
-		const blockDeleted = await waitFor( () =>
-			within( reusableBlock ).getByText(
-				'Block has been deleted or is unavailable.'
-			)
+		const blockDeleted = within( reusableBlock ).getByText(
+			'Block has been deleted or is unavailable.'
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -163,17 +159,17 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const reusableBlock = await waitFor( () =>
-			getByLabelText( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findByLabelText(
+			/Reusable block Block\. Row 1/
 		);
 
-		const innerBlockListWrapper = await waitFor( () =>
-			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
-		);
+		const innerBlockListWrapper = await within(
+			reusableBlock
+		).findByTestId( 'block-list-wrapper' );
 
 		// onLayout event has to be explicitly dispatched in BlockList component,
 		// otherwise the inner blocks are not rendered.
@@ -185,10 +181,10 @@ describe( 'Reusable block', () => {
 			},
 		} );
 
-		const headingInnerBlock = await waitFor( () =>
-			within( reusableBlock ).getByLabelText(
-				'Heading Block. Row 1. Level 2. First Reusable block'
-			)
+		const [ headingInnerBlock ] = await within(
+			reusableBlock
+		).findAllByLabelText(
+			'Heading Block. Row 1. Level 2. First Reusable block'
 		);
 
 		expect( reusableBlock ).toBeDefined();

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

@@ -3,7 +3,6 @@
  */
 import {
 	fireEvent,
-	waitFor,
 	getEditorHtml,
 	within,
 	getBlock,
@@ -50,20 +49,20 @@ describe( 'Buttons block', () => {
 			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
-			const { getByLabelText } = await initializeEditor( {
+			const editor = await initializeEditor( {
 				initialHtml,
 			} );
 
-			const buttonsBlock = await waitFor( () =>
-				getByLabelText( /Buttons Block\. Row 1/ )
+			const [ buttonsBlock ] = await editor.findAllByLabelText(
+				/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' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -72,22 +71,22 @@ describe( 'Buttons block', () => {
 				},
 			} );
 
-			const buttonInnerBlock = await waitFor( () =>
-				within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
-			);
+			const [ buttonInnerBlock ] = await within(
+				buttonsBlock
+			).findAllByLabelText( /Button Block\. Row 1/ );
 			fireEvent.press( buttonInnerBlock );
 
-			const settingsButton = await waitFor( () =>
-				getByLabelText( 'Open Settings' )
+			const settingsButton = await editor.findByLabelText(
+				'Open Settings'
 			);
 			fireEvent.press( settingsButton );
 
-			const radiusStepper = await waitFor( () =>
-				getByLabelText( /Border Radius/ )
+			const radiusStepper = await editor.findByLabelText(
+				/Border Radius/
 			);
 
-			const incrementButton = await waitFor( () =>
-				within( radiusStepper ).getByTestId( 'Increment' )
+			const incrementButton = await within( radiusStepper ).findByTestId(
+				'Increment'
 			);
 			fireEvent( incrementButton, 'onPressIn' );
 
@@ -98,15 +97,14 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const { getByLabelText } = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -125,14 +123,14 @@ describe( 'Buttons block', () => {
 			fireEvent.press( appenderButton );
 
 			// Check for new button
-			const secondButtonBlock = await waitFor( () =>
-				within( buttonsBlock ).getByLabelText( /Button Block\. Row 2/ )
-			);
+			const [ secondButtonBlock ] = await within(
+				buttonsBlock
+			).findAllByLabelText( /Button Block\. Row 2/ );
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
-			const paragraphPlaceholder = await waitFor( () =>
-				getByLabelText( 'Add paragraph block' )
+			const paragraphPlaceholder = await screen.findByLabelText(
+				'Add paragraph block'
 			);
 			fireEvent.press( paragraphPlaceholder );
 
@@ -148,21 +146,15 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const {
-				getByLabelText,
-				getByTestId,
-				queryAllByLabelText,
-				getByText,
-			} = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 			fireEvent.press( buttonsBlock );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -176,9 +168,9 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonBlock );
 
 			// Open the block inserter
-			fireEvent.press( getByLabelText( 'Add block' ) );
+			fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-			const blockList = getByTestId( 'InserterUI-Blocks' );
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 			// onScroll event used to force the FlatList to render all items
 			fireEvent.scroll( blockList, {
 				nativeEvent: {
@@ -190,11 +182,11 @@ describe( 'Buttons block', () => {
 
 			// Check the Add block here placeholder is not visible
 			const addBlockHerePlaceholders =
-				queryAllByLabelText( 'ADD BLOCK HERE' );
+				screen.queryAllByLabelText( 'ADD BLOCK HERE' );
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
-			fireEvent.press( await waitFor( () => getByText( 'Button' ) ) );
+			fireEvent.press( await screen.findByText( 'Button' ) );
 
 			// Get new button
 			const secondButtonBlock = await getBlock( screen, 'Button', {
@@ -214,15 +206,14 @@ describe( 'Buttons block', () => {
 				const screen = await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
-				const { getByLabelText } = screen;
 
 				// Get block
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await waitFor( () =>
-					within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-				);
+				const innerBlockListWrapper = await within(
+					buttonsBlock
+				).findByTestId( 'block-list-wrapper' );
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {
@@ -236,13 +227,13 @@ describe( 'Buttons block', () => {
 				fireEvent.press( buttonBlock );
 
 				// Open block actions menu
-				const blockActionsButton = getByLabelText(
+				const blockActionsButton = screen.getByLabelText(
 					/Open Block Actions Menu/
 				);
 				fireEvent.press( blockActionsButton );
 
 				// Delete block
-				const deleteButton = getByLabelText( /Remove block/ );
+				const deleteButton = screen.getByLabelText( /Remove block/ );
 				fireEvent.press( deleteButton );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
@@ -260,22 +251,20 @@ describe( 'Buttons block', () => {
 				const initialHtml = `<!-- wp:buttons -->
 				<div class="wp-block-buttons"><!-- wp:button /--></div>
 				<!-- /wp:buttons -->`;
-				const { getByLabelText, getByText } = await initializeEditor( {
-					initialHtml,
-				} );
+				const screen = await initializeEditor( { initialHtml } );
 
-				const block = await waitFor( () =>
-					getByLabelText( /Buttons Block\. Row 1/ )
+				const [ block ] = await screen.findAllByLabelText(
+					/Buttons Block\. Row 1/
 				);
 				fireEvent.press( block );
 
 				fireEvent.press(
-					getByLabelText( 'Change items justification' )
+					screen.getByLabelText( 'Change items justification' )
 				);
 
 				// Select alignment option.
 				fireEvent.press(
-					await waitFor( () => getByText( justificationOption ) )
+					await screen.findByText( justificationOption )
 				);
 
 				expect( getEditorHtml() ).toMatchSnapshot();