E2E Tests: Verify link popover Escape handling

WordPress · Jan 27, 2020 · b4d7eb4 · b4d7eb4
1 parent 24961ae
commit b4d7eb4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
@@ -8,6 +8,14 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+exports[`Buttons dismisses link editor when escape is pressed 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->

diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
@@ -20,6 +20,16 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'dismisses link editor when escape is pressed', async () => {
+		// Regression: https://github.com/WordPress/gutenberg/pull/19885
+		await insertBlock( 'Buttons' );
+		await pressKeyWithModifier( 'primary', 'k' );
+		await page.keyboard.press( 'Escape' );
+		await page.keyboard.type( 'WordPress' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'can jump to the link editor using the keyboard shortcut', async () => {
 		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );

diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -9,6 +9,7 @@ import {
 	insertBlock,
 	pressKeyWithModifier,
 	setUpResponseMocking,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 
 async function mockPagesResponse( pages ) {
@@ -132,6 +133,23 @@ describe( 'Navigation', () => {
 		// an issue where the block appender requires two clicks.
 		await page.click( '.wp-block-navigation .block-list-appender' );
 
+		// After adding a new block, search input should be shown immediately.
+		// Verify that Escape would close the popover.
+		// Regression: https://github.com/WordPress/gutenberg/pull/19885
+		const isInURLInput = await page.evaluate( () => (
+			!! document.activeElement.closest( '.block-editor-url-input' )
+		) );
+		expect( isInURLInput ).toBe( true );
+		await page.keyboard.press( 'Escape' );
+		const isInLinkRichText = await page.evaluate( () => (
+			document.activeElement.classList.contains( 'rich-text' ) &&
+			!! document.activeElement.closest( '.block-editor-block-list__block' )
+		) );
+		expect( isInLinkRichText ).toBe( true );
+
+		// Now, trigger the link dialog once more.
+		await clickBlockToolbarButton( 'Link' );
+
 		// For the second nav link block use an existing internal page.
 		// Mock the api response so that it's consistent.
 		await mockSearchResponse( [ { title: 'Contact Us', slug: 'contact-us' } ] );