Mattermost-server: Write an automated test using Cypress for "Selected options with long usernames are not cut off in the RHS"

[saturninoabril]

See our end-to-end testing documentation for reference.

Title: Selected options with long usernames are not cut off in the RHS

Steps:

1. On a message attachment menu that provides for username selection, click on dropdown to the right of the menu
2. Select an option of a username that is quite long
3. Click on reply to the right of the original integration message posted

Expected:

• Option is displayed in the text box
• Ephemeral message posts (only visible to you) showing the selection you have made
• RHS opens
• Username selected displays properly (truncated) and is not just cut off

Test Key: IM21038

Test Folder: /cypress/integration/interactive_menu
Test code arrangement:

describe('Interactive Menu', () => {
    it('IM21038 - Selected options with long usernames are not cut off in the RHS', () => {
        // code
    });
});

Note:

• see interactive_menu/basic_options_spec.js for related test
• refer to docs for more info about Interactive Messages: Buttons and Menus

Jira ticket: MM-21038

---

If you're interested, please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

[M-ZubairAhmed]

Question : After creating a new user with very long username, how do i make webhook request for users,

following this from docs _https://docs.mattermost.com/developer/interactive-messages.html#message-menus-for-users_

[jasonblais]

@M-ZubairAhmed Are you familiar with Postman or another tool to make web requests?

As long as you send a JSON included in the linked doc, you'll be able to test the UI functionality.

Let me know if the above helps, happy to share more concrete steps if you're less familiar with this area. :)

[M-ZubairAhmed]

thank you @jasonblais , let me try that

[saturninoabril]

Thanks @M-ZubairAhmed! In Cypress, you may have it as:

const userOptions = getMessageMenusPayload({dataSource: 'users'});
cy.postIncomingWebhook({url: incomingWebhook.url, data: userOptions})

[M-ZubairAhmed]

As per API specifications, longest username can be of lenght 22, which i created in the above screen shot. But as per the ticket username should be truncated which is not the case as shown above. Is this how it should be ?

[jasonblais]

cc @saturninoabril on above after the holidays :)

[saturninoabril]

Oh thanks for clarifying. It's the inconsistency between the webapp (22 limit - old implementation) and the server (64 limit - with APIv4 intro). I'll bring it up on our next dev meeting as I couldn't remember if we talked about it before.
For Cypress testing, you may create long username directly via API by using cy.createNewUser. One good example is at https://github.com/mattermost/mattermost-webapp/blob/master/e2e/cypress/integration/channel/channel_name_tooltips_spec.js#L105-L112.

[M-ZubairAhmed]

thank you @saturninoabril . I will wait for further instructions
Yes i have been created long user name with that command itself, here is the WIP PR
https://github.com/mattermost/mattermost-webapp/pull/4594/files