Add new spec with emoji tests

spec/chatbox.js

@@ -438,33 +438,6 @@
                     done();
                 }));
 
-                it("contains a button for inserting emojis",
-                    mock.initConverse(
-                        null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
-                        async function (done, _converse) {
-
-                    await test_utils.waitForRoster(_converse, 'current');
-                    test_utils.openControlBox();
-
-                    const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
-                    await test_utils.openChatBoxFor(_converse, contact_jid);
-                    const view = _converse.chatboxviews.get(contact_jid);
-                    const toolbar = view.el.querySelector('ul.chat-toolbar');
-                    expect(toolbar.querySelectorAll('li.toggle-smiley').length).toBe(1);
-                    spyOn(view, 'toggleEmojiMenu').and.callThrough();
-
-                    view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
-                    toolbar.querySelector('li.toggle-smiley').click();
-
-                    await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
-                    const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
-                    const item = await u.waitUntil(() => picker.querySelector('.emoji-picker li.insert-emoji'));
-                    item.click()
-                    expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':grinning: ');
-                    toolbar.querySelector('li.toggle-smiley').click(); // Close the panel again
-                    done();
-                }));
-
                 it("shows the remaining character count if a message_limit is configured",
                     mock.initConverse(
                         null, ['rosterGroupsFetched', 'chatBoxesFetched'], {'message_limit': 200},

spec/emojis.js

@@ -0,0 +1,176 @@
+(function (root, factory) {
+    define([
+        "jasmine",
+        "mock",
+        "test-utils"
+        ], factory);
+} (this, function (jasmine, mock, test_utils) {
+    "use strict";
+    const { Backbone, Promise, Strophe, $iq, $msg, $pres, b64_sha1, dayjs, sizzle, _ } = converse.env;
+    const u = converse.env.utils;
+
+    describe("Emojis", function () {
+        describe("The emoji picker", function () {
+
+            it("can be opened by clicking a button in the chat toolbar",
+                mock.initConverse(
+                    null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
+                    async function (done, _converse) {
+
+                await test_utils.waitForRoster(_converse, 'current');
+                test_utils.openControlBox();
+
+                const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+                await test_utils.openChatBoxFor(_converse, contact_jid);
+                const view = _converse.chatboxviews.get(contact_jid);
+                const toolbar = view.el.querySelector('ul.chat-toolbar');
+                expect(toolbar.querySelectorAll('li.toggle-smiley').length).toBe(1);
+                spyOn(view, 'toggleEmojiMenu').and.callThrough();
+
+                view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
+                toolbar.querySelector('li.toggle-smiley').click();
+
+                await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
+                const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
+                const item = await u.waitUntil(() => picker.querySelector('.emoji-picker li.insert-emoji'));
+                item.click()
+                expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':grinning: ');
+                toolbar.querySelector('li.toggle-smiley').click(); // Close the panel again
+                done();
+            }));
+
+            it("is opened to autocomplete emojis in the textarea",
+                mock.initConverse(
+                    null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
+                    async function (done, _converse) {
+
+                const muc_jid = 'lounge@montague.lit';
+                await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
+                const view = _converse.chatboxviews.get(muc_jid);
+                const textarea = view.el.querySelector('textarea.chat-textarea');
+                textarea.value = ':gri';
+
+                // Press tab
+                const tab_event = {
+                    'target': textarea,
+                    'preventDefault': function preventDefault () {},
+                    'stopPropagation': function stopPropagation () {},
+                    'keyCode': 9,
+                    'key': 'Tab'
+                }
+                view.onKeyDown(tab_event);
+                await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
+                const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
+                const input = picker.querySelector('.emoji-search');
+                expect(input.value).toBe(':gri');
+                let visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
+                expect(visible_emojis.length).toBe(3);
+                expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':grimacing:');
+                expect(visible_emojis[1].getAttribute('data-emoji')).toBe(':grin:');
+                expect(visible_emojis[2].getAttribute('data-emoji')).toBe(':grinning:');
+
+                // Test that TAB autocompletes the to first match
+                view.emoji_picker_view.onKeyDown(tab_event);
+                visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
+                expect(visible_emojis.length).toBe(1);
+                expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':grimacing:');
+                expect(input.value).toBe(':grimacing:');
+
+                // Check that ENTER now inserts the match
+                const enter_event = Object.assign({}, tab_event, {'keyCode': 13, 'key': 'Enter', 'target': input});
+                view.emoji_picker_view.onKeyDown(enter_event);
+                expect(input.value).toBe('');
+                expect(textarea.value).toBe(':grimacing: ');
+                done();
+            }));
+
+
+            it("allows you to search for particular emojis",
+                mock.initConverse(
+                    null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
+                    async function (done, _converse) {
+
+                const muc_jid = 'lounge@montague.lit';
+                await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
+                const view = _converse.chatboxviews.get(muc_jid);
+                const toolbar = view.el.querySelector('ul.chat-toolbar');
+                expect(toolbar.querySelectorAll('li.toggle-smiley').length).toBe(1);
+                toolbar.querySelector('li.toggle-smiley').click();
+                await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
+                const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
+                const input = picker.querySelector('.emoji-search');
+                expect(sizzle('.insert-emoji:not(.hidden)', picker).length).toBe(1420);
+
+                expect(view.emoji_picker_view.model.get('query')).toBeUndefined();
+                input.value = 'smiley';
+                const event = {
+                    'target': input,
+                    'preventDefault': function preventDefault () {},
+                    'stopPropagation': function stopPropagation () {}
+                };
+                view.emoji_picker_view.onKeyDown(event);
+                await u.waitUntil(() => view.emoji_picker_view.model.get('query') === 'smiley');
+                let visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
+                expect(visible_emojis.length).toBe(2);
+                expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':smiley:');
+                expect(visible_emojis[1].getAttribute('data-emoji')).toBe(':smiley_cat:');
+
+                // Check that pressing enter without an unambiguous match does nothing
+                const enter_event = Object.assign({}, event, {'keyCode': 13});
+                view.emoji_picker_view.onKeyDown(enter_event);
+                expect(input.value).toBe('smiley');
+
+                // Test that TAB autocompletes the to first match
+                const tab_event = Object.assign({}, event, {'keyCode': 9, 'key': 'Tab'});
+                view.emoji_picker_view.onKeyDown(tab_event);
+                expect(input.value).toBe(':smiley:');
+                visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
+                expect(visible_emojis.length).toBe(1);
+                expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':smiley:');
+
+                // Check that ENTER now inserts the match
+                view.emoji_picker_view.onKeyDown(enter_event);
+                expect(input.value).toBe('');
+                expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':smiley: ');
+                done();
+            }));
+        });
+
+        describe("A Chat Message", function () {
+            it("will display larger if it's a single emoji",
+                mock.initConverse(
+                    null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {'use_system_emojis': false},
+                    async function (done, _converse) {
+
+                await test_utils.waitForRoster(_converse, 'current');
+                const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+                _converse.chatboxes.onMessage($msg({
+                        'from': sender_jid,
+                        'to': _converse.connection.jid,
+                        'type': 'chat',
+                        'id': _converse.connection.getUniqueId()
+                    }).c('body').t('😇').up()
+                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
+                await new Promise(resolve => _converse.on('chatBoxInitialized', resolve));
+                const view = _converse.api.chatviews.get(sender_jid);
+                await new Promise((resolve, reject) => view.once('messageInserted', resolve));
+
+                const chat_content = view.el.querySelector('.chat-content');
+                let message = chat_content.querySelector('.chat-msg__text');
+                expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
+
+                _converse.chatboxes.onMessage($msg({
+                        'from': sender_jid,
+                        'to': _converse.connection.jid,
+                        'type': 'chat',
+                        'id': _converse.connection.getUniqueId()
+                    }).c('body').t('😇 Hello world! 😇 😇').up()
+                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
+                await new Promise((resolve, reject) => view.once('messageInserted', resolve));
+                message = chat_content.querySelector('.message:last-child .chat-msg__text');
+                expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);
+                done();
+            }));
+        });
+    });
+}));

