PLT-5755: Infrastructure for Component Testing. (#5814)

This migrates the existing webapp tests to using Jest and Enzyme. The
infrastructure is put in place for React component testing, and a few
simple example component tests are implemented.

This also adds snapshot testing of components, coverage checking for the
webapp (although that is not yet integrated to Coveralls), and the
ability to run npm run test:watch to automatically re-run affected tests
when working on the webapp codebase.

6 files changed, 915 insertions, 0 deletions

diff --git a/webapp/tests/utils/emoticons.test.jsx b/webapp/tests/utils/emoticons.test.jsx
new file mode 100644
index 000000000..65848d2cc
--- /dev/null
+++ b/webapp/tests/utils/emoticons.test.jsx
@@ -0,0 +1,36 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import EmojiStore from 'stores/emoji_store.jsx';
+import * as Emoticons from 'utils/emoticons.jsx';
+
+describe('Emoticons', () => {
+    describe('handleEmoticons', () => {
+        const emojis = EmojiStore.getEmojis();
+
+        test('should replace emoticons with tokens', () => {
+            expect(Emoticons.handleEmoticons(':goat: :dash:', new Map(), emojis)).
+                toEqual('$MM_EMOTICON0 $MM_EMOTICON1');
+        });
+
+        test('should replace emoticons not separated by whitespace', () => {
+            expect(Emoticons.handleEmoticons(':goat::dash:', new Map(), emojis)).
+                toEqual('$MM_EMOTICON0$MM_EMOTICON1');
+        });
+
+        test('should replace emoticons separated by punctuation', () => {
+            expect(Emoticons.handleEmoticons('/:goat:..:dash:)', new Map(), emojis)).
+                toEqual('/$MM_EMOTICON0..$MM_EMOTICON1)');
+        });
+
+        test('should replace emoticons separated by text', () => {
+            expect(Emoticons.handleEmoticons('asdf:goat:asdf:dash:asdf', new Map(), emojis)).
+                toEqual('asdf$MM_EMOTICON0asdf$MM_EMOTICON1asdf');
+        });
+
+        test('shouldn\'t replace invalid emoticons', () => {
+            expect(Emoticons.handleEmoticons(':asdf: :goat : : dash:', new Map(), emojis)).
+                toEqual(':asdf: :goat : : dash:');
+        });
+    });
+});
diff --git a/webapp/tests/utils/formatting_at_mentions.test.jsx b/webapp/tests/utils/formatting_at_mentions.test.jsx
new file mode 100644
index 000000000..1216134f2
--- /dev/null
+++ b/webapp/tests/utils/formatting_at_mentions.test.jsx
@@ -0,0 +1,79 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as TextFormatting from 'utils/text_formatting.jsx';
+
+describe('TextFormatting.AtMentions', function() {
+    it('At mentions', function() {
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@user', new Map(), {user: {}}),
+            '$MM_ATMENTION0',
+            'should replace explicit mention with token'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('abc"@user"def', new Map(), {user: {}}),
+            'abc"$MM_ATMENTION0"def',
+            'should replace explicit mention surrounded by punctuation with token'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@user1 @user2', new Map(), {user1: {}, user2: {}}),
+            '$MM_ATMENTION0 $MM_ATMENTION1',
+            'should replace multiple explicit mentions with tokens'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}),
+            '$MM_ATMENTION0',
+            'should replace multiple explicit mentions containing punctuation with token'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}),
+            '$MM_ATMENTION0',
+            'should replace multiple explicit mentions containing valid punctuation with token'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@user.', new Map(), {user: {}}),
+            '$MM_ATMENTION0.',
+            'should replace explicit mention followed by period with token'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@user.', new Map(), {'user.': {}}),
+            '$MM_ATMENTION0',
+            'should replace explicit mention ending with period with token'
+        );
+    });
+
+    it('Implied at mentions', function() {
+        // PLT-4454 Assume users exist for things that look like at mentions until we support the new mention syntax
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@user', new Map(), {}),
+            '$MM_ATMENTION0',
+            'should imply user exists and replace mention with token'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('@user.', new Map(), {}),
+            '$MM_ATMENTION0.',
+            'should assume username doesn\'t end in punctuation'
+        );
+    });
+
+    it('Not at mentions', function() {
+        assert.equal(
+            TextFormatting.autolinkAtMentions('user@host', new Map(), {user: {}, host: {}}),
+            'user@host'
+        );
+
+        assert.equal(
+            TextFormatting.autolinkAtMentions('user@email.com', new Map(), {user: {}, email: {}}),
+            'user@email.com'
+        );
+    });
+});
diff --git a/webapp/tests/utils/formatting_hashtags.test.jsx b/webapp/tests/utils/formatting_hashtags.test.jsx
new file mode 100644
index 000000000..e1b382601
--- /dev/null
+++ b/webapp/tests/utils/formatting_hashtags.test.jsx
@@ -0,0 +1,200 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as TextFormatting from 'utils/text_formatting.jsx';
+
+describe('TextFormatting.Hashtags', function() {
+    it('Not hashtags', function(done) {
+        assert.equal(
+            TextFormatting.formatText('# hashtag').trim(),
+            '<h1 class="markdown__heading">hashtag</h1>'
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#ab').trim(),
+            '<p>#ab</p>'
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#123test').trim(),
+            '<p>#123test</p>'
+        );
+
+        done();
+    });
+
+    it('Hashtags', function(done) {
+        assert.equal(
+            TextFormatting.formatText('#test').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test'>#test</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test123').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test123'>#test123</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test-test').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test-test'>#test-test</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test_test').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test_test'>#test_test</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test.test').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test.test'>#test.test</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test1/#test2').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test1'>#test1</a>/<wbr /><a class='mention-link' href='#' data-hashtag='#test2'>#test2</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('(#test)').trim(),
+            "<p>(<a class='mention-link' href='#' data-hashtag='#test'>#test</a>)</p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test-').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test'>#test</a>-</p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test.').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test'>#test</a>.</p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('This is a sentence #test containing a hashtag').trim(),
+            "<p>This is a sentence <a class='mention-link' href='#' data-hashtag='#test'>#test</a> containing a hashtag</p>"
+        );
+
+        done();
+    });
+
+    it('Formatted hashtags', function(done) {
+        assert.equal(
+            TextFormatting.formatText('*#test*').trim(),
+            "<p><em><a class='mention-link' href='#' data-hashtag='#test'>#test</a></em></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('_#test_').trim(),
+            "<p><em><a class='mention-link' href='#' data-hashtag='#test'>#test</a></em></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('**#test**').trim(),
+            "<p><strong><a class='mention-link' href='#' data-hashtag='#test'>#test</a></strong></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('__#test__').trim(),
+            "<p><strong><a class='mention-link' href='#' data-hashtag='#test'>#test</a></strong></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('~~#test~~').trim(),
+            "<p><del><a class='mention-link' href='#' data-hashtag='#test'>#test</a></del></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('`#test`').trim(),
+            '<p>' +
+                '<span class="codespan__pre-wrap">' +
+                    '<code>' +
+                        '#test' +
+                    '</code>' +
+                '</span>' +
+            '</p>'
+        );
+
+        assert.equal(
+            TextFormatting.formatText('[this is a link #test](example.com)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">this is a link #test</a></p>'
+        );
+
+        done();
+    });
+
+    it('Searching for hashtags', function(done) {
+        assert.equal(
+            TextFormatting.formatText('#test', {searchTerm: 'test'}).trim(),
+            "<p><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#test'>#test</a></span></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test', {searchTerm: '#test'}).trim(),
+            "<p><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#test'>#test</a></span></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#foo/#bar', {searchTerm: '#foo'}).trim(),
+            "<p><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#foo'>#foo</a></span>/<wbr /><a class='mention-link' href='#' data-hashtag='#bar'>#bar</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#foo/#bar', {searchTerm: 'bar'}).trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#foo'>#foo</a>/<wbr /><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#bar'>#bar</a></span></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('not#test', {searchTerm: '#test'}).trim(),
+            '<p>not#test</p>'
+        );
+
+        done();
+    });
+
+    it('Potential hashtags with other entities nested', function(done) {
+        assert.equal(
+            TextFormatting.formatText('#@test').trim(),
+            '<p>#@test</p>'
+        );
+
+        let options = {
+            usernameMap: {
+                test: {id: '1234', username: 'test'}
+            }
+        };
+        assert.equal(
+            TextFormatting.formatText('#@test', options).trim(),
+            "<p>#<a class='mention-link' href='#' data-mention='test'>@test</a></p>"
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#~test').trim(),
+            '<p>#~test</p>'
+        );
+
+        options = {
+            channelNamesMap: {
+                test: {id: '1234', name: 'test', display_name: 'Test Channel'}
+            },
+            team: {id: 'abcd', name: 'abcd', display_name: 'Alphabet'}
+        };
+        assert.equal(
+            TextFormatting.formatText('#~test', options).trim(),
+            '<p>#~test</p>'
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#:taco:').trim(),
+            '<p>#<span alt=":taco:" class="emoticon" title=":taco:" style="background-image:url(/static/emoji/taco.png)"></span></p>'
+        );
+
+        assert.equal(
+            TextFormatting.formatText('#test@example.com').trim(),
+            "<p><a class='mention-link' href='#' data-hashtag='#test'>#test</a>@example.com</p>"
+        );
+
+        done();
+    });
+});
diff --git a/webapp/tests/utils/formatting_imgs.test.jsx b/webapp/tests/utils/formatting_imgs.test.jsx
new file mode 100644
index 000000000..023359533
--- /dev/null
+++ b/webapp/tests/utils/formatting_imgs.test.jsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as Markdown from 'utils/markdown.jsx';
+
+describe('Markdown.Imgs', function() {
+    it('Inline mage', function(done) {
+        assert.equal(
+            Markdown.format('![Mattermost](/images/icon.png)').trim(),
+            '<p><img src="/images/icon.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+        );
+
+        done();
+    });
+
+    it('Image with hover text', function(done) {
+        assert.equal(
+            Markdown.format('![Mattermost](/images/icon.png "Mattermost Icon")').trim(),
+            '<p><img src="/images/icon.png" alt="Mattermost" title="Mattermost Icon" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+        );
+
+        done();
+    });
+
+    it('Image with link', function(done) {
+        assert.equal(
+            Markdown.format('[![Mattermost](../../images/icon-76x76.png)](https://github.com/mattermost/platform)').trim(),
+            '<p><a class="theme markdown__link" href="https://github.com/mattermost/platform" rel="noreferrer" target="_blank"><img src="../../images/icon-76x76.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></a></p>'
+        );
+
+        done();
+    });
+
+    it('Image with width and height', function(done) {
+        assert.equal(
+            Markdown.format('![Mattermost](../../images/icon-76x76.png =50x76 "Mattermost Icon")').trim(),
+            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" height="76" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+        );
+
+        done();
+    });
+
+    it('Image with width', function(done) {
+        assert.equal(
+            Markdown.format('![Mattermost](../../images/icon-76x76.png =50 "Mattermost Icon")').trim(),
+            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+        );
+
+        done();
+    });
+});
diff --git a/webapp/tests/utils/formatting_links.test.jsx b/webapp/tests/utils/formatting_links.test.jsx
new file mode 100644
index 000000000..1a95cc3de
--- /dev/null
+++ b/webapp/tests/utils/formatting_links.test.jsx
@@ -0,0 +1,516 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as Markdown from 'utils/markdown.jsx';
+import * as TextFormatting from 'utils/text_formatting.jsx';
+
+describe('Markdown.Links', function() {
+    it('Not links', function(done) {
+        assert.equal(
+            Markdown.format('example.com').trim(),
+            '<p>example.com</p>'
+        );
+
+        assert.equal(
+            Markdown.format('readme.md').trim(),
+            '<p>readme.md</p>'
+        );
+
+        assert.equal(
+            Markdown.format('@example.com').trim(),
+            '<p>@example.com</p>'
+        );
+
+        assert.equal(
+            Markdown.format('./make-compiled-client.sh').trim(),
+            '<p>./make-compiled-client.sh</p>'
+        );
+
+        assert.equal(
+            Markdown.format('test.:test').trim(),
+            '<p>test.:test</p>'
+        );
+
+        assert.equal(
+            Markdown.format('`https://example.com`').trim(),
+            '<p>' +
+                '<span class="codespan__pre-wrap">' +
+                    '<code>' +
+                        'https://example.com' +
+                    '</code>' +
+                '</span>' +
+            '</p>'
+        );
+
+        assert.equal(
+            Markdown.format('[link](example.com').trim(),
+            '<p>[link](example.com</p>'
+        );
+
+        done();
+    });
+
+    it('External links', function(done) {
+        assert.equal(
+            Markdown.format('http://example.com').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('https://example.com').trim(),
+            '<p><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com" rel="noreferrer" target="_blank">www.example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com/index').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/index" rel="noreferrer" target="_blank">www.example.com/index</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com/index.html').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/index.html" rel="noreferrer" target="_blank">www.example.com/index.html</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com/index/sub').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/index/sub" rel="noreferrer" target="_blank">www.example.com/index/sub</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www1.example.com').trim(),
+            '<p><a class="theme markdown__link" href="http://www1.example.com" rel="noreferrer" target="_blank">www1.example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('example.com/index').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com/index" rel="noreferrer" target="_blank">example.com/index</a></p>'
+        );
+
+        done();
+    });
+
+    it('IP addresses', function(done) {
+        assert.equal(
+            Markdown.format('http://127.0.0.1').trim(),
+            '<p><a class="theme markdown__link" href="http://127.0.0.1" rel="noreferrer" target="_blank">http://127.0.0.1</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://192.168.1.1:4040').trim(),
+            '<p><a class="theme markdown__link" href="http://192.168.1.1:4040" rel="noreferrer" target="_blank">http://192.168.1.1:4040</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://[::1]:80').trim(),
+            '<p><a class="theme markdown__link" href="http://[::1]:80" rel="noreferrer" target="_blank">http://[::1]:80</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://[::1]:8065').trim(),
+            '<p><a class="theme markdown__link" href="http://[::1]:8065" rel="noreferrer" target="_blank">http://[::1]:8065</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('https://[::1]:80').trim(),
+            '<p><a class="theme markdown__link" href="https://[::1]:80" rel="noreferrer" target="_blank">https://[::1]:80</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:80').trim(),
+            '<p><a class="theme markdown__link" href="http://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:80" rel="noreferrer" target="_blank">http://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:80</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:8065').trim(),
+            '<p><a class="theme markdown__link" href="http://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:8065" rel="noreferrer" target="_blank">http://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:8065</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('https://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:443').trim(),
+            '<p><a class="theme markdown__link" href="https://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:443" rel="noreferrer" target="_blank">https://[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:443</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://username:password@127.0.0.1').trim(),
+            '<p><a class="theme markdown__link" href="http://username:password@127.0.0.1" rel="noreferrer" target="_blank">http://username:password@127.0.0.1</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://username:password@[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:80').trim(),
+            '<p><a class="theme markdown__link" href="http://username:password@[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:80" rel="noreferrer" target="_blank">http://username:password@[2001:0:5ef5:79fb:303a:62d5:3312:ff42]:80</a></p>'
+        );
+
+        done();
+    });
+
+    it('Links with anchors', function(done) {
+        assert.equal(
+            Markdown.format('https://en.wikipedia.org/wiki/URLs#Syntax').trim(),
+            '<p><a class="theme markdown__link" href="https://en.wikipedia.org/wiki/URLs#Syntax" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/URLs#Syntax</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('https://groups.google.com/forum/#!msg').trim(),
+            '<p><a class="theme markdown__link" href="https://groups.google.com/forum/#!msg" rel="noreferrer" target="_blank">https://groups.google.com/forum/#!msg</a></p>'
+        );
+
+        done();
+    });
+
+    it('Links with parameters', function(done) {
+        assert.equal(
+            Markdown.format('www.example.com/index?params=1').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/index?params=1" rel="noreferrer" target="_blank">www.example.com/index?params=1</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com/index?params=1&other=2').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/index?params=1&amp;other=2" rel="noreferrer" target="_blank">www.example.com/index?params=1&amp;other=2</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com/index?params=1;other=2').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/index?params=1;other=2" rel="noreferrer" target="_blank">www.example.com/index?params=1;other=2</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://example.com:8065').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com:8065" rel="noreferrer" target="_blank">http://example.com:8065</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://username:password@example.com').trim(),
+            '<p><a class="theme markdown__link" href="http://username:password@example.com" rel="noreferrer" target="_blank">http://username:password@example.com</a></p>'
+        );
+
+        done();
+    });
+
+    it('Special characters', function(done) {
+        assert.equal(
+            Markdown.format('http://www.example.com/_/page').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/_/page" rel="noreferrer" target="_blank">http://www.example.com/_/page</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('www.example.com/_/page').trim(),
+            '<p><a class="theme markdown__link" href="http://www.example.com/_/page" rel="noreferrer" target="_blank">www.example.com/_/page</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('https://en.wikipedia.org/wiki/🐬').trim(),
+            '<p><a class="theme markdown__link" href="https://en.wikipedia.org/wiki/🐬" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/🐬</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://✪df.ws/1234').trim(),
+            '<p><a class="theme markdown__link" href="http://✪df.ws/1234" rel="noreferrer" target="_blank">http://✪df.ws/1234</a></p>'
+        );
+
+        done();
+    });
+
+    it('Brackets', function(done) {
+        assert.equal(
+            Markdown.format('https://en.wikipedia.org/wiki/Rendering_(computer_graphics)').trim(),
+            '<p><a class="theme markdown__link" href="https://en.wikipedia.org/wiki/Rendering_(computer_graphics)" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/Rendering_(computer_graphics)</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://example.com/more_(than)_one_(parens)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com/more_(than)_one_(parens)" rel="noreferrer" target="_blank">http://example.com/more_(than)_one_(parens)</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://example.com/(something)?after=parens').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com/(something)?after=parens" rel="noreferrer" target="_blank">http://example.com/(something)?after=parens</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('http://foo.com/unicode_(✪)_in_parens').trim(),
+            '<p><a class="theme markdown__link" href="http://foo.com/unicode_(✪)_in_parens" rel="noreferrer" target="_blank">http://foo.com/unicode_(✪)_in_parens</a></p>'
+        );
+
+        done();
+    });
+
+    it('Email addresses', function(done) {
+        assert.equal(
+            Markdown.format('test@example.com').trim(),
+            '<p><a class="theme" href="mailto:test@example.com">test@example.com</a></p>'
+        );
+        assert.equal(
+            Markdown.format('test_underscore@example.com').trim(),
+            '<p><a class="theme" href="mailto:test_underscore@example.com">test_underscore@example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('mailto:test@example.com').trim(),
+            '<p><a class="theme markdown__link" href="mailto:test@example.com" rel="noreferrer" target="_blank">mailto:test@example.com</a></p>'
+        );
+
+        done();
+    });
+
+    it('Formatted links', function(done) {
+        assert.equal(
+            Markdown.format('*https://example.com*').trim(),
+            '<p><em><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></em></p>'
+        );
+
+        assert.equal(
+            Markdown.format('_https://example.com_').trim(),
+            '<p><em><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></em></p>'
+        );
+
+        assert.equal(
+            Markdown.format('**https://example.com**').trim(),
+            '<p><strong><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></strong></p>'
+        );
+
+        assert.equal(
+            Markdown.format('__https://example.com__').trim(),
+            '<p><strong><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></strong></p>'
+        );
+
+        assert.equal(
+            Markdown.format('***https://example.com***').trim(),
+            '<p><strong><em><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></em></strong></p>'
+        );
+
+        assert.equal(
+            Markdown.format('___https://example.com___').trim(),
+            '<p><strong><em><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></em></strong></p>'
+        );
+
+        assert.equal(
+            Markdown.format('<https://example.com>').trim(),
+            '<p><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">https://example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('<https://en.wikipedia.org/wiki/Rendering_(computer_graphics)>').trim(),
+            '<p><a class="theme markdown__link" href="https://en.wikipedia.org/wiki/Rendering_(computer_graphics)" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/Rendering_(computer_graphics)</a></p>'
+        );
+
+        done();
+    });
+
+    it('Links with text', function(done) {
+        assert.equal(
+            Markdown.format('[example link](example.com)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">example link</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[example.com](example.com)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">example.com</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[example.com/other](example.com)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">example.com/other</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[example.com/other_link](example.com/example)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com/example" rel="noreferrer" target="_blank">example.com/other_link</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[link with spaces](example.com/ spaces in the url)').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com/ spaces in the url" rel="noreferrer" target="_blank">link with spaces</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[This whole #sentence should be a link](https://example.com)').trim(),
+            '<p><a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank">This whole #sentence should be a link</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[email link](mailto:test@example.com)').trim(),
+            '<p><a class="theme markdown__link" href="mailto:test@example.com" rel="noreferrer" target="_blank">email link</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[other link](ts3server://example.com)').trim(),
+            '<p><a class="theme markdown__link" href="ts3server://example.com" rel="noreferrer" target="_blank">other link</a></p>'
+        );
+
+        done();
+    });
+
+    it('Links with tooltips', function(done) {
+        assert.equal(
+            Markdown.format('[link](example.com "catch phrase!")').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank" title="catch phrase!">link</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('[link](example.com "title with "quotes"")').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank" title="title with &quot;quotes&quot;">link</a></p>'
+        );
+        assert.equal(
+            Markdown.format('[link with spaces](example.com/ spaces in the url "and a title")').trim(),
+            '<p><a class="theme markdown__link" href="http://example.com/ spaces in the url" rel="noreferrer" target="_blank" title="and a title">link with spaces</a></p>'
+        );
+
+        done();
+    });
+
+    it('Links with surrounding text', function(done) {
+        assert.equal(
+            Markdown.format('This is a sentence with a http://example.com in it.').trim(),
+            '<p>This is a sentence with a <a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a> in it.</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a sentence with a http://example.com/_/underscore in it.').trim(),
+            '<p>This is a sentence with a <a class="theme markdown__link" href="http://example.com/_/underscore" rel="noreferrer" target="_blank">http://example.com/_/underscore</a> in it.</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a sentence with a http://192.168.1.1:4040 in it.').trim(),
+            '<p>This is a sentence with a <a class="theme markdown__link" href="http://192.168.1.1:4040" rel="noreferrer" target="_blank">http://192.168.1.1:4040</a> in it.</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a sentence with a https://[::1]:80 in it.').trim(),
+            '<p>This is a sentence with a <a class="theme markdown__link" href="https://[::1]:80" rel="noreferrer" target="_blank">https://[::1]:80</a> in it.</p>'
+        );
+
+        done();
+    });
+
+    it('Links with trailing punctuation', function(done) {
+        assert.equal(
+            Markdown.format('This is a link to http://example.com.').trim(),
+            '<p>This is a link to <a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a>.</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a link containing http://example.com/something?with,commas,in,url, but not at the end').trim(),
+            '<p>This is a link containing <a class="theme markdown__link" href="http://example.com/something?with,commas,in,url" rel="noreferrer" target="_blank">http://example.com/something?with,commas,in,url</a>, but not at the end</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a question about a link http://example.com?').trim(),
+            '<p>This is a question about a link <a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a>?</p>'
+        );
+
+        done();
+    });
+
+    it('Links with surrounding brackets', function(done) {
+        assert.equal(
+            Markdown.format('(http://example.com)').trim(),
+            '<p>(<a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(see http://example.com)').trim(),
+            '<p>(see <a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(http://example.com watch this)').trim(),
+            '<p>(<a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a> watch this)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(www.example.com)').trim(),
+            '<p>(<a class="theme markdown__link" href="http://www.example.com" rel="noreferrer" target="_blank">www.example.com</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(see www.example.com)').trim(),
+            '<p>(see <a class="theme markdown__link" href="http://www.example.com" rel="noreferrer" target="_blank">www.example.com</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(www.example.com watch this)').trim(),
+            '<p>(<a class="theme markdown__link" href="http://www.example.com" rel="noreferrer" target="_blank">www.example.com</a> watch this)</p>'
+        );
+        assert.equal(
+            Markdown.format('([link](http://example.com))').trim(),
+            '<p>(<a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">link</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(see [link](http://example.com))').trim(),
+            '<p>(see <a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">link</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('([link](http://example.com) watch this)').trim(),
+            '<p>(<a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">link</a> watch this)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(test@example.com)').trim(),
+            '<p>(<a class="theme" href="mailto:test@example.com">test@example.com</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(email test@example.com)').trim(),
+            '<p>(email <a class="theme" href="mailto:test@example.com">test@example.com</a>)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('(test@example.com email)').trim(),
+            '<p>(<a class="theme" href="mailto:test@example.com">test@example.com</a> email)</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a sentence with a [link](http://example.com) in it.').trim(),
+            '<p>This is a sentence with a <a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">link</a> in it.</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a sentence with a link (http://example.com) in it.').trim(),
+            '<p>This is a sentence with a link (<a class="theme markdown__link" href="http://example.com" rel="noreferrer" target="_blank">http://example.com</a>) in it.</p>'
+        );
+
+        assert.equal(
+            Markdown.format('This is a sentence with a (https://en.wikipedia.org/wiki/Rendering_(computer_graphics)) in it.').trim(),
+            '<p>This is a sentence with a (<a class="theme markdown__link" href="https://en.wikipedia.org/wiki/Rendering_(computer_graphics)" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/Rendering_(computer_graphics)</a>) in it.</p>'
+        );
+
+        done();
+    });
+
+    it('Searching for links', function(done) {
+        assert.equal(
+            TextFormatting.formatText('https://en.wikipedia.org/wiki/Unix', {searchTerm: 'wikipedia'}).trim(),
+            '<p><a class="theme markdown__link search-highlight" href="https://en.wikipedia.org/wiki/Unix" rel="noreferrer" target="_blank">https:/<wbr />/<wbr />en.wikipedia.org/<wbr />wiki/<wbr />Unix</a></p>'
+        );
+
+        assert.equal(
+            TextFormatting.formatText('[Link](https://en.wikipedia.org/wiki/Unix)', {searchTerm: 'unix'}).trim(),
+            '<p><a class="theme markdown__link search-highlight" href="https://en.wikipedia.org/wiki/Unix" rel="noreferrer" target="_blank">Link</a></p>'
+        );
+
+        done();
+    });
+
+    it('Links containing %', function(done) {
+        assert.equal(
+            Markdown.format('https://en.wikipedia.org/wiki/%C3%89').trim(),
+            '<p><a class="theme markdown__link" href="https://en.wikipedia.org/wiki/%C3%89" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/%C3%89</a></p>'
+        );
+
+        assert.equal(
+            Markdown.format('https://en.wikipedia.org/wiki/%E9').trim(),
+            '<p><a class="theme markdown__link" href="https://en.wikipedia.org/wiki/%E9" rel="noreferrer" target="_blank">https://en.wikipedia.org/wiki/%E9</a></p>'
+        );
+
+        done();
+    });
+});
diff --git a/webapp/tests/utils/utils_get_nearest_point.test.jsx b/webapp/tests/utils/utils_get_nearest_point.test.jsx
new file mode 100644
index 000000000..101f768bb
--- /dev/null
+++ b/webapp/tests/utils/utils_get_nearest_point.test.jsx
@@ -0,0 +1,31 @@
+import * as CommonUtils from 'utils/commons.jsx';
+
+describe('CommonUtils.getNearestPoint', function() {
+    test('should return nearest point', function() {
+        for (const data of [
+            {
+                points: [{x: 30, y: 40}, {x: 50, y: 50}, {x: 100, y: 2}, {x: 500, y: 200}, {x: 110, y: 20}, {x: 10, y: 20}],
+                pivotPoint: {x: 10, y: 20},
+                nearestPoint: {x: 10, y: 20},
+                nearestPointLte: {x: 10, y: 20}
+            },
+            {
+                points: [{x: 50, y: 50}, {x: 100, y: 2}, {x: 500, y: 200}, {x: 110, y: 20}, {x: 100, y: 90}, {x: 30, y: 40}],
+                pivotPoint: {x: 10, y: 20},
+                nearestPoint: {x: 30, y: 40},
+                nearestPointLte: {}
+            },
+            {
+                points: [{x: 50, y: 50}, {x: 1, y: 1}, {x: 15, y: 25}, {x: 100, y: 2}, {x: 500, y: 200}, {x: 110, y: 20}],
+                pivotPoint: {x: 10, y: 20},
+                nearestPoint: {x: 15, y: 25},
+                nearestPointLte: {x: 1, y: 1}
+            }
+        ]) {
+            const nearestPoint = CommonUtils.getNearestPoint(data.pivotPoint, data.points);
+
+            expect(nearestPoint.x).toEqual(data.nearestPoint.x);
+            expect(nearestPoint.y).toEqual(data.nearestPoint.y);
+        }
+    });
+});