From bcadcb96957c35550f3f39bdc0af8e1aa439f72f Mon Sep 17 00:00:00 2001
From: Justin Ahinon <justiny.ahinon@gmail.com>
Date: Fri, 29 Jul 2022 10:10:38 +0200
Subject: [PATCH] Add test for the group block

---
 .../blocks/__snapshots__/group.test.js.snap   | 21 -----
 .../specs/editor/blocks/group.test.js         | 78 -------------------
 ...ed-using-the-block-inserter-1-chromium.txt |  3 +
 ...ed-using-the-slash-inserter-1-chromium.txt |  3 +
 ...t-using-the-button-appender-1-chromium.txt |  5 ++
 test/e2e/specs/editor/blocks/group.spec.js    | 61 +++++++++++++++
 6 files changed, 72 insertions(+), 99 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/group.test.js
 create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt
 create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt
 create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
 create mode 100644 test/e2e/specs/editor/blocks/group.spec.js

diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap
deleted file mode 100644
index df7b3f6419f15..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Group can be created using the block inserter 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group can be created using the slash inserter 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group can have other blocks appended to it using the button appender 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>Group Block with a Paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/group.test.js b/packages/e2e-tests/specs/editor/blocks/group.test.js
deleted file mode 100644
index 142cfe79523df..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/group.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	searchForBlock,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Group', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created using the block inserter', async () => {
-		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created using the slash inserter', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '/group' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can have other blocks appended to it using the button appender', async () => {
-		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
-		await page.click( '.block-editor-button-block-appender' );
-		await page.click( '.editor-block-list-item-paragraph' );
-		await page.keyboard.type( 'Group Block with a Paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can wrap in group and unwrap group', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await transformBlockTo( 'Group' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:group -->
-			<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-			<p>1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>2</p>
-			<!-- /wp:paragraph --></div>
-			<!-- /wp:group -->"
-		` );
-
-		await transformBlockTo( 'Unwrap' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>2</p>
-			<!-- /wp:paragraph -->"
-		` );
-	} );
-} );
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt
new file mode 100644
index 0000000000000..44774b1bf7680
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt
new file mode 100644
index 0000000000000..44774b1bf7680
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
new file mode 100644
index 0000000000000..09839ec996353
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Group Block with a Paragraph</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
new file mode 100644
index 0000000000000..6e534c3010ec1
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Group', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created using the block inserter', async ( {
+		editor,
+		page,
+	} ) => {
+		// Search for the group block and insert it.
+		const inserterButton = page.locator(
+			'role=button[name="Toggle block inserter"i]'
+		);
+
+		await inserterButton.click();
+
+		await page.type(
+			'role=searchbox[name="Search for blocks and patterns"i]',
+			'Group'
+		);
+
+		await page.click(
+			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
+		);
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can be created using the slash inserter', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/group' );
+		await expect(
+			page.locator( 'role=option[name="Group"i][selected]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can have other blocks appended to it using the button appender', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/group' } );
+		await page.click( 'role=button[name="Add block"i]' );
+		await page.click(
+			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+		);
+		await page.keyboard.type( 'Group Block with a Paragraph' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );