[MM-13074] Render text when named emoji does not match with the existing custom emojis (#2371)

* render text when named emoji does not match with the existing custom emojis

* added more test case

app/components/emoji/index.js

@@ -10,6 +10,7 @@ import {Client4} from 'mattermost-redux/client';
 import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
 
 import {EmojiIndicesByAlias, Emojis} from 'app/utils/emojis';
+import {doesMatchNamedEmoji} from 'app/utils/emoji_utils';
 
 import Emoji from './emoji';
 
@@ -29,6 +30,7 @@ function mapStateToProps(state, ownProps) {
         isCustomEmoji = true;
     } else {
         displayTextOnly = state.entities.emojis.nonExistentEmoji.has(emojiName) ||
+            (doesMatchNamedEmoji(`:${emojiName}:`) && !customEmojis.has(emojiName)) ||
             getConfig(state).EnableCustomEmoji !== 'true' ||
             getCurrentUserId(state) === '' ||
             !isMinimumServerVersion(Client4.getServerVersion(), 4, 7);

app/utils/emoji_utils.js

@@ -58,8 +58,7 @@ export function hasEmojisOnly(message, customEmojis) {
 
     let emojiCount = 0;
     for (const chunk of chunks) {
-        const matchNamedEmoji = chunk.match(RE_NAMED_EMOJI);
-        if (matchNamedEmoji && matchNamedEmoji[0] === chunk) {
+        if (doesMatchNamedEmoji(chunk)) {
             const emojiName = chunk.substring(1, chunk.length - 1);
             if (EmojiIndicesByAlias.has(emojiName)) {
                 emojiCount++;
@@ -91,3 +90,13 @@ export function hasEmojisOnly(message, customEmojis) {
         shouldRenderJumboEmoji: emojiCount > 0 && emojiCount <= MAX_JUMBO_EMOJIS,
     };
 }
+
+export function doesMatchNamedEmoji(emojiName) {
+    const match = emojiName.match(RE_NAMED_EMOJI);
+
+    if (match && match[0] === emojiName) {
+        return true;
+    }
+
+    return false;
+}

app/utils/emoji_utils.test.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {hasEmojisOnly} from './emoji_utils';
+import {doesMatchNamedEmoji, hasEmojisOnly} from './emoji_utils';
 
 describe('hasEmojisOnly with named emojis', () => {
     const testCases = [{
@@ -218,3 +218,40 @@ describe('hasEmojisOnly with empty and mixed emojis', () => {
         });
     }
 });
+
+describe('doesMatchNamedEmoji', () => {
+    const testCases = [{
+        input: ':named_emoji:',
+        output: true,
+    }, {
+        input: 'named_emoji',
+        output: false,
+    }, {
+        input: ':named_emoji',
+        output: false,
+    }, {
+        input: 'named_emoji:',
+        output: false,
+    }, {
+        input: '::named_emoji:',
+        output: false,
+    }, {
+        input: 'named emoji',
+        output: false,
+    }, {
+        input: ':named emoji:',
+        output: false,
+    }, {
+        input: ':named_emoji:!',
+        output: false,
+    }, {
+        input: ':named_emoji:aa',
+        output: false,
+    }];
+
+    for (const testCase of testCases) {
+        it(`test for - ${testCase.input}`, () => {
+            expect(doesMatchNamedEmoji(testCase.input)).toEqual(testCase.output);
+        });
+    }
+});