[GH-12281] UI Automation: Write an automated test using Cypress for "…

…Delete a Message during reply, other user sees `(message deleted)`" (#4257)

* Write an automated test using Cypress for "Delete a Message during reply, other user sees `(message deleted)`"

* Fix lint errors

* Create new ID for post-right-comments-container and use it on tests

* Fix lint error

* Change Id to rhsPostList

components/__snapshots__/post_deleted_modal.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`components/ChannelInfoModal should match snapshot when modal is not sho
  autoFocus={true}
  backdrop={true}
  bsClass="modal"
+ data-testid="postDeletedModal"
  dialogClassName="a11y__modal"
  dialogComponentClass={[Function]}
  enforceFocus={true}
@@ -65,6 +66,7 @@ exports[`components/ChannelInfoModal should match snapshot when modal is not sho
  <button
  autoFocus={true}
  className="btn btn-primary"
+ data-testid="postDeletedModalOkButton"
  onClick={[Function]}
  type="button"
  >
@@ -85,6 +87,7 @@ exports[`components/ChannelInfoModal should match snapshot when modal is showing
  autoFocus={true}
  backdrop={true}
  bsClass="modal"
+ data-testid="postDeletedModal"
  dialogClassName="a11y__modal"
  dialogComponentClass={[Function]}
  enforceFocus={true}
@@ -143,6 +146,7 @@ exports[`components/ChannelInfoModal should match snapshot when modal is showing
  <button
  autoFocus={true}
  className="btn btn-primary"
+ data-testid="postDeletedModalOkButton"
  onClick={[Function]}
  type="button"
  >

components/post_deleted_modal.tsx

@@ -23,6 +23,7 @@ export default class PostDeletedModal extends React.Component<Props> {
  onHide={this.props.onHide}
  role='dialog'
  aria-labelledby='postDeletedModalLabel'
+ data-testid='postDeletedModal'
  >
  <Modal.Header closeButton={true}>
  <Modal.Title
@@ -49,6 +50,7 @@ export default class PostDeletedModal extends React.Component<Props> {
  className='btn btn-primary'
  autoFocus={true}
  onClick={this.props.onHide}
+ data-testid='postDeletedModalOkButton'
  >
  <FormattedMessage
  id='post_delete.okay'
@@ -59,4 +61,4 @@ export default class PostDeletedModal extends React.Component<Props> {
  </Modal>
  );
  }
-}
+}

components/rhs_thread/__snapshots__/rhs_thread.test.jsx.snap

@@ -71,6 +71,7 @@ exports[`components/RhsThread should match snapshot 1`] = `
  />
  <div
  className="post-right-comments-container"
+ id="rhsPostList"
  />
  </div>
  <div

components/rhs_thread/rhs_thread.jsx

@@ -394,6 +394,7 @@ export default class RhsThread extends React.Component {
  <div
  ref='rhspostlist'
  className='post-right-comments-container'
+ id='rhsPostList'
  >
  {commentsLists}
  </div>

e2e/cypress/integration/messaging/message_deleted_on_reply_spec.js

@@ -0,0 +1,84 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [number] indicates a test step (e.g. 1. Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+import * as TIMEOUTS from '../../fixtures/timeouts';
+import users from '../../fixtures/users.json';
+
+const sysadmin = users.sysadmin;
+let townsquareChannelId;
+
+describe('Messaging', () => {
+ before(() => {
+ // # Login
+ cy.apiLogin('user-1');
+
+ // # Navigate to the channel and get the channelId
+ cy.visit('/ad-1/channels/town-square');
+ cy.getCurrentChannelId().then((id) => {
+ townsquareChannelId = id;
+ });
+ });
+
+ it('M18693-Delete a Message during reply, other user sees (message deleted)', () => {
+ // # Type message to use
+ cy.postMessageAs({sender: sysadmin, message: 'aaa', channelId: townsquareChannelId});
+
+ // # Click Reply button
+ cy.clickPostCommentIcon();
+
+ // # Write message on reply box
+ cy.get('#reply_textbox').type('123');
+
+ // # Remove message from the other user
+ cy.getLastPostId().as('postId').then((postId) => {
+ cy.externalRequest({user: sysadmin, method: 'DELETE', path: `posts/${postId}`});
+ });
+
+ // # Wait for the message to be deleted and hit enter
+ cy.wait(TIMEOUTS.TINY);
+ cy.get('#reply_textbox').type('{enter}');
+
+ // * Post Deleted Modal should be visible
+ cy.findAllByTestId('postDeletedModal').should('be.visible');
+
+ // # Close the modal
+ cy.findAllByTestId('postDeletedModalOkButton').click();
+
+ // * The message should not have been sent
+ cy.get('#rhsPostList').should('be.empty');
+
+ // * Textbox should still have the draft message
+ cy.get('#reply_textbox').should('contain', '123');
+
+ // # Try to post the message one more time pressing enter
+ cy.get('#reply_textbox').type('{enter}');
+
+ // * The modal should have appeared again
+ cy.findAllByTestId('postDeletedModal').should('be.visible');
+
+ // # Close the modal by hitting the OK button
+ cy.findAllByTestId('postDeletedModalOkButton').click();
+
+ // * The message should not have been sent
+ cy.get('#rhsPostList').should('be.empty');
+
+ // * Textbox should still have the draft message
+ cy.get('#reply_textbox').should('contain', '123');
+
+ // # Change to the other user and go to Town Square
+ cy.apiLogin('sysadmin');
+ cy.visit('/ad-1/channels/town-square');
+ cy.wait(TIMEOUTS.SMALL);
+
+ // * Post should not exist
+ cy.get('@postId').then((postId) => {
+ cy.get(`#post_${postId}`).should('not.exist');
+ });
+ });
+});