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 deleted file mode 100644 index 58feb9236d7dd7..00000000000000 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = ` -" -
-
WordPress
-
-" -`; - -exports[`Buttons dismisses link editor when escape is pressed 1`] = ` -" -
-
WordPress
-
-" -`; - -exports[`Buttons has focus on button content (slash inserter) 1`] = ` -" -
-
Content
-
-" -`; - -exports[`Buttons has focus on button content 1`] = ` -" -
-
Content
-
-" -`; diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js deleted file mode 100644 index 5d1e630be09519..00000000000000 --- a/packages/e2e-tests/specs/editor/blocks/buttons.test.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * WordPress dependencies - */ -import { - insertBlock, - getEditedPostContent, - createNewPost, - pressKeyWithModifier, - clickBlockAppender, -} from '@wordpress/e2e-test-utils'; - -describe( 'Buttons', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - it( 'has focus on button content', async () => { - await insertBlock( 'Buttons' ); - await page.keyboard.type( 'Content' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'has focus on button content (slash inserter)', async () => { - await clickBlockAppender(); - await page.keyboard.type( '/buttons' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'Content' ); - - 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.waitForFunction( - () => !! document.activeElement.closest( '.block-editor-url-input' ) - ); - await page.keyboard.press( 'Escape' ); - await page.waitForFunction( - () => - document.activeElement === - document.querySelector( '.block-editor-rich-text__editable' ) - ); - await page.keyboard.type( 'WordPress' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'moves focus from the link editor back to the button when escape is pressed after the URL has been submitted', async () => { - // Regression: https://github.com/WordPress/gutenberg/issues/34307 - await insertBlock( 'Buttons' ); - await pressKeyWithModifier( 'primary', 'k' ); - await page.waitForFunction( - () => !! document.activeElement.closest( '.block-editor-url-input' ) - ); - await page.keyboard.type( 'https://example.com' ); - await page.keyboard.press( 'Enter' ); - await page.waitForFunction( - () => - document.activeElement === - document.querySelector( - '.block-editor-link-control a[href="https://example.com"]' - ) - ); - await page.keyboard.press( 'Escape' ); - - // Focus should move from the link control to the button block's text. - await page.waitForFunction( - () => - document.activeElement === - document.querySelector( '[aria-label="Button text"]' ) - ); - - // The link control should still be visible when a URL is set. - const linkControl = await page.$( '.block-editor-link-control' ); - expect( linkControl ).toBeTruthy(); - } ); - - it( 'can jump to the link editor using the keyboard shortcut', async () => { - await insertBlock( 'Buttons' ); - await page.keyboard.type( 'WordPress' ); - await pressKeyWithModifier( 'primary', 'k' ); - await page.keyboard.type( 'https://www.wordpress.org/' ); - await page.keyboard.press( 'Enter' ); - // Make sure that the dialog is still opened, and that focus is retained - // within (focusing on the link preview). - await page.waitForSelector( - ':focus.block-editor-link-control__search-item-title' - ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); -} ); diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js new file mode 100644 index 00000000000000..ece3d06a5e9e8e --- /dev/null +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -0,0 +1,129 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Buttons', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'has focus on button content', async ( { editor, page } ) => { + await editor.insertBlock( { name: 'core/buttons' } ); + await page.keyboard.type( 'Content' ); + + // Check the content. + const content = await editor.getEditedPostContent(); + expect( content ).toBe( + ` +
+
Content
+
+` + ); + } ); + + test( 'has focus on button content (slash inserter)', async ( { + editor, + page, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/buttons' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'Content' ); + + // Check the content. + const content = await editor.getEditedPostContent(); + expect( content ).toBe( + ` +
+
Content
+
+` + ); + } ); + + test( 'dismisses link editor when escape is pressed', async ( { + editor, + page, + pageUtils, + } ) => { + // Regression: https://github.com/WordPress/gutenberg/pull/19885 + await editor.insertBlock( { name: 'core/buttons' } ); + await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await expect( + page.locator( 'role=combobox[name="URL"i]' ) + ).toBeFocused(); + await page.keyboard.press( 'Escape' ); + await expect( + page.locator( 'role=textbox[name="Button text"i]' ) + ).toBeFocused(); + await page.keyboard.type( 'WordPress' ); + + // Check the content. + const content = await editor.getEditedPostContent(); + expect( content ).toBe( + ` +
+
WordPress
+
+` + ); + } ); + + test( 'moves focus from the link editor back to the button when escape is pressed after the URL has been submitted', async ( { + editor, + page, + pageUtils, + } ) => { + // Regression: https://github.com/WordPress/gutenberg/issues/34307 + await editor.insertBlock( { name: 'core/buttons' } ); + await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await expect( + page.locator( 'role=combobox[name="URL"i]' ) + ).toBeFocused(); + await page.keyboard.type( 'https://example.com' ); + await page.keyboard.press( 'Enter' ); + await expect( + page.locator( 'role=link[name=/^example\\.com/]' ) + ).toBeFocused(); + await page.keyboard.press( 'Escape' ); + + // Focus should move from the link control to the button block's text. + await expect( + page.locator( 'role=textbox[name="Button text"i]' ) + ).toBeFocused(); + + // The link control should still be visible when a URL is set. + await expect( + page.locator( 'role=link[name=/^example\\.com/]' ) + ).toBeVisible(); + } ); + + test( 'can jump to the link editor using the keyboard shortcut', async ( { + editor, + page, + pageUtils, + } ) => { + await editor.insertBlock( { name: 'core/buttons' } ); + await page.keyboard.type( 'WordPress' ); + await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await page.keyboard.type( 'https://www.wordpress.org/' ); + await page.keyboard.press( 'Enter' ); + // Make sure that the dialog is still opened, and that focus is retained + // within (focusing on the link preview). + await expect( + page.locator( 'role=link[name=/^wordpress\\.org/]' ) + ).toBeFocused(); + + // Check the content. + const content = await editor.getEditedPostContent(); + expect( content ).toBe( + ` +
+
WordPress
+
+` + ); + } ); +} );