migrate test: can be edited with collapsed selection

WordPress · Aug 8, 2023 · e8066d4 · e8066d4
1 parent 60c140d
commit e8066d4
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 67 deletions.
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
@@ -6,12 +6,6 @@ exports[`Links allows use of escape key to dismiss the url popover 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Links can be edited with collapsed selection 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="https://wordpress.org/gutenberg/handbook">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
 exports[`Links can be modified using the keyboard once a link has been set 1`] = `
 "<!-- wp:paragraph -->
 <p>This is <a href="https://wordpress.org/gutenberg">Gutenberg</a>.</p>

diff --git 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
@@ -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 <a href="/handbook">Gutenberg</a>',
+				},
+			},
+		] );
+	} );
+
 	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' );
+	}
 }