Mattermost-server: Write an automated test using Cypress for "No Status on a System Message"

Created on 23 Apr 2019  路  16Comments  路  Source: mattermost/mattermost-server

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.


Notes: Jira ticket

Test Key: Mult15240 - No status on a system message
Test Group: Multi Team + DMs

Steps:

  1. Trigger a system message that wraps to a second line
  2. You can do this by editing a channel header to contain a long string of text

Expected:

  • System message should not have status indicator in standard or compact view

See our end-to-end testing documentation for reference - https://developers.mattermost.com/contribute/webapp/end-to-end-tests/

AreE2E Tests Easy Good First Issue Help Wanted PR Exists

Most helpful comment

@saturninoabril That makes much more sense! :smile: Thanks!

I actually already joined the community and just said hi to everyone in the Contributors channel :smiley_cat:

Yes, I would like to take this ticket.

All 16 comments

Starting to work on this but I have a few questions. I've never used Mattermost before so I'm not familiar with what system messages and status indicators are. Is the system message the tooltip that is displayed when you click on the channel header?

Hi @Jonany, thank you for working on this.

System message is an auto-generated post to a channel. Example is when a user is added to a channel -- see last message posted in the screenshot.
Screen Shot 2019-05-31 at 5 07 42 PM

System message doesn't have status indicator (pointed by red arrow) as compared to normal user with status indicator (green arrow) like online, away, etc...

I'm inviting you to join our community at https://community.mattermost.com, say hi to community and get a chance to know more about Mattermost.

Let me know if you'd like to grab this ticket so that others are aware that it's already taken.

@saturninoabril That makes much more sense! :smile: Thanks!

I actually already joined the community and just said hi to everyone in the Contributors channel :smiley_cat:

Yes, I would like to take this ticket.

Hey @Jonany,

How is your work going? Do you have questions?

Hi @hanzei,

I've been on vacation and had some trouble with my Linux install but I plan on submitting a pull request this week.

Great, looking forward to your PR!

If you have issues with the installation, feel free to ask for the on the Mattermost Community Server.

@saturninoabril The file is currently cypress/integration/onboarding/multi_team/no_status_on_system_message_spec.js. Should I change it to something like cypress/integration/multi_team/system_message_spec.js? Or add it to cypress/integration/channel/system_message_spec.js?

On https://community.mattermost.com/core/channels/developers the difference I noticed between user and system messages is that user messages have a <span class="status-wrapper" and system messages do not. However, on my test server both the user and system message have that span and I'm not seeing any other significant differences.

Thanks for asking @Jonany!
Re: folder, sounds good to me the cypress/integration/multi_team/system_message_spec.js.

Yup, that's the key difference but I'm seeing that too on my local test server.

@saturninoabril Interesting. My test server is also not displaying the Mattermost logo for the system message. Any idea what might be going on? My branch is up-to-date with Mattermost master.

mattermost_system_message_screenshot

Hmm, I'm don't know why but it's working fine on me. I'm also on latest master.

@saturninoabril in that case, I think I'll try a new fork.

@saturninoabril From what I can tell from /components/post_view/post/post.jsx (lines 176-183), the main difference between system posts and user posts is that system posts have the post--system class. The <span class="status-wrapper" is applied to both post types by the profile picture components/profile_picture.jsx.

I must be missing something. From the looks of this code from components/profile_picture.jsx the only difference is that the alt is empty on the system message. I also diffed the HTML from a system message and user message and there were no differences in the status section. However, the status SVG is visible on the user message and not visible on the system message.

    render() {
        if (this.props.userId) {
            return (
                <OverlayTrigger
                    ref='overlay'
                    trigger='click'
                    placement='right'
                    rootClose={true}
                    overlay={
                        <ProfilePopover
                            userId={this.props.userId}
                            src={this.props.src}
                            isBusy={this.props.isBusy}
                            hide={this.hideProfilePopover}
                            isRHS={this.props.isRHS}
                            hasMention={this.props.hasMention}
                        />
                    }
                >
                    <span className='status-wrapper'>
                        <img
                            className='more-modal__image rounded'
                            alt={`${this.props.username || 'user'} profile image`}
                            width={this.props.width}
                            height={this.props.width}
                            src={this.props.src}
                        />
                        <StatusIcon status={this.props.status}/>
                    </span>
                </OverlayTrigger>
            );
        }
        return (
            <span className='status-wrapper'>
                <img
                    className='more-modal__image rounded'
                    alt=''
                    width={this.props.width}
                    height={this.props.width}
                    src={this.props.src}
                />
                <StatusIcon status={this.props.status}/>
            </span>
        );
    }

Decided to check if the SVG that displays the status icon is visible.

Thanks @Jonany for your contribution!

Was this page helpful?
0 / 5 - 0 ratings