e2e(fix): message reaction spec (#31357)

e2e-tests/cypress/tests/integration/channels/messaging/message_reaction_spec.js

@@ -14,8 +14,11 @@ describe('Emoji reactions to posts/messages', () => {
     let userTwo;
     let testTeam;
 
-    before(() => {
+    const emoji = 'slightly_frowning_face';
-        cy.apiInitSetup().then(({team, user}) => {
+    const otherEmoji = 'sweat_smile';
+
+    beforeEach(() => {
+        cy.apiAdminLogin().apiInitSetup().then(({team, user}) => {
             testTeam = team;
             userOne = user;
 
@@ -24,17 +27,15 @@ describe('Emoji reactions to posts/messages', () => {
 
                 cy.apiAddUserToTeam(testTeam.id, userTwo.id);
 
-                // # Login as userOne and Off-Topic
+                // # Login as userOne, visit Off-Topic and post a message
                 cy.apiLogin(userOne);
                 cy.visit(`/${testTeam.name}/channels/off-topic`);
+                cy.postMessage('hello');
             });
         });
     });
 
     it('adding a reaction to a post is visible to another user in the channel', () => {
-        // # Post a message
-        cy.postMessage('The reaction to this post should be visible to user-2');
-
         // # Mouseover the last post
         cy.getLastPost().trigger('mouseover');
 
@@ -43,10 +44,10 @@ describe('Emoji reactions to posts/messages', () => {
             cy.clickPostReactionIcon(postId);
 
             // # Choose "slightly_frowning_face" emoji
-            cy.clickEmojiInEmojiPicker('slightly_frowning_face');
+            cy.clickEmojiInEmojiPicker(emoji);
 
             // * The number shown on the reaction is incremented by 1
-            cy.get(`#postReaction-${postId}-slightly_frowning_face .Reaction__number--display`).
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
                 should('have.text', '1').
                 should('be.visible');
         });
@@ -60,52 +61,135 @@ describe('Emoji reactions to posts/messages', () => {
 
         cy.getLastPostId().then((postId) => {
             // * userOne's reaction "slightly_frowning_face" is visible and is equal to 1
-            cy.get(`#postReaction-${postId}-slightly_frowning_face .Reaction__number--display`).
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
                 should('have.text', '1').
                 should('be.visible');
         });
     });
 
-    it.skip('another user adding to existing reaction increases reaction count', () => {
+    it('another user adding to existing reaction increases reaction count', () => {
+        // # Mouseover the last post
+        cy.getLastPost().trigger('mouseover');
+
+        cy.getLastPostId().then((postId) => {
+            // # Click the add reaction icon
+            cy.clickPostReactionIcon(postId);
+
+            // # Choose "slightly_frowning_face" emoji
+            cy.clickEmojiInEmojiPicker(emoji);
+
+            // * The number shown on the reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
+                should('have.text', '1').
+                should('be.visible');
+        });
+
+        // # Logout then login as userTwo and off-topic
+        cy.apiLogout().apiLogin(userTwo);
+        cy.visit(`/${testTeam.name}/channels/off-topic`);
+
         cy.getLastPostId().then((postId) => {
             // # Click on the "slightly_frowning_face" emoji
-            cy.get(`#postReaction-${postId}-slightly_frowning_face`).click();
+            cy.get(`#postReaction-${postId}-${emoji}`).click();
 
             // * The number shown on the "slightly_frowning_face" reaction is incremented by 1
-            cy.get(`#postReaction-${postId}-slightly_frowning_face .Reaction__number--display`).
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
                 should('have.text', '2').
                 should('be.visible');
         });
     });
 
-    it.skip('a reaction added by current user has highlighted background color', () => {
+    it('a reaction added by current user has highlighted background color', () => {
+        // # Mouseover the last post
+        cy.getLastPost().trigger('mouseover');
+
         cy.getLastPostId().then((postId) => {
+            // # Click the add reaction icon
+            cy.clickPostReactionIcon(postId);
+
+            // # Choose "slightly_frowning_face" emoji
+            cy.clickEmojiInEmojiPicker(emoji);
+
+            // * The number shown on the reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
+                should('have.text', '1').
+                should('be.visible');
+
             // # The "slightly_frowning_face" emoji of the last post and the background color changes
-            cy.get(`#postReaction-${postId}-slightly_frowning_face`).
+            cy.get(`#postReaction-${postId}-${emoji}`).
                 should('be.visible').
                 should('have.css', 'background-color').
                 and('eq', 'rgba(28, 88, 217, 0.08)');
         });
     });
 
-    it.skip("can click another user's reaction to detract from it", () => {
+    it("can click another user's reaction to detract from it", () => {
+        // # Mouseover the last post
+        cy.getLastPost().trigger('mouseover');
+
         cy.getLastPostId().then((postId) => {
-            // * The number shown on the "slightly_frowning_face" reaction is currently at 2
+            // # Click the add reaction icon
-            cy.get(`#postReaction-${postId}-slightly_frowning_face .Reaction__number--display`).
+            cy.clickPostReactionIcon(postId);
+
+            // # Choose "slightly_frowning_face" emoji
+            cy.clickEmojiInEmojiPicker(emoji);
+
+            // * The number shown on the reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
+                should('have.text', '1').
+                should('be.visible');
+        });
+
+        // # Logout then login as userTwo and off-topic
+        cy.apiLogout().apiLogin(userTwo);
+        cy.visit(`/${testTeam.name}/channels/off-topic`);
+
+        cy.getLastPostId().then((postId) => {
+            // # Click on the "slightly_frowning_face" emoji
+            cy.get(`#postReaction-${postId}-${emoji}`).click();
+
+            // * The number shown on the "slightly_frowning_face" reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
                 should('have.text', '2').
                 should('be.visible');
+        });
 
+        // # Logout then login as userOne and off-topic
+        cy.apiLogout().apiLogin(userOne);
+        cy.visit(`/${testTeam.name}/channels/off-topic`);
+
+        cy.getLastPostId().then((postId) => {
             // # Click on the "slightly_frowning_face" emoji
-            cy.get(`#postReaction-${postId}-slightly_frowning_face`).click();
+            cy.get(`#postReaction-${postId}-${emoji}`).click();
 
             // * The number shown on the "slightly_frowning_face" reaction  is decremented by 1
-            cy.get(`#postReaction-${postId}-slightly_frowning_face .Reaction__number--display`).
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
                 should('have.text', '1').
                 should('be.visible');
         });
     });
 
-    it.skip('can add a reaction to a post with an existing reaction', () => {
+    it('can add a reaction to a post with an existing reaction', () => {
+        // # Mouseover the last post
+        cy.getLastPost().trigger('mouseover');
+
+        cy.getLastPostId().then((postId) => {
+            // # Click the add reaction icon
+            cy.clickPostReactionIcon(postId);
+
+            // # Choose "slightly_frowning_face" emoji
+            cy.clickEmojiInEmojiPicker(emoji);
+
+            // * The number shown on the reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
+                should('have.text', '1').
+                should('be.visible');
+        });
+
+        // # Logout then login as userTwo and off-topic
+        cy.apiLogout().apiLogin(userTwo);
+        cy.visit(`/${testTeam.name}/channels/off-topic`);
+
         cy.getLastPostId().then((postId) => {
             // # Click on the + icon
             cy.get(`#addReaction-${postId}`).click({force: true});
@@ -114,26 +198,53 @@ describe('Emoji reactions to posts/messages', () => {
             cy.get('#emojiPicker').should('be.visible');
 
             // # Select the "sweat_smile" emoji
-            cy.clickEmojiInEmojiPicker('sweat_smile');
+            cy.clickEmojiInEmojiPicker(otherEmoji);
 
             // * The emoji picker is no longer open
             cy.get('#emojiPicker').should('not.exist');
 
             // * The "sweat_smile" emoji is added to the post
-            cy.get(`#postReaction-${postId}-sweat_smile`).should('be.visible');
+            cy.get(`#postReaction-${postId}-${otherEmoji}`).should('be.visible');
         });
     });
 
-    it.skip('can remove a reaction to a post with an existing reaction', () => {
+    it('can remove a reaction to a post with an existing reaction', () => {
+        // # Mouseover the last post
+        cy.getLastPost().trigger('mouseover');
+
+        cy.getLastPostId().then((postId) => {
+            // # Click the add reaction icon
+            cy.clickPostReactionIcon(postId);
+
+            // # Choose "slightly_frowning_face" emoji
+            cy.clickEmojiInEmojiPicker(emoji);
+
+            // * The number shown on the reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${emoji} .Reaction__number--display`).
+                should('have.text', '1').
+                should('be.visible');
+
+            // # Click the add reaction icon
+            cy.clickPostReactionIcon(postId);
+
+            // # Choose "sweat_smile" emoji
+            cy.clickEmojiInEmojiPicker(otherEmoji);
+
+            // * The number shown on the reaction is incremented by 1
+            cy.get(`#postReaction-${postId}-${otherEmoji} .Reaction__number--display`).
+                should('have.text', '1').
+                should('be.visible');
+        });
+
         cy.getLastPostId().then((postId) => {
             // * The "sweat_smile" should exist on the post
-            cy.get(`#postReaction-${postId}-sweat_smile`).should('be.visible');
+            cy.get(`#postReaction-${postId}-${otherEmoji}`).should('be.visible');
 
             // # Click on the "sweat_smile" emoji
-            cy.get(`#postReaction-${postId}-sweat_smile`).click();
+            cy.get(`#postReaction-${postId}-${otherEmoji}`).click();
 
             // * The "sweat_smile" emoji is removed
-            cy.get(`#postReaction-${postId}-sweat_smile`).should('not.exist');
+            cy.get(`#postReaction-${postId}-${otherEmoji}`).should('not.exist');
         });
     });
 });