From 2593614d57628f54c5926d8c26e1e91cd1b99166 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 26 Apr 2024 15:55:47 +0200 Subject: [PATCH] Update test by using ByRole queries. --- .../src/components/link-control/test/index.js | 84 ++++++++++++++----- 1 file changed, 63 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 4fb33ed5a1781..0d43670e58ace 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -365,7 +365,9 @@ describe( 'Basic rendering', () => { /> ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); const isPreviewError = linkPreview.classList.contains( 'is-error' ); expect( isPreviewError ).toBe( true ); @@ -816,7 +818,9 @@ describe( 'Manual link entry', () => { render( ); - let linkPreview = screen.getByLabelText( 'Manage link' ); + let linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); expect( linkPreview ).toBeInTheDocument(); @@ -850,7 +854,9 @@ describe( 'Manual link entry', () => { // Cancel the editing process. await user.click( cancelButton ); - linkPreview = screen.getByLabelText( 'Manage link' ); + linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); expect( linkPreview ).toBeInTheDocument(); @@ -1058,7 +1064,9 @@ describe( 'Default search suggestions', () => { // Click the "Edit/Change" button and check initial suggestions are not // shown. - const currentLinkUI = screen.getByLabelText( 'Manage link' ); + const currentLinkUI = screen.getByRole( 'group', { + name: 'Manage link', + } ); const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', { name: 'Edit link', } ); @@ -1206,7 +1214,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { // Check for loading indicator. const loadingIndicator = screen.getByText( 'Creating…' ); - const currentLinkLabel = screen.queryByLabelText( 'Manage link' ); + const currentLinkLabel = screen.queryByRole( 'group', { + name: 'Manage link', + } ); expect( currentLinkLabel ).not.toBeInTheDocument(); expect( loadingIndicator ).toBeVisible(); @@ -1217,7 +1227,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { // Resolve the `createSuggestion` promise. resolver(); - const currentLink = await screen.findByLabelText( 'Manage link' ); + const currentLink = await screen.findByRole( 'group', { + name: 'Manage link', + } ); expect( currentLink ).toHaveTextContent( entityNameText ); expect( currentLink ).toHaveTextContent( '/?p=123' ); @@ -1263,7 +1275,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { await user.click( createButton ); - const currentLink = screen.getByLabelText( 'Manage link' ); + const currentLink = screen.getByRole( 'group', { + name: 'Manage link', + } ); expect( currentLink ).toHaveTextContent( 'Some new page to create' ); expect( currentLink ).toHaveTextContent( '/?p=123' ); @@ -1320,7 +1334,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { triggerEnter( searchInput ); expect( - await screen.findByLabelText( 'Manage link' ) + await screen.findByRole( 'group', { + name: 'Manage link', + } ) ).toHaveTextContent( entityNameText ); } ); @@ -1493,7 +1509,9 @@ describe( 'Selecting links', () => { render( ); - const currentLink = screen.getByLabelText( 'Manage link' ); + const currentLink = screen.getByRole( 'group', { + name: 'Manage link', + } ); const currentLinkAnchor = screen.getByRole( 'link', { name: `${ selectedLink.title } (opens in a new tab)`, } ); @@ -1523,7 +1541,9 @@ describe( 'Selecting links', () => { render( ); // Required in order to select the button below. - let currentLinkUI = screen.getByLabelText( 'Manage link' ); + let currentLinkUI = screen.getByRole( 'group', { + name: 'Manage link', + } ); const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', { name: 'Edit link', } ); @@ -1532,7 +1552,9 @@ describe( 'Selecting links', () => { await user.click( currentLinkBtn ); const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); - currentLinkUI = screen.queryByLabelText( 'Manage link' ); + currentLinkUI = screen.queryByRole( 'group', { + name: 'Manage link', + } ); // We should be back to showing the search input. expect( searchInput ).toBeVisible(); @@ -1695,7 +1717,9 @@ describe( 'Selecting links', () => { triggerEnter( searchInput ); // Check that the suggestion selected via is now shown as selected. - const currentLink = screen.getByLabelText( 'Manage link' ); + const currentLink = screen.getByRole( 'group', { + name: 'Manage link', + } ); const currentLinkAnchor = screen.getByRole( 'link', { name: `${ selectedLink.title } (opens in a new tab)`, } ); @@ -2086,7 +2110,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' ); @@ -2107,7 +2133,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) ); } ); @@ -2124,7 +2152,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) ); @@ -2156,7 +2186,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) ); @@ -2180,7 +2212,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) ); @@ -2215,7 +2249,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) @@ -2240,7 +2276,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); expect( linkPreview ).toHaveClass( 'is-fetching' ); @@ -2259,7 +2297,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); expect( linkPreview ).toHaveClass( 'is-fetching' ); expect( linkPreview ).not.toHaveClass( 'is-rich' ); @@ -2272,7 +2312,9 @@ describe( 'Rich link previews', () => { render( ); - const linkPreview = screen.getByLabelText( 'Manage link' ); + const linkPreview = screen.getByRole( 'group', { + name: 'Manage link', + } ); expect( linkPreview ).toHaveClass( 'is-fetching' );