mirror of
https://github.com/hanzoai/team.git
synced 2026-09-30 01:57:35 +00:00
Harrison HealeyandGitHub
b00ac0e0eb
* Convert EmojiPickerOverlay to functional component * Convert EmojiPickerTabs to functional component * Extract AddReactionButton from ReactionList This is so that I can make part of it functional without rewriting the whole thing. * Convert PostReaction to functional component * Add general version of useEmojiPicker and use for AddReactionButton * Rename returned showEmojiPicker to emojiPickerOpen * Add test for AddReactionButton * Move showEmojiPicker state out of useEmojiPicker I hoped to avoid this by just having the hook return the show state, but unfortunately, too many of the existing places rely on controlling the state themselves * Change PostReaction to use useEmojiPicker I ran into some trouble with this getting the hover state to properly disappear from the PostComponent when clicking out of the picker. That seems to be a downside of the browser's mouseenter/mouseleave not handling cases where the component is covered up. It doesn't work 100%, but it works at least as well as master by disabling pointer-events to the FloatingOverlay (which I also think we could probably remove since it's supposed to just be for darkening the backdrop behind the picker, but it ended up being helpful for setting the z-index on mobile). * Change AdvancedTextEditor to use new useEmojiPicker I renamed its version of useEmojiPicker to useEditorEmojiPicker since it still contains information about how to position the emoji or gifs in the post text. * Convert EditPost to use useEmojiPicker * Convert CreateModalNameInput to use useEmoijPicker * Convert CustomStatusModal to use useEmojiPicker * Remove EmojiPickerOverlay and cleanup related code * Remove unneeded translation string * asdf Attempting to fix E2E test * Improve how useEmojiPicker positions itself to stay on screen more * Add offset between Emoji Picker and reference * Add horizontallyWithin middleware and use it to right-align the emoji picker in the post textbox
222 lines
8.3 KiB
JavaScript
222 lines
8.3 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
// ***************************************************************
|
|
// - [#] indicates a test step (e.g. # Go to a page)
|
|
// - [*] indicates an assertion (e.g. * Check the title)
|
|
// - Use element ID when selecting an element. Create one if none.
|
|
// ***************************************************************
|
|
|
|
// Stage: @prod
|
|
// Group: @channels @messaging
|
|
|
|
import * as TIMEOUTS from '../../../fixtures/timeouts';
|
|
|
|
describe('Edit Message', () => {
|
|
let offTopicUrl;
|
|
|
|
before(() => {
|
|
// # Login as test user
|
|
cy.apiInitSetup({loginAfter: true}).then((out) => {
|
|
offTopicUrl = out.offTopicUrl;
|
|
});
|
|
});
|
|
|
|
beforeEach(() => {
|
|
// # Visit town-square
|
|
cy.visit(offTopicUrl);
|
|
});
|
|
|
|
it('MM-T121 Escape should not close modal when an autocomplete drop down is in use', () => {
|
|
// # Post a message
|
|
cy.postMessage('Hello World!');
|
|
|
|
// # Hit the up arrow to open the "edit modal"
|
|
cy.uiGetPostTextBox().type('{uparrow}');
|
|
|
|
// # In the modal type @
|
|
cy.get('#edit_textbox').type(' @');
|
|
|
|
// * Assert user autocomplete is visible
|
|
cy.get('#suggestionList').should('be.visible');
|
|
|
|
// # Press the escape key
|
|
cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{esc}');
|
|
|
|
// * Check if the textbox contains expected text
|
|
cy.get('#edit_textbox').should('have.value', 'Hello World! @');
|
|
|
|
// * Assert user autocomplete is not visible
|
|
cy.get('#suggestionList').should('not.exist');
|
|
|
|
// # In the modal type ~
|
|
cy.get('#edit_textbox').type(' ~');
|
|
|
|
// * Assert channel autocomplete is visible
|
|
cy.get('#suggestionList').should('be.visible');
|
|
|
|
// # Press the escape key
|
|
cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).type('{esc}');
|
|
|
|
// * Check if the textbox contains expected text
|
|
cy.get('#edit_textbox').should('have.value', 'Hello World! @ ~');
|
|
|
|
// * Assert channel autocomplete is not visible
|
|
cy.get('#suggestionList').should('not.exist');
|
|
|
|
cy.wait(TIMEOUTS.HALF_SEC);
|
|
|
|
// # In the modal click the emoji picker icon
|
|
cy.get('div.post-edit__container button#emojiPickerButton').click();
|
|
|
|
// * Assert emoji picker is visible
|
|
cy.get('#emojiPicker').should('be.visible');
|
|
|
|
// * Press the escape key
|
|
cy.get('#emojiPickerSearch').wait(TIMEOUTS.HALF_SEC).type('{esc}');
|
|
|
|
// * Assert emoji picker is not visible
|
|
cy.get('#emojiPicker').should('not.exist');
|
|
});
|
|
|
|
it('MM-T102 Timestamp on edited post shows original post time', () => {
|
|
// # Post a message
|
|
cy.postMessage('Checking timestamp');
|
|
|
|
cy.getLastPostId().then((postId) => {
|
|
// # Mouseover post to display the timestamp
|
|
cy.get(`#post_${postId}`).trigger('mouseover');
|
|
|
|
cy.get(`#CENTER_time_${postId}`).find('time').invoke('attr', 'dateTime').then((originalTimeStamp) => {
|
|
// # Click dot menu
|
|
cy.clickPostDotMenu(postId);
|
|
|
|
// # Click the edit button
|
|
cy.get(`#edit_post_${postId}`).click();
|
|
|
|
// # Edit the post
|
|
cy.get('#edit_textbox').type('Some text {enter}', {delay: 100});
|
|
|
|
// # Mouseover the post again
|
|
cy.get(`#post_${postId}`).trigger('mouseover');
|
|
|
|
// * Current post timestamp should have not been changed by edition
|
|
cy.get(`#CENTER_time_${postId}`).find('time').should('have.attr', 'dateTime').and('equal', originalTimeStamp);
|
|
|
|
// # Open RHS by clicking the post comment icon
|
|
cy.clickPostCommentIcon(postId);
|
|
|
|
// * Check that the RHS is open
|
|
cy.get('#rhsContainer').should('be.visible');
|
|
|
|
// * Check that the RHS timeStamp equals the original post timeStamp
|
|
cy.get(`#CENTER_time_${postId}`).find('time').invoke('attr', 'dateTime').should('equal', originalTimeStamp);
|
|
});
|
|
});
|
|
});
|
|
|
|
it('MM-T97 Open edit modal immediately after making a post', () => {
|
|
// # Enter first message
|
|
const firstMessage = 'Hello';
|
|
cy.postMessage(firstMessage);
|
|
|
|
// * Verify first message is sent and not pending
|
|
cy.getLastPostId().then((postId) => {
|
|
const postText = `#postMessageText_${postId}`;
|
|
cy.get(postText).should('have.text', firstMessage);
|
|
});
|
|
|
|
// # Enter second message
|
|
const secondMessage = 'World!';
|
|
cy.postMessage(secondMessage);
|
|
|
|
// * Verify second message is sent and not pending
|
|
cy.getLastPostId().then((postId) => {
|
|
const postText = `#postMessageText_${postId}`;
|
|
cy.get(postText).should('have.text', secondMessage);
|
|
|
|
// # Edit the last post
|
|
cy.uiGetPostTextBox().type('{uparrow}');
|
|
|
|
// * Edit Post Input should appear, and edit the post
|
|
cy.get('#edit_textbox').should('be.visible');
|
|
cy.get('#edit_textbox').should('have.text', secondMessage).type(' Another new message{enter}', {delay: 100});
|
|
cy.get('#edit_textbox').should('not.exist');
|
|
|
|
// * Check the second post and verify that it contains new edited message.
|
|
cy.get(postText).should('have.text', `${secondMessage} Another new message Edited`);
|
|
});
|
|
});
|
|
|
|
it('MM-T5416 should discard any changes made after cancelling the edit and opening the edit textbox again should display the original message', () => {
|
|
const message = 'World!';
|
|
cy.postMessage(message);
|
|
|
|
// * Verify message is sent and not pending
|
|
cy.getLastPostId().then((postId) => {
|
|
const postText = `#postMessageText_${postId}`;
|
|
cy.get(postText).should('have.text', message);
|
|
|
|
// # Open edit textbox
|
|
cy.uiGetPostTextBox().type('{uparrow}');
|
|
|
|
// * Edit Post Input should appear, and edit the post
|
|
cy.get('#edit_textbox').should('be.visible');
|
|
|
|
// * Press the escape key to cancel
|
|
cy.get('#edit_textbox').should('have.text', message).type(' Another new message{esc}', {delay: 100});
|
|
cy.get('#edit_textbox').should('not.exist');
|
|
|
|
// * Check that the message wasn't edited
|
|
cy.get(postText).should('have.text', message);
|
|
});
|
|
|
|
cy.getLastPostId().then((postId) => {
|
|
const postText = `#postMessageText_${postId}`;
|
|
cy.get(postText).should('have.text', message);
|
|
|
|
// # Open edit textbox again
|
|
cy.uiGetPostTextBox().type('{uparrow}');
|
|
|
|
// * Edit Post Input should appear, and edit the post
|
|
cy.get('#edit_textbox').should('be.visible');
|
|
|
|
// * Opening the edit textbox again after previously cancelling the edit should contain the original message.
|
|
cy.get('#edit_textbox').should('have.text', message);
|
|
});
|
|
});
|
|
|
|
it('MM-T121_2 @mention in edit post should show warning, Editing this message with an @mention will not notify the recipient.', () => {
|
|
// # Post a message
|
|
cy.postMessage('Hello World!');
|
|
|
|
// # Hit the up arrow to open the "editor"
|
|
cy.uiGetPostTextBox().type('{uparrow}');
|
|
|
|
// # In the modal type @
|
|
cy.get('#edit_textbox').type(' @user');
|
|
|
|
// # Press the enter key
|
|
cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}', {delay: 100});
|
|
|
|
// * Check if the textbox contains expected text
|
|
cy.get('.post-body__info').should('be.visible');
|
|
cy.get('.post-body__info').contains('span', "Editing this message with an '@mention' will not notify the recipient.");
|
|
|
|
// # Press the escape key
|
|
cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}', {delay: 100});
|
|
|
|
// # Open the RHS
|
|
cy.getLastPostId().then((postId) => {
|
|
cy.clickPostCommentIcon(postId);
|
|
});
|
|
|
|
// # Hit the up arrow to open the "editor"
|
|
cy.uiGetPostTextBox().type('{uparrow}');
|
|
|
|
// * Check if the textbox contains expected text
|
|
cy.get('.post-body__info').should('be.visible');
|
|
cy.get('.post-body__info').contains('span', "Editing this message with an '@mention' will not notify the recipient.");
|
|
});
|
|
});
|