Work on fixing the tests

css/_base.scss

@@ -153,6 +153,10 @@ form {
     display: inline-block !important;
 }
 
+.show-list-item {
+    display: list-item !important;
+}
+
 /**
  * Shows a flex element.
  */

modules/UI/feedback/Feedback.js

@@ -1,31 +1,12 @@
 /* global $, APP, JitsiMeetJS */
-import UIEvents from "../../../service/UI/UIEvents";
 import FeedbackWindow from "./FeedbackWindow";
 
-/**
- * Shows / hides the feedback button.
- * @private
- */
-function _toggleFeedbackIcon() {
-    document.querySelector('#feedbackButton').classList.toggle('hidden');
-}
-
-/**
- * Shows / hides the feedback button.
- * @param {show} set to {true} to show the feedback button or to  {false}
- * to hide it
- * @private
- */
-function _showFeedbackButton (show) {
-    document.querySelector('#feedbackButton').classList.toggle('hide', !show);
-}
-
 /**
  * Defines all methods in connection to the Feedback window.
  *
  * @type {{openFeedbackWindow: Function}}
  */
-var Feedback = {
+const Feedback = {
 
     /**
      * Initialise the Feedback functionality.
@@ -42,24 +23,15 @@ var Feedback = {
         if (typeof this.enabled == "undefined")
             this.enabled = true;
 
-        _showFeedbackButton(this.enabled);
-
         this.window = new FeedbackWindow();
+        this.emitter = emitter;
 
         $("#feedbackButton").click(Feedback.openFeedbackWindow);
-
-        // Show / hide the feedback button whenever the film strip is
-        // shown / hidden.
-        emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () {
-            _toggleFeedbackIcon();
-        });
     },
     /**
      * Enables/ disabled the feedback feature.
      */
     enableFeedback: function (enable) {
-        if (this.enabled !== enable)
-            _showFeedbackButton(enable);
         this.enabled = enable;
     },
 
@@ -120,4 +92,4 @@ var Feedback = {
     }
 };
 
-module.exports = Feedback;
+export default Feedback;

modules/UI/recording/Recording.js

@@ -387,9 +387,16 @@ var Recording = {
      * @param show {true} to show the recording button, {false} to hide it
      */
     showRecordingButton (show) {
-        var visibility = show && _isRecordingButtonEnabled();
-        document.querySelector('#toolbar_button_record')
-                .classList.toggle('hide', !visibility);
+        let isVisible = show && _isRecordingButtonEnabled();
+        let id = 'toolbar_button_record';
+
+        console.log('recording is visible', isVisible);
+
+        if (isVisible) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
+        }
     },
 
     /**
@@ -472,6 +479,13 @@ var Recording = {
             labelSelector.css({display: "inline-block"});
 
         // Recording spinner
+        let spinnerId = 'recordingSpinner';
+        if(recordingState === Status.RETRYING) {
+            UIUtil.showElement(spinnerId);
+        } else {
+            UIUtil.hideElement(spinnerId);
+        }
+
         document.querySelector('#recordingSpinner').classList
                 .toggle('show-inline', recordingState === Status.RETRYING);
     },

modules/UI/side_pannels/chat/Chat.js

@@ -293,11 +293,18 @@ var Chat = {
      * @param subject the subject
      */
     setSubject (subject) {
+        let toggleFunction;
         if (subject) {
             subject = subject.trim();
+            toggleFunction = UIUtil.showElement.bind(UIUtil);
+        } else {
+            toggleFunction = UIUtil.hideElement.bind(UIUtil);
         }
-        $('#subject').html(linkify(UIUtil.escapeHtml(subject)));
-        document.querySelector('#subject').classList.toggle('hide', !subject);
+
+        let subjectId = 'subject';
+        let html = linkify(UIUtil.escapeHtml(subject));
+        $(`#${subjectId}`).html(html);
+        toggleFunction(subjectId);
     },
 
     /**

modules/UI/toolbars/Toolbar.js

@@ -417,8 +417,12 @@ Toolbar = {
      * @param show <tt>true</tt> to show or <tt>false</tt> to hide
      */
     showAuthenticateButton (show) {
-        document.querySelector('#authenticationContainer')
-                .classList.toggle('hide', !show);
+        let id = 'authenticationContainer';
+        if (show) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
+        }
     },
 
     showEtherpadButton () {
@@ -429,12 +433,17 @@ Toolbar = {
 
     // Shows or hides the 'shared video' button.
     showSharedVideoButton () {
-        if (!UIUtil.isButtonEnabled('sharedvideo')) {
-            return;
+        let id = 'toolbar_button_sharedvideo';
+        let shouldShow = UIUtil.isButtonEnabled('sharedvideo')
+                && !config.disableThirdPartyRequests;
+
+        if (shouldShow) {
+            let el = document.getElementById(id);
+            UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
         }
-        var el = document.querySelector('#toolbar_button_sharedvideo');
-        UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
-        el.classList.toggle('hide', config.disableThirdPartyRequests === true);
     },
 
     // checks whether desktop sharing is enabled and whether
@@ -448,20 +457,26 @@ Toolbar = {
 
     // Shows or hides SIP calls button
     showSipCallButton (show) {
-        if (!UIUtil.isButtonEnabled('sip')) {
-            return;
+        let shouldShow = APP.conference.sipGatewayEnabled()
+            && UIUtil.isButtonEnabled('sip') && show;
+        let id = 'toolbar_button_sip';
+
+        if (shouldShow) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
         }
-        document.querySelector('#toolbar_button_sip').classList
-                .toggle('hide', !(show && APP.conference.sipGatewayEnabled()));
     },
 
     // Shows or hides the dialpad button
     showDialPadButton (show) {
-        if (!UIUtil.isButtonEnabled('dialpad')) {
-            return;
+        let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
+        let id = 'toolbar_button_dialpad';
+        if (shouldShow) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
         }
-        document.querySelector('#toolbar_button_dialpad')
-                .classList.toggle('hide', !show);
     },
 
     /**
@@ -469,9 +484,14 @@ Toolbar = {
      * @param authIdentity identity name to be displayed.
      */
     setAuthenticatedIdentity (authIdentity) {
-        let selector = $('#toolbar_auth_identity');
-        selector.text(authIdentity ? authIdentity : '');
-        selector.get(0).classList.toggle('hide', !authIdentity);
+        let id = 'toolbar_auth_identity';
+        if(authIdentity) {
+            UIUtil.showElement(id);
+            $(`#${id}`).text(authIdentity);
+        } else {
+            UIUtil.hideElement(id);
+            $(`#${id}`).text('');
+        }
     },
 
     /**
@@ -479,8 +499,12 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLoginButton (show) {
-        document.querySelector('#toolbar_button_login')
-                .classList.toggle('hide', !show);
+        let id = 'toolbar_button_login';
+        if (show) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
+        }
     },
 
     /**
@@ -488,8 +512,12 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLogoutButton (show) {
-        document.querySelector('#toolbar_button_logout')
-                .classList.toggle('hide', !show);
+        let id = 'toolbar_button_logout';
+        if (show) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
+        }
     },
 
     /**

modules/UI/util/UIUtil.js

@@ -18,6 +18,15 @@ const TOOLTIP_POSITIONS = {
     'top-right': 'sw'
 };
 
+/**
+ * Associates the default display type with corresponding CSS class
+ */
+const SHOW_CLASSES = {
+    'block': 'show',
+    'inline': 'show-inline',
+    'list-item': 'show-list-item'
+};
+
 /**
  * Created by hristo on 12/22/14.
  */
@@ -229,7 +238,9 @@ const TOOLTIP_POSITIONS = {
             element.classList.remove('hide');
         }
 
-        element.classList.add('show');
+        let type = this.getElementDefaultDisplay(element.tagName);
+        let className = SHOW_CLASSES[type];
+        element.classList.add(className);
     },
 
     /**
@@ -244,13 +255,31 @@ const TOOLTIP_POSITIONS = {
             return;
         }
 
-        if(element.classList.contains('show')) {
-            element.classList.remove('show');
+        let type = this.getElementDefaultDisplay(element.tagName);
+        let className = SHOW_CLASSES[type];
+
+        if(element.classList.contains(className)) {
+            element.classList.remove(className);
         }
 
         element.classList.add('hide');
     },
 
+    /**
+     * Returns default display style for the tag
+     * @param tag
+     * @returns {*}
+     */
+    getElementDefaultDisplay(tag) {
+        let tempElement = document.createElement(tag);
+
+        document.body.appendChild(tempElement);
+        let style = window.getComputedStyle(tempElement).display;
+        document.body.removeChild(tempElement);
+
+        return style;
+    },
+
     /**
      * Shows / hides the element with the given jQuery selector.
      *