diff --git a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/mm_53377_regression_test_spec.js b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/mm_53377_regression_test_spec.js deleted file mode 100644 index 2891213a725..00000000000 --- a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/mm_53377_regression_test_spec.js +++ /dev/null @@ -1,94 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -// *************************************************************** -// - [#] indicates a test step (e.g. #. Go to a page) -// - [*] indicates an assertion (e.g. * Check the title) -// - Use element ID when selecting an element. Create one if none. -// *************************************************************** - -// Group: @channels - -describe('MM-53377 Regression tests', () => { - let testTeam; - let testUser; - let testUser2; - - before(() => { - cy.apiUpdateConfig({ - PrivacySettings: { - ShowEmailAddress: false, - ShowFullName: false, - }, - }); - - cy.apiInitSetup().then(({team, user, offTopicUrl}) => { - testTeam = team; - testUser = user; - - cy.apiCreateUser().then((payload) => { - testUser2 = payload.user; - cy.apiAddUserToTeam(testTeam.id, payload.user.id); - }); - - cy.visit(offTopicUrl); - }); - }); - - beforeEach(() => { - // # Login as testUser - cy.apiLogin(testUser); - }); - - it('should still have your email loaded after using the at-mention autocomplete', () => { - // * Ensure that this user is not an admin - cy.wrap(testUser).its('roles').should('equal', 'system_user'); - - // # Send a couple at mentions, quickly enough that the at mention autocomplete won't appear - cy.uiPostMessageQuickly(`@${testUser.username} @${testUser2.username}`); - - // # Open the profile popover for the current user - cy.contains('.mention-link', `@${testUser.username}`).click(); - - // * Ensure that all fields are visible for the current user - cy.get('#user-profile-popover').within(() => { - cy.findByText(`@${testUser.username}`).should('exist'); - cy.findByText(`${testUser.first_name} ${testUser.last_name}`).should('exist'); - cy.findByText(testUser.email).should('exist'); - }); - - // # Click anywhere to close profile popover - cy.get('#channelHeaderInfo').click(); - - // # Open the profile popover for another user - cy.contains('.mention-link', `@${testUser2.username}`).click(); - - // * Ensure that only the username is visible for another user - cy.get('#user-profile-popover').within(() => { - cy.findByText(`@${testUser2.username}`).should('exist'); - cy.findByText(`${testUser2.first_name} ${testUser2.last_name}`).should('not.exist'); - cy.findByText(testUser2.email).should('not.exist'); - }); - - // # Start to type another at mention so that the autocomplete loads - cy.get('#post_textbox').type(`@${testUser.username}`); - - // # Wait for the autocomplete to appear with the current user in it - cy.get('.suggestion-list').within(() => { - cy.findByText(`@${testUser.username}`); - }); - - // # Clear the post textbox to hide the autocomplete - cy.get('#post_textbox').clear(); - - // # Open the profile popover for the current user again - cy.contains('.mention-link', `@${testUser.username}`).click(); - - // * Ensure that all fields are still visible for the current user - cy.get('#user-profile-popover').within(() => { - cy.findByText(`@${testUser.username}`).should('exist'); - cy.findByText(`${testUser.first_name} ${testUser.last_name}`).should('exist'); - cy.findByText(testUser.email).should('exist'); - }); - }); -}); diff --git a/e2e-tests/playwright/support/ui/components/channels/post_create.ts b/e2e-tests/playwright/support/ui/components/channels/post_create.ts index 42cb5f48721..f16cd2060a6 100644 --- a/e2e-tests/playwright/support/ui/components/channels/post_create.ts +++ b/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() { diff --git a/e2e-tests/playwright/support/ui/components/channels/user_profile_popover.ts b/e2e-tests/playwright/support/ui/components/channels/user_profile_popover.ts new file mode 100644 index 00000000000..a351be37141 --- /dev/null +++ b/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}; diff --git a/e2e-tests/playwright/support/ui/components/index.ts b/e2e-tests/playwright/support/ui/components/index.ts index a8584a253ee..1e48cd79ba1 100644 --- a/e2e-tests/playwright/support/ui/components/index.ts +++ b/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 { diff --git a/e2e-tests/playwright/support/ui/pages/channels.ts b/e2e-tests/playwright/support/ui/pages/channels.ts index 3c007a51b77..7767faac9fe 100644 --- a/e2e-tests/playwright/support/ui/pages/channels.ts +++ b/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'); diff --git a/e2e-tests/playwright/tests/functional/channels/account_settings/profile/popover_fields.spec.ts b/e2e-tests/playwright/tests/functional/channels/account_settings/profile/popover_fields.spec.ts new file mode 100644 index 00000000000..3adb0798d39 --- /dev/null +++ b/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(); +}); diff --git a/webapp/channels/src/components/suggestion/suggestion_list.tsx b/webapp/channels/src/components/suggestion/suggestion_list.tsx index 9d21364095a..b4b6cd4e7f3 100644 --- a/webapp/channels/src/components/suggestion/suggestion_list.tsx +++ b/webapp/channels/src/components/suggestion/suggestion_list.tsx @@ -298,6 +298,7 @@ export default class SuggestionList extends React.PureComponent { >