diff --git a/docs/contributors/code/react-native/integration-test-guide.md b/docs/contributors/code/react-native/integration-test-guide.md index a73e277da3c621..af810a3a5dff24 100644 --- a/docs/contributors/code/react-native/integration-test-guide.md +++ b/docs/contributors/code/react-native/integration-test-guide.md @@ -90,7 +90,7 @@ const initialHtml = `
Hello
`; -const { getByA11yLabel } = initializeEditor( { +const { getByLabelText } = initializeEditor( { initialHtml, } ); ``` @@ -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: @@ -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 @@ -135,7 +135,7 @@ const mediaLibraryButton = await waitFor( () => ```js const missingBlock = await waitFor( () => - getByA11yLabel( /Unsupported Block\. Row 1/ ) + getByLabelText( /Unsupported Block\. Row 1/ ) ); ``` @@ -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' ); ``` @@ -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/ ) ); ``` @@ -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 @@ -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 ); ``` @@ -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 ); ``` diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.native.js b/packages/block-editor/src/components/block-alignment-control/test/index.native.js index 64a9f3bfce1f6b..2e53ae2b7ac759 100644 --- a/packages/block-editor/src/components/block-alignment-control/test/index.native.js +++ b/packages/block-editor/src/components/block-alignment-control/test/index.native.js @@ -13,9 +13,9 @@ it( 'should call onChange with undefined when the control is already active', () const screen = render( ); - 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 ); @@ -27,9 +27,9 @@ it( 'should call onChange with alignment value when the control is inactive', () const screen = render( ); - 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 ); diff --git a/packages/block-editor/src/components/block-draggable/test/helpers.native.js b/packages/block-editor/src/components/block-draggable/test/helpers.native.js index 6bc8fdf29304e0..ed9bf443d4013a 100644 --- a/packages/block-editor/src/components/block-draggable/test/helpers.native.js +++ b/packages/block-editor/src/components/block-draggable/test/helpers.native.js @@ -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 }, @@ -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 }, diff --git a/packages/block-editor/src/components/block-draggable/test/index.native.js b/packages/block-editor/src/components/block-draggable/test/index.native.js index 4f5ba758a283a0..2783845946050f 100644 --- a/packages/block-editor/src/components/block-draggable/test/index.native.js +++ b/packages/block-editor/src/components/block-draggable/test/index.native.js @@ -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(); @@ -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 ); @@ -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/ ); @@ -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 ); @@ -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(); @@ -228,7 +228,7 @@ 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' ); @@ -236,7 +236,7 @@ describe( 'BlockDraggable', () => { // 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 @@ -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 } ); @@ -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( () => @@ -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 ); @@ -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(); @@ -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 ) ); @@ -413,7 +413,7 @@ describe( 'BlockDraggable', () => { it( 'moves blocks', async () => withReanimatedTimer( async () => { - const { getByA11yLabel } = await initializeWithBlocksLayouts( + const { getByLabelText } = await initializeWithBlocksLayouts( BLOCKS ); const blockDraggableWrapper = getByGestureTestId( @@ -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, [ @@ -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, [ diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js index a8c4e28fcc6f48..a683426a751e20 100644 --- a/packages/block-library/src/block/test/edit.native.js +++ b/packages/block-library/src/block/test/edit.native.js @@ -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' ) ); @@ -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(); @@ -128,12 +128,12 @@ describe( 'Reusable block', () => { const id = 3; const initialHtml = ``; - 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( () => @@ -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( () => @@ -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' ) ); diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index 24ed3f22e1ea47..a6a25ee0590a90 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -50,12 +50,12 @@ describe( 'Buttons block', () => { `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); const buttonsBlock = await waitFor( () => - getByA11yLabel( /Buttons Block\. Row 1/ ) + getByLabelText( /Buttons Block\. Row 1/ ) ); fireEvent.press( buttonsBlock ); @@ -73,17 +73,17 @@ describe( 'Buttons block', () => { } ); const buttonInnerBlock = await waitFor( () => - within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ ) + within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ ) ); fireEvent.press( buttonInnerBlock ); const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) + getByLabelText( 'Open Settings' ) ); fireEvent.press( settingsButton ); const radiusStepper = await waitFor( () => - getByA11yLabel( /Border Radius/ ) + getByLabelText( /Border Radius/ ) ); const incrementButton = await waitFor( () => @@ -98,7 +98,7 @@ describe( 'Buttons block', () => { const screen = await initializeEditor( { initialHtml: BUTTONS_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const buttonsBlock = await getBlock( screen, 'Buttons' ); @@ -126,13 +126,13 @@ describe( 'Buttons block', () => { // Check for new button const secondButtonBlock = await waitFor( () => - within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 2/ ) + within( buttonsBlock ).getByLabelText( /Button Block\. Row 2/ ) ); expect( secondButtonBlock ).toBeVisible(); // Add a Paragraph block using the empty placeholder at the bottom const paragraphPlaceholder = await waitFor( () => - getByA11yLabel( 'Add paragraph block' ) + getByLabelText( 'Add paragraph block' ) ); fireEvent.press( paragraphPlaceholder ); @@ -149,9 +149,9 @@ describe( 'Buttons block', () => { initialHtml: BUTTONS_HTML, } ); const { - getByA11yLabel, + getByLabelText, getByTestId, - queryAllByA11yLabel, + queryAllByLabelText, getByText, } = screen; @@ -176,7 +176,7 @@ describe( 'Buttons block', () => { fireEvent.press( buttonBlock ); // Open the block inserter - fireEvent.press( getByA11yLabel( 'Add block' ) ); + fireEvent.press( getByLabelText( 'Add block' ) ); const blockList = getByTestId( 'InserterUI-Blocks' ); // onScroll event used to force the FlatList to render all items @@ -190,7 +190,7 @@ describe( 'Buttons block', () => { // Check the Add block here placeholder is not visible const addBlockHerePlaceholders = - queryAllByA11yLabel( 'ADD BLOCK HERE' ); + queryAllByLabelText( 'ADD BLOCK HERE' ); expect( addBlockHerePlaceholders.length ).toBe( 0 ); // Add a new Button block @@ -201,7 +201,7 @@ describe( 'Buttons block', () => { rowIndex: 2, } ); const secondButtonInput = - within( secondButtonBlock ).getByA11yLabel( + within( secondButtonBlock ).getByLabelText( 'Text input. Empty' ); changeTextOfRichText( secondButtonInput, 'Hello!' ); @@ -214,7 +214,7 @@ describe( 'Buttons block', () => { const screen = await initializeEditor( { initialHtml: BUTTONS_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const buttonsBlock = await getBlock( screen, 'Buttons' ); @@ -236,13 +236,13 @@ describe( 'Buttons block', () => { fireEvent.press( buttonBlock ); // Open block actions menu - const blockActionsButton = getByA11yLabel( + const blockActionsButton = getByLabelText( /Open Block Actions Menu/ ); fireEvent.press( blockActionsButton ); // Delete block - const deleteButton = getByA11yLabel( /Remove block/ ); + const deleteButton = getByLabelText( /Remove block/ ); fireEvent.press( deleteButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -260,17 +260,17 @@ describe( 'Buttons block', () => { const initialHtml = `
`; - const { getByA11yLabel, getByText } = await initializeEditor( { + const { getByLabelText, getByText } = await initializeEditor( { initialHtml, } ); const block = await waitFor( () => - getByA11yLabel( /Buttons Block\. Row 1/ ) + getByLabelText( /Buttons Block\. Row 1/ ) ); fireEvent.press( block ); fireEvent.press( - getByA11yLabel( 'Change items justification' ) + getByLabelText( 'Change items justification' ) ); // Select alignment option. diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js index 4451a5de6fb5f5..565b0e695cad29 100644 --- a/packages/block-library/src/columns/test/edit.native.js +++ b/packages/block-library/src/columns/test/edit.native.js @@ -75,7 +75,7 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); @@ -85,7 +85,7 @@ describe( 'Columns block', () => { await openBlockSettings( screen ); // Update the number of columns by adding one - const columnsControl = getByA11yLabel( /Number of columns/ ); + const columnsControl = getByLabelText( /Number of columns/ ); fireEvent( columnsControl, 'accessibilityAction', { nativeEvent: { actionName: 'increment' }, } ); @@ -97,7 +97,7 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Wait for the block to be created. const columnsBlock = await getBlock( screen, 'Columns' ); @@ -107,7 +107,7 @@ describe( 'Columns block', () => { await openBlockSettings( screen ); // Update the number of columns by removing one - const columnsControl = getByA11yLabel( /Number of columns/ ); + const columnsControl = getByLabelText( /Number of columns/ ); fireEvent( columnsControl, 'accessibilityAction', { nativeEvent: { actionName: 'decrement' }, } ); @@ -117,7 +117,7 @@ describe( 'Columns block', () => { it( 'reaches the minimum limit of number of column blocks', async () => { const screen = await initializeEditor(); - const { getByA11yLabel, getByTestId } = screen; + const { getByLabelText, getByTestId } = screen; // Add block await addBlock( screen, 'Columns' ); @@ -131,7 +131,7 @@ describe( 'Columns block', () => { const blockVariationModal = getByTestId( 'block-variation-modal' ); await waitFor( () => blockVariationModal.props.isVisible ); const threeColumnLayout = - within( blockVariationModal ).getByA11yLabel( + within( blockVariationModal ).getByLabelText( /33 \/ 33 \/ 33 block/ ); fireEvent.press( threeColumnLayout ); @@ -144,7 +144,7 @@ describe( 'Columns block', () => { await openBlockSettings( screen ); // Update the number of columns by adding one - const columnsControl = getByA11yLabel( /Number of columns/ ); + const columnsControl = getByLabelText( /Number of columns/ ); fireEvent( columnsControl, 'accessibilityAction', { nativeEvent: { actionName: 'increment' }, } ); @@ -164,7 +164,7 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); @@ -175,11 +175,11 @@ describe( 'Columns block', () => { fireEvent.press( firstColumnBlock ); // Open block actions menu - const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + const blockActionsButton = getByLabelText( /Open Block Actions Menu/ ); fireEvent.press( blockActionsButton ); // Delete block - const deleteButton = getByA11yLabel( /Remove block/ ); + const deleteButton = getByLabelText( /Remove block/ ); fireEvent.press( deleteButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -189,7 +189,7 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); @@ -200,11 +200,11 @@ describe( 'Columns block', () => { fireEvent.press( firstColumnBlock ); // Open block actions menu - let blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + let blockActionsButton = getByLabelText( /Open Block Actions Menu/ ); fireEvent.press( blockActionsButton ); // Delete block - let deleteButton = getByA11yLabel( /Remove block/ ); + let deleteButton = getByLabelText( /Remove block/ ); fireEvent.press( deleteButton ); // Get the only left column @@ -212,11 +212,11 @@ describe( 'Columns block', () => { fireEvent.press( lastColumnBlock ); // Open block actions menu - blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + blockActionsButton = getByLabelText( /Open Block Actions Menu/ ); fireEvent.press( blockActionsButton ); // Delete block - deleteButton = getByA11yLabel( /Remove block/ ); + deleteButton = getByLabelText( /Remove block/ ); fireEvent.press( deleteButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -226,20 +226,20 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); fireEvent.press( columnsBlock ); // Open vertical alignment menu - const verticalAlignmentButton = getByA11yLabel( + const verticalAlignmentButton = getByLabelText( /Change vertical alignment/ ); fireEvent.press( verticalAlignmentButton ); // Get Align top button - const verticalTopAlignmentButton = getByA11yLabel( /Align top/ ); + const verticalTopAlignmentButton = getByLabelText( /Align top/ ); fireEvent.press( verticalTopAlignmentButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -249,20 +249,20 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); fireEvent.press( columnsBlock ); // Open vertical alignment menu - const verticalAlignmentButton = getByA11yLabel( + const verticalAlignmentButton = getByLabelText( /Change vertical alignment/ ); fireEvent.press( verticalAlignmentButton ); // Get Align top button - const verticalTopAlignmentButton = getByA11yLabel( /Align top/ ); + const verticalTopAlignmentButton = getByLabelText( /Align top/ ); fireEvent.press( verticalTopAlignmentButton ); // Get the first column @@ -273,7 +273,7 @@ describe( 'Columns block', () => { fireEvent.press( verticalAlignmentButton ); // Get Align bottom button - const verticalBottomAlignmentButton = getByA11yLabel( /Align bottom/ ); + const verticalBottomAlignmentButton = getByLabelText( /Align bottom/ ); fireEvent.press( verticalBottomAlignmentButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -283,20 +283,20 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); fireEvent.press( columnsBlock ); // Open vertical alignment menu - const verticalAlignmentButton = getByA11yLabel( + const verticalAlignmentButton = getByLabelText( /Change vertical alignment/ ); fireEvent.press( verticalAlignmentButton ); // Get Align top button - const verticalTopAlignmentButton = getByA11yLabel( /Align top/ ); + const verticalTopAlignmentButton = getByLabelText( /Align top/ ); fireEvent.press( verticalTopAlignmentButton ); // Add a new column @@ -310,7 +310,7 @@ describe( 'Columns block', () => { describe( 'when using columns percentage mechanism', () => { it( "updates the slider's input value", async () => { const screen = await initializeEditor(); - const { getByA11yLabel, getByTestId } = screen; + const { getByLabelText, getByTestId } = screen; // Add block await addBlock( screen, 'Columns' ); @@ -324,7 +324,7 @@ describe( 'Columns block', () => { const blockVariationModal = getByTestId( 'block-variation-modal' ); await waitFor( () => blockVariationModal.props.isVisible ); const threeColumnLayout = - within( blockVariationModal ).getByA11yLabel( + within( blockVariationModal ).getByLabelText( /33 \/ 33 \/ 33 block/ ); fireEvent.press( threeColumnLayout ); @@ -337,7 +337,7 @@ describe( 'Columns block', () => { await openBlockSettings( screen ); // Get width control - const widthControl = getByA11yLabel( /Width. Value is/ ); + const widthControl = getByLabelText( /Width. Value is/ ); fireEvent.press( within( widthControl ).getByText( '33.3' ) ); const widthTextInput = within( widthControl ).getByDisplayValue( '33.3' ); @@ -350,7 +350,7 @@ describe( 'Columns block', () => { const screen = await initializeEditor( { initialHtml: TWO_COLUMNS_BLOCK_HTML, } ); - const { getByA11yLabel, getByTestId } = screen; + const { getByLabelText, getByTestId } = screen; // Get block const columnsBlock = await getBlock( screen, 'Columns' ); @@ -364,7 +364,7 @@ describe( 'Columns block', () => { await openBlockSettings( screen ); // Set custom width value for the first column - let widthControl = getByA11yLabel( /Width. Value is/ ); + let widthControl = getByLabelText( /Width. Value is/ ); fireEvent.press( within( widthControl ).getByText( '50' ) ); let widthTextInput = within( widthControl ).getByDisplayValue( '50' ); @@ -383,7 +383,7 @@ describe( 'Columns block', () => { await openBlockSettings( screen ); // Set custom width value for the second column - widthControl = getByA11yLabel( /Width. Value is/ ); + widthControl = getByLabelText( /Width. Value is/ ); fireEvent.press( within( widthControl ).getByText( '50' ) ); widthTextInput = within( widthControl ).getByDisplayValue( '50' ); fireEvent.changeText( widthTextInput, '55.5' ); @@ -422,7 +422,7 @@ describe( 'Columns block', () => { ); await waitFor( () => blockVariationModal.props.isVisible ); const columnLayout = - within( blockVariationModal ).getByA11yLabel( layout ); + within( blockVariationModal ).getByLabelText( layout ); fireEvent.press( columnLayout ); expect( getEditorHtml() ).toMatchSnapshot(); diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js index ce6ad74593bbd3..10dbff032160a9 100644 --- a/packages/block-library/src/cover/test/edit.native.js +++ b/packages/block-library/src/cover/test/edit.native.js @@ -307,7 +307,7 @@ describe( 'when an image is attached', () => { const screen = await initializeEditor( { initialHtml: COVER_BLOCK_IMAGE_HTML, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block const coverBlock = await getBlock( screen, 'Cover' ); @@ -317,7 +317,7 @@ describe( 'when an image is attached', () => { await openBlockSettings( screen ); // Update Opacity attribute - const opacityControl = getByA11yLabel( /Opacity/ ); + const opacityControl = getByLabelText( /Opacity/ ); fireEvent.press( within( opacityControl ).getByText( '50' ) ); const heightTextInput = within( opacityControl ).getByDisplayValue( '50' ); @@ -334,12 +334,12 @@ describe( 'when an image is attached', () => { describe( 'color settings', () => { it( 'sets a color for the overlay background when the placeholder is visible', async () => { - const { getByTestId, getByA11yLabel } = await initializeEditor( { + const { getByTestId, getByLabelText } = await initializeEditor( { initialHtml: COVER_BLOCK_PLACEHOLDER_HTML, } ); const block = await waitFor( () => - getByA11yLabel( 'Cover block. Empty' ) + getByLabelText( 'Cover block. Empty' ) ); expect( block ).toBeDefined(); @@ -354,13 +354,13 @@ describe( 'color settings', () => { // Wait for the block to be created. const coverBlockWithOverlay = await waitFor( () => - getByA11yLabel( /Cover Block\. Row 1/ ) + getByLabelText( /Cover Block\. Row 1/ ) ); fireEvent.press( coverBlockWithOverlay ); // Open Block Settings. const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) + getByLabelText( 'Open Settings' ) ); fireEvent.press( settingsButton ); @@ -370,7 +370,7 @@ describe( 'color settings', () => { // Open the overlay color settings. const colorOverlay = await waitFor( () => - getByA11yLabel( 'Color. Empty' ) + getByLabelText( 'Color. Empty' ) ); expect( colorOverlay ).toBeDefined(); fireEvent.press( colorOverlay ); @@ -389,20 +389,20 @@ describe( 'color settings', () => { } ); it( 'sets a gradient overlay background when a solid background was already selected', async () => { - const { getByTestId, getByA11yLabel } = await initializeEditor( { + const { getByTestId, getByLabelText } = await initializeEditor( { initialHtml: COVER_BLOCK_SOLID_COLOR_HTML, } ); // Wait for the block to be created. const coverBlock = await waitFor( () => - getByA11yLabel( /Cover Block\. Row 1/ ) + getByLabelText( /Cover Block\. Row 1/ ) ); expect( coverBlock ).toBeDefined(); fireEvent.press( coverBlock ); // Open Block Settings. const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) + getByLabelText( 'Open Settings' ) ); fireEvent.press( settingsButton ); @@ -412,7 +412,7 @@ describe( 'color settings', () => { // Open the overlay color settings. const colorOverlay = await waitFor( () => - getByA11yLabel( 'Color. Empty' ) + getByLabelText( 'Color. Empty' ) ); expect( colorOverlay ).toBeDefined(); fireEvent.press( colorOverlay ); @@ -423,7 +423,7 @@ describe( 'color settings', () => { // Open the gradients. const gradientsButton = await waitFor( () => - getByA11yLabel( 'Gradient' ) + getByLabelText( 'Gradient' ) ); expect( gradientsButton ).toBeDefined(); @@ -446,12 +446,12 @@ describe( 'color settings', () => { } ); it( 'toggles between solid colors and gradients', async () => { - const { getByTestId, getByA11yLabel } = await initializeEditor( { + const { getByTestId, getByLabelText } = await initializeEditor( { initialHtml: COVER_BLOCK_PLACEHOLDER_HTML, } ); const block = await waitFor( () => - getByA11yLabel( 'Cover block. Empty' ) + getByLabelText( 'Cover block. Empty' ) ); expect( block ).toBeDefined(); @@ -466,13 +466,13 @@ describe( 'color settings', () => { // Wait for the block to be created. const coverBlockWithOverlay = await waitFor( () => - getByA11yLabel( /Cover Block\. Row 1/ ) + getByLabelText( /Cover Block\. Row 1/ ) ); fireEvent.press( coverBlockWithOverlay ); // Open Block Settings. const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) + getByLabelText( 'Open Settings' ) ); fireEvent.press( settingsButton ); @@ -482,7 +482,7 @@ describe( 'color settings', () => { // Open the overlay color settings. const colorOverlay = await waitFor( () => - getByA11yLabel( 'Color. Empty' ) + getByLabelText( 'Color. Empty' ) ); expect( colorOverlay ).toBeDefined(); fireEvent.press( colorOverlay ); @@ -499,7 +499,7 @@ describe( 'color settings', () => { // Open the gradients. const gradientsButton = await waitFor( () => - getByA11yLabel( 'Gradient' ) + getByLabelText( 'Gradient' ) ); expect( gradientsButton ).toBeDefined(); @@ -516,11 +516,11 @@ describe( 'color settings', () => { fireEvent.press( newGradientButton ); // Go back to the settings list. - fireEvent.press( await waitFor( () => getByA11yLabel( 'Go back' ) ) ); + fireEvent.press( await waitFor( () => getByLabelText( 'Go back' ) ) ); // Find the color setting. const colorSetting = await waitFor( () => - getByA11yLabel( 'Color. Empty' ) + getByLabelText( 'Color. Empty' ) ); expect( colorSetting ).toBeDefined(); fireEvent.press( colorSetting ); @@ -532,21 +532,21 @@ describe( 'color settings', () => { } ); it( 'clears the selected overlay color and mantains the inner blocks', async () => { - const { getByTestId, getByA11yLabel, getByText } = + const { getByTestId, getByLabelText, getByText } = await initializeEditor( { initialHtml: COVER_BLOCK_SOLID_COLOR_HTML, } ); // Wait for the block to be created. const coverBlock = await waitFor( () => - getByA11yLabel( /Cover Block\. Row 1/ ) + getByLabelText( /Cover Block\. Row 1/ ) ); expect( coverBlock ).toBeDefined(); fireEvent.press( coverBlock ); // Open Block Settings. const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) + getByLabelText( 'Open Settings' ) ); fireEvent.press( settingsButton ); @@ -556,7 +556,7 @@ describe( 'color settings', () => { // Open the overlay color settings. const colorOverlay = await waitFor( () => - getByA11yLabel( 'Color. Empty' ) + getByLabelText( 'Color. Empty' ) ); expect( colorOverlay ).toBeDefined(); fireEvent.press( colorOverlay ); @@ -635,7 +635,7 @@ describe( 'minimum height settings', () => { const screen = await initializeEditor( { initialHtml: COVER_BLOCK_CUSTOM_HEIGHT_HTML, } ); - const { getByA11yLabel, getByText } = screen; + const { getByLabelText, getByText } = screen; // Get block const coverBlock = await getBlock( screen, 'Cover' ); @@ -649,7 +649,7 @@ describe( 'minimum height settings', () => { fireEvent.press( getByText( unitName ) ); // Update height attribute - const heightControl = getByA11yLabel( /Minimum height/ ); + const heightControl = getByLabelText( /Minimum height/ ); fireEvent.press( within( heightControl ).getByText( value ) ); const heightTextInput = within( heightControl ).getByDisplayValue( value ); diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js index 138d91884e6c75..60bc6604b8cffb 100644 --- a/packages/block-library/src/embed/test/index.native.js +++ b/packages/block-library/src/embed/test/index.native.js @@ -147,17 +147,17 @@ const insertEmbedBlock = async ( blockTitle = 'Embed' ) => { const editor = await initializeEditor( { initialHtml: '', } ); - const { getByA11yLabel, getByText } = editor; + const { getByLabelText, getByText } = editor; // Open inserter menu. - fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) ); + fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) ); // Insert embed block. fireEvent.press( await waitFor( () => getByText( blockTitle ) ) ); // Return the embed block. const block = await waitFor( () => - getByA11yLabel( /Embed Block\. Row 1/ ) + getByLabelText( /Embed Block\. Row 1/ ) ); return { ...editor, block }; @@ -165,10 +165,10 @@ const insertEmbedBlock = async ( blockTitle = 'Embed' ) => { const initializeWithEmbedBlock = async ( initialHtml, selectBlock = true ) => { const editor = await initializeEditor( { initialHtml } ); - const { getByA11yLabel } = editor; + const { getByLabelText } = editor; const block = await waitFor( () => - getByA11yLabel( /Embed Block\. Row 1/ ) + getByLabelText( /Embed Block\. Row 1/ ) ); if ( selectBlock ) { @@ -270,7 +270,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = within( blockSettingsModal - ).getByA11yLabel( `Twitter link, ${ expectedURL }` ); + ).getByLabelText( `Twitter link, ${ expectedURL }` ); expect( twitterLinkField ).toBeDefined(); expect( getEditorHtml() ).toMatchSnapshot(); @@ -303,7 +303,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = within( blockSettingsModal - ).getByA11yLabel( `Twitter link, ${ clipboardURL }` ); + ).getByLabelText( `Twitter link, ${ clipboardURL }` ); expect( autopastedLinkField ).toBeDefined(); expect( twitterLinkField ).toBeDefined(); @@ -361,7 +361,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = within( blockSettingsModal - ).getByA11yLabel( `Twitter link, ${ expectedURL }` ); + ).getByLabelText( `Twitter link, ${ expectedURL }` ); expect( twitterLinkField ).toBeDefined(); expect( getEditorHtml() ).toMatchSnapshot(); @@ -397,7 +397,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = within( blockSettingsModal - ).getByA11yLabel( `Twitter link, ${ clipboardURL }` ); + ).getByLabelText( `Twitter link, ${ clipboardURL }` ); expect( embedLink ).toBeDefined(); expect( twitterLinkField ).toBeDefined(); @@ -409,12 +409,12 @@ describe( 'Embed block', () => { describe( 'edit URL', () => { it( 'keeps the previous URL if no URL is set', async () => { - const { getByA11yLabel, getByTestId } = + const { getByLabelText, getByTestId } = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML ); // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Wait for Block Settings to be visible. @@ -432,12 +432,12 @@ describe( 'Embed block', () => { const initialURL = 'https://twitter.com/notnownikki'; const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc'; - const { getByA11yLabel, getByDisplayValue, getByTestId } = + const { getByLabelText, getByDisplayValue, getByTestId } = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML ); // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Wait for Block Settings to be visible. @@ -446,7 +446,7 @@ describe( 'Embed block', () => { // Start editing link. fireEvent.press( - within( blockSettingsModal ).getByA11yLabel( + within( blockSettingsModal ).getByLabelText( `Twitter link, ${ initialURL }` ) ); @@ -462,7 +462,7 @@ describe( 'Embed block', () => { // Get YouTube link field. const youtubeLinkField = await waitFor( () => - within( blockSettingsModal ).getByA11yLabel( + within( blockSettingsModal ).getByLabelText( `YouTube link, ${ expectedURL }` ) ); @@ -476,7 +476,7 @@ describe( 'Embed block', () => { const invalidURL = 'http://'; const { - getByA11yLabel, + getByLabelText, getByDisplayValue, getByTestId, getByText, @@ -484,7 +484,7 @@ describe( 'Embed block', () => { // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Wait for Block Settings to be visible. @@ -493,7 +493,7 @@ describe( 'Embed block', () => { // Start editing link. fireEvent.press( - within( blockSettingsModal ).getByA11yLabel( + within( blockSettingsModal ).getByLabelText( `Twitter link, ${ previousURL }` ) ); @@ -519,7 +519,7 @@ describe( 'Embed block', () => { const previousURL = 'https://twitter.com/notnownikki'; const { - getByA11yLabel, + getByLabelText, getByDisplayValue, getByTestId, getByPlaceholderText, @@ -527,7 +527,7 @@ describe( 'Embed block', () => { // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Get Block Settings modal. @@ -535,7 +535,7 @@ describe( 'Embed block', () => { // Start editing link. fireEvent.press( - within( blockSettingsModal ).getByA11yLabel( + within( blockSettingsModal ).getByLabelText( `Twitter link, ${ previousURL }` ) ); @@ -600,7 +600,7 @@ describe( 'Embed block', () => { const expectedURL = 'https://twitter.com/notnownikki'; const { - getByA11yLabel, + getByLabelText, getByDisplayValue, getByPlaceholderText, getByTestId, @@ -621,7 +621,7 @@ describe( 'Embed block', () => { // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Wait for Block Settings to be visible. @@ -630,7 +630,7 @@ describe( 'Embed block', () => { // Start editing link. fireEvent.press( - within( blockSettingsModal ).getByA11yLabel( + within( blockSettingsModal ).getByLabelText( `Embed link, ${ badURL }` ) ); @@ -646,7 +646,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = await waitFor( () => - within( blockSettingsModal ).getByA11yLabel( + within( blockSettingsModal ).getByLabelText( `Twitter link, ${ expectedURL }` ) ); @@ -665,12 +665,12 @@ describe( 'Embed block', () => { 'Full width', ].forEach( ( alignmentOption ) => it( `sets ${ alignmentOption } option`, async () => { - const { getByA11yLabel, getByText } = + const { getByLabelText, getByText } = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML ); // Open alignment options. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Align' ) ) + await waitFor( () => getByLabelText( 'Align' ) ) ); // Select alignment option. @@ -721,7 +721,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = within( blockSettingsModal - ).getByA11yLabel( `Twitter link, ${ expectedURL }` ); + ).getByLabelText( `Twitter link, ${ expectedURL }` ); expect( twitterLinkField ).toBeDefined(); expect( getEditorHtml() ).toMatchSnapshot(); @@ -739,7 +739,7 @@ describe( 'Embed block', () => { ); } ); - const { getByA11yLabel, getByText } = + const { getByLabelText, getByText } = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML ); // Convert embed to link. @@ -748,7 +748,7 @@ describe( 'Embed block', () => { // Get paragraph block where the link is created. const paragraphBlock = await waitFor( () => - getByA11yLabel( /Paragraph Block\. Row 1/ ) + getByLabelText( /Paragraph Block\. Row 1/ ) ); expect( paragraphBlock ).toBeDefined(); @@ -780,7 +780,7 @@ describe( 'Embed block', () => { } ); const { - getByA11yLabel, + getByLabelText, getByText, getByTestId, getByDisplayValue, @@ -790,7 +790,7 @@ describe( 'Embed block', () => { fireEvent.press( getByText( 'Edit link' ) ); // Start editing link. - fireEvent.press( getByA11yLabel( `WordPress link, ${ failURL }` ) ); + fireEvent.press( getByLabelText( `WordPress link, ${ failURL }` ) ); // Set an URL. const linkTextInput = getByDisplayValue( failURL ); @@ -808,7 +808,7 @@ describe( 'Embed block', () => { // Get Twitter link field. const twitterLinkField = within( blockSettingsModal - ).getByA11yLabel( `Twitter link, ${ successURL }` ); + ).getByLabelText( `Twitter link, ${ successURL }` ); expect( twitterLinkField ).toBeDefined(); expect( getEditorHtml() ).toMatchSnapshot(); @@ -865,7 +865,7 @@ describe( 'Embed block', () => { const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc'; const { - getByA11yLabel, + getByLabelText, getByPlaceholderText, getByTestId, getByText, @@ -897,7 +897,7 @@ describe( 'Embed block', () => { // Get the created embed block. const embedBlock = await waitFor( () => - getByA11yLabel( /Embed Block\. Row 1/ ) + getByLabelText( /Embed Block\. Row 1/ ) ); expect( embedBlock ).toBeDefined(); @@ -953,7 +953,7 @@ describe( 'Embed block', () => { describe( 'insert via slash inserter', () => { it( 'insert generic embed block', async () => { const embedBlockSlashInserter = '/Embed'; - const { getByPlaceholderText, getByA11yLabel, getByText } = + const { getByPlaceholderText, getByLabelText, getByText } = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } ); const paragraphText = getByPlaceholderText( 'Start writing…' ); @@ -980,7 +980,7 @@ describe( 'Embed block', () => { fireEvent.press( await waitFor( () => getByText( 'Embed' ) ) ); const block = await waitFor( () => - getByA11yLabel( /Embed Block\. Row 1/ ) + getByLabelText( /Embed Block\. Row 1/ ) ); const blockName = within( block ).getByText( 'Embed' ); @@ -992,7 +992,7 @@ describe( 'Embed block', () => { MOST_USED_PROVIDERS.forEach( ( { title } ) => it( `inserts ${ title } embed block`, async () => { const embedBlockSlashInserter = `/${ title }`; - const { getByPlaceholderText, getByA11yLabel, getByText } = + const { getByPlaceholderText, getByLabelText, getByText } = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML, } ); @@ -1021,7 +1021,7 @@ describe( 'Embed block', () => { fireEvent.press( await waitFor( () => getByText( title ) ) ); const block = await waitFor( () => - getByA11yLabel( /Embed Block\. Row 1/ ) + getByLabelText( /Embed Block\. Row 1/ ) ); const blockName = within( block ).getByText( title ); @@ -1080,12 +1080,12 @@ describe( 'Embed block', () => { describe( 'block settings', () => { it( 'toggles resize for smaller devices media settings', async () => { - const { getByA11yLabel, getByText } = + const { getByLabelText, getByText } = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML ); // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Untoggle resize for smaller devices. @@ -1097,12 +1097,12 @@ describe( 'Embed block', () => { } ); it( 'does not show media settings panel if responsive is not supported', async () => { - const { getByA11yLabel, getByText } = + const { getByLabelText, getByText } = await initializeWithEmbedBlock( WP_EMBED_HTML ); // Open Block Settings. fireEvent.press( - await waitFor( () => getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => getByLabelText( 'Open Settings' ) ) ); // Wait for media settings panel. diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 85b0d932592491..53bedb03190f48 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -100,7 +100,7 @@ describe( 'Gallery block', () => { // is addressed. it.skip( 'displays media options picker when selecting the block', async () => { // Initialize with an empty gallery - const { getByA11yLabel, getByText, getByTestId } = + const { getByLabelText, getByText, getByTestId } = await initializeEditor( { initialHtml: generateGalleryBlock( 0 ), } ); @@ -121,7 +121,7 @@ describe( 'Gallery block', () => { // Observe that the block is selected, this is done by checking if the block settings // button is visible - const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + const blockActionsButton = getByLabelText( /Open Block Actions Menu/ ); expect( blockActionsButton ).toBeVisible(); } ); @@ -160,18 +160,18 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc003 it( 'sets caption to gallery', async () => { // Initialize with a gallery that contains one item - const { getByA11yLabel } = await initializeWithGalleryBlock( { + const { getByLabelText } = await initializeWithGalleryBlock( { numberOfItems: 1, media, } ); // Check gallery item caption is not visible - const galleryItemCaption = getByA11yLabel( /Image caption. Empty/ ); + const galleryItemCaption = getByLabelText( /Image caption. Empty/ ); expect( galleryItemCaption ).not.toBeVisible(); // Set gallery caption const captionField = within( - getByA11yLabel( /Gallery caption. Empty/ ) + getByLabelText( /Gallery caption. Empty/ ) ).getByPlaceholderText( 'Add caption' ); changeTextOfRichText( captionField, @@ -456,7 +456,7 @@ describe( 'Gallery block', () => { fireEvent.press( galleryItem3 ); await act( () => fireEvent.press( - within( galleryItem3 ).getByA11yLabel( + within( galleryItem3 ).getByLabelText( /Move block left from position 3 to position 2/ ) ) @@ -465,7 +465,7 @@ describe( 'Gallery block', () => { fireEvent.press( galleryItem1 ); await act( () => fireEvent.press( - within( galleryItem1 ).getByA11yLabel( + within( galleryItem1 ).getByLabelText( /Move block right from position 1 to position 2/ ) ) @@ -563,14 +563,14 @@ describe( 'Gallery block', () => { numberOfItems: 3, media, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; await openBlockSettings( screen ); // Can't increment due to maximum value // NOTE: Default columns value is 3 fireEvent( - getByA11yLabel( /Columns\. Value is 3/ ), + getByLabelText( /Columns\. Value is 3/ ), 'accessibilityAction', { nativeEvent: { actionName: 'increment' }, @@ -585,13 +585,13 @@ describe( 'Gallery block', () => { numberOfItems: 3, media, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; await openBlockSettings( screen ); // Decrement columns fireEvent( - getByA11yLabel( /Columns\. Value is 3/ ), + getByLabelText( /Columns\. Value is 3/ ), 'accessibilityAction', { nativeEvent: { actionName: 'decrement' }, diff --git a/packages/block-library/src/group/test/edit.native.js b/packages/block-library/src/group/test/edit.native.js index dadb6bab43145f..5716d3380dc5bd 100644 --- a/packages/block-library/src/group/test/edit.native.js +++ b/packages/block-library/src/group/test/edit.native.js @@ -79,14 +79,14 @@ describe( 'Group block', () => { const screen = await initializeEditor( { initialHtml: NESTED_GROUP_BLOCK, } ); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Get block let groupBlock = await getBlock( screen, 'Group' ); fireEvent.press( groupBlock ); // Get Ungroup button - let ungroupButton = getByA11yLabel( /Ungroup/ ); + let ungroupButton = getByLabelText( /Ungroup/ ); fireEvent.press( ungroupButton ); // Press Group block again @@ -94,7 +94,7 @@ describe( 'Group block', () => { fireEvent.press( groupBlock ); // Ungroup last block - ungroupButton = getByA11yLabel( /Ungroup/ ); + ungroupButton = getByLabelText( /Ungroup/ ); fireEvent.press( ungroupButton ); expect( getEditorHtml() ).toMatchSnapshot(); diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index 323f46d8751a94..2f8aa703ee2b62 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -81,11 +81,11 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + fireEvent.press( screen.getByLabelText( /Image Block/ ) ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => - fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + fireEvent.press( screen.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( screen.getByText( 'Media File' ) ); fireEvent.press( screen.getByText( 'None' ) ); @@ -107,11 +107,11 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + fireEvent.press( screen.getByLabelText( /Image Block/ ) ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => - fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + fireEvent.press( screen.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( screen.getByText( 'None' ) ); fireEvent.press( screen.getByText( 'Media File' ) ); @@ -133,11 +133,11 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + fireEvent.press( screen.getByLabelText( /Image Block/ ) ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => - fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + fireEvent.press( screen.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( screen.getByText( 'None' ) ); fireEvent.press( screen.getByText( 'Custom URL' ) ); @@ -147,7 +147,7 @@ describe( 'Image Block', () => { screen.getByPlaceholderText( 'Search or type URL' ), 'wordpress.org' ); - fireEvent.press( screen.getByA11yLabel( 'Apply' ) ); + fireEvent.press( screen.getByLabelText( 'Apply' ) ); await waitFor( () => new Promise( ( resolve ) => setTimeout( resolve, 100 ) ) ); @@ -169,11 +169,11 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + fireEvent.press( screen.getByLabelText( /Image Block/ ) ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => - fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + fireEvent.press( screen.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( screen.getByText( 'None' ) ); fireEvent.press( screen.getByText( 'Media File' ) ); @@ -185,7 +185,7 @@ describe( 'Image Block', () => { screen.getByPlaceholderText( 'Search or type URL' ), 'wordpress.org' ); - fireEvent.press( screen.getByA11yLabel( 'Apply' ) ); + fireEvent.press( screen.getByLabelText( 'Apply' ) ); await waitFor( () => screen.getByText( 'Custom URL' ) ); fireEvent.press( screen.getByText( 'Custom URL' ) ); // Await asynchronous fetch of clipboard @@ -211,15 +211,15 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + fireEvent.press( screen.getByLabelText( /Image Block/ ) ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => - fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + fireEvent.press( screen.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( screen.getByText( 'Media File' ) ); - expect( screen.queryByA11yLabel( /https:\/\/cldup\.com/ ) ).toBeNull(); + expect( screen.queryByLabelText( /https:\/\/cldup\.com/ ) ).toBeNull(); } ); it( 'sets link target', async () => { @@ -235,10 +235,10 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - const imageBlock = screen.getByA11yLabel( /Image Block/ ); + const imageBlock = screen.getByLabelText( /Image Block/ ); fireEvent.press( imageBlock ); - const settingsButton = screen.getByA11yLabel( 'Open Settings' ); + const settingsButton = screen.getByLabelText( 'Open Settings' ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => fireEvent.press( settingsButton ) ); @@ -266,10 +266,10 @@ describe( 'Image Block', () => { // We must await the image fetch via `getMedia` await act( () => apiFetchPromise ); - const imageBlock = screen.getByA11yLabel( /Image Block/ ); + const imageBlock = screen.getByLabelText( /Image Block/ ); fireEvent.press( imageBlock ); - const settingsButton = screen.getByA11yLabel( 'Open Settings' ); + const settingsButton = screen.getByLabelText( 'Open Settings' ); // Awaiting navigation event seemingly required due to React Navigation bug // https://github.com/react-navigation/react-navigation/issues/9701 await act( () => fireEvent.press( settingsButton ) ); diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js index 3ce4c8e5494498..9defa338782dbe 100644 --- a/packages/block-library/src/list/test/edit.native.js +++ b/packages/block-library/src/list/test/edit.native.js @@ -63,16 +63,16 @@ describe( 'List block', () => {
  • `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Select List Item block - const listItemBlock = getByA11yLabel( /List item Block\. Row 1/ ); + const listItemBlock = getByLabelText( /List item Block\. Row 1/ ); fireEvent.press( listItemBlock ); const listItemField = @@ -109,17 +109,17 @@ describe( 'List block', () => { `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Select List Item block - const firstNestedLevelBlock = within( listBlock ).getByA11yLabel( + const firstNestedLevelBlock = within( listBlock ).getByLabelText( /List item Block\. Row 2/ ); fireEvent.press( firstNestedLevelBlock ); @@ -127,7 +127,7 @@ describe( 'List block', () => { // Select second level list const secondNestedLevelBlock = within( firstNestedLevelBlock - ).getByA11yLabel( /List Block\. Row 1/ ); + ).getByLabelText( /List Block\. Row 1/ ); fireEvent.press( secondNestedLevelBlock ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -143,20 +143,20 @@ describe( 'List block', () => { `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Select Secont List Item block - const listItemBlock = getByA11yLabel( /List item Block\. Row 2/ ); + const listItemBlock = getByLabelText( /List item Block\. Row 2/ ); fireEvent.press( listItemBlock ); // Update indentation - const indentButton = getByA11yLabel( 'Indent' ); + const indentButton = getByLabelText( 'Indent' ); fireEvent.press( indentButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -173,33 +173,33 @@ describe( 'List block', () => { `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Select List Item block - const firstNestedLevelBlock = within( listBlock ).getByA11yLabel( + const firstNestedLevelBlock = within( listBlock ).getByLabelText( /List item Block\. Row 1/ ); fireEvent.press( firstNestedLevelBlock ); // Select Inner block List - const innerBlockList = within( firstNestedLevelBlock ).getByA11yLabel( + const innerBlockList = within( firstNestedLevelBlock ).getByLabelText( /List Block\. Row 1/ ); // Select nested List Item block - const listItemBlock = within( innerBlockList ).getByA11yLabel( + const listItemBlock = within( innerBlockList ).getByLabelText( /List item Block\. Row 1/ ); fireEvent.press( listItemBlock ); // Update indentation - const outdentButton = getByA11yLabel( 'Outdent' ); + const outdentButton = getByLabelText( 'Outdent' ); fireEvent.press( outdentButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -218,16 +218,16 @@ describe( 'List block', () => { `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Update to ordered list - const orderedButton = getByA11yLabel( 'Ordered' ); + const orderedButton = getByLabelText( 'Ordered' ); fireEvent.press( orderedButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -246,27 +246,27 @@ describe( 'List block', () => { `; - const { getByA11yLabel, getByTestId } = await initializeEditor( { + const { getByLabelText, getByTestId } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Update to ordered list - const orderedButton = getByA11yLabel( 'Ordered' ); + const orderedButton = getByLabelText( 'Ordered' ); fireEvent.press( orderedButton ); // Set order to reverse // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + fireEvent.press( getByLabelText( 'Open Settings' ) ); await waitFor( () => getByTestId( 'block-settings-modal' ).props.isVisible ); - const reverseButton = getByA11yLabel( /Reverse list numbering\. Off/ ); + const reverseButton = getByLabelText( /Reverse list numbering\. Off/ ); fireEvent.press( reverseButton ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -285,27 +285,27 @@ describe( 'List block', () => { `; - const { getByA11yLabel, getByTestId } = await initializeEditor( { + const { getByLabelText, getByTestId } = await initializeEditor( { initialHtml, } ); // Select List block - const listBlock = getByA11yLabel( /List Block\. Row 1/ ); + const listBlock = getByLabelText( /List Block\. Row 1/ ); fireEvent.press( listBlock ); // Update to ordered list - const orderedButton = getByA11yLabel( 'Ordered' ); + const orderedButton = getByLabelText( 'Ordered' ); fireEvent.press( orderedButton ); // Set order to reverse // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + fireEvent.press( getByLabelText( 'Open Settings' ) ); await waitFor( () => getByTestId( 'block-settings-modal' ).props.isVisible ); - const startValueButton = getByA11yLabel( /Start value\. Empty/ ); + const startValueButton = getByLabelText( /Start value\. Empty/ ); fireEvent.press( startValueButton ); const startValueInput = within( startValueButton ).getByDisplayValue( '' ); @@ -328,11 +328,11 @@ describe( 'List block', () => { } ); // Select List block - const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ ); + const listBlock = screen.getByLabelText( /List Block\. Row 2/ ); fireEvent.press( listBlock ); // Select List Item block - const listItemBlock = within( listBlock ).getByA11yLabel( + const listItemBlock = within( listBlock ).getByLabelText( /List item Block\. Row 1/ ); fireEvent.press( listItemBlock ); @@ -340,7 +340,7 @@ describe( 'List block', () => { // With cursor positioned at the beginning of the first List Item, press // backward delete const listItemField = - within( listItemBlock ).getByA11yLabel( /Text input. .*Two.*/ ); + within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ ); changeAndSelectTextOfRichText( listItemField, 'Two' ); fireEvent( listItemField, 'onKeyDown', { nativeEvent: {}, @@ -376,11 +376,11 @@ describe( 'List block', () => { } ); // Select List block - const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ ); + const listBlock = screen.getByLabelText( /List Block\. Row 2/ ); fireEvent.press( listBlock ); // Select List Item block - const listItemBlock = within( listBlock ).getByA11yLabel( + const listItemBlock = within( listBlock ).getByLabelText( /List item Block\. Row 1/ ); fireEvent.press( listItemBlock ); @@ -388,7 +388,7 @@ describe( 'List block', () => { // With cursor positioned at the beginning of the first List Item, press // backward delete const listItemField = - within( listItemBlock ).getByA11yLabel( /Text input. .*One.*/ ); + within( listItemBlock ).getByLabelText( /Text input. .*One.*/ ); changeAndSelectTextOfRichText( listItemField, 'One' ); fireEvent( listItemField, 'onKeyDown', { nativeEvent: {}, diff --git a/packages/block-library/src/missing/test/edit-integration.native.js b/packages/block-library/src/missing/test/edit-integration.native.js index 0e2bb5a6dfbe4f..15f197734fdbde 100644 --- a/packages/block-library/src/missing/test/edit-integration.native.js +++ b/packages/block-library/src/missing/test/edit-integration.native.js @@ -40,12 +40,12 @@ describe( 'Unsupported block', () => { const initialHtml = `
    12
    34
    `; - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml, } ); const missingBlock = await waitFor( () => - getByA11yLabel( /Unsupported Block\. Row 1/ ) + getByLabelText( /Unsupported Block\. Row 1/ ) ); const translatedTableTitle = @@ -58,18 +58,18 @@ describe( 'Unsupported block', () => { const initialHtml = `
    12
    34
    `; - const { getByA11yLabel, getByText } = await initializeEditor( { + const { getByLabelText, getByText } = await initializeEditor( { initialHtml, } ); const missingBlock = await waitFor( () => - getByA11yLabel( /Unsupported Block\. Row 1/ ) + getByLabelText( /Unsupported Block\. Row 1/ ) ); fireEvent.press( missingBlock ); const helpButton = await waitFor( () => - getByA11yLabel( 'Help button' ) + getByLabelText( 'Help button' ) ); fireEvent.press( helpButton ); diff --git a/packages/block-library/src/shortcode/test/edit.native.js b/packages/block-library/src/shortcode/test/edit.native.js index 53f7cd9d8c0441..46c7dbddef2c97 100644 --- a/packages/block-library/src/shortcode/test/edit.native.js +++ b/packages/block-library/src/shortcode/test/edit.native.js @@ -28,10 +28,10 @@ afterAll( () => { describe( 'Shortcode block', () => { it( 'inserts block', async () => { - const { getByA11yLabel, getByTestId, getByText } = + const { getByLabelText, getByTestId, getByText } = await initializeEditor(); - fireEvent.press( getByA11yLabel( 'Add block' ) ); + fireEvent.press( getByLabelText( 'Add block' ) ); const blockList = getByTestId( 'InserterUI-Blocks' ); // onScroll event used to force the FlatList to render all items @@ -45,17 +45,17 @@ describe( 'Shortcode block', () => { fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) ); - expect( getByA11yLabel( /Shortcode Block\. Row 1/ ) ).toBeVisible(); + expect( getByLabelText( /Shortcode Block\. Row 1/ ) ).toBeVisible(); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'edits content', async () => { - const { getByA11yLabel, getByPlaceholderText } = await initializeEditor( + const { getByLabelText, getByPlaceholderText } = await initializeEditor( { initialHtml: '', } ); - const shortcodeBlock = getByA11yLabel( /Shortcode Block\. Row 1/ ); + const shortcodeBlock = getByLabelText( /Shortcode Block\. Row 1/ ); fireEvent.press( shortcodeBlock ); const textField = getByPlaceholderText( 'Add a shortcode…' ); diff --git a/packages/block-library/src/social-link/test/index.native.js b/packages/block-library/src/social-link/test/index.native.js index 0bb67778bc7945..603776e939998f 100644 --- a/packages/block-library/src/social-link/test/index.native.js +++ b/packages/block-library/src/social-link/test/index.native.js @@ -33,7 +33,7 @@ describe( '', () => { // Act fireEvent.press( - await waitFor( () => subject.getByA11yLabel( 'Add block' ) ) + await waitFor( () => subject.getByLabelText( 'Add block' ) ) ); fireEvent.changeText( await waitFor( () => @@ -43,13 +43,13 @@ describe( '', () => { ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Social Icons block' ) + subject.getByLabelText( 'Social Icons block' ) ) ); fireEvent( await waitFor( () => within( - subject.getByA11yLabel( /Social Icons Block. Row 1/ ) + subject.getByLabelText( /Social Icons Block. Row 1/ ) ).getByTestId( 'block-list-wrapper' ) ), 'layout', @@ -59,22 +59,22 @@ describe( '', () => { // Assert expect( await waitFor( () => - subject.getByA11yLabel( /WordPress social icon/ ) + subject.getByLabelText( /WordPress social icon/ ) ) ).toBeDefined(); expect( await waitFor( () => - subject.getByA11yLabel( /Facebook social icon/ ) + subject.getByLabelText( /Facebook social icon/ ) ) ).toBeDefined(); expect( await waitFor( () => - subject.getByA11yLabel( /Twitter social icon/ ) + subject.getByLabelText( /Twitter social icon/ ) ) ).toBeDefined(); expect( await waitFor( () => - subject.getByA11yLabel( /Instagram social icon/ ) + subject.getByLabelText( /Instagram social icon/ ) ) ).toBeDefined(); } ); @@ -90,7 +90,7 @@ describe( '', () => { // Act fireEvent.press( - await waitFor( () => subject.getByA11yLabel( 'Add block' ) ) + await waitFor( () => subject.getByLabelText( 'Add block' ) ) ); fireEvent.changeText( await waitFor( () => @@ -100,13 +100,13 @@ describe( '', () => { ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Social Icons block' ) + subject.getByLabelText( 'Social Icons block' ) ) ); fireEvent( await waitFor( () => within( - subject.getByA11yLabel( /Social Icons Block. Row 1/ ) + subject.getByLabelText( /Social Icons Block. Row 1/ ) ).getByTestId( 'block-list-wrapper' ) ), 'layout', diff --git a/packages/block-library/src/social-links/test/edit.native.js b/packages/block-library/src/social-links/test/edit.native.js index 61ca35ca7c6076..ade94321278e95 100644 --- a/packages/block-library/src/social-links/test/edit.native.js +++ b/packages/block-library/src/social-links/test/edit.native.js @@ -88,7 +88,7 @@ describe( 'Social links block', () => { // Check there's only one active social link const socialLinks = - within( socialLinksBlock ).getAllByA11yLabel( / social icon/ ); + within( socialLinksBlock ).getAllByLabelText( / social icon/ ); expect( socialLinks.length ).toBe( 1 ); // Check the WordPress link is shown when unselected @@ -153,7 +153,7 @@ describe( 'Social links block', () => { it( 'shows the ghost placeholder when no icon is active', async () => { const screen = await initializeEditor(); - const { getByA11yLabel } = screen; + const { getByLabelText } = screen; // Add block await addBlock( screen, 'Social Icons' ); @@ -178,11 +178,11 @@ describe( 'Social links block', () => { fireEvent.press( firstLinkBlock ); // Open block actions menu - const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + const blockActionsButton = getByLabelText( /Open Block Actions Menu/ ); fireEvent.press( blockActionsButton ); // Delete the social link - const deleteButton = getByA11yLabel( /Remove block/ ); + const deleteButton = getByLabelText( /Remove block/ ); fireEvent.press( deleteButton ); // Add Paragraph block diff --git a/packages/block-library/src/spacer/test/index.native.js b/packages/block-library/src/spacer/test/index.native.js index b480fd0f8c2009..7b6ed2ba3f371c 100644 --- a/packages/block-library/src/spacer/test/index.native.js +++ b/packages/block-library/src/spacer/test/index.native.js @@ -28,10 +28,10 @@ afterAll( () => { describe( 'Spacer block', () => { it( 'inserts block', async () => { - const { getByA11yLabel, getByTestId, getByText } = + const { getByLabelText, getByTestId, getByText } = await initializeEditor(); - fireEvent.press( getByA11yLabel( 'Add block' ) ); + fireEvent.press( getByLabelText( 'Add block' ) ); const blockList = getByTestId( 'InserterUI-Blocks' ); // onScroll event used to force the FlatList to render all items @@ -45,7 +45,7 @@ describe( 'Spacer block', () => { fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) ); - expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible(); + expect( getByLabelText( /Spacer Block\. Row 1/ ) ).toBeVisible(); expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -53,17 +53,17 @@ describe( 'Spacer block', () => { const initialHtml = ` `; - const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } = + const { getByLabelText, getByDisplayValue, getByTestId, getByText } = await initializeEditor( { initialHtml, } ); // Select Spacer block - const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ ); + const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ ); fireEvent.press( spacerBlock ); // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + fireEvent.press( getByLabelText( 'Open Settings' ) ); await waitFor( () => getByTestId( 'block-settings-modal' ).props.isVisible ); @@ -80,17 +80,17 @@ describe( 'Spacer block', () => { const initialHtml = ` `; - const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } = + const { getByLabelText, getByDisplayValue, getByTestId, getByText } = await initializeEditor( { initialHtml, } ); // Select Spacer block - const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ ); + const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ ); fireEvent.press( spacerBlock ); // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + fireEvent.press( getByLabelText( 'Open Settings' ) ); await waitFor( () => getByTestId( 'block-settings-modal' ).props.isVisible ); @@ -111,23 +111,23 @@ describe( 'Spacer block', () => { const initialHtml = ` `; - const { getByA11yLabel, getByTestId } = await initializeEditor( { + const { getByLabelText, getByTestId } = await initializeEditor( { initialHtml, } ); // Select Spacer block - const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ ); + const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ ); fireEvent.press( spacerBlock ); // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + fireEvent.press( getByLabelText( 'Open Settings' ) ); await waitFor( () => getByTestId( 'block-settings-modal' ).props.isVisible ); // Increment height fireEvent( - getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ), + getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ), 'accessibilityAction', { nativeEvent: { actionName: 'increment' }, @@ -141,23 +141,23 @@ describe( 'Spacer block', () => { const initialHtml = ` `; - const { getByA11yLabel, getByTestId } = await initializeEditor( { + const { getByLabelText, getByTestId } = await initializeEditor( { initialHtml, } ); // Select Spacer block - const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ ); + const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ ); fireEvent.press( spacerBlock ); // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + fireEvent.press( getByLabelText( 'Open Settings' ) ); await waitFor( () => getByTestId( 'block-settings-modal' ).props.isVisible ); // Increment height fireEvent( - getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ), + getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ), 'accessibilityAction', { nativeEvent: { actionName: 'decrement' }, diff --git a/packages/components/src/mobile/bottom-sheet/test/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/test/range-cell.native.js index 2138ef1abbd52b..4405af6c248717 100644 --- a/packages/components/src/mobile/bottom-sheet/test/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/test/range-cell.native.js @@ -33,7 +33,7 @@ afterAll( () => { it( 'allows modifying units via a11y actions', async () => { const mockOpenUnitPicker = jest.fn(); - const { getByA11yLabel } = render( + const { getByLabelText } = render( { /> ); - const opacityControl = getByA11yLabel( /Opacity/ ); + const opacityControl = getByLabelText( /Opacity/ ); fireEvent( opacityControl, 'accessibilityAction', { nativeEvent: { actionName: 'activate' }, } ); @@ -54,7 +54,7 @@ it( 'allows modifying units via a11y actions', async () => { describe( 'when range lacks an adjustable unit', () => { it( 'disallows modifying units via a11y actions', async () => { - const { getByA11yLabel } = render( + const { getByLabelText } = render( { /> ); - const opacityControl = getByA11yLabel( /Opacity/ ); + const opacityControl = getByLabelText( /Opacity/ ); const { onAccessibilityAction } = opacityControl.props; expect( () => onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } ) diff --git a/packages/components/src/mobile/html-text-input/test/index.native.js b/packages/components/src/mobile/html-text-input/test/index.native.js index aded72de0fc788..5ddffe3d81d0d5 100644 --- a/packages/components/src/mobile/html-text-input/test/index.native.js +++ b/packages/components/src/mobile/html-text-input/test/index.native.js @@ -10,12 +10,12 @@ import { HTMLTextInput } from '..'; // Finds the Content TextInput in our HTMLInputView. const findContentTextInput = ( screen ) => { - return screen.getByA11yLabel( 'html-view-content' ); + return screen.getByLabelText( 'html-view-content' ); }; // Finds the Title TextInput in our HTMLInputView. const findTitleTextInput = ( screen ) => { - return screen.getByA11yLabel( 'html-view-title' ); + return screen.getByLabelText( 'html-view-title' ); }; const getStylesFromColorScheme = () => { diff --git a/packages/components/src/mobile/link-settings/test/edit.native.js b/packages/components/src/mobile/link-settings/test/edit.native.js index 5a344078c6a1e2..5ce1ae6a90fb3b 100644 --- a/packages/components/src/mobile/link-settings/test/edit.native.js +++ b/packages/components/src/mobile/link-settings/test/edit.native.js @@ -77,19 +77,19 @@ describe.each( [ // Act. const block = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( type === 'core/image' ? /Image Block/ : /Button Block/ ) ); fireEvent.press( block ); fireEvent.press( block ); fireEvent.press( - await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) ) + await waitFor( () => subject.getByLabelText( 'Open Settings' ) ) ); // Assert. const linkToField = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'None' : 'Search or type URL' }` @@ -114,7 +114,7 @@ describe.each( [ // Act. const block = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( type === 'core/image' ? /Image Block/ : /Button Block/ ) ); @@ -122,12 +122,12 @@ describe.each( [ fireEvent.press( block ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Open Settings' ) + subject.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'None' @@ -139,15 +139,15 @@ describe.each( [ if ( type === 'core/image' ) { fireEvent.press( await waitFor( () => - subject.getByA11yLabel( /Custom URL/ ) + subject.getByLabelText( /Custom URL/ ) ) ); } - await waitFor( () => subject.getByA11yLabel( 'Apply' ) ); + await waitFor( () => subject.getByLabelText( 'Apply' ) ); // Assert. expect( - subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ ) + subject.queryByLabelText( /Copy URL from the clipboard[,]/ ) ).toBeNull(); } ); } ); @@ -167,7 +167,7 @@ describe.each( [ // Act. const block = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( type === 'core/image' ? /Image Block/ : /Button Block/ ) ); @@ -175,12 +175,12 @@ describe.each( [ fireEvent.press( block ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Open Settings' ) + subject.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'None' @@ -192,20 +192,20 @@ describe.each( [ if ( type === 'core/image' ) { fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Custom URL. Empty' ) + subject.getByLabelText( 'Custom URL. Empty' ) ) ); } fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Copy URL from the clipboard, ${ url }` ) ) ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'Custom URL' : url }` @@ -215,15 +215,15 @@ describe.each( [ if ( type === 'core/image' ) { fireEvent.press( await waitFor( () => - subject.getByA11yLabel( `Custom URL, ${ url }` ) + subject.getByLabelText( `Custom URL, ${ url }` ) ) ); } - await waitFor( () => subject.getByA11yLabel( 'Apply' ) ); + await waitFor( () => subject.getByLabelText( 'Apply' ) ); // Assert. expect( - subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ ) + subject.queryByLabelText( /Copy URL from the clipboard[,]/ ) ).toBeNull(); } ); } ); @@ -246,7 +246,7 @@ describe.each( [ // Act. const block = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( type === 'core/image' ? /Image Block/ : /Button Block/ @@ -256,12 +256,12 @@ describe.each( [ fireEvent.press( block ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Open Settings' ) + subject.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'None' @@ -273,12 +273,12 @@ describe.each( [ if ( type === 'core/image' ) { fireEvent.press( await waitFor( () => - subject.getByA11yLabel( /Custom URL/ ) + subject.getByLabelText( /Custom URL/ ) ) ); } await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Copy URL from the clipboard, ${ url }` ) ); @@ -313,7 +313,7 @@ describe.each( [ // Act. const block = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( type === 'core/image' ? /Image Block/ : /Button Block/ @@ -323,12 +323,12 @@ describe.each( [ fireEvent.press( block ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( 'Open Settings' ) + subject.getByLabelText( 'Open Settings' ) ) ); fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'None' @@ -340,13 +340,13 @@ describe.each( [ if ( type === 'core/image' ) { fireEvent.press( await waitFor( () => - subject.getByA11yLabel( /Custom URL/ ) + subject.getByLabelText( /Custom URL/ ) ) ); } fireEvent.press( await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Copy URL from the clipboard, ${ url }` ) ) @@ -354,7 +354,7 @@ describe.each( [ // Assert. const linkToField = await waitFor( () => - subject.getByA11yLabel( + subject.getByLabelText( `Link to, ${ type === 'core/image' ? 'Custom URL' : url }` diff --git a/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js b/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js index c809f9f2bfacb3..ddf2dd5d8f622b 100644 --- a/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js +++ b/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js @@ -41,11 +41,11 @@ describe( 'Android', () => { const screen = render( subject ); fireEvent.press( screen.getByText( 'Link to' ) ); fireEvent.press( - screen.getByA11yLabel( 'Link to, Search or type URL' ) + screen.getByLabelText( 'Link to, Search or type URL' ) ); // Await back button to allow async state updates to complete const backButton = await waitFor( () => - screen.getByA11yLabel( 'Go back' ) + screen.getByLabelText( 'Go back' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); @@ -58,7 +58,7 @@ describe( 'Android', () => { fireEvent.press( screen.getByText( 'Link to' ) ); // Await back button to allow async state updates to complete const backButton = await waitFor( () => - screen.getByA11yLabel( 'Apply' ) + screen.getByLabelText( 'Apply' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); @@ -82,7 +82,7 @@ describe( 'iOS', () => { fireEvent.press( screen.getByText( 'Link to' ) ); // Await back button to allow async state updates to complete const backButton = await waitFor( () => - screen.getByA11yLabel( 'Go back' ) + screen.getByLabelText( 'Go back' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); @@ -95,7 +95,7 @@ describe( 'iOS', () => { fireEvent.press( screen.getByText( 'Link to' ) ); // Await back button to allow async state updates to complete const backButton = await waitFor( () => - screen.getByA11yLabel( 'Apply' ) + screen.getByLabelText( 'Apply' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); diff --git a/packages/edit-post/src/components/visual-editor/test/index.native.js b/packages/edit-post/src/components/visual-editor/test/index.native.js index 01839689852faa..5c527d22bc5b38 100644 --- a/packages/edit-post/src/components/visual-editor/test/index.native.js +++ b/packages/edit-post/src/components/visual-editor/test/index.native.js @@ -38,24 +38,24 @@ describe( 'when title is focused', () => { } ); // Focus first block - fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) ); + fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) ); // Focus title fireEvent( - screen.getAllByA11yLabel( 'Post title. test' )[ 0 ], + screen.getAllByLabelText( 'Post title. test' )[ 0 ], 'select' ); // Add new Heading block - fireEvent.press( screen.getByA11yLabel( 'Add block' ) ); + fireEvent.press( screen.getByLabelText( 'Add block' ) ); fireEvent.press( screen.getByText( 'Heading' ) ); - expect( screen.getByA11yLabel( /Heading Block. Row 1/ ) ).toBeDefined(); + expect( screen.getByLabelText( /Heading Block. Row 1/ ) ).toBeDefined(); expect( - screen.getByA11yLabel( /Paragraph Block. Row 2/ ) + screen.getByLabelText( /Paragraph Block. Row 2/ ) ).toBeDefined(); expect( - screen.getByA11yLabel( /Paragraph Block. Row 3/ ) + screen.getByLabelText( /Paragraph Block. Row 3/ ) ).toBeDefined(); } ); } ); @@ -67,27 +67,27 @@ describe( 'when title is no longer focused', () => { } ); // Focus first block - fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) ); + fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) ); // Focus title fireEvent( - screen.getAllByA11yLabel( 'Post title. test' )[ 0 ], + screen.getAllByLabelText( 'Post title. test' )[ 0 ], 'select' ); // Focus last block - fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 2/ ) ); + fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 2/ ) ); // Add new Heading block - fireEvent.press( screen.getByA11yLabel( 'Add block' ) ); + fireEvent.press( screen.getByLabelText( 'Add block' ) ); fireEvent.press( screen.getByText( 'Heading' ) ); expect( - screen.getByA11yLabel( /Paragraph Block. Row 1/ ) + screen.getByLabelText( /Paragraph Block. Row 1/ ) ).toBeDefined(); expect( - screen.getByA11yLabel( /Paragraph Block. Row 2/ ) + screen.getByLabelText( /Paragraph Block. Row 2/ ) ).toBeDefined(); - expect( screen.getByA11yLabel( /Heading Block. Row 3/ ) ).toBeDefined(); + expect( screen.getByLabelText( /Heading Block. Row 3/ ) ).toBeDefined(); } ); } ); diff --git a/packages/editor/src/components/editor-help/test/index.native.js b/packages/editor/src/components/editor-help/test/index.native.js index 332b6d65fa9565..294eb12689aff6 100644 --- a/packages/editor/src/components/editor-help/test/index.native.js +++ b/packages/editor/src/components/editor-help/test/index.native.js @@ -32,7 +32,7 @@ it( 'navigates back from help topic detail screen', async () => { const helpTopic = await screen.findByText( 'Customize blocks' ); fireEvent.press( helpTopic ); - const backButton = screen.getAllByA11yLabel( 'Go back' ); + const backButton = screen.getAllByLabelText( 'Go back' ); fireEvent.press( backButton[ backButton.length - 1 ] ); // Currently logs `act` warning due to https://github.com/callstack/react-native-testing-library/issues/379 @@ -46,7 +46,7 @@ it( 'navigates back from help topic detail screen', async () => { it( 'dismisses when close button is pressed', async () => { const closeMock = jest.fn(); const screen = render( ); - const closeButton = await screen.findByA11yLabel( 'Go back' ); + const closeButton = await screen.findByLabelText( 'Go back' ); fireEvent.press( closeButton ); expect( closeMock ).toHaveBeenCalled(); diff --git a/packages/format-library/src/link/test/index.native.js b/packages/format-library/src/link/test/index.native.js index 77990b194bba89..d755e8f08cece6 100644 --- a/packages/format-library/src/link/test/index.native.js +++ b/packages/format-library/src/link/test/index.native.js @@ -48,13 +48,13 @@ describe( 'Android', () => { } } /> ); - fireEvent.press( screen.getByA11yLabel( 'Link' ) ); + fireEvent.press( screen.getByLabelText( 'Link' ) ); fireEvent.press( - screen.getByA11yLabel( 'Link to, Search or type URL' ) + screen.getByLabelText( 'Link to, Search or type URL' ) ); // Await back button to allow async state updates to complete const backButton = await waitFor( () => - screen.getByA11yLabel( 'Go back' ) + screen.getByLabelText( 'Go back' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); @@ -63,7 +63,7 @@ describe( 'Android', () => { } ); it( 'improves apply animation performance by dismissing keyboard beforehand', async () => { - const { getByA11yLabel } = render( + const { getByLabelText } = render( {} } @@ -74,10 +74,10 @@ describe( 'Android', () => { } } /> ); - fireEvent.press( getByA11yLabel( 'Link' ) ); - fireEvent.press( getByA11yLabel( 'Link to, Search or type URL' ) ); + fireEvent.press( getByLabelText( 'Link' ) ); + fireEvent.press( getByLabelText( 'Link to, Search or type URL' ) ); // Await back button to allow async state updates to complete - const backButton = await waitFor( () => getByA11yLabel( 'Apply' ) ); + const backButton = await waitFor( () => getByLabelText( 'Apply' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); @@ -107,13 +107,13 @@ describe( 'iOS', () => { } } /> ); - fireEvent.press( screen.getByA11yLabel( 'Link' ) ); + fireEvent.press( screen.getByLabelText( 'Link' ) ); fireEvent.press( - screen.getByA11yLabel( 'Link to, Search or type URL' ) + screen.getByLabelText( 'Link to, Search or type URL' ) ); // Await back button to allow async state updates to complete const backButton = await waitFor( () => - screen.getByA11yLabel( 'Go back' ) + screen.getByLabelText( 'Go back' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); @@ -122,7 +122,7 @@ describe( 'iOS', () => { } ); it( 'improves apply animation performance by dismissing keyboard beforehand', async () => { - const { getByA11yLabel } = render( + const { getByLabelText } = render( {} } @@ -133,10 +133,10 @@ describe( 'iOS', () => { } } /> ); - fireEvent.press( getByA11yLabel( 'Link' ) ); - fireEvent.press( getByA11yLabel( 'Link to, Search or type URL' ) ); + fireEvent.press( getByLabelText( 'Link' ) ); + fireEvent.press( getByLabelText( 'Link to, Search or type URL' ) ); // Await back button to allow async state updates to complete - const backButton = await waitFor( () => getByA11yLabel( 'Apply' ) ); + const backButton = await waitFor( () => getByLabelText( 'Apply' ) ); Keyboard.dismiss.mockClear(); fireEvent.press( backButton ); diff --git a/packages/format-library/src/text-color/test/index.native.js b/packages/format-library/src/text-color/test/index.native.js index 2ad92c404d7c80..254c1bae990ee4 100644 --- a/packages/format-library/src/text-color/test/index.native.js +++ b/packages/format-library/src/text-color/test/index.native.js @@ -32,48 +32,48 @@ afterAll( () => { describe( 'Text color', () => { it( 'shows the text color formatting button in the toolbar', async () => { - const { getByA11yLabel } = await initializeEditor(); + const { getByLabelText } = await initializeEditor(); // Wait for the editor placeholder const paragraphPlaceholder = await waitFor( () => - getByA11yLabel( 'Add paragraph block' ) + getByLabelText( 'Add paragraph block' ) ); expect( paragraphPlaceholder ).toBeDefined(); fireEvent.press( paragraphPlaceholder ); // Wait for the block to be created const paragraphBlock = await waitFor( () => - getByA11yLabel( /Paragraph Block\. Row 1/ ) + getByLabelText( /Paragraph Block\. Row 1/ ) ); expect( paragraphBlock ).toBeDefined(); // Look for the highlight text color button const textColorButton = await waitFor( () => - getByA11yLabel( 'Text color' ) + getByLabelText( 'Text color' ) ); expect( textColorButton ).toBeDefined(); } ); it( 'allows toggling the highlight color feature to type new text', async () => { - const { getByA11yLabel, getByTestId, getByA11yHint } = + const { getByLabelText, getByTestId, getByA11yHint } = await initializeEditor(); // Wait for the editor placeholder const paragraphPlaceholder = await waitFor( () => - getByA11yLabel( 'Add paragraph block' ) + getByLabelText( 'Add paragraph block' ) ); expect( paragraphPlaceholder ).toBeDefined(); fireEvent.press( paragraphPlaceholder ); // Wait for the block to be created const paragraphBlock = await waitFor( () => - getByA11yLabel( /Paragraph Block\. Row 1/ ) + getByLabelText( /Paragraph Block\. Row 1/ ) ); expect( paragraphBlock ).toBeDefined(); // Look for the highlight text color button const textColorButton = await waitFor( () => - getByA11yLabel( 'Text color' ) + getByLabelText( 'Text color' ) ); expect( textColorButton ).toBeDefined(); fireEvent.press( textColorButton ); @@ -94,7 +94,7 @@ describe( 'Text color', () => { it( 'allows toggling the highlight color feature to selected text', async () => { const { - getByA11yLabel, + getByLabelText, getByTestId, getByPlaceholderText, getByA11yHint, @@ -103,14 +103,14 @@ describe( 'Text color', () => { // Wait for the editor placeholder const paragraphPlaceholder = await waitFor( () => - getByA11yLabel( 'Add paragraph block' ) + getByLabelText( 'Add paragraph block' ) ); expect( paragraphPlaceholder ).toBeDefined(); fireEvent.press( paragraphPlaceholder ); // Wait for the block to be created const paragraphBlock = await waitFor( () => - getByA11yLabel( /Paragraph Block\. Row 1/ ) + getByLabelText( /Paragraph Block\. Row 1/ ) ); expect( paragraphBlock ).toBeDefined(); @@ -126,7 +126,7 @@ describe( 'Text color', () => { // Look for the highlight text color button const textColorButton = await waitFor( () => - getByA11yLabel( 'Text color' ) + getByLabelText( 'Text color' ) ); expect( textColorButton ).toBeDefined(); fireEvent.press( textColorButton ); @@ -146,13 +146,13 @@ describe( 'Text color', () => { } ); it( 'creates a paragraph block with the text color format', async () => { - const { getByA11yLabel } = await initializeEditor( { + const { getByLabelText } = await initializeEditor( { initialHtml: TEXT_WITH_COLOR, } ); // Wait for the block to be created const paragraphBlock = await waitFor( () => - getByA11yLabel( /Paragraph Block\. Row 1/ ) + getByLabelText( /Paragraph Block\. Row 1/ ) ); expect( paragraphBlock ).toBeDefined(); diff --git a/packages/rich-text/src/test/index.native.js b/packages/rich-text/src/test/index.native.js index dad84f207dc4dd..3f963fba32dc06 100644 --- a/packages/rich-text/src/test/index.native.js +++ b/packages/rich-text/src/test/index.native.js @@ -84,11 +84,11 @@ describe( '', () => { // Arrange. const expectedFontSize = 16; // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -96,14 +96,14 @@ describe( '', () => { // Arrange. const expectedFontSize = 32; // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -111,14 +111,14 @@ describe( '', () => { // Arrange. const expectedFontSize = 32; // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -128,11 +128,11 @@ describe( '', () => { const defaultFontSize = 16; mockGlobalSettings( { fontSize: 'min(2em, 3em)' } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( defaultFontSize ); } ); @@ -142,11 +142,11 @@ describe( '', () => { const expectedFontSize = 32; mockGlobalSettings( { fontSize: 'min(2em, 3em)' } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -157,12 +157,12 @@ describe( '', () => { // Arrange. mockGlobalSettings( { fontSize: unit } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. const actualFontSize = - getByA11yLabel( 'editor' ).props.fontSize; + getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expected ); } ); @@ -173,7 +173,7 @@ describe( '', () => { const expectedFontSize = 1; mockGlobalSettings( { fontSize: '0' } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ', () => { /> ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -192,7 +192,7 @@ describe( '', () => { const expectedFontSize = 1; mockGlobalSettings( { fontSize: '0' } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ', () => { /> ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -209,11 +209,11 @@ describe( '', () => { const expectedFontSize = 3; Dimensions.set( { window: { ...window, width: 300 } } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -222,11 +222,11 @@ describe( '', () => { const expectedFontSize = 3; Dimensions.set( { window: { ...window, height: 300 } } ); // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize; + const actualFontSize = getByLabelText( 'editor' ).props.fontSize; expect( actualFontSize ).toBe( expectedFontSize ); } ); @@ -268,11 +268,11 @@ describe( '', () => { const expectedLineHeight = 1; const style = { lineHeight: 0.2 }; // Act. - const { getByA11yLabel } = render( + const { getByLabelText } = render( ); // Assert. - const actualFontSize = getByA11yLabel( 'editor' ).props.lineHeight; + const actualFontSize = getByLabelText( 'editor' ).props.lineHeight; expect( actualFontSize ).toBe( expectedLineHeight ); } ); } ); diff --git a/test/native/integration-test-helpers/add-block.js b/test/native/integration-test-helpers/add-block.js index 35e70e16edf92a..5bc4c5a1ee15a5 100644 --- a/test/native/integration-test-helpers/add-block.js +++ b/test/native/integration-test-helpers/add-block.js @@ -15,9 +15,9 @@ import { waitFor } from './wait-for'; * @param {string} blockName Name of the block to be inserted as shown in the block picker. */ export const addBlock = async ( screen, blockName ) => { - const { getByA11yLabel, getByTestId, getByText } = screen; + const { getByLabelText, getByTestId, getByText } = screen; - fireEvent.press( getByA11yLabel( 'Add block' ) ); + fireEvent.press( getByLabelText( 'Add block' ) ); const blockList = getByTestId( 'InserterUI-Blocks' ); // onScroll event used to force the FlatList to render all items diff --git a/test/native/integration-test-helpers/get-block.js b/test/native/integration-test-helpers/get-block.js index bf9c0df2bca085..5f618ddbefe8eb 100644 --- a/test/native/integration-test-helpers/get-block.js +++ b/test/native/integration-test-helpers/get-block.js @@ -8,8 +8,8 @@ * @return {import('react-test-renderer').ReactTestInstance} Block instance. */ export const getBlock = ( screen, blockName, { rowIndex = 1 } = {} ) => { - const { getByA11yLabel } = screen; - return getByA11yLabel( + const { getByLabelText } = screen; + return getByLabelText( new RegExp( `${ blockName } Block\\. Row ${ rowIndex }` ) ); }; diff --git a/test/native/integration-test-helpers/get-inner-block.js b/test/native/integration-test-helpers/get-inner-block.js index 1352f9bc8e9f42..53536c7d2f7eb8 100644 --- a/test/native/integration-test-helpers/get-inner-block.js +++ b/test/native/integration-test-helpers/get-inner-block.js @@ -17,7 +17,7 @@ export const getInnerBlock = ( blockName, { rowIndex = 1 } = {} ) => { - return within( parentBlock ).getByA11yLabel( + return within( parentBlock ).getByLabelText( new RegExp( `${ blockName } Block\\. Row ${ rowIndex }` ) ); }; diff --git a/test/native/integration-test-helpers/open-block-settings.js b/test/native/integration-test-helpers/open-block-settings.js index 1ed5e9757a433a..044cd8e9e740af 100644 --- a/test/native/integration-test-helpers/open-block-settings.js +++ b/test/native/integration-test-helpers/open-block-settings.js @@ -14,7 +14,7 @@ import { waitForModalVisible } from './wait-for-modal-visible'; * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen. */ export const openBlockSettings = async ( screen ) => { - const { getByA11yLabel, getByTestId } = screen; - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + const { getByLabelText, getByTestId } = screen; + fireEvent.press( getByLabelText( 'Open Settings' ) ); return waitForModalVisible( getByTestId( 'block-settings-modal' ) ); };