upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-05-28 04:35:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* 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
This commit is contained in:
Jesús Espino 2024-12-12 12:02:22 +01:00 committed by GitHub
parent 1b164c8302
commit b8efccae69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 104 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
e2e-tests/cypress/tests/integration/channels/account_settings/profile/mm_53377_regression_test_spec.js
View file

@ -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');
});
});
});

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

@ -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() {

22
e2e-tests/playwright/support/ui/components/channels/user_profile_popover.ts Normal file
View file

@ -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};

2
e2e-tests/playwright/support/ui/components/index.ts
View file

@ -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 {

2
e2e-tests/playwright/support/ui/pages/channels.ts
View file

@ -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');

75
e2e-tests/playwright/tests/functional/channels/account_settings/profile/popover_fields.spec.ts Normal file
View file

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

1
webapp/channels/src/components/suggestion/suggestion_list.tsx
View file

@ -298,6 +298,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
>
<div
id='suggestionList'
data-testid='suggestionList'
role='list'
ref={this.contentRef}
style={{