Migrate MM-53377 regression test from Cypress to Playwright (#29460)

* feat: Migrate MM-53377 regression test from Cypress to Playwright

* fix: Update mm_53377 regression test to use admin client for setup

* fix: Correct admin client usage in mm_53377 regression test

* refactor: Standardize mm_53377 Playwright test with consistent naming and imports

* fix: Mark MM-T53377 test as fixme for investigation

* Migrating mm_53377_regression_test_spec.js cypress test to playwright

* Fixing linter errors

* Addressing PR review comment

* Fixing broken test

e2e-tests/playwright/support/ui/components/channels/post_create.ts

@@ -11,6 +11,7 @@ export default class ChannelsPostCreate {
     readonly emojiButton;
     readonly sendMessageButton;
     readonly scheduleDraftMessageButton;
+    readonly suggestionList;
 
     constructor(container: Locator, isRHS = false) {
         this.container = container;
@@ -25,6 +26,7 @@ export default class ChannelsPostCreate {
         this.emojiButton = container.getByLabel('select an emoji');
         this.sendMessageButton = container.getByTestId('SendMessageButton');
         this.scheduleDraftMessageButton = container.getByLabel('Schedule message');
+        this.suggestionList = container.getByTestId('suggestionList');
     }
 
     async toBeVisible() {

e2e-tests/playwright/support/ui/components/channels/user_profile_popover.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class UserProfilePopover {
+    readonly container: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    async close() {
+        await this.container.getByLabel('Close user profile popover').click();
+    }
+}
+
+export {UserProfilePopover};

e2e-tests/playwright/support/ui/components/index.ts

@@ -24,6 +24,7 @@ import {GenericConfirmModal} from './channels/generic_confirm_modal';
 
 import {ScheduledDraftMenu} from './channels/scheduled_draft_menu';
 import {ScheduledDraftModal} from './channels/scheduled_draft_modal';
+import {UserProfilePopover} from './channels/user_profile_popover';
 import {SystemConsoleSidebar} from './system_console/sidebar';
 import {SystemConsoleNavbar} from './system_console/navbar';
 
@@ -61,6 +62,7 @@ const components = {
     SystemUsersFilterPopover,
     SystemUsersFilterMenu,
     SystemUsersColumnToggleMenu,
+    UserProfilePopover,
 };
 
 export {

e2e-tests/playwright/support/ui/pages/channels.ts

@@ -18,6 +18,7 @@ export default class ChannelsPage {
     readonly sidebarLeft;
     readonly sidebarRight;
     readonly appBar;
+    readonly userProfilePopover;
 
     readonly findChannelsModal;
     readonly deletePostModal;
@@ -53,6 +54,7 @@ export default class ChannelsPage {
         this.emojiGifPickerPopup = new components.EmojiGifPicker(page.locator('#emojiGifPicker'));
         this.scheduledDraftDropdown = new components.ScheduledDraftMenu(page.locator('#dropdown_send_post_options'));
         this.scheduledDraftModal = new components.ScheduledDraftModal(page.locator('div.modal-content'));
+        this.userProfilePopover = new components.UserProfilePopover(page.locator('.user-profile-popover'));
 
         // Posts
         this.postContainer = page.locator('div.post-message__text');

e2e-tests/playwright/tests/functional/channels/account_settings/profile/popover_fields.spec.ts

@@ -0,0 +1,75 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+import {createRandomUser} from '@e2e-support/server';
+
+test('MM-T53377 Profile popover should show correct fields after at-mention autocomplete', async ({pw, pages}) => {
+    // # Initialize with specific config and get admin client
+    const {user, adminClient, team} = await pw.initSetup();
+
+    await adminClient.patchConfig({
+        PrivacySettings: {
+            ShowEmailAddress: false,
+            ShowFullName: false,
+        },
+    });
+
+    // # Create and add another user using admin client
+    const testUser2 = await adminClient.createUser(createRandomUser(), '', '');
+    await adminClient.addToTeam(team.id, testUser2.id);
+
+    // # Log in as user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Send mentions quickly
+    await channelPage.centerView.postCreate.postMessage(`@${user.username} @${testUser2.username}`);
+
+    // # Open profile popover for current user
+    const firstMention = channelPage.centerView.container.getByText(`@${user.username}`, {exact: true});
+    await firstMention.click();
+
+    // * Verify all fields are visible for current user
+    const popover = channelPage.userProfilePopover;
+    await expect(popover.container.getByText(`@${user.username}`)).toBeVisible();
+    await expect(popover.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
+    await expect(popover.container.getByText(user.email)).toBeVisible();
+
+    // # Close profile popover
+    await popover.close();
+
+    // # Open profile popover for other user
+    const secondMention = channelPage.centerView.container.getByText(`@${testUser2.username}`, {exact: true});
+    await secondMention.click();
+
+    // * Verify only username is visible for other user
+    await expect(popover.container.getByText(`@${testUser2.username}`)).toBeVisible();
+    await expect(popover.container.getByText(`${testUser2.first_name} ${testUser2.last_name}`)).not.toBeVisible();
+    await expect(popover.container.getByText(testUser2.email)).not.toBeVisible();
+
+    // # Close profile popover
+    await popover.close();
+
+    // # Trigger autocomplete
+    await channelPage.centerView.postCreate.writeMessage(`@${user.username}`);
+
+    // # Wait for autocomplete
+    const suggestionList = channelPage.centerView.postCreate.suggestionList;
+    await expect(suggestionList.getByText(`@${user.username}`)).toBeVisible();
+
+    // # Clear textbox
+    await channelPage.centerView.postCreate.writeMessage('');
+
+    // # Open profile popover for current user again
+    await firstMention.click();
+
+    // * Verify all fields are still visible
+    await expect(popover.container.getByText(`@${user.username}`)).toBeVisible();
+    await expect(popover.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
+    await expect(popover.container.getByText(user.email)).toBeVisible();
+});