Migrate mentions tests to playwright (#43064)

* Migrate mention tests

* Delete old test file

* Remove Commented code

* Address click block appender feedback

* Address the feedbacks

* Address remaining feedbacks

* add the line

* Fix changes

* Fix remaininging changes

* Fix tsconfig

Somehow code editor was applying formatting everytime after commit

* Fix formatting

* Fix formatting

Co-authored-by: Juhi Saxena <juhisaxena@Juhis-MacBook-Pro.local>

test/e2e/specs/editor/various/mentions.spec.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'autocomplete mentions', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.createUser( {
+			username: 'testuser',
+			email: 'testuser@example.com',
+			firstName: 'Jane',
+			lastName: 'Doe',
+			password: 'secret',
+		} );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllUsers();
+	} );
+
+	test( 'should insert mention', async ( { page, editor } ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'I am @ad' );
+		await expect(
+			page.locator( 'role=listbox >> role=option[name=/admin/i]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '.' );
+		await expect.poll( editor.getEditedPostContent ).toBe(
+			`<!-- wp:paragraph -->
+<p>I am @admin.</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should insert mention between two other words', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'Stuck in the middle with you' );
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 'you'.length );
+		await page.keyboard.type( '@j' );
+		await expect(
+			page.locator( 'role=listbox >> role=option[name=/testuser/i]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ' ' );
+		await expect.poll( editor.getEditedPostContent ).toBe(
+			`<!-- wp:paragraph -->
+<p>Stuck in the middle with @testuser you</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should insert two subsequent mentions', async ( {
+		page,
+		editor,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'I am @j' );
+		await expect(
+			page.locator( 'role=listbox >> role=option[name=/testuser/i]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ' @ad' );
+		await expect(
+			page.locator( 'role=listbox >> role=option[name=/admin/i]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '.' );
+		await expect.poll( editor.getEditedPostContent ).toBe(
+			`<!-- wp:paragraph -->
+<p>I am @testuser @admin.</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+} );