Skip to content

Commit

Permalink
migrated test: allows use of escape key to dismiss the url popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaggieCabrera
MaggieCabrera committed Aug 11, 2023
1 parent 4eceb6f commit 461ab20
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 115 deletions.
6 changes: 0 additions & 6 deletions packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Links allows use of escape key to dismiss the url popover 1`] = `
"<!-- wp:paragraph -->
<p>This is Gutenberg.</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>
Expand Down
109 changes: 0 additions & 109 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,115 +53,6 @@ describe( 'Links', () => {
await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
};

const createPostWithTitle = async ( titleText ) => {
await createNewPost();
await canvas().type( '.editor-post-title__input', titleText );
await page.click( '.editor-post-publish-panel__toggle' );

// Disable reason: Wait for the animation to complete, since otherwise the
// click attempt may occur at the wrong point.
// eslint-disable-next-line no-restricted-syntax
await page.waitForTimeout( 100 );

// Publish the post.
await page.click( '.editor-post-publish-button' );

// Return the URL of the new post.
await page.waitForSelector(
'.post-publish-panel__postpublish-post-address input'
);
return page.evaluate(
() =>
document.querySelector(
'.post-publish-panel__postpublish-post-address input'
).value
);
};

it( 'allows use of escape key to dismiss the url popover', async () => {
const titleText = 'Test post escape';
await createPostWithTitle( titleText );

await createNewPost();
await clickBlockAppender();

// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
await page.keyboard.type( 'This is Gutenberg' );
await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );

// Press Cmd+K to insert a link.
await pressKeyWithModifier( 'primary', 'K' );

// Wait for the URL field to auto-focus.
await waitForURLFieldAutoFocus();
expect(
await page.$(
'.components-popover__content .block-editor-link-control'
)
).not.toBeNull();

// Trigger the autocomplete suggestion list and select the first suggestion.
await page.keyboard.type( titleText );
await page.waitForSelector( '.block-editor-link-control__search-item' );
await page.keyboard.press( 'ArrowDown' );

// Expect the escape key to dismiss the popover when the autocomplete suggestion list is open.
await page.keyboard.press( 'Escape' );
expect(
await page.$(
'.components-popover__content .block-editor-link-control'
)
).toBeNull();

// Confirm that selection is returned to where it was before launching
// the link editor, with "Gutenberg" as an uncollapsed selection.
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.type( '.' );
expect( await getEditedPostContent() ).toMatchSnapshot();

// Press Cmd+K to insert a link.
await pressKeyWithModifier( 'primary', 'K' );

// Wait for the URL field to auto-focus.
await waitForURLFieldAutoFocus();
expect(
await page.$(
'.components-popover__content .block-editor-link-control'
)
).not.toBeNull();

// Expect the escape key to dismiss the popover normally.
await page.keyboard.press( 'Escape' );
expect(
await page.$(
'.components-popover__content .block-editor-link-control'
)
).toBeNull();

// Press Cmd+K to insert a link.
await pressKeyWithModifier( 'primary', 'K' );

// Wait for the URL field to auto-focus.
await waitForURLFieldAutoFocus();
expect(
await page.$(
'.components-popover__content .block-editor-link-control'
)
).not.toBeNull();

// Tab to the "Open in new tab" toggle.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Expect the escape key to dismiss the popover normally.
await page.keyboard.press( 'Escape' );
expect(
await page.$(
'.components-popover__content .block-editor-link-control'
)
).toBeNull();
} );

it( 'can be modified using the keyboard once a link has been set', async () => {
const URL = 'https://wordpress.org/gutenberg';

Expand Down
97 changes: 97 additions & 0 deletions test/e2e/specs/editor/blocks/links.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,103 @@ test.describe( 'Links', () => {
] );
} );

test( `allows use of escape key to dismiss the url popover`, async ( {
admin,
page,
editor,
LinkUtils,
pageUtils,
} ) => {
const titleText = 'Test post escape';
await admin.createNewPost( { title: titleText } );
const postId = await editor.publishPost();
await admin.createNewPost();

// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
await editor.insertBlock( {
name: 'core/paragraph',
} );

await page.keyboard.type( 'This is Gutenberg' );
await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );

// Press Cmd+K to insert a link.
await pageUtils.pressKeys( 'primary+K' );

expect(
//TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
await page.locator(
'.components-popover__content .block-editor-link-control'
)
).not.toBeNull();

// Trigger the autocomplete suggestion list and select the first suggestion.
await page.keyboard.type( titleText );
expect( await page.getByRole('option', { name: titleText+' localhost:8889/?p='+postId+' post' }) ).not.toBeNull();
await pageUtils.pressKeys( 'ArrowDown' );

// Expect the escape key to dismiss the popover when the autocomplete suggestion list is open.
await pageUtils.pressKeys( 'Escape' );//page.keyboard.press( 'Escape' );
expect(
await page.locator(
'.components-popover__content .block-editor-link-control'
)
).not.toBeVisible();

// Confirm that selection is returned to where it was before launching
// the link editor, with "Gutenberg" as an uncollapsed selection.
await pageUtils.pressKeys( 'ArrowRight' );
await page.keyboard.type( '.' );

await expect.poll( editor.getBlocks ).toMatchObject( [
{
name: 'core/paragraph',
attributes: {
content:
'This is Gutenberg.',
},
},
] );

// Press Cmd+K to insert a link.
await pageUtils.pressKeys( 'primary+K' );

expect(
await page.locator(
'.components-popover__content .block-editor-link-control'
)
).not.toBeNull();

// Expect the escape key to dismiss the popover normally.
await pageUtils.pressKeys( 'Escape' );//page.keyboard.press( 'Escape' );
expect(
await page.locator(
'.components-popover__content .block-editor-link-control'
)
).not.toBeVisible();

// Press Cmd+K to insert a link.
await pageUtils.pressKeys( 'primary+K' );

expect(
await page.locator(
'.components-popover__content .block-editor-link-control'
)
).not.toBeNull();

// Tab to the "Open in new tab" toggle.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Expect the escape key to dismiss the popover normally.
await pageUtils.pressKeys( 'Escape' );//page.keyboard.press( 'Escape' );
expect(
await page.locator(
'.components-popover__content .block-editor-link-control'
)
).not.toBeVisible();
} );

test( `can be created by selecting text and using keyboard shortcuts`, async ( {
page,
editor,
Expand Down

0 comments on commit 461ab20

Please sign in to comment.