Avatar Block

This documentation explains the structure and purpose of the unit test written for WordPress Avatar Block using Playwright.

#Dependencies Dependencies

const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

• test & expect: Imported from WordPress E2E test utilities for Playwright to define tests and assertions.

---

Top ↑

#Test Suite: Avatar Test Suite: Avatar

test.describe( 'Avatar', () => {

• test.describe( 'Avatar', () => {...} ): Defines a test suite named Avatar.

---

Top ↑

#Setup & Cleanup Setup & Cleanup

#beforeAll – Deletes All Users Before Tests beforeAll – Deletes All Users Before Tests

test.beforeAll( async ( { requestUtils } ) => {
    await requestUtils.deleteAllUsers();
} );

• Ensures that all existing users are deleted before the test starts to avoid conflicts.

Top ↑

#beforeEach – Creates a New User & Post Before Each Test beforeEach – Creates a New User & Post Before Each Test

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();
} );

• Creates a new user with the given username, email, and role.
• Creates a new post to allow inserting blocks.

Top ↑

#afterEach – Deletes All Users After Each Test afterEach – Deletes All Users After Each Test

test.afterEach( async ( { requestUtils } ) => {
    await requestUtils.deleteAllUsers();
} );

• Ensures users are deleted after each test run to maintain a clean test environment.

---

Top ↑

#Test Case: Change Image When User Is Changed Test Case: Change Image When User Is Changed

test( 'should change image when user is changed', async ( { editor, page } ) => {

• Defines a test to check if the avatar image updates when a different user is selected.

Top ↑

#Step 1: Insert Avatar Block Step 1: Insert Avatar Block

await editor.insertBlock( { name: 'core/avatar' } );

• Inserts the Avatar block into the post editor.

Top ↑

#Step 2: Locate Avatar Block Step 2: Locate Avatar Block

const avatarBlock = editor.canvas.locator('role=document[name="Block: Avatar"i]');
const avatarImage = avatarBlock.locator('img');
await expect( avatarImage ).toBeVisible();

• Finds the Avatar block in the editor.
• Finds the image inside the Avatar block.
• Asserts that the image is visible.

Top ↑

#Step 3: Store Original Avatar Image Source Step 3: Store Original Avatar Image Source

const originalSrc = await avatarImage.getAttribute( 'src' );

• Stores the original avatar image URL for later comparison.

Top ↑

#Step 4: Open Block Settings Sidebar Step 4: Open Block Settings Sidebar

await page.click(
    `role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
);

• Opens the block settings panel in the editor.

Top ↑

#Step 5: Change User Selection Step 5: Change User Selection

const userInput = page.locator(
    'role=region[name="Editor settings"i] >> role=combobox[name="User"i]'
);
await userInput.click();

const newUser = page.locator('role=option[name="Gravatar Gravatar"]');
await newUser.click();

• Finds the user selection dropdown.
• Selects the new user (Gravatar Gravatar).

Top ↑

#Step 6: Verify Avatar Image Change Step 6: Verify Avatar Image Change

const updatedAvatarImage = avatarBlock.locator('img');
const newSrc = await updatedAvatarImage.getAttribute('src');
expect( newSrc ).not.toBe( originalSrc );

• Gets the updated avatar image URL.
• Asserts that the new image source is different from the original one.

---

Top ↑

#Summary of Test Coverage Summary of Test Coverage

Test Step	Purpose
beforeAll	Deletes all users before tests
beforeEach	Creates a new user and post before each test
afterEach	Cleans up users after each test
Insert Avatar Block	Adds an Avatar block to the editor
Check Original Avatar Image	Stores the initial avatar image URL
Open Settings Panel	Ensures the settings panel is visible
Change User	Selects a different user from the dropdown
Verify Image Change	Checks if the avatar image updates after selecting a new user

---

Top ↑

#Conclusion Conclusion

This test ensures that the WordPress Avatar block correctly updates the user image when a different user is selected in the editor. The setup and teardown processes keep the test environment clean, ensuring reliable results.