Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native unit tests: migrate getByA11yLabel usages #45454

Merged
merged 1 commit into from
Nov 3, 2022
Merged

React Native unit tests: migrate getByA11yLabel usages #45454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/contributors/code/react-native/integration-test-guide.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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