E2E Tests: Add test for avatar block to ensure that user avatar switc…

…hes when set to a new user.

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

@@ -13,6 +13,7 @@ import { WP_ADMIN_USER, WP_BASE_URL } from '../config';
 import type { User } from './login';
 import { login } from './login';
 import { listMedia, uploadMedia, deleteMedia, deleteAllMedia } from './media';
+import { listUsers, deleteUser, createUser, deleteAllUsers } from './users';
 import { setupRest, rest, getMaxBatchSize, batchRest } from './rest';
 import { getPluginsMap, activatePlugin, deactivatePlugin } from './plugins';
 import { deleteAllTemplates } from './templates';
@@ -133,6 +134,10 @@ class RequestUtils {
 	uploadMedia = uploadMedia.bind( this );
 	deleteMedia = deleteMedia.bind( this );
 	deleteAllMedia = deleteAllMedia.bind( this );
+	listUsers = listUsers.bind( this );
+	createUser = createUser.bind( this );
+	deleteUser = deleteUser.bind( this );
+	deleteAllUsers = deleteAllUsers.bind( this );
 }
 
 export type { StorageState };

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

@@ -0,0 +1,102 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+export interface User {
+	id: number;
+	email: string;
+}
+
+export interface UserData {
+	username: string;
+	email: string;
+	firstName: string;
+	lastName: string;
+	password: string;
+	roles: string[];
+}
+
+/**
+ * List all users.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/users/#list-users
+ * @param  this
+ */
+async function listUsers( this: RequestUtils ) {
+	const response = await this.rest< User[] >( {
+		method: 'GET',
+		path: '/wp/v2/users',
+		params: {
+			per_page: 100,
+		},
+	} );
+
+	return response;
+}
+
+/**
+ * Add a test user.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/users/#create-a-user
+ * @param  this
+ * @param  user User data to create.
+ */
+async function createUser( this: RequestUtils, user: UserData ) {
+	const response = await this.rest< User >( {
+		method: 'POST',
+		path: '/wp/v2/users',
+		data: {
+			username: user.username,
+			email: user.email,
+			first_name: user.firstName,
+			last_name: user.lastName,
+			password: user.password,
+			roles: user.roles,
+		},
+	} );
+
+	return response;
+}
+
+/**
+ * Delete a user.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/users/#delete-a-user
+ * @param  this
+ * @param  userId The ID of the user.
+ */
+async function deleteUser( this: RequestUtils, userId: number ) {
+	// Do not delete main user account.
+	if ( userId === 1 ) {
+		return new Promise( ( resolve ) => {
+			resolve( true );
+		} );
+	}
+
+	const response = await this.rest( {
+		method: 'DELETE',
+		path: `/wp/v2/users/${ userId }`,
+		params: { force: true, reassign: 1 },
+	} );
+
+	return response;
+}
+
+/**
+ * Delete all users except main root user.
+ *
+ * @param  this
+ */
+async function deleteAllUsers( this: RequestUtils ) {
+	const users = await this.listUsers();
+
+	// The users endpoint doesn't support batch request yet.
+	const responses = await Promise.all(
+		users.map( ( user ) => this.deleteUser( user.id ) )
+	);
+
+	return responses;
+}
+
+export { listUsers, createUser, deleteAllUsers, deleteUser };

test/e2e/specs/editor/blocks/avatar.spec.js

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Avatar', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllUsers();
+	} );
+
+	test.beforeEach( async ( { admin, requestUtils } ) => {
+		await requestUtils.createUser( {
+			username: 'user',
+			email: 'gravatartest@gmail.com',
+			firstName: 'Gravatar',
+			lastName: 'Gravatar',
+			roles: [ 'author' ],
+			password: 'gravatargravatar123magic',
+		} );
+
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllUsers();
+	} );
+
+	test( 'should change image when user is changed', async ( {
+		editor,
+		page,
+	} ) => {
+		// Inserting a quote block
+		await editor.insertBlock( {
+			name: 'core/avatar',
+		} );
+
+		const username = 'Gravatar Gravatar';
+
+		const avatarBlock = page.locator(
+			'role=document[name="Block: Avatar"]'
+		);
+
+		await expect( avatarBlock ).toBeVisible();
+
+		const avatarImage = avatarBlock.locator( 'img' );
+
+		await expect( avatarImage ).toBeVisible();
+
+		const originalSrc = await avatarImage.getAttribute( 'src' );
+
+		const blockInspectorControls = page.locator(
+			'.block-editor-block-inspector'
+		);
+
+		await expect( blockInspectorControls ).toBeVisible();
+
+		const userComboBox = blockInspectorControls.locator(
+			'.components-combobox-control'
+		);
+
+		await expect( userComboBox ).toBeVisible();
+
+		const userInput = userComboBox.locator(
+			'.components-combobox-control__input'
+		);
+
+		await expect( userInput ).toBeVisible();
+
+		// Set new user.
+		await userInput.click();
+
+		const newUser = userComboBox.locator(
+			'role=option[name="' + username + '"]'
+		);
+
+		await expect( newUser ).toBeVisible();
+
+		await newUser.click();
+
+		const newSrc = await avatarImage.getAttribute( 'src' );
+
+		expect( newSrc ).not.toBe( originalSrc );
+
+		await expect( userInput ).toBeVisible();
+	} );
+} );