diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/message_reaction_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/message_reaction_spec.js index 0f2afce4c8..12b8547961 100644 --- 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'); }); }); });