Migrate mentions tests to playwright

packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Clicks the default block appender.
+ *
+ * @param {Editor} this
+ */
+export async function clickBlockAppender( this: Editor ) {
+	// The block appender is only visible when there's no selection.
+	await this.page.evaluate( () =>
+		// @ts-ignore (Reason: wp isn't typed)
+		window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+	);
+	const appender = await this.page.waitForSelector(
+		'.block-editor-default-block-appender__content'
+	);
+	await appender.click();
+}

packages/e2e-test-utils-playwright/src/editor/index.ts

@@ -17,6 +17,7 @@ import { selectBlocks } from './select-blocks';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
 import { transformBlockTo } from './transform-block-to';
+import { clickBlockAppender } from './click-block-appender';
 
 type EditorConstructorProps = {
 	page: Page;
@@ -64,4 +65,5 @@ export class Editor {
 	selectBlocks = selectBlocks.bind( this );
 	showBlockToolbar = showBlockToolbar.bind( this );
 	transformBlockTo = transformBlockTo.bind( this );
+	clickBlockAppender = clickBlockAppender.bind( this );
 }

packages/e2e-test-utils-playwright/src/request-utils/index.ts

@@ -22,6 +22,7 @@ import { createComment, deleteAllComments } from './comments';
 import { createPost, deleteAllPosts } from './posts';
 import { resetPreferences } from './preferences';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
+import { createUser, deleteUser } from './users';
 
 interface StorageState {
 	cookies: Cookie[];
@@ -38,7 +39,7 @@ class RequestUtils {
 	baseURL?: string;
 
 	pluginsMap: Record< string, string > | null = null;
-
+	userID?: number;
 	static async setup( {
 		user,
 		storageStatePath,
@@ -133,6 +134,8 @@ class RequestUtils {
 	uploadMedia = uploadMedia.bind( this );
 	deleteMedia = deleteMedia.bind( this );
 	deleteAllMedia = deleteAllMedia.bind( this );
+	createUser = createUser.bind( this );
+	deleteUser = deleteUser.bind( this );
 }
 
 export type { StorageState };

packages/e2e-test-utils-playwright/src/request-utils/users.ts

@@ -0,0 +1,63 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+/**
+ * Create user using REST API.
+ *
+ * @param {} this RequestUtils.
+ * @param {string} username User Name.
+ * @param {string} firstName First Name.
+ * @param {string} lastName Last Name.
+ */
+async function createUser(
+	this: RequestUtils,
+	username: string,
+	firstName: string,
+	lastName: string
+) {
+	// Create User
+	// https://developer.wordpress.org/rest-api/reference/users/#create-a-user
+	await this.rest( {
+		method: 'POST',
+		path: '/wp/v2/users',
+		params: {
+			username,
+			first_name: firstName,
+			last_name: lastName,
+			email: username + '@example.com',
+			password: 'secret',
+		},
+	} );
+}
+
+/**
+ * Delete user using REST API.
+ *
+ * @param {} this RequestUtils.
+ * @param {string} username User Name.
+ */
+async function deleteUser( this: RequestUtils, username: string ) {
+	// List user.
+	// https://developer.wordpress.org/rest-api/reference/users/#list-users
+	const user = await this.rest( {
+		method: 'GET',
+		path: '/wp/v2/users',
+		params: {
+			search: username,
+		},
+	} );
+	// Delete User
+	// https://developer.wordpress.org/rest-api/reference/users/#delete-a-user
+	await this.rest( {
+		method: 'DELETE',
+		path: `/wp/v2/users/${ user[ 0 ].id }`,
+		params: {
+			force: true,
+			reassign: 0,
+		},
+	} );
+}
+
+export { createUser, deleteUser };

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

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'autocomplete mentions', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.createUser( 'testuser', 'Jane', 'Doe' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteUser( 'testuser' );
+	} );
+
+	test( 'should insert mention', async ( { page, editor } ) => {
+		await editor.clickBlockAppender();
+		await page.keyboard.type( 'I am @a' );
+		await page.locator( 'button', { hasText: 'adminadmin' } ).click();
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>I am @admin</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should insert mention between two other words', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.clickBlockAppender();
+		await page.keyboard.type( 'Stuck in the middle with you' );
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 'you'.length );
+		await page.keyboard.type( '@j' );
+		await page.locator( 'button', { hasText: 'Jane Doetestuser' } ).click();
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>Stuck in the middle with @testuseryou</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should insert two subsequent mentions', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.clickBlockAppender();
+		await page.keyboard.type( 'I am @j' );
+		await page.locator( 'button', { hasText: 'Jane Doetestuser' } ).click();
+		await page.keyboard.type( ' ' );
+		await page.keyboard.type( '@a' );
+		await page.locator( 'button', { hasText: 'adminadmin' } ).click();
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>I am @testuser @admin</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+} );