Skip to content

Commit

Permalink
Block Library tests: fix finding blocks by label text
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsnajdr
jsnajdr committed Nov 3, 2022
1 parent 5f77c7e commit fef2847
Show file tree
Hide file tree
Showing 10 changed files with 436 additions and 517 deletions.
58 changes: 27 additions & 31 deletions packages/block-library/src/block/test/edit.native.js
View file
Expand Up @@ -5,7 +5,6 @@ import {
getEditorHtml,
initializeEditor,
fireEvent,
waitFor,
within,
} from 'test/helpers';

Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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.
Expand All @@ -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();
Expand Down
91 changes: 40 additions & 51 deletions packages/block-library/src/buttons/test/edit.native.js
View file
Expand Up @@ -3,7 +3,6 @@
*/
import {
fireEvent,
waitFor,
getEditorHtml,
within,
getBlock,
Expand Down Expand Up @@ -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: {
Expand All @@ -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' );

Expand All @@ -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: {
Expand All @@ -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 );

Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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', {
Expand All @@ -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: {
Expand All @@ -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();
Expand All @@ -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();
Expand Down

0 comments on commit fef2847

Please sign in to comment.