From 08f0cea77a629fc454d152056d85f7c06cd11b1b Mon Sep 17 00:00:00 2001
From: Pooja Killekar <41000648+pooja-muchandikar@users.noreply.github.com>
Date: Mon, 20 Jun 2022 15:13:14 +0530
Subject: [PATCH] Migrate Button Block Tests (#41494)

* Migrate Button Block Test Case

* Resolve CI conflict

* Fix Code Formatting

* Fix Styling Issue

* Fix Stylint CI failure

* Fixed review feedbacks

* Resolve Review Feedbacks

* Fix review feedbacks

Co-authored-by: Pooja Killekar <poojakillekar@Poojas-MacBook-Air.local>
---
 .../blocks/__snapshots__/buttons.test.js.snap |  33 -----
 .../specs/editor/blocks/buttons.test.js       |  95 -------------
 test/e2e/specs/editor/blocks/buttons.spec.js  | 129 ++++++++++++++++++
 3 files changed, 129 insertions(+), 128 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/buttons.test.js
 create mode 100644 test/e2e/specs/editor/blocks/buttons.spec.js

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`] = `
-"<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
-<!-- /wp:button --></div>
-<!-- /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 wp-element-button\\">WordPress</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;
-
-exports[`Buttons has focus on button content (slash inserter) 1`] = `
-"<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;
-
-exports[`Buttons has focus on button content 1`] = `
-"<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;
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(
+			`<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	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(
+			`<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	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(
+			`<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">WordPress</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	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(
+			`<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.wordpress.org/">WordPress</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+} );