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

2025-06-11 11:22:58 +08:00
--- a/e2e-tests/cypress/tests/integration/channels/messaging/message_reaction_spec.js
+++ b/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(() => {
-        cy.apiInitSetup().then(({team, user}) => {
+    const emoji = 'slightly_frowning_face';
+    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
-            cy.get(`#postReaction-${postId}-slightly_frowning_face .Reaction__number--display`).
+            // # 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}-${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');
        });
    });
 });