Skip to content

Commit

Permalink
React Native tests: migrate getByA11yLabel usages (#45454)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsnajdr
jsnajdr authored Nov 3, 2022
1 parent 26968e1 commit bf6eddd
Show file tree
Hide file tree
Showing 31 changed files with 391 additions and 391 deletions.
18 changes: 9 additions & 9 deletions docs/contributors/code/react-native/integration-test-guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const initialHtml = `<!-- wp:buttons -->
<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`;
const { getByA11yLabel } = initializeEditor( {
const { getByLabelText } = initializeEditor( {
initialHtml,
} );
```
Expand All @@ -102,7 +102,7 @@ Once the components are rendered, it’s time to query them. An important note a
When querying we should follow this priority order:

1. `getByText`: querying by text is the closest flow we can do from the user’s perspective, as text is the visual clue for them to identify elements.
2. `getByA11yLabel`: in some cases, we want to query elements that don’t provide text so in this case we can fallback to the accessibility label.
2. `getByLabelText`: in some cases, we want to query elements that don’t provide text so in this case we can fallback to the accessibility label.
3. `getByTestId`: if none of the previous options fit and/or we don’t have any visual element that we can rely upon, we have to fallback to a specific test id, which can be defined using the `testID` attribute (see [here](https://github.com/WordPress/gutenberg/blob/e5b387b19ffc50555f52ea5f0b415ab846896def/packages/block-editor/src/components/block-types-list/index.native.js#L80) for an example).

Here are some examples:
Expand All @@ -112,7 +112,7 @@ const mediaLibraryButton = getByText( 'WordPress Media Library' );
```

```js
const missingBlock = getByA11yLabel( /Unsupported Block\. Row 1/ );
const missingBlock = getByLabelText( /Unsupported Block\. Row 1/ );
```

```js
Expand All @@ -135,7 +135,7 @@ const mediaLibraryButton = await waitFor( () =>

```js
const missingBlock = await waitFor( () =>
getByA11yLabel( /Unsupported Block\. Row 1/ )
getByLabelText( /Unsupported Block\. Row 1/ )
);
```

Expand All @@ -155,7 +155,7 @@ It’s also possible to query elements contained in other elements via the `with

```js
const missingBlock = await waitFor( () =>
getByA11yLabel( /Unsupported Block\. Row 1/ )
getByLabelText( /Unsupported Block\. Row 1/ )
);
const translatedTableTitle = within( missingBlock ).getByText( 'Tabla' );
```
Expand Down Expand Up @@ -224,7 +224,7 @@ A common way to query a block is by its accessibility label, here is an example:

```js
const spacerBlock = await waitFor( () =>
getByA11yLabel( /Spacer Block\. Row 1/ )
getByLabelText( /Spacer Block\. Row 1/ )
);
```

Expand All @@ -236,7 +236,7 @@ Here is an example of how to insert a Paragraph block:

```js
// Open the inserter menu
fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );

const blockList = getByTestId( 'InserterUI-Blocks' );
// onScroll event used to force the FlatList to render all items
Expand All @@ -259,7 +259,7 @@ The block settings can be accessed by tapping the "Open Settings" button after s
```js
fireEvent.press( block );

const settingsButton = await waitFor( () => getByA11yLabel( 'Open Settings' ) );
const settingsButton = await waitFor( () => getByLabelText( 'Open Settings' ) );
fireEvent.press( settingsButton );
```

Expand Down Expand Up @@ -326,7 +326,7 @@ fireEvent( innerBlockListWrapper, 'layout', {
} );

const buttonInnerBlock = await waitFor( () =>
within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
);
fireEvent.press( buttonInnerBlock );
```
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-alignment-control/test/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ it( 'should call onChange with undefined when the control is already active', ()
const screen = render(
<BlockAlignmentUI value="right" onChange={ onChangeMock } />
);
const alignButton = screen.getByA11yLabel( 'Align' );
const alignButton = screen.getByLabelText( 'Align' );
fireEvent.press( alignButton );
const rightAlignmentButton = screen.getByA11yLabel( 'Align right' );
const rightAlignmentButton = screen.getByLabelText( 'Align right' );
fireEvent.press( rightAlignmentButton );

expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
Expand All @@ -27,9 +27,9 @@ it( 'should call onChange with alignment value when the control is inactive', ()
const screen = render(
<BlockAlignmentUI value="left" onChange={ onChangeMock } />
);
const alignButton = screen.getByA11yLabel( 'Align' );
const alignButton = screen.getByLabelText( 'Align' );
fireEvent.press( alignButton );
const centerAlignmentButton = screen.getByA11yLabel( 'Align center' );
const centerAlignmentButton = screen.getByLabelText( 'Align center' );
fireEvent.press( centerAlignmentButton );

expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-draggable/test/helpers.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );

const screen = await initializeEditor( { initialHtml } );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;

const waitPromises = [];
blocks.forEach( ( block, index ) => {
const a11yLabel = new RegExp(
`${ block.name } Block\\. Row ${ index + 1 }`
);
const element = getByA11yLabel( a11yLabel );
const element = getByLabelText( a11yLabel );
// "onLayout" event will populate the blocks layouts data.
fireEvent( element, 'layout', {
nativeEvent: { layout: block.layout },
Expand Down Expand Up @@ -92,7 +92,7 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
);
fireEvent(
within( element ).getByA11yLabel( nestedA11yLabel ),
within( element ).getByLabelText( nestedA11yLabel ),
'layout',
{
nativeEvent: { layout: nestedBlock.layout },
Expand Down
54 changes: 27 additions & 27 deletions packages/block-editor/src/components/block-draggable/test/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,11 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when unselected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;

// Start dragging from block's content
fireLongPress(
getByA11yLabel( /Paragraph Block\. Row 1/ ),
getByLabelText( /Paragraph Block\. Row 1/ ),
'draggable-trigger-content'
);
expect( getDraggableChip( screen ) ).toBeVisible();
Expand All @@ -112,12 +112,12 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when selected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;
const blockDraggableWrapper = getByGestureTestId(
'block-draggable-wrapper'
);

const paragraphBlock = getByA11yLabel(
const paragraphBlock = getByLabelText(
/Paragraph Block\. Row 1/
);
fireEvent.press( paragraphBlock );
Expand Down Expand Up @@ -146,9 +146,9 @@ describe( 'BlockDraggable', () => {
it( 'does not enable drag mode when selected and editing text', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;

const paragraphBlock = getByA11yLabel(
const paragraphBlock = getByLabelText(
/Paragraph Block\. Row 1/
);

Expand Down Expand Up @@ -178,13 +178,13 @@ describe( 'BlockDraggable', () => {
it( 'finishes editing text and enables drag mode when long-pressing over a different block', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;

const paragraphBlock = getByA11yLabel(
const paragraphBlock = getByLabelText(
/Paragraph Block\. Row 1/
);
const spacerBlock =
getByA11yLabel( /Spacer Block\. Row 3/ );
getByLabelText( /Spacer Block\. Row 3/ );

// Select Paragraph block and start editing text
fireEvent.press( paragraphBlock );
Expand All @@ -208,12 +208,12 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when unselected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getAllByA11yLabel } = screen;
const { getAllByLabelText } = screen;

// We select the first Image block as the Gallery block
// also contains Image blocks.
const imageBlock =
getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
getAllByLabelText( /Image Block\. Row 2/ )[ 0 ];
// Start dragging from block's content
fireLongPress( imageBlock, 'draggable-trigger-content' );
expect( getDraggableChip( screen ) ).toBeVisible();
Expand All @@ -228,15 +228,15 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when selected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getAllByA11yLabel } = screen;
const { getAllByLabelText } = screen;
const blockDraggableWrapper = getByGestureTestId(
'block-draggable-wrapper'
);

// We select the first Image block as the Gallery block
// also contains Image blocks.
const imageBlock =
getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
getAllByLabelText( /Image Block\. Row 2/ )[ 0 ];
fireEvent.press( imageBlock );

// Start dragging from block's content
Expand All @@ -262,12 +262,12 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when unselected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;

// Start dragging from block's content, specifically the first
// trigger index, which corresponds to the Gallery block content.
fireLongPress(
getByA11yLabel( /Gallery Block\. Row 4/ ),
getByLabelText( /Gallery Block\. Row 4/ ),
'draggable-trigger-content',
{ triggerIndex: 0 }
);
Expand All @@ -283,12 +283,12 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when selected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;
const blockDraggableWrapper = getByGestureTestId(
'block-draggable-wrapper'
);

const galleryBlock = getByA11yLabel(
const galleryBlock = getByLabelText(
/Gallery Block\. Row 4/
);
await waitForStoreResolvers( () =>
Expand Down Expand Up @@ -319,16 +319,16 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when nested block is selected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;
const blockDraggableWrapper = getByGestureTestId(
'block-draggable-wrapper'
);

const galleryBlock = getByA11yLabel(
const galleryBlock = getByLabelText(
/Gallery Block\. Row 4/
);
const galleryItem =
within( galleryBlock ).getByA11yLabel(
within( galleryBlock ).getByLabelText(
/Image Block\. Row 2/
);
fireEvent.press( galleryBlock );
Expand Down Expand Up @@ -361,11 +361,11 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when unselected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;

// Start dragging from block's content
fireLongPress(
getByA11yLabel( /Spacer Block\. Row 3/ ),
getByLabelText( /Spacer Block\. Row 3/ ),
'draggable-trigger-content'
);
expect( getDraggableChip( screen ) ).toBeVisible();
Expand All @@ -380,13 +380,13 @@ describe( 'BlockDraggable', () => {
it( 'enables drag mode when selected', async () =>
withReanimatedTimer( async () => {
const screen = await initializeWithBlocksLayouts( BLOCKS );
const { getByA11yLabel } = screen;
const { getByLabelText } = screen;
const blockDraggableWrapper = getByGestureTestId(
'block-draggable-wrapper'
);

const spacerBlock =
getByA11yLabel( /Spacer Block\. Row 3/ );
getByLabelText( /Spacer Block\. Row 3/ );
await waitForStoreResolvers( () =>
fireEvent.press( spacerBlock )
);
Expand All @@ -413,7 +413,7 @@ describe( 'BlockDraggable', () => {

it( 'moves blocks', async () =>
withReanimatedTimer( async () => {
const { getByA11yLabel } = await initializeWithBlocksLayouts(
const { getByLabelText } = await initializeWithBlocksLayouts(
BLOCKS
);
const blockDraggableWrapper = getByGestureTestId(
Expand All @@ -424,7 +424,7 @@ describe( 'BlockDraggable', () => {

// Move Paragraph block from first to second position
fireLongPress(
getByA11yLabel( /Paragraph Block\. Row 1/ ),
getByLabelText( /Paragraph Block\. Row 1/ ),
'draggable-trigger-content'
);
firePanGesture( blockDraggableWrapper, [
Expand Down Expand Up @@ -454,7 +454,7 @@ describe( 'BlockDraggable', () => {

// Move Spacer block from third to first position
fireLongPress(
getByA11yLabel( /Spacer Block\. Row 3/ ),
getByLabelText( /Spacer Block\. Row 3/ ),
'draggable-trigger-content'
);
firePanGesture( blockDraggableWrapper, [
Expand Down
16 changes: 8 additions & 8 deletions packages/block-library/src/block/test/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@ describe( 'Reusable block', () => {
return Promise.resolve( response );
} );

const { getByA11yLabel, getByTestId, getByText } =
const { getByLabelText, getByTestId, getByText } =
await initializeEditor( {
initialHtml: '',
capabilities: { reusableBlock: true },
} );

// Open the inserter menu.
fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );

// Navigate to reusable tab.
const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
Expand Down Expand Up @@ -116,7 +116,7 @@ describe( 'Reusable block', () => {

// Get the reusable block.
const reusableBlock = await waitFor( () =>
getByA11yLabel( /Reusable block Block\. Row 1/ )
getByLabelText( /Reusable block Block\. Row 1/ )
);

expect( reusableBlock ).toBeDefined();
Expand All @@ -128,12 +128,12 @@ describe( 'Reusable block', () => {
const id = 3;
const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;

const { getByA11yLabel } = await initializeEditor( {
const { getByLabelText } = await initializeEditor( {
initialHtml,
} );

const reusableBlock = await waitFor( () =>
getByA11yLabel( /Reusable block Block\. Row 1/ )
getByLabelText( /Reusable block Block\. Row 1/ )
);

const blockDeleted = await waitFor( () =>
Expand Down Expand Up @@ -163,12 +163,12 @@ describe( 'Reusable block', () => {
return Promise.resolve( response );
} );

const { getByA11yLabel } = await initializeEditor( {
const { getByLabelText } = await initializeEditor( {
initialHtml,
} );

const reusableBlock = await waitFor( () =>
getByA11yLabel( /Reusable block Block\. Row 1/ )
getByLabelText( /Reusable block Block\. Row 1/ )
);

const innerBlockListWrapper = await waitFor( () =>
Expand All @@ -186,7 +186,7 @@ describe( 'Reusable block', () => {
} );

const headingInnerBlock = await waitFor( () =>
within( reusableBlock ).getByA11yLabel(
within( reusableBlock ).getByLabelText(
'Heading Block. Row 1. Level 2. First Reusable block'
)
);
Expand Down
Loading

0 comments on commit bf6eddd

Please sign in to comment.