mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-57383] User profile popover performance improved and redesigned (#26420)

Просмотр исходного кода
Этот коммит содержится в:
M-ZubairAhmed
2024-05-15 07:35:25 +00:00
коммит произвёл GitHub
родитель 4fbc96ec02
Коммит 0911e4dee7
91 изменённых файлов: 4932 добавлений и 7148 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_image_spec.js
Просмотреть файл

@@ -50,15 +50,18 @@ describe('Verify Accessibility Support in Different Images', () => {
// # Open profile popover
cy.getLastPostId().then((postId) => {
cy.get(`#post_${postId}`).within(() => {
cy.get('.user-popover').click();
cy.get('.status-wrapper').click();
});
// * Verify image alt in profile popover
cy.get('#user-profile-popover').within(() => {
cy.get('.user-profile-popover').within(() => {
cy.get('.Avatar').should('have.attr', 'alt', `${otherUser.username} profile image`);
});
});
// # Close the profile popover
cy.get('body').click();
// # Open Settings > Display > Themes
cy.uiOpenSettingsModal('Display').within(() => {
cy.get('#displayButton').click();

12
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
Просмотреть файл

@@ -167,7 +167,7 @@ describe('Verify Accessibility Support in Post', () => {
cy.focused().tab();
// * Verify focus is on the username
cy.get('button.user-popover').should('be.focused').and('have.attr', 'aria-label', otherUser.username);
cy.get('button.user-popover').should('be.focused');
cy.focused().tab();
// * Verify focus is on the time
@@ -188,10 +188,6 @@ describe('Verify Accessibility Support in Post', () => {
cy.get(`#CENTER_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message');
cy.focused().tab();
// * Verify focus is on message actions button
cy.get(`#CENTER_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions');
cy.focused().tab();
// * Verify focus is on the comment button
cy.get(`#CENTER_commentIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'reply');
cy.focused().tab();
@@ -238,10 +234,6 @@ describe('Verify Accessibility Support in Post', () => {
cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
cy.focused().tab({shift: true});
// * Verify focus is on message actions button
cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions');
cy.focused().tab({shift: true});
// * Verify focus is on the save icon
cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message');
cy.focused().tab({shift: true});
@@ -259,7 +251,7 @@ describe('Verify Accessibility Support in Post', () => {
cy.focused().tab({shift: true});
// * Verify focus is on the username
cy.get('button.user-popover').should('be.focused').and('have.attr', 'aria-label', otherUser.username);
cy.get('button.user-popover').should('be.focused');
cy.focused().tab({shift: true});
});
});

2
e2e-tests/cypress/tests/integration/channels/account_settings/profile/account_settings_position_spec.ts
Просмотреть файл

@@ -45,7 +45,7 @@ describe('Profile > Profile Settings > Position', () => {
cy.get('.profile-icon > img').as('profileIconForPopover').click();
// # Verify that the popover is visible and contains position
cy.contains('#user-profile-popover', position).should('be.visible');
cy.contains('div.user-profile-popover', position).should('be.visible');
});
it('MM-T2064 Position / 128 characters', () => {

5
e2e-tests/cypress/tests/integration/channels/account_settings/profile/fullname_truncate_spec.ts
Просмотреть файл

@@ -60,10 +60,11 @@ describe('Profile > Profile Settings> Full Name', () => {
cy.getLastPostId().then((postId) => {
cy.get(`#post_${postId}`).should('be.visible');
cy.get(`#post_${postId} img`).click();
cy.get('#user-profile-popover').should('be.visible');
cy.get('div.user-profile-popover').should('be.visible');
cy.get('button.closeButtonRelativePosition').click();
// * Popover user name should show truncated to 'This Is a Long Name That Should Tr...'
cy.findByTestId(`popover-fullname-${firstUser.username}`).should('have.css', 'text-overflow', 'ellipsis');
cy.findByTestId(`popover-fullname-${firstUser.username}`).should('have.css', 'text-overflow', 'clip');
});
});

4
e2e-tests/cypress/tests/integration/channels/account_settings/profile/username_spec.ts
Просмотреть файл

@@ -205,7 +205,7 @@ describe('Settings > Sidebar > General > Edit', () => {
});
// * Verify username in profile popover
cy.get('#user-profile-popover').within(() => {
cy.get('div.user-profile-popover').within(() => {
cy.get('#userPopoverUsername').should('be.visible').and('contain', `${testUser.username}`);
});
});
@@ -238,7 +238,7 @@ describe('Settings > Sidebar > General > Edit', () => {
});
// * Verify that new username is in profile popover
cy.get('#user-profile-popover').within(() => {
cy.get('div.user-profile-popover').within(() => {
cy.get('#userPopoverUsername').should('be.visible').and('contain', `${otherUser.username}-${randomId}`);
});
});

4
e2e-tests/cypress/tests/integration/channels/bot_accounts/display_name_spec.js
Просмотреть файл

@@ -67,7 +67,7 @@ describe('Bot display name', () => {
cy.get('@botPost').then((postIdA) => {
cy.get(`#post_${postIdA} button.user-popover`).click();
cy.get('#user-profile-popover').
cy.get('div.user-profile-popover').
should('be.visible');
cy.findByTestId(`popover-fullname-${bot.username}`).
@@ -83,7 +83,7 @@ describe('Bot display name', () => {
// * Verify changed display name
cy.get('@newBotPost').then(() => {
cy.get('#user-profile-popover').
cy.get('div.user-profile-popover').
should('be.visible');
cy.findByTestId(`popover-fullname-${bot.username}`).

5
e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts
Просмотреть файл

@@ -356,10 +356,11 @@ function verifyMentionedUserAndProfilePopover(postId: string) {
cy.wrap($el).click();
// * Profile popover should be visible
cy.get('#user-profile-popover').should('be.visible');
cy.get('div.user-profile-popover').should('be.visible');
// * The username in the popover the same as the username link for each user
cy.get('#userPopoverUsername').should('contain', userName);
cy.get('div.user-profile-popover').should('contain', userName);
cy.get('button.closeButtonRelativePosition').click();
// Click anywhere to close profile popover
cy.get('#channelHeaderInfo').click();

4
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts
Просмотреть файл

@@ -117,9 +117,9 @@ describe('MM-T4064 Status expiry visibility', () => {
it('MM-T4064_7 should show custom status expiry time in the user popover', () => {
// # Click on the post header of the last post by the current user and open profile popover
cy.get('.post.current--user .post__header .user-popover').first().click();
cy.get('#user-profile-popover').should('exist');
cy.get('div.user-profile-popover').should('exist');
// * Check if the profile popover contains custom status expiry time in the Status heading
cy.get('#user-profile-popover #user-popover-status .user-popover__subtitle time').should('have.text', expiresAt.format(expiryTimeFormat));
cy.get('div.user-profile-popover #user-popover-status .user-popover__subtitle time').should('have.text', expiresAt.format(expiryTimeFormat));
});
});

6
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_experience_ui_spec.ts
Просмотреть файл

@@ -108,9 +108,10 @@ describe('Guest Account - Guest User Experience', () => {
});
// * Verify Guest Badge in Guest User's Profile Popover
cy.get('#user-profile-popover').should('be.visible').within(($el) => {
cy.get('div.user-profile-popover').should('be.visible').within(($el) => {
cy.wrap($el).find('.GuestTag').should('be.visible').and('have.text', 'GUEST');
});
cy.get('button.closeButtonRelativePosition').click();
// # Close the profile popover
cy.get('#channel-header').click();
@@ -168,9 +169,10 @@ describe('Guest Account - Guest User Experience', () => {
});
// * Verify Guest Badge is not displayed in User's Profile Popover
cy.get('#user-profile-popover').should('be.visible').within(($el) => {
cy.get('div.user-profile-popover').should('be.visible').within(($el) => {
cy.wrap($el).find('.user-popover__role').should('not.exist');
});
cy.get('button.closeButtonRelativePosition').click();
// # Close the profile popover
cy.get('#channel-header').click();

3
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts
Просмотреть файл

@@ -106,9 +106,10 @@ describe('Verify Guest User Identification in different screens', () => {
});
// * Verify Guest Badge in Guest User's Profile Popover
cy.get('#user-profile-popover').should('be.visible').within(($el) => {
cy.get('div.user-profile-popover').should('be.visible').within(($el) => {
cy.wrap($el).find('.GuestTag').should('be.visible').and('have.text', 'GUEST');
});
cy.get('button.closeButtonRelativePosition').click();
// # Close the profile popover
cy.get('#channel-header').click();

2
e2e-tests/cypress/tests/integration/channels/enterprise/profile_popover/profile_popover_spec_user_a_b_spec.ts
Просмотреть файл

@@ -76,7 +76,7 @@ describe('Profile popover User A & B', () => {
find(`[data-mention=${otherUser.username}]`).
should('be.visible').
click();
cy.get('#user-profile-popover').should('be.visible');
cy.get('div.user-profile-popover').should('be.visible');
});
// # Add to a Channel should not be shown.

2
e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/inapp_username_profile_override_spec.js
Просмотреть файл

@@ -160,7 +160,7 @@ function verifyLastPost(owner, username, iconUrl) {
function verifyProfilePopover(owner, username, iconUrl) {
// * Verify that the profile popover is shown
cy.get('#user-profile-popover').should('be.visible').within(() => {
cy.get('div.user-profile-popover').should('be.visible').within(() => {
// * Verify username from payload
cy.get('.user-profile-popover__heading').should('be.visible').and('have.text', username);

4
e2e-tests/cypress/tests/integration/channels/messaging/mobile_profile_popover_spec.js
Просмотреть файл

@@ -37,7 +37,7 @@ describe('Profile popover', () => {
cy.get(`#post_${postId}`).find('.profile-icon > img').click({force: true});
// * Popover should have rendered to screen
cy.get('#user-profile-popover').should('be.visible');
cy.get('div.user-profile-popover').should('be.visible');
cy.get('body').type('{esc}');
});
});
@@ -50,7 +50,7 @@ describe('Profile popover', () => {
cy.get(`#post_${postId}`).find('.user-popover').click({force: true});
// * Popover should have rendered to screen
cy.get('#user-profile-popover').should('be.visible');
cy.get('div.user-profile-popover').should('be.visible');
});
});
});

19
e2e-tests/cypress/tests/integration/channels/scroll/fixed_width_spec.js
Просмотреть файл

@@ -60,7 +60,7 @@ describe('Scroll', () => {
cy.getLastPostId().as('lastPostId');
// Getting height of each post before applying 'Fixed width, centered' option and assigning to alias
cy.findAllByLabelText('sysadmin').eq(0).invoke('height').then((height) => {
cy.get('button.user-popover.style--none').eq(0).invoke('height').then((height) => {
cy.wrap(height).as('initialUserNameHeight');
});
getComponentByText('@firstPostId', firstMessage).invoke('height').then((height) => {
@@ -72,10 +72,10 @@ describe('Scroll', () => {
getFileThumbnail('mpeg-video-file.mpg').invoke('height').then((height) => {
cy.wrap(height).as('initialMpgHeight');
});
getFileThumbnail('gif-image-file.gif').invoke('height').then((height) => {
getImageThumbnail('gif-image-file.gif').invoke('height').then((height) => {
cy.wrap(height).as('initialGifHeight');
});
getFileThumbnail('jpg-image-file.jpg').invoke('height').then((height) => {
getImageThumbnail('jpg-image-file.jpg').invoke('height').then((height) => {
cy.wrap(height).as('initialJpgHeight');
});
getComponentBySelector('@linkPreviewPostId', '.PostAttachmentOpenGraph__image').invoke('height').then((height) => {
@@ -105,7 +105,7 @@ describe('Scroll', () => {
// * Verify there is no scroll pop
cy.get('#post-list').should('exist').within(() => {
cy.get('@initialUserNameHeight').then((originalHeight) => {
cy.findAllByLabelText('sysadmin').eq(0).invoke('height').should('be.equal', originalHeight);
cy.get('button.user-popover.style--none').eq(0).invoke('height').should('be.equal', originalHeight);
});
cy.get('@initialFirstPostHeight').then((originalHeight) => {
getComponentByText('@firstPostId', firstMessage).invoke('height').should('be.equal', originalHeight);
@@ -120,10 +120,10 @@ describe('Scroll', () => {
getFileThumbnail('mpeg-video-file.mpg').invoke('height').should('be.equal', originalHeight);
});
cy.get('@initialGifHeight').then((originalHeight) => {
getFileThumbnail('gif-image-file.gif').invoke('height').should('be.equal', originalHeight);
getImageThumbnail('gif-image-file.gif').invoke('height').should('be.equal', originalHeight);
});
cy.get('@initialJpgHeight').then((originalHeight) => {
getFileThumbnail('jpg-image-file.jpg').invoke('height').should('be.equal', originalHeight);
getImageThumbnail('jpg-image-file.jpg').invoke('height').should('be.equal', originalHeight);
});
cy.get('@initialInlineImgHeight').then((originalHeight) => {
getComponentBySelector('@gifLinkPostId', 'img[aria-label="file thumbnail"]').invoke('height').should('be.equal', originalHeight);
@@ -136,6 +136,13 @@ describe('Scroll', () => {
// Get thumbnail component based on filename
const getFileThumbnail = (filename) => {
return cy.get(`@${filename}PostId`).then((postId) => {
cy.get(`#${postId}_message a.post-image__name`);
});
};
// Get image component based on filename
const getImageThumbnail = (filename) => {
return cy.get(`@${filename}PostId`).then((postId) => {
cy.get(`#${postId}_message`).findByLabelText(`file thumbnail ${filename}`);
});