[MM-13697] UI Automation: Write an automated test using Cypress for "…

…Edit post that has attachment, paste text in middle" (#2397)

* add e2e post and edit

* add edit button id

* update snapshot,
wrapping edit message,
add wait to ensure post already created

* fixing setup.js

* update snapshots

components/dot_menu/dot_menu.jsx

@@ -318,6 +318,7 @@ class DotMenu extends Component {
  menuItems.push(
  <DotMenuItem
  key={'edit'}
+ id={`edit_post_${this.props.post.id}`}
  menuItemText={
  <FormattedMessage
  id={'post_info.edit'}

components/dot_menu/dot_menu_item.jsx

@@ -11,6 +11,7 @@ export default class DotMenuItem extends React.PureComponent {
  PropTypes.element,
  PropTypes.string,
  ]),
+ id: PropTypes.string,
  };
 
  render() {
@@ -19,6 +20,7 @@ export default class DotMenuItem extends React.PureComponent {
  role='presentation'
  >
  <button
+ id={this.props.id}
  className='style--none'
  role='menuitem'
  onClick={this.props.handleMenuItemActivated}

components/edit_post_modal/__snapshots__/edit_post_modal.test.jsx.snap

@@ -116,6 +116,7 @@ exports[`components/EditPostModal should disable the button on not canDeletePost
  <button
  className="btn btn-primary"
  disabled={true}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -245,6 +246,7 @@ exports[`components/EditPostModal should disable the button on not canEditPost a
  <button
  className="btn btn-primary"
  disabled={true}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -374,6 +376,7 @@ exports[`components/EditPostModal should match with default config 1`] = `
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -482,6 +485,7 @@ exports[`components/EditPostModal should match without emoji picker 1`] = `
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -611,6 +615,7 @@ exports[`components/EditPostModal should not disable the button on not canDelete
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -740,6 +745,7 @@ exports[`components/EditPostModal should not disable the button on not canEditPo
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -869,6 +875,7 @@ exports[`components/EditPostModal should not disable the save button on not canD
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -998,6 +1005,7 @@ exports[`components/EditPostModal should show emojis on emojis click 1`] = `
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >
@@ -1133,6 +1141,7 @@ exports[`components/EditPostModal should show errors when it is set in the state
  <button
  className="btn btn-primary"
  disabled={false}
+ id="editButton"
  onClick={[Function]}
  type="button"
  >

components/edit_post_modal/edit_post_modal.jsx

@@ -355,6 +355,7 @@ export default class EditPostModal extends React.PureComponent {
  />
  </button>
  <button
+ id='editButton'
  type='button'
  className='btn btn-primary'
  disabled={this.isSaveDisabled()}

components/signup/signup_controller/__snapshots__/signup_controller.test.jsx.snap

@@ -132,7 +132,7 @@ exports[`components/SignupController should match snapshot for all signup option
  className="btn btn-custom-login btn--full email"
  key="email"
  replace={false}
- to="/signup_emailundefined"
+ to="/signup_email"
  >
  <span>
  <span
@@ -148,7 +148,7 @@ exports[`components/SignupController should match snapshot for all signup option
  </Link>
  <a
  className="btn btn-custom-login btn--full gitlab"
- href="/oauth/gitlab/signupundefined"
+ href="/oauth/gitlab/signup"
  key="gitlab"
  >
  <span>
@@ -235,7 +235,7 @@ exports[`components/SignupController should match snapshot for all signup option
  className="btn btn-custom-login btn--full email"
  key="email"
  replace={false}
- to="/signup_emailundefined"
+ to="/signup_email"
  >
  <span>
  <span
@@ -251,7 +251,7 @@ exports[`components/SignupController should match snapshot for all signup option
  </Link>
  <a
  className="btn btn-custom-login btn--full gitlab"
- href="/oauth/gitlab/signupundefined"
+ href="/oauth/gitlab/signup"
  key="gitlab"
  >
  <span>
@@ -269,7 +269,7 @@ exports[`components/SignupController should match snapshot for all signup option
  </a>
  <a
  className="btn btn-custom-login btn--full google"
- href="/oauth/google/signupundefined"
+ href="/oauth/google/signup"
  key="google"
  >
  <span>
@@ -287,7 +287,7 @@ exports[`components/SignupController should match snapshot for all signup option
  </a>
  <a
  className="btn btn-custom-login btn--full office365"
- href="/oauth/office365/signupundefined"
+ href="/oauth/office365/signup"
  key="office365"
  >
  <span>
@@ -327,7 +327,7 @@ exports[`components/SignupController should match snapshot for all signup option
  className="btn btn-custom-login btn--full saml"
  key="saml"
  replace={false}
- to="/login/sso/samlundefined?action=signup"
+ to="/login/sso/saml?action=signup"
  >
  <span>
  <span

cypress/integration/channel/message_edit_post_with_attachment_spec.js

@@ -0,0 +1,64 @@
+// 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.
+// ***************************************************************
+
+/* eslint max-nested-callbacks: ["error", 4] */
+
+describe('MM-13697 Edit Post with attachment', () => {
+ before(() => {
+ // 1. Login and go to /
+ cy.login('user-1');
+ cy.visit('/');
+ });
+
+ it('Pasted text should be pasted where the cursor is', () => {
+ // 2. Got to a test channel on the side bar
+ cy.get('#sidebarItem_town-square').scrollIntoView();
+
+ // * Validate if the channel has been opened
+ cy.url().should('include', '/ad-1/channels/town-square');
+
+ // 3. Attach image
+ cy.uploadFile('#fileUploadButton input', '../fixtures/mattermost-icon.png', 'image/png');
+
+ // 4. Type 'This is sample text'
+ cy.get('#post_textbox').type('This is sample text');
+
+ // 5. Submit post
+ cy.get('#create_post').submit();
+
+ // 6. Waiting create post is done
+ cy.wait(500); // eslint-disable-line
+
+ // 7. Get last post ID
+ cy.getLastPostId().then((postID) => {
+ // 8. click dot menu button
+ cy.clickPostDotMenu();
+
+ // 9. click edit post
+ cy.get(`#edit_post_${postID}`).click();
+
+ cy.focused().then(($el) => {
+ // * Check if focus is set to "edit_textbox"
+ assert.equal($el[0].id, 'edit_textbox');
+
+ // 10. Edit message to 'This is sample add text'
+ cy.get('#edit_textbox').should('be.visible').type('{leftarrow}{leftarrow}{leftarrow}{leftarrow}add ');
+
+ // 11. Click button Edit
+ cy.get('#editButton').click();
+
+ // * Assert post message should contain 'This is sample add text'
+ cy.get(`#${postID}_message`).find('.post-message__text p').should('contain', 'This is sample add text');
+
+ // * Assert file attachment should still exist
+ cy.get(`#${postID}_message`).find('.file-view--single').should('be.visible');
+ });
+ });
+ });
+});

cypress/support/commands.js

@@ -100,6 +100,37 @@ Cypress.Commands.add('typeCmdOrCtrl', () => {
  cy.get('#post_textbox').type(cmdOrCtrl, {release: false});
 });
 
+/**
+ * Uploads a file to an input
+ * @memberOf Cypress.Chainable#
+ * @name upload_file
+ * @function
+ * @param {String} selector - element to target
+ * @param {String} fileUrl - The file url to upload
+ * @param {String} type - content type of the uploaded file
+ */
+
+/* eslint max-nested-callbacks: ["error", 4] */
+Cypress.Commands.add('uploadFile', (selector, fileUrl, type = '') => {
+ return cy.get(selector).then((subject) => {
+ return cy.
+ fixture(fileUrl, 'base64').
+ then(Cypress.Blob.base64StringToBlob).
+ then((blob) => {
+ return cy.window().then((win) => {
+ const el = subject[0];
+ const nameSegments = fileUrl.split('/');
+ const name = nameSegments[nameSegments.length - 1];
+ const testFile = new win.File([blob], name, {type});
+ const dataTransfer = new DataTransfer();
+ dataTransfer.items.add(testFile);
+ el.files = dataTransfer.files;
+ return subject;
+ });
+ });
+ });
+});
+
 function isMac() {
  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }

tests/setup.js

@@ -20,6 +20,7 @@ Object.defineProperty(window, 'location', {
  origin: 'http:https://localhost:8065',
  port: '8065',
  protocol: 'http:',
+ search: '',
  },
 });