Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link control: migrate tests to Playwright. Can be created by selecting text and using keyboard shortcuts #50996

Merged
merged 13 commits into from
May 29, 2023
+69 −54
Merged

Link control: migrate tests to Playwright. Can be created by selecting text and using keyboard shortcuts #50996

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
03e31cf
initial setup
MaggieCabrera May 26, 2023
cde8043
fixed utils
MaggieCabrera May 26, 2023
f23d5b7
update snapshots, commented waitForURLFieldAutoFocus
MaggieCabrera May 26, 2023
e4b3bee
removed old test
MaggieCabrera May 26, 2023
42c8cee
removed unneeded code
MaggieCabrera May 26, 2023
bb85de3
removed old snapshots
MaggieCabrera May 26, 2023
7d7a0dd
use locator instead of component class
MaggieCabrera May 26, 2023
36f0628
remove appender function
MaggieCabrera May 26, 2023
9d3e062
use locators instead of tabbing around
MaggieCabrera May 26, 2023
13000dc
rename button
MaggieCabrera May 26, 2023
4f963e1
avoid snapshots and fix locator for Save button
MaggieCabrera May 29, 2023
76d810e
removed snapshots
MaggieCabrera May 29, 2023
91de79c
added comment
MaggieCabrera May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,6 @@ exports[`Links can be created by selecting text and clicking Link 1`] = `
<!-- /wp:paragraph -->"
`;

exports[`Links can be created by selecting text and using keyboard shortcuts 1`] = `
"<!-- wp:paragraph -->
<p>This is Gutenberg</p>
<!-- /wp:paragraph -->"
`;

exports[`Links can be created by selecting text and using keyboard shortcuts 2`] = `
"<!-- wp:paragraph -->
<p>This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a></p>
<!-- /wp:paragraph -->"
`;

exports[`Links can be created instantly when a URL is selected 1`] = `
"<!-- wp:paragraph -->
<p>This is Gutenberg: <a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a></p>
Expand Down
42 changes: 0 additions & 42 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,48 +103,6 @@ describe( 'Links', () => {
expect( urlInputValue ).toBe( '' );
} );

it( 'can be created 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 pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );

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

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

// Type a URL.
await page.keyboard.type( 'https://wordpress.org/gutenberg' );

// Open settings.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Space' );

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

// Toggle should still have focus and be checked.
await page.waitForSelector(
':focus:checked.components-checkbox-control__input'
);

// Ensure that the contents of the post have not been changed, since at
// this point the link is still not inserted.
expect( await getEditedPostContent() ).toMatchSnapshot();

// Tab back to the Submit and apply the link.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Enter' );

// The link should have been inserted.
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'can be created without any text selected', async () => {
// Create a block with some text.
await clickBlockAppender();
Expand Down
3 changes: 3 additions & 0 deletions ...hots__/Links-can-be-created-by-selecting-text-and-using-keyboard-shortcuts-1-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:paragraph -->
<p>This is Gutenberg</p>
<!-- /wp:paragraph -->
3 changes: 3 additions & 0 deletions ...hots__/Links-can-be-created-by-selecting-text-and-using-keyboard-shortcuts-2-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:paragraph -->
<p>This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a></p>
<!-- /wp:paragraph -->
52 changes: 52 additions & 0 deletions test/e2e/specs/editor/blocks/links.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Links', () => {
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );

test( `can be created by selecting text and using keyboard shortcuts`, 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' );

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

// Type a URL.
await page.keyboard.type( 'https://wordpress.org/gutenberg' );

// Open settings.
await page.getByRole( 'button', { name: 'Link Settings' } ).click();

// Navigate to and toggle the "Open in new tab" checkbox.
const checkbox = page.getByLabel( 'Open in new tab' );
await checkbox.click();

// Toggle should still have focus and be checked.
await expect( checkbox ).toBeChecked();
await expect( checkbox ).toBeFocused();

// Ensure that the contents of the post have not been changed, since at
// this point the link is still not inserted.
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved

// Tab back to the Submit and apply the link.
await page.getByRole( 'button', { name: 'Save' } ).click();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is failing. We should probably limit the scope under some parent locator. I found out that the link setting popover doesn't have an accessible name. When I'm testing it, I also noticed that the focus is trapped inside the popover, so maybe what it should really be is a modal/dialog instead? This can all be a follow-up though 😅.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, I could only target the parent using a class. Let's follow up by improving the popover and updating the test as necessary


// The link should have been inserted.
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
} );