diff --git a/.gitignore b/.gitignore index 2f1837bb624b..f2d88a5720c8 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ mattermost-webapp.iml # disable folders generated by Cypress cypress/screenshots cypress/videos +results diff --git a/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap b/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap index ce56b444521f..9cc95eac9c27 100644 --- a/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap +++ b/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap @@ -42,6 +42,7 @@ exports[`components/dot_menu/DotMenu should match snapshot, canDelete 1`] = ` @@ -150,6 +151,7 @@ exports[`components/dot_menu/DotMenu should match snapshot, on Center 1`] = ` diff --git a/components/dot_menu/dot_menu.jsx b/components/dot_menu/dot_menu.jsx index af2f974bf186..11a5d0c15189 100644 --- a/components/dot_menu/dot_menu.jsx +++ b/components/dot_menu/dot_menu.jsx @@ -252,6 +252,7 @@ export default class DotMenu extends Component { /> Display > Channel Display Mode', () => { before(() => { + cy.login('user-1'); + // 1. Set default preference of a user on channel and message display cy.updateChannelDisplayModePreference('centered'); cy.updateMessageDisplayPreference(); diff --git a/cypress/integration/account_settings/display/code_theme_colors_spec.js b/cypress/integration/account_settings/display/code_theme_colors_spec.js index 585509687f52..2ae04fddad3a 100644 --- a/cypress/integration/account_settings/display/code_theme_colors_spec.js +++ b/cypress/integration/account_settings/display/code_theme_colors_spec.js @@ -16,7 +16,7 @@ const THEMES = [{name: 'github', backgroundColor: 'rgb(248, 248, 248)', color: ' ]; function verifyLastPostStyle(codeTheme) { - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const postCodeBlock = `#postMessageText_${postId} code`; // * Verify that the code block background color and color match the desired theme diff --git a/cypress/integration/account_settings/display/message_display_mode_spec.js b/cypress/integration/account_settings/display/message_display_mode_spec.js index 33eaa62abae5..96e8aa817a0f 100644 --- a/cypress/integration/account_settings/display/message_display_mode_spec.js +++ b/cypress/integration/account_settings/display/message_display_mode_spec.js @@ -28,7 +28,7 @@ describe('Account Settings > Display > Message Display', () => { type('Text after{enter}'); // 3. Get last postId - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const postMessageTextId = `#postMessageText_${postId}`; // * Verify HTML still includes new line diff --git a/cypress/integration/at_mentions/at_mentions_spec.js b/cypress/integration/at_mentions/at_mentions_spec.js index ae6c869534d8..2fc631ebc933 100644 --- a/cypress/integration/at_mentions/at_mentions_spec.js +++ b/cypress/integration/at_mentions/at_mentions_spec.js @@ -125,7 +125,7 @@ describe('at-mention', () => { cy.get('#sidebarItem_town-square').click(); // 4. Get last post message text - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { cy.get(`#postMessageText_${postId}`).as('postMessageText'); }); @@ -163,7 +163,7 @@ describe('at-mention', () => { cy.get('#sidebarItem_town-square').click(); // 4. Get last post message text - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { cy.get(`#postMessageText_${postId}`).as('postMessageText'); }); diff --git a/cypress/integration/channel/edit_message_spec.js b/cypress/integration/channel/edit_message_spec.js index 9fcbdc0c86d4..67e161cc7008 100644 --- a/cypress/integration/channel/edit_message_spec.js +++ b/cypress/integration/channel/edit_message_spec.js @@ -28,7 +28,7 @@ describe('Edit Message', () => { cy.get('#suggestionList').should('be.visible'); // 5. Press the escape key - cy.get('#edit_textbox').type('{esc}'); + cy.get('#edit_textbox').focus().type('{esc}'); // * Check if the textbox contains expected text cy.get('#edit_textbox').should('contain', 'Hello World! @'); @@ -72,7 +72,7 @@ describe('Edit Message', () => { // 2. Post a message cy.postMessage('Checking timestamp {enter}'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { // 3. Mouseover post to display the timestamp cy.get(`#post_${postId}`).trigger('mouseover'); @@ -109,4 +109,4 @@ describe('Edit Message', () => { }); }); }); -}); \ No newline at end of file +}); diff --git a/cypress/integration/channel/message_bullets_spec.js b/cypress/integration/channel/message_bullets_spec.js index 9a977fde7f21..bb92fdbace19 100644 --- a/cypress/integration/channel/message_bullets_spec.js +++ b/cypress/integration/channel/message_bullets_spec.js @@ -27,7 +27,7 @@ This is more normal text.`; cy.postMessage(messageText); // 3. Get last postId - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const postMessageTextId = `#postMessageText_${postId}`; // * Verify text sizes @@ -41,4 +41,4 @@ This is more normal text.`; }); }); }); -}); \ No newline at end of file +}); diff --git a/cypress/integration/channel/message_deletion_spec.js b/cypress/integration/channel/message_deletion_spec.js index 6e456aadf0b4..4b0a6bf82655 100644 --- a/cypress/integration/channel/message_deletion_spec.js +++ b/cypress/integration/channel/message_deletion_spec.js @@ -19,7 +19,7 @@ describe('Message deletion', () => { // 1. Post message in center. cy.postMessage('test message deletion {enter}'); - cy.getLastPostId().then((parentMessageId) => { + cy.getLastPostIdWithRetry().then((parentMessageId) => { // 2. Mouseover the post and click post comment icon. cy.clickPostCommentIcon(); @@ -29,7 +29,7 @@ describe('Message deletion', () => { // 3. Post a reply in RHS. cy.postMessageReplyInRHS('test message reply in RHS {enter}'); - cy.getLastPostId().then((replyMessageId) => { + cy.getLastPostIdWithRetry().then((replyMessageId) => { // 4. Click post dot menu in center. cy.clickPostDotMenu(parentMessageId); @@ -61,10 +61,10 @@ describe('Message deletion', () => { cy.get(`#post_${replyMessageId}`).should('not.be.visible'); }); - cy.getLastPostId().then((replyMessageId) => { + cy.getLastPostIdWithRetry().then((replyMessageId) => { // * Check that last message do not contain (message deleted) cy.get(`#post_${replyMessageId}`).should('not.have', '(message deleted)'); }); }); }); -}); \ No newline at end of file +}); diff --git a/cypress/integration/channel/message_draft_spec.js b/cypress/integration/channel/message_draft_spec.js index 4147c23dd693..166e53e8b784 100644 --- a/cypress/integration/channel/message_draft_spec.js +++ b/cypress/integration/channel/message_draft_spec.js @@ -30,11 +30,11 @@ describe('Message Draft', () => { cy.get('#post_textbox').type('comm'); //3. Go to another test channel without submitting the draft in the previous channel - cy.get('#sidebarItem_ratione-1').scrollIntoView(); - cy.get('#sidebarItem_ratione-1').should('be.visible').click(); + cy.get('#sidebarItem_autem-2').scrollIntoView(); + cy.get('#sidebarItem_autem-2').should('be.visible').click(); //* Validate if the newly navigated channel is open - cy.url().should('include', '/ad-1/channels/ratione-1'); + cy.url().should('include', '/ad-1/channels/autem-2'); //* Validate if the draft icon is visible on side bar on the previous channel with a draft cy.get('#sidebarItem_town-square #draftIcon').should('be.visible'); diff --git a/cypress/integration/channel/message_edit_post_with_attachment_spec.js b/cypress/integration/channel/message_edit_post_with_attachment_spec.js index 400c6d0256ea..e25d42f189a7 100644 --- a/cypress/integration/channel/message_edit_post_with_attachment_spec.js +++ b/cypress/integration/channel/message_edit_post_with_attachment_spec.js @@ -36,7 +36,7 @@ describe('MM-13697 Edit Post with attachment', () => { cy.wait(500); // eslint-disable-line // 7. Get last post ID - cy.getLastPostId().then((postID) => { + cy.getLastPostIdWithRetry().then((postID) => { // 8. click dot menu button cy.clickPostDotMenu(); diff --git a/cypress/integration/channel/message_spec.js b/cypress/integration/channel/message_spec.js index b1a0fa889470..137885b98573 100644 --- a/cypress/integration/channel/message_spec.js +++ b/cypress/integration/channel/message_spec.js @@ -49,7 +49,7 @@ describe('Message', () => { // 2. Post message cy.postMessage('Message'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const divPostId = `#post_${postId}`; // 3. Left click on post to move the focus out of the main input box @@ -91,7 +91,7 @@ describe('Message', () => { // 4 Waiting create post is done cy.wait(500); // eslint-disable-line - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const divPostId = `#postMessageText_${postId}`; // * Check that the message contains the whole content sent ie. mentions with dots. diff --git a/cypress/integration/channel/mobile_message_deletion_spec.js b/cypress/integration/channel/mobile_message_deletion_spec.js index 20f4f549315b..4ee1a4117210 100644 --- a/cypress/integration/channel/mobile_message_deletion_spec.js +++ b/cypress/integration/channel/mobile_message_deletion_spec.js @@ -23,7 +23,7 @@ describe('Delete Parent Message', () => { cy.get('#post_textbox').click({force: true}); cy.postMessage('Parent Message'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { cy.clickPostCommentIcon(postId); // * Check that the RHS is open @@ -38,7 +38,7 @@ describe('Delete Parent Message', () => { cy.wait(500); // eslint-disable-line } - cy.getLastPostId().then((replyPostId) => { + cy.getLastPostIdWithRetry().then((replyPostId) => { // * No delete modal should be visible yet cy.get('#deletePostModal').should('not.be.visible'); diff --git a/cypress/integration/post_header/post_header_spec.js b/cypress/integration/post_header/post_header_spec.js index 1a202d7a3a4e..33066501c70a 100644 --- a/cypress/integration/post_header/post_header_spec.js +++ b/cypress/integration/post_header/post_header_spec.js @@ -25,7 +25,7 @@ describe('Post Header', () => { // * Check initial state that "the jump to recent messages" is not visible cy.get('#archive-link-home').should('not.be.visible'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const divPostId = `#post_${postId}`; // * Check initial state that the first message posted is not highlighted @@ -63,7 +63,7 @@ describe('Post Header', () => { // 3. Post a message cy.postMessage('test for flagged post{enter}'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { // * Check that the center flag icon of a post is not visible cy.get(`#CENTER_flagIcon_${postId}`).should('not.be.visible'); @@ -88,7 +88,7 @@ describe('Post Header', () => { // 3. Post a message cy.postMessage('test for dropdown menu{enter}'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { // * Check that the center dot menu' button and dropdown are hidden cy.get(`#CENTER_button_${postId}`).should('not.be.visible'); cy.get(`#CENTER_dropdown_${postId}`).should('not.be.visible'); @@ -116,7 +116,7 @@ describe('Post Header', () => { // 3. Post a message cy.postMessage('test for reaction and emoji picker{enter}'); - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { // * Check that the center post reaction icon and emoji picker are not visible cy.get(`#CENTER_reaction_${postId}`).should('not.be.visible'); cy.get('#emojiPicker').should('not.be.visible'); diff --git a/cypress/integration/search/results_post_comment_spec.js b/cypress/integration/search/results_post_comment_spec.js index cd80f6122d2a..e92a0ae18d12 100644 --- a/cypress/integration/search/results_post_comment_spec.js +++ b/cypress/integration/search/results_post_comment_spec.js @@ -25,11 +25,11 @@ describe('Search', () => { cy.get('#searchBox').type(message).type('{enter}'); // 4. Get last postId - cy.getLastPostId().then((postId) => { + cy.getLastPostIdWithRetry().then((postId) => { const postMessageText = `#postMessageText_${postId}`; // * Search results should have our original message - cy.get('#search-items-container').find(postMessageText).should('have.text', `${message}\n`); + cy.get('#search-items-container').find(postMessageText).should('have.text', `${message}`); // 5. Click on the reply button on the search result cy.clickPostCommentIcon(postId, 'SEARCH'); @@ -41,18 +41,18 @@ describe('Search', () => { cy.get('#rhsContainer').should('be.visible'); // * Verify that the original message is in the RHS - cy.get('#rhsContainer').find(postMessageText).should('have.text', `${message}\n`); + cy.get('#rhsContainer').find(postMessageText).should('have.text', `${message}`); }); // 7. Get the comment id - cy.getLastPostId().then((commentId) => { + cy.getLastPostIdWithRetry().then((commentId) => { const commentText = `#postMessageText_${commentId}`; // * Verify comment in RHS - cy.get('#rhsContainer').find(commentText).should('have.text', `${comment}\n`); + cy.get('#rhsContainer').find(commentText).should('have.text', `${comment}`); // * Verify comment main thread - cy.get('#postListContent').find(commentText).should('have.text', `${comment}\n`); + cy.get('#postListContent').find(commentText).should('have.text', `${comment}`); }); }); -}); \ No newline at end of file +}); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 53d9dc28c129..e127c0f93983 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -165,9 +165,6 @@ function isMac() { Cypress.Commands.add('postMessage', (message) => { cy.get('#post_textbox').type(message).type('{enter}'); - - // add wait time to ensure that a post gets posted and not on pending state - cy.wait(500); // eslint-disable-line }); Cypress.Commands.add('postMessageReplyInRHS', (message) => { @@ -176,11 +173,11 @@ Cypress.Commands.add('postMessageReplyInRHS', (message) => { }); Cypress.Commands.add('getLastPost', () => { - return cy.get('#postListContent').children().last(); + return cy.get('#postListContent [id^=post]:first'); }); Cypress.Commands.add('getLastPostId', () => { - return cy.get('#postListContent').children().last().invoke('attr', 'id').then((divPostId) => { + return cy.get('#postListContent [id^=post]:first').invoke('attr', 'id').then((divPostId) => { return divPostId.replace('post_', ''); }); }); @@ -238,21 +235,25 @@ Cypress.Commands.add('compareLastPostHTMLContentFromFile', (file) => { // Post header // *********************************************************** -/** - * Click post time - * @param {String} postId - Post ID - * @param {String} location - as 'CENTER', 'RHS_ROOT', 'RHS_COMMENT', 'SEARCH' - */ -Cypress.Commands.add('clickPostTime', (postId, location = 'CENTER') => { +function clickPostHeaderItem(postId, location, item) { if (postId) { cy.get(`#post_${postId}`).trigger('mouseover'); - cy.get(`#${location}_time_${postId}`).click({force: true}); + cy.get(`#${location}_${item}_${postId}`).scrollIntoView().click({force: true}); } else { - cy.getLastPostId().then((lastPostId) => { + cy.getLastPostIdWithRetry().then((lastPostId) => { cy.get(`#post_${lastPostId}`).trigger('mouseover'); - cy.get(`#${location}_time_${lastPostId}`).click({force: true}); + cy.get(`#${location}_${item}_${lastPostId}`).scrollIntoView().click({force: true}); }); } +} + +/** + * Click post time + * @param {String} postId - Post ID + * @param {String} location - as 'CENTER', 'RHS_ROOT', 'RHS_COMMENT', 'SEARCH' + */ +Cypress.Commands.add('clickPostTime', (postId, location = 'CENTER') => { + clickPostHeaderItem(postId, location, 'time'); }); /** @@ -261,15 +262,7 @@ Cypress.Commands.add('clickPostTime', (postId, location = 'CENTER') => { * @param {String} location - as 'CENTER', 'RHS_ROOT', 'RHS_COMMENT', 'SEARCH' */ Cypress.Commands.add('clickPostFlagIcon', (postId, location = 'CENTER') => { - if (postId) { - cy.get(`#post_${postId}`).trigger('mouseover'); - cy.get(`#${location}_flagIcon_${postId}`).click({force: true}); - } else { - cy.getLastPostId().then((lastPostId) => { - cy.get(`#post_${lastPostId}`).trigger('mouseover'); - cy.get(`#${location}_flagIcon_${lastPostId}`).click({force: true}); - }); - } + clickPostHeaderItem(postId, location, 'flagIcon'); }); /** @@ -278,15 +271,7 @@ Cypress.Commands.add('clickPostFlagIcon', (postId, location = 'CENTER') => { * @param {String} location - as 'CENTER', 'RHS_ROOT', 'RHS_COMMENT', 'SEARCH' */ Cypress.Commands.add('clickPostDotMenu', (postId, location = 'CENTER') => { - if (postId) { - cy.get(`#post_${postId}`).trigger('mouseover'); - cy.get(`#${location}_button_${postId}`).click({force: true}); - } else { - cy.getLastPostId().then((lastPostId) => { - cy.get(`#post_${lastPostId}`).trigger('mouseover'); - cy.get(`#${location}_button_${lastPostId}`).click({force: true}); - }); - } + clickPostHeaderItem(postId, location, 'button'); }); /** @@ -295,15 +280,7 @@ Cypress.Commands.add('clickPostDotMenu', (postId, location = 'CENTER') => { * @param {String} location - as 'CENTER', 'RHS_ROOT', 'RHS_COMMENT' */ Cypress.Commands.add('clickPostReactionIcon', (postId, location = 'CENTER') => { - if (postId) { - cy.get(`#post_${postId}`).trigger('mouseover'); - cy.get(`#${location}_reaction_${postId}`).click({force: true}); - } else { - cy.getLastPostId().then((lastPostId) => { - cy.get(`#post_${lastPostId}`).trigger('mouseover'); - cy.get(`#${location}_reaction_${lastPostId}`).click({force: true}); - }); - } + clickPostHeaderItem(postId, location, 'reaction'); }); /** @@ -313,15 +290,7 @@ Cypress.Commands.add('clickPostReactionIcon', (postId, location = 'CENTER') => { * @param {String} location - as 'CENTER', 'SEARCH' */ Cypress.Commands.add('clickPostCommentIcon', (postId, location = 'CENTER') => { - if (postId) { - cy.get(`#post_${postId}`).trigger('mouseover'); - cy.get(`#${location}_commentIcon_${postId}`).click({force: true}); - } else { - cy.getLastPostId().then((lastPostId) => { - cy.get(`#post_${lastPostId}`).trigger('mouseover'); - cy.get(`#${location}_commentIcon_${lastPostId}`).click({force: true}); - }); - } + clickPostHeaderItem(postId, location, 'commentIcon'); }); // Close RHS by clicking close button