Changed named emoticons to not require surrounding whitespace and added unit tests (#3009)

webapp/tests/emoticons.test.jsx

@@ -0,0 +1,44 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as Emoticons from 'utils/emoticons.jsx';
+
+describe('Emoticons', function() {
+    this.timeout(100000);
+
+    it('handleEmoticons', function(done) {
+        assert.equal(
+            Emoticons.handleEmoticons(':goat: :dash:', new Map()),
+            'MM_EMOTICON0 MM_EMOTICON1',
+            'should replace emoticons with tokens'
+        );
+
+        assert.equal(
+            Emoticons.handleEmoticons(':goat::dash:', new Map()),
+            'MM_EMOTICON0MM_EMOTICON1',
+            'should replace emoticons not separated by whitespace'
+        );
+
+        assert.equal(
+            Emoticons.handleEmoticons('/:goat:..:dash:)', new Map()),
+            '/MM_EMOTICON0..MM_EMOTICON1)',
+            'should replace emoticons separated by punctuation'
+        );
+
+        assert.equal(
+            Emoticons.handleEmoticons('asdf:goat:asdf:dash:asdf', new Map()),
+            'asdfMM_EMOTICON0asdfMM_EMOTICON1asdf',
+            'should replace emoticons separated by text'
+        );
+
+        assert.equal(
+            Emoticons.handleEmoticons(':asdf: :goat : : dash:', new Map()),
+            ':asdf: :goat : : dash:',
+            'shouldn\'t replace invalid emoticons'
+        );
+
+        done();
+    });
+});

webapp/utils/emoticons.jsx

@@ -1,8 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
-
 import Constants from './constants.jsx';
 import emojis from './emoji.json';
 
@@ -134,7 +132,7 @@ export function getEmoticonsByCodePoint() {
 export function handleEmoticons(text, tokens) {
     let output = text;
 
-    function replaceEmoticonWithToken(fullMatch, prefix, matchText, name) {
+    function replaceEmoticonWithToken(fullMatch, matchText, name) {
         if (getEmoticonsByName().has(name)) {
             const index = tokens.size;
             const alias = `MM_EMOTICON${index}`;
@@ -145,19 +143,23 @@ export function handleEmoticons(text, tokens) {
                 originalText: fullMatch
             });
 
-            return prefix + alias;
+            return alias;
         }
 
         return fullMatch;
     }
 
-    output = output.replace(/(^|\s)(:([a-zA-Z0-9_-]+):)(?=$|\s)/g, (fullMatch, prefix, matchText, name) => replaceEmoticonWithToken(fullMatch, prefix, matchText, name));
+    // match named emoticons like :goat:
+    output = output.replace(/(:([a-zA-Z0-9_-]+):)/g, (fullMatch, matchText, name) => replaceEmoticonWithToken(fullMatch, matchText, name));
+
+    // match text smilies like :D
+    for (const name of Object.keys(emoticonPatterns)) {
+        const pattern = emoticonPatterns[name];
 
-    $.each(emoticonPatterns, (name, pattern) => {
         // this might look a bit funny, but since the name isn't contained in the actual match
         // like with the named emoticons, we need to add it in manually
-        output = output.replace(pattern, (fullMatch, prefix, matchText) => replaceEmoticonWithToken(fullMatch, prefix, matchText, name));
+        output = output.replace(pattern, (fullMatch, matchText) => replaceEmoticonWithToken(fullMatch, matchText, name));
-    });
+    }
 
     return output;
 }