Fix failing test for emoji picker

spec/chatbox.js

@@ -385,36 +385,42 @@
                     test_utils.openControlBox();
                     test_utils.openContactsPanel(_converse);
 
-                    test_utils.waitUntil(function () {
-                            return _converse.rosterview.$el.find('dt').length;
-                        }, 300)
-                    .then(function () {
-                        var contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@localhost',
-                            view, $toolbar, $textarea;
-                        test_utils.openChatBoxFor(_converse, contact_jid);
-                        view = _converse.chatboxviews.get(contact_jid);
-                        $toolbar = view.$el.find('ul.chat-toolbar');
-                        $textarea = view.$el.find('textarea.chat-textarea');
-                        expect($toolbar.children('li.toggle-smiley').length).toBe(1);
-                        // Register spies
-                        spyOn(view, 'toggleEmojiMenu').and.callThrough();
-                        spyOn(view, 'insertEmoji');
-                        view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
-                        $toolbar.children('li.toggle-smiley').click();
+                    var contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@localhost',
+                        view, $toolbar, $textarea;
+                    test_utils.openChatBoxFor(_converse, contact_jid);
+                    view = _converse.chatboxviews.get(contact_jid);
+                    $toolbar = view.$el.find('ul.chat-toolbar');
+                    $textarea = view.$el.find('textarea.chat-textarea');
+                    expect($toolbar.children('li.toggle-smiley').length).toBe(1);
+                    // Register spies
+                    spyOn(view, 'toggleEmojiMenu').and.callThrough();
+                    spyOn(view, 'insertEmoji').and.callThrough();
 
+                    view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
+                    $toolbar.children('li.toggle-smiley').click();
+
+                    test_utils.waitUntil(function () {
+                        var $picker = view.$el.find('.toggle-smiley .emoji-picker-container');
+                        return $picker.is(':visible');
+                    }, 300).then(function () {
                         var $picker = view.$el.find('.toggle-smiley .emoji-picker-container');
-                        // expect($picker.is(':visible')).toBeTruthy();
-                        // expect(view.toggleEmojiMenu).toHaveBeenCalled();
                         var $items = $picker.find('.emoji-picker li');
                         $items.first().click();
                         expect(view.insertEmoji).toHaveBeenCalled();
-                        expect(view.$el.find('.toggle-smiley ul').is(':visible')).toBeFalsy();
-                        $toolbar.children('li.toggle-smiley').click();
-                        expect(view.toggleEmojiMenu).toHaveBeenCalled();
-                        view.$el.find('.toggle-smiley ul').children('li').last().click();
-                        expect(view.insertEmoji).toHaveBeenCalled();
-                        expect(view.$el.find('.toggle-smiley ul').is(':visible')).toBeFalsy();
-                        done();
+                        test_utils.waitUntil(function () {
+                            return !view.el.querySelector('.toggle-smiley .toolbar-menu').offsetHeight;
+                        }, 300).then(function () {
+                            $toolbar.children('li.toggle-smiley').click();
+                            expect(view.toggleEmojiMenu).toHaveBeenCalled();
+                            test_utils.waitUntil(function () {
+                                var $picker = view.$el.find('.toggle-smiley .emoji-picker-container');
+                                return $picker.is(':visible');
+                            }, 300).then(function () {
+                                view.$el.find('.toggle-smiley ul').children('li').last().click();
+                                expect(view.insertEmoji).toHaveBeenCalled();
+                                done();
+                            });
+                        });
                     });
                 }));
 

src/converse-chatview.js

@@ -55,7 +55,11 @@
             registerGlobalEventHandlers: function () {
                 this.__super__.registerGlobalEventHandlers();
                 document.addEventListener(
-                    'click', function () {
+                    'click', function (ev) {
+                        if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
+                            _.includes(ev.target.classList, 'insert-emoji')) {
+                            return;
+                        }
                         utils.slideInAllElements(
                             document.querySelectorAll('.toolbar-menu')
                         )

src/templates/emojis.html

 {[ _.forEach(emojis_by_category, function (obj, category) { ]}
     <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
         {[ _.forEach(emojis_by_category[category], function (emoji) { ]}
-            <li class="emoji" data-emoji="{{{emoji._shortname}}}">
+            <li class="emoji insert-emoji" data-emoji="{{{emoji._shortname}}}">
                 <a href="#" data-emoji="{{{emoji._shortname}}}"> {{ emojione.shortnameToUnicode(emoji._shortname) }}  </a>
         </li>
         {[ }); ]}

src/utils.js

@@ -208,17 +208,25 @@
                 const err = "Undefined or null element passed into slideOut"
                 console.warn(err);
                 reject(new Error(err));
+                return;
             }
             let interval_marker = el.getAttribute('data-slider-marker');
             if (interval_marker) {
+                el.removeAttribute('data-slider-marker');
                 window.clearInterval(interval_marker);
             }
-            const end_height = _.reduce(el.children, function (result, child) {
-                return result + child.offsetHeight;
-            }, 0);
+            const end_height = _.reduce(
+                    el.children,
+                    (result, child) => result + child.offsetHeight, 0
+                );
+            if ($.fx.off) { // Effects are disabled (for tests)
+                el.style.height = end_height + 'px';
+                resolve();
+                return;
+            }
+
             const step = calculateSlideStep(end_height),
                   interval = end_height/duration*step;
-
             let h = 0;
             interval_marker = window.setInterval(function () {
                 h += step;
@@ -227,7 +235,6 @@
                 } else {
                     el.style.height = end_height + 'px';
                     window.clearInterval(interval_marker);
-                    el.style.overflow = '';
                     el.removeAttribute('data-slider-marker');
                     resolve();
                 }
@@ -242,14 +249,16 @@
             if (_.isNil(el)) {
                 const err = "Undefined or null element passed into slideIn";
                 console.warn(err);
-                reject(new Error(err));
-            }
-            if (!el.offsetHeight) {
-                resolve();
-                return;
+                return reject(new Error(err));
+            } else if (!el.offsetHeight) {
+                return resolve();
+            } else if ($.fx.off) { // Effects are disabled (for tests)
+                el.style.height = 0 + 'px';
+                return resolve();
             }
             let interval_marker = el.getAttribute('data-slider-marker');
             if (interval_marker) {
+                el.removeAttribute('data-slider-marker');
                 window.clearInterval(interval_marker);
             }
             let h = el.offsetHeight;

tests/mock.js

@@ -88,7 +88,7 @@
             });
         }
 
-        var converse = converse_api.initialize(_.extend({
+        var _converse = converse_api.initialize(_.extend({
             'i18n': 'en',
             'auto_subscribe': false,
             'play_sounds': false,
@@ -101,9 +101,10 @@
             'password': 'secret',
             'debug': false
         }, settings || {}));
-        converse.ChatBoxViews.prototype.trimChat = function () {};
+        _converse.ChatBoxViews.prototype.trimChat = function () {};
+        _converse.disable_effects = true;
         $.fx.off = true;
-        return converse;
+        return _converse;
     }
 
     mock.initConverseWithPromises = function (spies, promise_names, settings, func) {