spec/messages.js

@@ -925,41 +925,6 @@
             done();
         }));
 
-        it("will display larger if it's a single emoji",
-            mock.initConverse(
-                null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {'use_system_emojis': false},
-                async function (done, _converse) {
-
-            await test_utils.waitForRoster(_converse, 'current');
-            const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@montague.lit';
-            _converse.chatboxes.onMessage($msg({
-                    'from': sender_jid,
-                    'to': _converse.connection.jid,
-                    'type': 'chat',
-                    'id': _converse.connection.getUniqueId()
-                }).c('body').t('😇').up()
-                .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            await new Promise(resolve => _converse.on('chatBoxInitialized', resolve));
-            const view = _converse.api.chatviews.get(sender_jid);
-            await new Promise((resolve, reject) => view.once('messageInserted', resolve));
-
-            const chat_content = view.el.querySelector('.chat-content');
-            let message = chat_content.querySelector('.chat-msg__text');
-            expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
-
-            _converse.chatboxes.onMessage($msg({
-                    'from': sender_jid,
-                    'to': _converse.connection.jid,
-                    'type': 'chat',
-                    'id': _converse.connection.getUniqueId()
-                }).c('body').t('😇 Hello world! 😇 😇').up()
-                .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            await new Promise((resolve, reject) => view.once('messageInserted', resolve));
-           message = chat_content.querySelector('.message:last-child .chat-msg__text');
-            expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);
-            done();
-        }));
-
         it("will render newlines",
             mock.initConverse(
                 null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},

spec/muc.js

@@ -3955,7 +3955,7 @@
                 const chat_body = view.el.querySelector('.chatroom-body');
                 expect(view.renderPasswordForm).toHaveBeenCalled();
                 expect(chat_body.querySelectorAll('form.chatroom-form').length).toBe(1);
-                expect(chat_body.querySelector('label').textContent.trim())
+                expect(chat_body.querySelector('.chatroom-form label').textContent.trim())
                     .toBe('This groupchat requires a password');
 
                 // Let's submit the form

src/converse-chatview.js

@@ -1048,12 +1048,9 @@ converse.plugins.add('converse-chatview', {
                     if (position && typeof replace == 'string') {
                         textarea.value = textarea.value.replace(
                             new RegExp(replace, 'g'),
-                            (match, offset) => {
-                                return offset == position-replace.length ? value : match
-                            }
+                            (match, offset) => (offset == position-replace.length ? value+' ' : match)
                         );
                     } else {
-                        textarea.value = '';
                         textarea.value = value;
                     }
                 } else {
@@ -1061,7 +1058,6 @@ converse.plugins.add('converse-chatview', {
                     if (existing && (existing[existing.length-1] !== ' ')) {
                         existing = existing + ' ';
                     }
-                    textarea.value = '';
                     textarea.value = existing+value+' ';
                 }
                 this.updateCharCounter(textarea.value);

src/converse-emoji-views.js

@@ -54,14 +54,13 @@ converse.plugins.add('converse-emoji-views', {
                     if (this.emoji_dropdown === undefined) {
                         this.createEmojiDropdown();
                     }
-                    this.emoji_dropdown.toggle();
                     await _converse.api.waitUntil('emojisInitialized');
                     this.emoji_picker_view.model.set({
                         'autocompleting': value,
                         'position': ev.target.selectionStart
-                    });
+                    }, {'silent': true});
                     this.emoji_picker_view.filter(value, true);
-                    this.emoji_picker_view.render();
+                    this.emoji_dropdown.toggle();
                 } else {
                     this.__super__.onTabPressed.apply(this, arguments);
                 }
@@ -94,7 +93,7 @@ converse.plugins.add('converse-emoji-views', {
         const emoji_aware_chat_view = {
 
             createEmojiPicker () {
-                if (_converse.emojipicker === undefined) {
+                if (!_converse.emojipicker) {
                     const storage = _converse.config.get('storage'),
                           id = `converse.emoji-${_converse.bare_jid}`;
                     _converse.emojipicker = new _converse.EmojiPicker({'id': id});
@@ -143,7 +142,7 @@ converse.plugins.add('converse-emoji-views', {
             },
 
             initialize () {
-                this.debouncedFilter = _.debounce(input => this.filter(input.value), 50);
+                this.debouncedFilter = _.debounce(input => this.filter(input.value), 150);
                 this.model.on('change:query', this.render, this);
                 this.model.on('change:current_skintone', this.render, this);
                 this.model.on('change:current_category', () => {
@@ -203,7 +202,7 @@ converse.plugins.add('converse-emoji-views', {
                         this.filter('', true);
                     }
                 } else {
-                    this.debouncedFilter(ev.target.value);
+                    this.debouncedFilter(ev.target);
                 }
             },
 

src/headless/converse-emoji.js

@@ -198,9 +198,15 @@ converse.plugins.add('converse-emoji', {
             "flags": __("Flags")
         }
 
+        /**
+         * Model for storing data related to the Emoji picker widget
+         * @class
+         * @namespace _converse.EmojiPicker
+         * @memberOf _converse
+         */
         _converse.EmojiPicker = Backbone.Model.extend({
             defaults: {
-                'current_category': 'people',
+                'current_category': 'smileys',
                 'current_skintone': '',
                 'scroll_position': 0
             }
@@ -208,21 +214,6 @@ converse.plugins.add('converse-emoji', {
 
         _converse.emojis = {};
 
-        u.getEmojiRenderer = function () {
-            const how = {
-                'attributes': (icon, variant) => {
-                    const codepoint = twemoji.default.convert.toCodePoint(icon);
-                    return {'title': `${u.getEmojisByAtrribute('cp')[codepoint]['sn']} ${icon}`}
-                }
-            };
-            const toUnicode = u.shortnameToUnicode;
-            return _converse.use_system_emojis ? toUnicode: text => twemoji.default.parse(toUnicode(text), how);
-        };
-
-        u.addEmoji = function (text) {
-            return u.getEmojiRenderer()(text);
-        }
-
         function getTonedEmojis () {
             if (!_converse.toned_emojis) {
                 _converse.toned_emojis = _.uniq(
@@ -282,9 +273,41 @@ converse.plugins.add('converse-emoji', {
         const emojis_by_attribute = {};
 
         Object.assign(u, {
+
+            /**
+             * Replaces emoji shortnames in the passed-in string with unicode or image-based emojis
+             * (based on the value of `use_system_emojis`).
+             * @method u.addEmoji
+             * @param {string} text = The text
+             * @returns {string} The text with shortnames replaced with emoji
+             *  unicodes or images.
+             */
+            addEmoji (text) {
+                return u.getEmojiRenderer()(text);
+            },
+
+            /**
+             * Based on the value of `use_system_emojis` will return either
+             * a function that converts emoji shortnames into unicode glyphs
+             * (see {@link u.shortnameToUnicode} or one that converts them into images.
+             * unicode emojis
+             * @method u.getEmojiRenderer
+             * @returns {function}
+             */
+            getEmojiRenderer () {
+                const how = {
+                    'attributes': (icon, variant) => {
+                        const codepoint = twemoji.default.convert.toCodePoint(icon);
+                        return {'title': `${u.getEmojisByAtrribute('cp')[codepoint]['sn']} ${icon}`}
+                    }
+                };
+                const toUnicode = u.shortnameToUnicode;
+                return _converse.use_system_emojis ? toUnicode: text => twemoji.default.parse(toUnicode(text), how);
+            },
+
             /**
-             * @method u.shortnameToUnicode
              * Returns unicode represented by the passed in shortname.
+             * @method u.shortnameToUnicode
              * @param {string} str - String containg the shortname(s)
              */
             shortnameToUnicode (str) {
@@ -386,9 +409,9 @@ converse.plugins.add('converse-emoji', {
 
         const excluded_categories = ['modifier', 'regional'];
         _converse.emojis.all_categories = _converse.emojis_list
-                .map(e => e.c)
-                .filter((c, i, arr) => arr.indexOf(c) == i)
-                .filter(c => !excluded_categories.includes(c));
+            .map(e => e.c)
+            .filter((c, i, arr) => arr.indexOf(c) == i)
+            .filter(c => !excluded_categories.includes(c));
 
         _converse.emojis.toned = getTonedEmojis();
 
@@ -398,5 +421,16 @@ converse.plugins.add('converse-emoji', {
          * @event _converse#emojisInitialized
          */
         _converse.api.trigger('emojisInitialized');
+
+
+        /************************ BEGIN Event Handlers ************************/
+        _converse.api.listen.on('clearSession', () => {
+            if (_converse.emojipicker) {
+                _converse.emojipicker.browserStorage._clear();
+                _converse.emojipicker.destroy();
+                delete _converse.emojipicker
+            }
+        });
+        /************************ END Event Handlers ************************/
     }
 });

src/templates/emojis.html

@@ -9,8 +9,6 @@
             {[ }); ]}
         </ul>
     </div>
-
-
     <div class="emoji-picker__lists">
         {[ if (o.query) { ]}
             <a id="emoji-picker-search-results" class="emoji-category__heading">{{{o.__('Search results')}}}</a>

tests/runner.js

@@ -61,6 +61,7 @@ var specs = [
     "spec/autocomplete",
     "spec/minchats",
     "spec/notification",
+    "spec/emojis",
     "spec/login",
     "spec/register",
     "spec/http-file-upload"