fix flaky E2E tests

.gitignore

@@ -13,3 +13,4 @@ mattermost-webapp.iml
 # disable folders generated by Cypress
 cypress/screenshots
 cypress/videos
+results

components/dot_menu/__snapshots__/dot_menu.test.jsx.snap

@@ -42,6 +42,7 @@ exports[`components/dot_menu/DotMenu should match snapshot, canDelete 1`] = `
  </OverlayTrigger>
  <Menu
  ariaLabel="Post extra options"
+ id="CENTER_dropdown_post_id_1"
  openLeft={true}
  openUp={false}
  >
@@ -150,6 +151,7 @@ exports[`components/dot_menu/DotMenu should match snapshot, on Center 1`] = `
  </OverlayTrigger>
  <Menu
  ariaLabel="Post extra options"
+ id="CENTER_dropdown_post_id_1"
  openLeft={true}
  openUp={false}
  >

components/dot_menu/dot_menu.jsx

@@ -252,6 +252,7 @@ export default class DotMenu extends Component {
  />
  </OverlayTrigger>
  <Menu
+ id={`${this.props.location}_dropdown_${this.props.post.id}`}
  openLeft={true}
  openUp={this.state.openUp}
  ref={this.refCallback}

cypress/integration/account_settings/display/channel_display_mode_spec.js

@@ -9,6 +9,8 @@
 
 describe('Account Settings > 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();

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

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

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

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', () => {
  });
  });
  });
-});
+});

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

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)');
  });
  });
  });
-});
+});

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');

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();
 

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.

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');
 

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');

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