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

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