Link Control test migration: Should contain a label when it should open in a new tab (#51001)

* fixed utils

* update snapshots, commented waitForURLFieldAutoFocus

* remove appender function

* removed snapshots

* migrated test

* removed old test

* removed old snapshots

* use proper locator instead of a class

* use locators instead of tabbing around, remove appender util function

* simplified test

* removed snapshots and updated locator of save button

* add comment

Author: MaggieCabrera

packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap

@@ -47,15 +47,3 @@ exports[`Links can be removed 1`] = `
 <p>This is Gutenberg</p>
 <!-- /wp:paragraph -->"
 `;
-
-exports[`Links should contain a label when it should open in a new tab 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="http://w.org" target="_blank" rel="noreferrer noopener">WordPress</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links should contain a label when it should open in a new tab 2`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">WordPress</a></p>
-<!-- /wp:paragraph -->"
-`;

packages/e2e-tests/specs/editor/various/links.test.js

@@ -478,83 +478,6 @@ describe( 'Links', () => {
 		);
 	} );
 
-	it( 'should contain a label when it should open in a new tab', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is WordPress' );
-		// Select "WordPress".
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-		await page.keyboard.type( 'w.org' );
-
-		// Link settings open
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Navigate to and toggle the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Confirm that focus was not prematurely returned to the paragraph on
-		// a changing value of the setting.
-		await page.waitForSelector(
-			':focus.components-checkbox-control__input'
-		);
-
-		// Submit link. Expect that "Open in new tab" would have been applied
-		// immediately.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		// Wait for Gutenberg to finish the job.
-		await page.waitForXPath(
-			'//a[contains(@href,"w.org") and @target="_blank"]'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Regression Test: This verifies that the UI is updated according to
-		// the expected changed values, where previously the value could have
-		// fallen out of sync with how the UI is displayed (specifically for
-		// collapsed selections).
-		//
-		// See: https://github.com/WordPress/gutenberg/pull/15573
-
-		// Move caret back into the link.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Edit link.
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.type( 'wordpress.org' );
-
-		// Update the link.
-		await page.keyboard.press( 'Enter' );
-
-		// Navigate back to the popover.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Navigate back to inputs to verify appears as changed.
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-
-		// Navigate to the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		// Uncheck the checkbox.
-		await page.keyboard.press( 'Space' );
-
-		// Wait for Gutenberg to finish the job.
-		await page.waitForXPath(
-			'//a[contains(@href,"wordpress.org") and not(@target)]'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	describe( 'Editing link text', () => {
 		it( 'should not display text input when initially creating the link', async () => {
 			// Create a block with some text.

test/e2e/specs/editor/blocks/links.spec.js

@@ -66,4 +66,68 @@ test.describe( 'Links', () => {
 			},
 		] );
 	} );
+
+	test( 'can update the url of an existing link', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is WordPress' );
+		// Select "WordPress".
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+k' );
+		await page.keyboard.type( 'w.org' );
+
+		await page
+			//TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
+			.locator( '.block-editor-link-control' )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is <a href="http://w.org">WordPress</a>',
+				},
+			},
+		] );
+
+		// Move caret back into the link.
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+
+		// Edit link.
+		await pageUtils.pressKeys( 'primary+k' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await page.keyboard.type( 'wordpress.org' );
+
+		// Update the link.
+		await page.keyboard.press( 'Enter' );
+
+		// Navigate back to the popover.
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+
+		// Navigate back to inputs to verify appears as changed.
+		await pageUtils.pressKeys( 'primary+k' );
+		const urlInputValue = await page
+			.getByPlaceholder( 'Search or type url' )
+			.inputValue();
+		expect( urlInputValue ).toContain( 'wordpress.org' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is <a href="http://wordpress.org">WordPress</a>',
+				},
+			},
+		] );
+	} );
 } );