MM-19834 Fixed direct mentions highlight color (#3572)

* MM-19834 Fixed direct mentions highlight color

Updated the AtMention to check if it will be highlighted before applying it's color. The highlight function was applying it's color before the AtMention color, so it was being overwritten.

* MM-19834 Start Unit Test

* MM-19834 Added Unit Tests

Added unit tests for the rendering of highlighted/non-highlighted displayname.

app/components/at_mention/__snapshots__/at_mention.test.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtMention should match snapshot, no highlight 1`] = `
+<Text>
+  @John.Smith
+</Text>
+`;
+
+exports[`AtMention should match snapshot, with highlight 1`] = `
+<Text
+  onLongPress={[Function]}
+  onPress={[Function]}
+>
+  <Text
+    style={null}
+  >
+    @John.Smith
+  </Text>
+  
+</Text>
+`;
+
+exports[`AtMention should match snapshot, without highlight 1`] = `
+<Text
+  onLongPress={[Function]}
+  onPress={[Function]}
+>
+  <Text
+    style={
+      Object {
+        "color": "#ff0000",
+      }
+    }
+  >
+    @Victor.Welch
+  </Text>
+  
+</Text>
+`;

app/components/at_mention/at_mention.js

@@ -16,6 +16,7 @@ import {goToScreen} from 'app/actions/navigation';
 export default class AtMention extends React.PureComponent {
     static propTypes = {
         isSearchResult: PropTypes.bool,
+        mentionKeys: PropTypes.array.isRequired,
         mentionName: PropTypes.string.isRequired,
         mentionStyle: CustomPropTypes.Style,
         onPostPress: PropTypes.func,
@@ -111,7 +112,7 @@ export default class AtMention extends React.PureComponent {
     };
 
     render() {
-        const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle} = this.props;
+        const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys} = this.props;
         const {user} = this.state;
 
         if (!user.username) {
@@ -119,6 +120,7 @@ export default class AtMention extends React.PureComponent {
         }
 
         const suffix = this.props.mentionName.substring(user.username.length);
+        const highlighted = mentionKeys.some((item) => item.key === user.username);
 
         return (
             <Text
@@ -126,7 +128,7 @@ export default class AtMention extends React.PureComponent {
                 onPress={isSearchResult ? onPostPress : this.goToUserProfile}
                 onLongPress={this.handleLongPress}
             >
-                <Text style={mentionStyle}>
+                <Text style={highlighted ? null : mentionStyle}>
                     {'@' + displayUsername(user, teammateNameDisplay)}
                 </Text>
                 {suffix}

app/components/at_mention/at_mention.test.js

@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import AtMention from './at_mention.js';
+
+describe('AtMention', () => {
+    const baseProps = {
+        usersByUsername: {},
+        mentionKeys: [{key: 'John.Smith'}, {key: 'Jane.Doe'}],
+        teammateNameDisplay: '',
+        mentionName: 'John.Smith',
+        mentionStyle: {color: '#ff0000'},
+        theme: {},
+    };
+
+    test('should match snapshot, no highlight', () => {
+        const wrapper = shallow(
+            <AtMention {...baseProps}/>
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, with highlight', () => {
+        const wrapper = shallow(
+            <AtMention {...baseProps}/>
+        );
+
+        wrapper.setState({user: {username: 'John.Smith'}});
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, without highlight', () => {
+        const wrapper = shallow(
+            <AtMention {...baseProps}/>
+        );
+
+        wrapper.setState({user: {username: 'Victor.Welch'}});
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});

app/components/at_mention/index.js

@@ -3,7 +3,7 @@
 
 import {connect} from 'react-redux';
 
-import {getUsersByUsername} from 'mattermost-redux/selectors/entities/users';
+import {getUsersByUsername, getCurrentUserMentionKeys} from 'mattermost-redux/selectors/entities/users';
 
 import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
@@ -13,6 +13,7 @@ function mapStateToProps(state) {
     return {
         theme: getTheme(state),
         usersByUsername: getUsersByUsername(state),
+        mentionKeys: getCurrentUserMentionKeys(state),
         teammateNameDisplay: getTeammateNameDisplaySetting(state),
     };
 }