diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap index 999ab0a4bb03f..5735838842540 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap @@ -6,12 +6,6 @@ exports[`Links allows use of escape key to dismiss the url popover 1`] = ` " `; -exports[`Links can be edited with collapsed selection 1`] = ` -" -

This is Gutenberg

-" -`; - exports[`Links can be modified using the keyboard once a link has been set 1`] = ` "

This is Gutenberg.

diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 61b39e7be871d..8a4000b7b2953 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -53,22 +53,6 @@ describe( 'Links', () => { await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); }; - it( 'can be edited with collapsed selection', async () => { - await createAndReselectLink(); - // Make a collapsed selection inside the link - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'ArrowRight' ); - await showBlockToolbar(); - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - await editButton.click(); - await waitForURLFieldAutoFocus(); - await page.keyboard.type( '/handbook' ); - await page.keyboard.press( 'Enter' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - const createPostWithTitle = async ( titleText ) => { await createNewPost(); await canvas().type( '.editor-post-title__input', titleText ); diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js index ea55576786a27..f77b12300804b 100644 --- a/test/e2e/specs/editor/blocks/links.spec.js +++ b/test/e2e/specs/editor/blocks/links.spec.js @@ -13,8 +13,8 @@ test.describe( 'Links', () => { } ); test.use( { - LinkUtils: async ( { page }, use ) => { - await use( new LinkUtils( { page } ) ); + LinkUtils: async ( { editor, page, pageUtils }, use ) => { + await use( new LinkUtils( { editor, page, pageUtils } ) ); }, } ); @@ -221,27 +221,8 @@ test.describe( 'Links', () => { ] ); } ); - test( `can be edited`, async ( { page, editor, pageUtils } ) => { - // Create a block with some text. - await editor.insertBlock( { - name: 'core/paragraph', - } ); - await page.keyboard.type( 'This is Gutenberg' ); - - // Select some text. - await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); - - // Click on the Link button. - await page.getByRole( 'button', { name: 'Link' } ).click(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Click on the Submit button. - await pageUtils.pressKeys( 'Enter' ); - - // Reselect the link. - await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); + test( `can be edited`, async ( { page, editor, pageUtils, LinkUtils } ) => { + await LinkUtils.createAndReselectLink(); // Click on the Edit button. await page.getByRole( 'button', { name: 'Edit' } ).click(); @@ -264,27 +245,8 @@ test.describe( 'Links', () => { ] ); } ); - test( `can be removed`, async ( { page, editor, pageUtils } ) => { - // Create a block with some text. - await editor.insertBlock( { - name: 'core/paragraph', - } ); - await page.keyboard.type( 'This is Gutenberg' ); - - // Select some text. - await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); - - // Click on the Link button. - await page.getByRole( 'button', { name: 'Link' } ).click(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Click on the Submit button. - await pageUtils.pressKeys( 'Enter' ); - - // Reselect the link. - await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); + test( `can be removed`, async ( { page, editor, LinkUtils } ) => { + await LinkUtils.createAndReselectLink(); // Unlick via shortcut // we do this to avoid an layout edge case whereby @@ -372,6 +334,36 @@ test.describe( 'Links', () => { await expect( popover ).not.toBeVisible(); } ); + test( `can be edited with collapsed selection`, async ( { + page, + editor, + LinkUtils, + pageUtils, + } ) => { + await LinkUtils.createAndReselectLink(); + // Make a collapsed selection inside the link + await pageUtils.pressKeys( 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowRight' ); + await editor.showBlockToolbar(); + await page.getByRole( 'button', { name: 'Edit' } ).click(); + + // Change the URL. + await page.getByPlaceholder( 'Search or type url' ).fill( '' ); + await page.keyboard.type( '/handbook' ); + + // Submit the link. + await pageUtils.pressKeys( 'Enter' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { + content: 'This is Gutenberg', + }, + }, + ] ); + } ); + test( `can be created by selecting text and using keyboard shortcuts`, async ( { page, editor, @@ -512,8 +504,10 @@ test.describe( 'Links', () => { } ); class LinkUtils { - constructor( { page } ) { + constructor( { editor, page, pageUtils } ) { this.page = page; + this.editor = editor; + this.pageUtils = pageUtils; } async toggleFixedToolbar( isFixed ) { @@ -527,4 +521,27 @@ class LinkUtils { } }, isFixed ); } + + async createAndReselectLink() { + // Create a block with some text. + await this.editor.insertBlock( { + name: 'core/paragraph', + } ); + await this.page.keyboard.type( 'This is Gutenberg' ); + + // Select some text. + await this.pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); + + // Click on the Link button. + await this.page.getByRole( 'button', { name: 'Link' } ).click(); + + // Type a URL. + await this.page.keyboard.type( 'https://wordpress.org/gutenberg' ); + + // Click on the Submit button. + await this.pageUtils.pressKeys( 'Enter' ); + + // Reselect the link. + await this.pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); + } }