Skip to content

Commit

Permalink
Try the link control in the link format
Browse files Browse the repository at this point in the history 
Co-Authored-By: Dave Smith <[email protected]>
Co-Authored-By: Riad Benguella <[email protected]>
  • Loading branch information
@aduth @getdave @youknowriad
3 people committed Jan 28, 2020
1 parent a394c9f commit a52cd63
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 286 deletions.
140 changes: 54 additions & 86 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
getEditedPostContent,
createNewPost,
pressKeyWithModifier,
insertBlock,
} from '@wordpress/e2e-test-utils';

/**
Expand Down Expand Up @@ -42,8 +41,8 @@ describe( 'Links', () => {
// Type a URL
await page.keyboard.type( 'https://wordpress.org/gutenberg' );

// Click on the Apply button
await page.click( 'button[aria-label="Apply"]' );
// Click on the Submit button
await page.click( 'button[aria-label="Submit"]' );

// The link should have been inserted
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down Expand Up @@ -78,9 +77,6 @@ describe( 'Links', () => {
await clickBlockAppender();
await page.keyboard.type( 'This is Gutenberg: ' );

// Press escape to show the block toolbar
await page.keyboard.press( 'Escape' );

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

Expand Down Expand Up @@ -153,24 +149,25 @@ describe( 'Links', () => {
// Type a URL
await page.keyboard.type( 'https://wordpress.org/gutenberg' );

// Click on the Apply button
await page.click( 'button[aria-label="Apply"]' );
// Click on the Submit button
await page.keyboard.press( 'Enter' );
};

it( 'can be edited', async () => {
await createAndReselectLink();

// Click on the Edit button
await page.click( 'button[aria-label="Edit"]' );
const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
await editButton.click();

// Wait for the URL field to auto-focus
await waitForAutoFocus();

// Change the URL
await page.keyboard.type( '/handbook' );

// Click on the Apply button
await page.click( 'button[aria-label="Apply"]' );
// Click on the Submit button
await page.click( 'button[aria-label="Submit"]' );

// The link should have been updated
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down Expand Up @@ -205,12 +202,12 @@ describe( 'Links', () => {

// Typing "left" should not close the dialog
await page.keyboard.press( 'ArrowLeft' );
let popover = await page.$( '.block-editor-url-popover' );
let popover = await page.$( '.components-popover__content .block-editor-link-control' );
expect( popover ).not.toBeNull();

// Escape should close the dialog still.
await page.keyboard.press( 'Escape' );
popover = await page.$( '.block-editor-url-popover' );
popover = await page.$( '.components-popover__content .block-editor-link-control' );
expect( popover ).toBeNull();
} );

Expand All @@ -224,12 +221,12 @@ describe( 'Links', () => {

// Typing "left" should not close the dialog
await page.keyboard.press( 'ArrowLeft' );
let popover = await page.$( '.block-editor-url-popover' );
let popover = await page.$( '.components-popover__content .block-editor-link-control' );
expect( popover ).not.toBeNull();

// Escape should close the dialog still.
await page.keyboard.press( 'Escape' );
popover = await page.$( '.block-editor-url-popover' );
popover = await page.$( '.components-popover__content .block-editor-link-control' );
expect( popover ).toBeNull();
} );

Expand All @@ -241,10 +238,11 @@ describe( 'Links', () => {
// Move the mouse to show the block toolbar
await page.mouse.move( 0, 0 );
await page.mouse.move( 10, 10 );
await page.click( 'button[aria-label="Edit"]' );
const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
await editButton.click();
await waitForAutoFocus();
await page.keyboard.type( '/handbook' );
await page.click( 'button[aria-label="Apply"]' );
await page.click( 'button[aria-label="Submit"]' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

Expand Down Expand Up @@ -282,42 +280,42 @@ describe( 'Links', () => {

// Wait for the URL field to auto-focus
await waitForAutoFocus();
expect( await page.$( '.block-editor-url-popover' ) ).not.toBeNull();
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-url-input__suggestion' );
await page.waitForSelector( '.block-editor-link-control__search-item' );
await page.keyboard.press( 'ArrowDown' );

// Expect the the escape key to dismiss the popover when the autocomplete suggestion list is open.
await page.keyboard.press( 'Escape' );
expect( await page.$( '.block-editor-url-popover' ) ).toBeNull();
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 waitForAutoFocus();
expect( await page.$( '.block-editor-url-popover' ) ).not.toBeNull();
expect( await page.$( '.components-popover__content .block-editor-link-control' ) ).not.toBeNull();

// Expect the the escape key to dismiss the popover normally.
await page.keyboard.press( 'Escape' );
expect( await page.$( '.block-editor-url-popover' ) ).toBeNull();
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 waitForAutoFocus();
expect( await page.$( '.block-editor-url-popover' ) ).not.toBeNull();
expect( await page.$( '.components-popover__content .block-editor-link-control' ) ).not.toBeNull();

// Tab to the settings icon button.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Expect the the escape key to dismiss the popover normally.
await page.keyboard.press( 'Escape' );
expect( await page.$( '.block-editor-url-popover' ) ).toBeNull();
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 () => {
Expand All @@ -335,16 +333,21 @@ describe( 'Links', () => {
// Deselect the link text by moving the caret to the end of the line
// and the link popover should not be displayed.
await page.keyboard.press( 'End' );
expect( await page.$( '.block-editor-url-popover' ) ).toBeNull();
expect( await page.$( '.components-popover__content .block-editor-link-control' ) ).toBeNull();

// Move the caret back into the link text and the link popover
// should be displayed.
await page.keyboard.press( 'ArrowLeft' );
expect( await page.$( '.block-editor-url-popover' ) ).not.toBeNull();
expect( await page.$( '.components-popover__content .block-editor-link-control' ) ).not.toBeNull();

// Press Cmd+K to edit the link and the url-input should become
// focused with the value previously inserted.
await pressKeyWithModifier( 'primary', 'K' );
await page.waitForSelector( '.components-popover__content .block-editor-link-control' );
// Click on the Edit button
const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
await editButton.click();

await waitForAutoFocus();
const activeElementParentClasses = await page.evaluate( () => Object.values( document.activeElement.parentElement.parentElement.classList ) );
expect( activeElementParentClasses ).toContain( 'block-editor-url-input' );
Expand All @@ -364,42 +367,6 @@ describe( 'Links', () => {
expect( assertiveContent.trim() ).toBe( 'Warning: the link has been inserted but may have errors. Please test it.' );
} );

it( 'link popover remains visible after a mouse drag event', async () => {
// Create some blocks so we have components with event handlers on the page
for ( let loop = 0; loop < 5; loop++ ) {
await insertBlock( 'Paragraph' );
await page.keyboard.type( 'This is Gutenberg' );
}

// Focus on first paragraph, so the link popover will appear over the subsequent ones
await page.click( '[aria-label="Block navigation"]' );
await page.click( '.block-editor-block-navigation__item button' );

// Select some text
await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );

// Click on the Link button
await page.click( 'button[aria-label="Link"]' );
// Wait for the URL field to auto-focus
await waitForAutoFocus();

// Click on the Link Settings button
await page.click( 'button[aria-label="Link settings"]' );

// Move mouse over the 'open in new tab' section, then click and drag
const settings = await page.$( '.block-editor-url-popover__settings' );
const bounds = await settings.boundingBox();

await page.mouse.move( bounds.x, bounds.y );
await page.mouse.down();
await page.mouse.move( bounds.x + ( bounds.width / 2 ), bounds.y, { steps: 10 } );
await page.mouse.up();

// The link popover should still be visible
const popover = await page.$$( '.block-editor-url-popover' );
expect( popover ).toHaveLength( 1 );
} );

it( 'should contain a label when it should open in a new tab', async () => {
await clickBlockAppender();
await page.keyboard.type( 'This is WordPress' );
Expand All @@ -408,19 +375,20 @@ describe( 'Links', () => {
await pressKeyWithModifier( 'primary', 'k' );
await waitForAutoFocus();
await page.keyboard.type( 'w.org' );
// Navigate to the settings toggle.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
// Open settings.
await page.keyboard.press( 'Space' );

// Insert the link
await page.keyboard.press( 'Enter' );

// Navigate back to the popover
await pressKeyWithModifier( 'primary', 'k' );
await page.waitForSelector( '.components-popover__content .block-editor-link-control' );

// Navigate to the "Open in New Tab" checkbox.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Check the checkbox.
await page.keyboard.press( 'Space' );
// Navigate back to the input field.
await page.keyboard.press( 'Tab' );
// Submit the form.
await page.keyboard.press( 'Enter' );

expect( await getEditedPostContent() ).toMatchSnapshot();

Expand All @@ -436,32 +404,32 @@ describe( 'Links', () => {
await page.keyboard.press( 'ArrowRight' );
// Edit link.
await pressKeyWithModifier( 'primary', 'k' );
await waitForAutoFocus();
await page.waitForSelector( '.components-popover__content .block-editor-link-control' );
const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
await editButton.click();
await pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( 'wordpress.org' );
// Navigate to the settings toggle.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
// Open settings.
await page.keyboard.press( 'Space' );

// Update the link
await page.keyboard.press( 'Enter' );

// Navigate back to the popover
await pressKeyWithModifier( 'primary', 'k' );
await page.waitForSelector( '.components-popover__content .block-editor-link-control' );

// 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' );
// Navigate back to the input field.
await page.keyboard.press( 'Tab' );
// Submit the form.
await page.keyboard.press( 'Enter' );

// Navigate back to inputs to verify appears as changed.
await pressKeyWithModifier( 'primary', 'k' );
await waitForAutoFocus();
const link = await page.evaluate( () => document.activeElement.value );
expect( link ).toBe( 'http://wordpress.org' );
await page.waitForSelector( '.components-popover__content .block-editor-link-control' );
const link = await page.evaluate( () => document.activeElement.textContent );
expect( link ).toBe( 'wordpress.org(opens in a new tab)' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Space' );
await page.keyboard.press( 'Tab' );
const isChecked = await page.evaluate( () => document.activeElement.checked );
expect( isChecked ).toBe( false );

Expand Down
21 changes: 11 additions & 10 deletions packages/format-library/src/link/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,16 +123,17 @@ export const link = {
shortcutType="primary"
shortcutCharacter="k"
/> }
<InlineLinkUI
key={ isActive } // Make sure link UI state resets when switching between links.
addingLink={ this.state.addingLink }
stopAddingLink={ this.stopAddingLink }
isActive={ isActive }
activeAttributes={ activeAttributes }
value={ value }
onChange={ onChange }
onFocus={ onFocus }
/>
{ ( this.state.addingLink || isActive ) && (
<InlineLinkUI
addingLink={ this.state.addingLink }
stopAddingLink={ this.stopAddingLink }
isActive={ isActive }
activeAttributes={ activeAttributes }
value={ value }
onChange={ onChange }
onFocus={ onFocus }
/>
) }
</>
);
}
Expand Down
Loading

0 comments on commit a52cd63

Please sign in to comment.