Add E2E tests for creating, editing and removing links

test/e2e/specs/__snapshots__/managing-links.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Managing links Creating a link by selecting text and clicking the Link UI 1`] = `
+"<!-- wp:paragraph -->
+<p>This is <a href=\\"https://wordpress.org/gutenberg\\">Gutenberg</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Managing links Creating a link by selecting text and using keyboard shortcuts 1`] = `
+"<!-- wp:paragraph -->
+<p>This is <a href=\\"https://wordpress.org/gutenberg\\">Gutenberg</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Managing links Creating a link without any text selected 1`] = `
+"<!-- wp:paragraph -->
+<p>This is Gutenberg: <a href=\\"https://wordpress.org/gutenberg\\">https://wordpress.org/gutenberg</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Managing links Editing a link 1`] = `
+"<!-- wp:paragraph -->
+<p>This is <a href=\\"https://wordpress.org/gutenberg/handbook\\">Gutenberg</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Managing links Removing a link 1`] = `
+"<!-- wp:paragraph -->
+<p>This is Gutenberg</p>
+<!-- /wp:paragraph -->"
+`;

test/e2e/specs/managing-links.test.js

@@ -2,15 +2,178 @@
  * Internal dependencies
  */
 import {
+	META_KEY,
 	clickBlockAppender,
+	getEditedPostContent,
 	newPost,
+	pressWithModifier,
 } from '../support/utils';
 
+/**
+ * The modifier keys needed to invoke a 'select the next word' keyboard shortcut.
+ *
+ * @type {string}
+ */
+const SELECT_WORD_MODIFIER_KEYS = process.platform === 'darwin' ? [ 'Shift', 'Alt' ] : [ 'Shift', 'Control' ];
+
 describe( 'Managing links', () => {
 	beforeEach( async () => {
 		await newPost();
 	} );
 
+	it( 'Creating a link by selecting text and clicking the Link UI', async () => {
+		// Create a block with some text
+		await clickBlockAppender();
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text
+		await pressWithModifier( SELECT_WORD_MODIFIER_KEYS, 'ArrowLeft' );
+
+		// Click on the Link button
+		await page.click( 'button[aria-label="Link"]' );
+
+		// A placeholder link should have been inserted
+		expect( await page.$( 'a[data-wp-placeholder]' ) ).not.toBeNull();
+
+		// Type a URL
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Click on the Apply button
+		await page.click( 'button[aria-label="Apply"]' );
+
+		// There should no longer be a placeholder link
+		expect( await page.$( 'a[data-wp-placeholder]' ) ).toBeNull();
+
+		// The link should have been inserted
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Creating a link by selecting text and using keyboard shortcuts', async () => {
+		// Create a block with some text
+		await clickBlockAppender();
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text
+		await pressWithModifier( SELECT_WORD_MODIFIER_KEYS, 'ArrowLeft' );
+
+		// Press Cmd+K to insert a link
+		await pressWithModifier( META_KEY, 'K' );
+
+		// A placeholder link should have been inserted
+		expect( await page.$( 'a[data-wp-placeholder]' ) ).not.toBeNull();
+
+		// Type a URL
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Press Enter to apply the link
+		await page.keyboard.press( 'Enter' );
+
+		// There should no longer be a placeholder link
+		expect( await page.$( 'a[data-wp-placeholder]' ) ).toBeNull();
+
+		// The link should have been inserted
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Creating a link without any text selected', async () => {
+		// Create a block with some text
+		await clickBlockAppender();
+		await page.keyboard.type( 'This is Gutenberg: ' );
+
+		// Press Cmd+K to insert a link
+		await pressWithModifier( META_KEY, 'K' );
+
+		// Trigger isTyping = false
+		await page.mouse.move( 200, 300, { steps: 10 } );
+		await page.mouse.move( 250, 350, { steps: 10 } );
+
+		// A placeholder link should not have been inserted
+		expect( await page.$( 'a[data-wp-placeholder]' ) ).toBeNull();
+
+		// Type a URL
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Press Enter to apply the link
+		await page.keyboard.press( 'Enter' );
+
+		// A link with the URL as its text should have been inserted
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Creating a link and then cancelling', async () => {
+		// Create a block with some text
+		await clickBlockAppender();
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text
+		await pressWithModifier( SELECT_WORD_MODIFIER_KEYS, 'ArrowLeft' );
+
+		// Click on the Link button
+		await page.click( 'button[aria-label="Link"]' );
+
+		// Type a URL
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Click somewhere else - it doesn't really matter where
+		await page.click( '.editor-post-title' );
+
+		// A placeholder link should not have been inserted
+		expect( await page.$( 'a[data-wp-placeholder]' ) ).toBeNull();
+	} );
+
+	const createAndReselectLink = async () => {
+		// Create a block with some text
+		await clickBlockAppender();
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text
+		await pressWithModifier( SELECT_WORD_MODIFIER_KEYS, 'ArrowLeft' );
+
+		// Click on the Link button
+		await page.click( 'button[aria-label="Link"]' );
+
+		// Wait for the URL field to auto-focus
+		await page.waitForFunction( () => !! document.activeElement.closest( '.editor-url-input' ) );
+
+		// Type a URL
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Click on the Apply button
+		await page.click( 'button[aria-label="Apply"]' );
+
+		// Click somewhere else - it doesn't really matter where
+		await page.click( '.editor-post-title' );
+
+		// Select the link again
+		await page.click( 'a[href="https://wordpress.org/gutenberg"]' );
+	};
+
+	it( 'Editing a link', async () => {
+		await createAndReselectLink();
+
+		// Click on the Edit button
+		await page.click( 'button[aria-label="Edit"]' );
+
+		// Change the URL
+		await page.keyboard.type( '/handbook' );
+
+		// Click on the Apply button
+		await page.click( 'button[aria-label="Apply"]' );
+
+		// The link should have been updated
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Removing a link', async () => {
+		await createAndReselectLink();
+
+		// Click on the Unlink button
+		await page.click( 'button[aria-label="Unlink"]' );
+
+		// The link should have been removed
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	const setFixedToolbar = async ( b ) => {
 		await page.click( '.edit-post-more-menu button' );
 		const button = ( await page.$x( "//button[contains(text(), 'Fix Toolbar to Top')]" ) )[ 0 ];