Fix failing tests

css/converse.css

@@ -4574,7 +4574,6 @@ body.reset {
       position: absolute;
       bottom: 1em; }
   #conversejs .badge {
-    padding: 0.4em;
     line-height: 1;
     font-weight: normal;
     font-size: 90%; }
@@ -5442,13 +5441,7 @@ body.reset {
     #conversejs #controlbox form.search-xmpp-contact input {
       width: 8em; }
   #conversejs #controlbox .msgs-indicator {
-    border-radius: 3px;
-    background-color: #E77051;
-    color: white;
-    font-size: 12px;
-    font-weight: normal;
-    padding: 0 4px;
-    text-shadow: none; }
+    margin-right: 0.5em; }
   #conversejs #controlbox a.subscribe-to-user {
     padding-left: 2em;
     font-weight: bold; }

css/inverse.css

@@ -4574,7 +4574,6 @@ body.reset {
       position: absolute;
       bottom: 1em; }
   #conversejs .badge {
-    padding: 0.4em;
     line-height: 1;
     font-weight: normal;
     font-size: 90%; }
@@ -5512,13 +5511,7 @@ body {
     #conversejs #controlbox form.search-xmpp-contact input {
       width: 8em; }
   #conversejs #controlbox .msgs-indicator {
-    border-radius: 3px;
-    background-color: #E77051;
-    color: white;
-    font-size: 14px;
-    font-weight: normal;
-    padding: 0 4px;
-    text-shadow: none; }
+    margin-right: 0.5em; }
   #conversejs #controlbox a.subscribe-to-user {
     padding-left: 2em;
     font-weight: bold; }

mockup/user-panel.html

@@ -22,6 +22,7 @@
     <div class="list-container rooms-list-container">
         <div class="rooms-list">
             <div class="available-chatroom d-flex flex-row">
+                <span class="badge badge-info msgs-indicator">1</span>
                 <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
                 <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>

sass/_controlbox.scss

@@ -74,13 +74,7 @@
         }
 
         .msgs-indicator {
-            border-radius: 3px;
-            background-color: $red;
-            color: white;
-            font-size: $font-size-small;
-            font-weight: normal;
-            padding: 0 4px;
-            text-shadow: none;
+            margin-right: 0.5em;
         }
 
         a.subscribe-to-user {

sass/_core.scss

@@ -209,7 +209,6 @@ body.reset {
         }
     }
     .badge {
-        padding: 0.4em;
         line-height: 1;
         font-weight: normal;
         font-size: 90%;

spec/bookmarks.js

@@ -320,7 +320,6 @@
                 [{'category': 'pubsub', 'type': 'pep'}],
                 ['http://jabber.org/protocol/pubsub#publish-options']
             ).then(function () {
-                test_utils.openControlBox().openRoomsPanel(_converse);
                 test_utils.waitUntil(function () {
                     return _converse.bookmarks;
                 }, 300).then(function () {
@@ -465,7 +464,6 @@
                     ['http://jabber.org/protocol/pubsub#publish-options']
                 ).then(function () {
 
-                    test_utils.openControlBox().openRoomsPanel(_converse);
                     var IQ_id;
                     expect(_.filter(_converse.connection.send.calls.all(), function (call) {
                         var stanza = call.args[0];
@@ -575,7 +573,6 @@
                         'name':  'The Play',
                         'nick': ''
                     });
-                    test_utils.openControlBox().openRoomsPanel(_converse);
 
                     test_utils.waitUntil(function () {
                         return $('#chatrooms dl.bookmarks dd:visible').length;
@@ -609,7 +606,6 @@
                 [{'category': 'pubsub', 'type': 'pep'}],
                 ['http://jabber.org/protocol/pubsub#publish-options']
             ).then(function () {
-                test_utils.openControlBox().openRoomsPanel(_converse);
                 // XXX Create bookmarks view here, otherwise we need to mock stanza
                 // traffic for it to get created.
                 _converse.bookmarksview = new _converse.BookmarksView(

spec/controlbox.js

@@ -8,7 +8,7 @@
     var u = converse.env.utils;
 
 
-    describe("The Control Box", function () {
+    describe("The Controlbox", function () {
 
         it("can be opened by clicking a DOM element with class 'toggle-controlbox'",
             mock.initConverseWithPromises(
@@ -31,6 +31,53 @@
             done();
         }));
 
+        describe("The \"Contacts\" section", function () {
+
+            it("shows the number of unread mentions received",
+                mock.initConverseWithPromises(
+                    null, ['rosterGroupsFetched'], {},
+                    function (done, _converse) {
+
+                test_utils.createContacts(_converse, 'all').openControlBox();
+
+                var contacts_panel = _converse.chatboxviews.get('controlbox').contactspanel;
+                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+
+                var sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
+                test_utils.openChatBoxFor(_converse, sender_jid);
+                var chatview = _converse.chatboxviews.get(sender_jid);
+                chatview.model.set({'minimized': true});
+
+                var msg = $msg({
+                        from: sender_jid,
+                        to: _converse.connection.jid,
+                        type: 'chat',
+                        id: (new Date()).getTime()
+                    }).c('body').t('hello').up()
+                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
+                _converse.chatboxes.onMessage(msg);
+                expect(contacts_panel.tab_el.querySelector('.msgs-indicator').textContent).toBe('1');
+
+                msg = $msg({
+                        from: sender_jid,
+                        to: _converse.connection.jid,
+                        type: 'chat',
+                        id: (new Date()).getTime()
+                    }).c('body').t('hello again').up()
+                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
+                _converse.chatboxes.onMessage(msg);
+                expect(contacts_panel.tab_el.querySelector('.msgs-indicator').textContent).toBe('2');
+
+                var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
+                expect(_.isNull(roomspanel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+
+                chatview.model.set({'minimized': false});
+                expect(_.includes(contacts_panel.tab_el.firstChild.classList, 'unread-msgs')).toBeFalsy();
+                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+                done();
+            }));
+        });
+
         describe("The Status Widget", function () {
 
             it("shows the user's chat status, which is online by default",
@@ -144,87 +191,4 @@
             });
         }));
     });
-
-    describe("The Controlbox Tabs", function () {
-
-        it("contains two tabs, 'Contacts' and 'ChatRooms'",
-            mock.initConverseWithPromises(
-                null, ['rosterGroupsFetched'], {},
-                function (done, _converse) {
-
-            test_utils.openControlBox();
-            var cbview = _converse.chatboxviews.get('controlbox');
-            var $panels = $(cbview.el).find('.controlbox-panes');
-            expect($panels.children().length).toBe(2);
-            expect($panels.children().first().attr('id')).toBe('users');
-            expect($panels.children().first().is(':visible')).toBe(true);
-            expect($panels.children().last().attr('id')).toBe('chatrooms');
-            expect($panels.children().last().is(':visible')).toBe(false);
-            done();
-        }));
-
-        it("remembers which tab was open last",
-            mock.initConverseWithPromises(
-                null, ['rosterGroupsFetched'], {},
-                function (done, _converse) {
-
-            test_utils.openControlBox();
-            var cbview = _converse.chatboxviews.get('controlbox');
-            var $tabs = $(cbview.el).find('#controlbox-tabs');
-            expect(cbview.model.get('active-panel')).toBe('users');
-            $tabs.find('li').last().find('a')[0].click();
-            expect(cbview.model.get('active-panel')).toBe('chatrooms');
-            $tabs.find('li').first().find('a')[0].click();
-            expect(cbview.model.get('active-panel')).toBe('users');
-            done();
-        }));
-
-        describe("The \"Contacts\" Panel", function () {
-
-            it("shows the number of unread mentions received",
-                mock.initConverseWithPromises(
-                    null, ['rosterGroupsFetched'], {},
-                    function (done, _converse) {
-
-                test_utils.createContacts(_converse, 'all').openControlBox();
-                test_utils.openContactsPanel(_converse);
-
-                var contacts_panel = _converse.chatboxviews.get('controlbox').contactspanel;
-                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
-
-                var sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
-                test_utils.openChatBoxFor(_converse, sender_jid);
-                var chatview = _converse.chatboxviews.get(sender_jid);
-                chatview.model.set({'minimized': true});
-
-                var msg = $msg({
-                        from: sender_jid,
-                        to: _converse.connection.jid,
-                        type: 'chat',
-                        id: (new Date()).getTime()
-                    }).c('body').t('hello').up()
-                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
-                _converse.chatboxes.onMessage(msg);
-                expect(contacts_panel.tab_el.querySelector('.msgs-indicator').textContent).toBe('1');
-
-                msg = $msg({
-                        from: sender_jid,
-                        to: _converse.connection.jid,
-                        type: 'chat',
-                        id: (new Date()).getTime()
-                    }).c('body').t('hello again').up()
-                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
-                _converse.chatboxes.onMessage(msg);
-                expect(contacts_panel.tab_el.querySelector('.msgs-indicator').textContent).toBe('2');
-
-                var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
-                expect(_.isNull(roomspanel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
-
-                chatview.model.set({'minimized': false});
-                expect(_.includes(contacts_panel.tab_el.firstChild.classList, 'unread-msgs')).toBeFalsy();
-                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
-                done();
-            }));
-        });
-    });
 }));

spec/converse.js

@@ -276,7 +276,7 @@
 
         describe("The \"chats\" API", function() {
 
-            it("has a method 'get' which returns a wrapped chat box", mock.initConverseWithPromises(
+            it("has a method 'get' which returns the chatbox model", mock.initConverseWithPromises(
                 null, ['rosterInitialized'], {}, function (done, _converse) {
                     test_utils.openControlBox();
                     test_utils.createContacts(_converse, 'current');
@@ -291,7 +291,7 @@
                     test_utils.openChatBoxFor(_converse, jid);
                     box = _converse.api.chats.get(jid);
                     expect(box instanceof Object).toBeTruthy();
-                    expect(box.model.get('box_id')).toBe(b64_sha1(jid));
+                    expect(box.get('box_id')).toBe(b64_sha1(jid));
                     chatboxview = _converse.chatboxviews.get(jid);
                     expect($(chatboxview.el).is(':visible')).toBeTruthy();
                     // Test for multiple JIDs
@@ -299,12 +299,12 @@
                     test_utils.openChatBoxFor(_converse, jid2);
                     var list = _converse.api.chats.get([jid, jid2]);
                     expect(_.isArray(list)).toBeTruthy();
-                    expect(list[0].model.get('box_id')).toBe(b64_sha1(jid));
-                    expect(list[1].model.get('box_id')).toBe(b64_sha1(jid2));
+                    expect(list[0].get('box_id')).toBe(b64_sha1(jid));
+                    expect(list[1].get('box_id')).toBe(b64_sha1(jid2));
                     done();
             }));
 
-            it("has a method 'open' which opens and returns a wrapped chat box", mock.initConverseWithPromises(
+            it("has a method 'open' which opens and returns the chatbox model", mock.initConverseWithPromises(
                 null, ['rosterGroupsFetched'], {}, function (done, _converse) {
 
                 test_utils.openControlBox();
@@ -315,7 +315,7 @@
                 expect(_converse.api.chats.get('non-existing@jabber.org')).toBeFalsy();
                 var box = _converse.api.chats.open(jid);
                 expect(box instanceof Object).toBeTruthy();
-                expect(box.model.get('box_id')).toBe(b64_sha1(jid));
+                expect(box.get('box_id')).toBe(b64_sha1(jid));
                 expect(
                     _.keys(box),
                     ['close', 'endOTR', 'focus', 'get', 'initiateOTR', 'is_chatroom', 'maximize', 'minimize', 'open', 'set']
@@ -326,8 +326,8 @@
                 var jid2 = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
                 var list = _converse.api.chats.open([jid, jid2]);
                 expect(_.isArray(list)).toBeTruthy();
-                expect(list[0].model.get('box_id')).toBe(b64_sha1(jid));
-                expect(list[1].model.get('box_id')).toBe(b64_sha1(jid2));
+                expect(list[0].get('box_id')).toBe(b64_sha1(jid));
+                expect(list[1].get('box_id')).toBe(b64_sha1(jid2));
                 done();
             }));
         });

spec/minchats.js

@@ -13,7 +13,6 @@
 
             test_utils.createContacts(_converse, 'current');
             test_utils.openControlBox();
-            test_utils.openContactsPanel(_converse);
             _converse.minimized_chats.toggleview.model.browserStorage._clear();
             _converse.minimized_chats.initToggle();
 
@@ -48,7 +47,6 @@
 
             test_utils.createContacts(_converse, 'current');
             test_utils.openControlBox();
-            test_utils.openContactsPanel(_converse);
             _converse.minimized_chats.toggleview.model.browserStorage._clear();
             _converse.minimized_chats.initToggle();
 
@@ -79,7 +77,6 @@
 
             test_utils.createContacts(_converse, 'current');
             test_utils.openControlBox();
-            test_utils.openContactsPanel(_converse);
             _converse.minimized_chats.toggleview.model.browserStorage._clear();
             _converse.minimized_chats.initToggle();
 

spec/otr.js

@@ -77,7 +77,6 @@
                 function (done, _converse) {
 
             test_utils.openControlBox();
-            test_utils.openContactsPanel(_converse);
             test_utils.createContacts(_converse, 'current');
 
             var UNVERIFIED = 1, UNENCRYPTED = 0;
@@ -104,7 +103,6 @@
                     function (done, _converse) {
 
                 test_utils.openControlBox();
-                test_utils.openContactsPanel(_converse);
                 test_utils.createContacts(_converse, 'current');
 
                 var msgtext = "?OTR,1,3,?OTR:AAIDAAAAAAEAAAABAAAAwCQ8HKsag0y0DGKsneo0kzKu1ua5L93M4UKTkCf1I2kbm2RgS5kIxDTxrTj3wVRB+H5Si86E1fKtuBgsDf/bKkGTM0h/49vh5lOD9HkE8cnSrFEn5GN,";

spec/roomslist.js

@@ -14,7 +14,6 @@
                                      // have to mock stanza traffic.
             },
             function (done, _converse) {
-                test_utils.openControlBox().openRoomsPanel(_converse);
                 var controlbox = _converse.chatboxviews.get('controlbox');
 
                 var list = controlbox.el.querySelector('div.rooms-list-container');
@@ -69,7 +68,6 @@
             test_utils.openChatRoom(
                 _converse, 'lounge', 'conference.shakespeare.lit', 'JC');
             expect(_converse.chatboxes.length).toBe(2);
-            test_utils.openControlBox().openRoomsPanel(_converse);
             var room_els = _converse.rooms_list_view.el.querySelectorAll(".open-room");
             expect(room_els.length).toBe(1);
             var close_el = _converse.rooms_list_view.el.querySelector(".close-room");

spec/roster.js

@@ -497,7 +497,6 @@
                 // Must be initialized, so that render is called and documentFragment set up.
                 test_utils.createContacts(_converse, 'pending');
                 test_utils.openControlBox();
-                test_utils.openContactsPanel(_converse);
             }
 
             it("can be collapsed under their own header", 
@@ -690,7 +689,6 @@
             var _addContacts = function (_converse) {
                 test_utils.createContacts(_converse, 'current')
                     .openControlBox()
-                    .openContactsPanel(_converse);
             };
 
             it("can be collapsed under their own header", 
@@ -1081,7 +1079,6 @@
                         names.push($(item).text().replace(/^\s+|\s+$/g, ''));
                     }
                 };
-                test_utils.openContactsPanel(_converse);
                 spyOn(_converse, 'emit');
                 spyOn(_converse.rosterview, 'update').and.callThrough();
                 spyOn(_converse.controlboxtoggle, 'showControlBox').and.callThrough();
@@ -1112,7 +1109,6 @@
                     null, ['rosterGroupsFetched'], {},
                     function (done, _converse) {
 
-                test_utils.openContactsPanel(_converse);
                 var name = mock.req_names[0];
                 spyOn(window, 'confirm').and.returnValue(true);
                 _converse.roster.create({
@@ -1258,7 +1254,6 @@
                     function (done, _converse) {
 
                 test_utils.createContacts(_converse, 'all').openControlBox();
-                test_utils.openContactsPanel(_converse);
                 var new_attrs, old_attrs, attrs;
                 var num_contacts = _converse.roster.length;
                 var new_roster = new _converse.RosterContacts();
@@ -1287,7 +1282,6 @@
                     function (done, _converse) {
 
                 test_utils.createContacts(_converse, 'all').openControlBox();
-                test_utils.openContactsPanel(_converse);
                 test_utils.waitUntil(function () {
                     return $(_converse.rosterview.el).find('.roster-group li').length;
                 }, 700).then(function () {

spec/spoilers.js

@@ -93,7 +93,6 @@
 
             test_utils.createContacts(_converse, 'current');
             test_utils.openControlBox();
-            test_utils.openContactsPanel(_converse);
             var contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
 
             // XXX: We need to send a presence from the contact, so that we
@@ -167,7 +166,6 @@
 
             test_utils.createContacts(_converse, 'current');
             test_utils.openControlBox();
-            test_utils.openContactsPanel(_converse);
             var contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
 
             // XXX: We need to send a presence from the contact, so that we

src/converse-chatboxes.js

@@ -366,10 +366,11 @@
                         create = attrs;
                         attrs = jid;
                         jid = attrs.jid;
-                    } else {
-                        attrs.jid = jid;
                     }
                     jid = jid.toLowerCase();
+                    attrs.jid = jid;
+                    attrs.id = jid;
+
                     let  chatbox = this.get(Strophe.getBareJidFromJid(jid));
                     if (!chatbox && create) {
                         chatbox = this.create(attrs, {

src/converse-chatview.js

@@ -269,6 +269,7 @@
                 },
 
                 render () {
+                    // XXX: Is this still needed?
                     this.el.setAttribute('id', this.model.get('box_id'));
                     this.el.innerHTML = tpl_chatbox(
                         _.extend(this.model.toJSON(), {

src/converse-fullscreen.js

@@ -44,18 +44,6 @@
                         this.createBrandHeadingHTML()
                     );
                 }
-            },
-
-            ChatRoomView: {
-                afterShown (focus) {
-                    /* Make sure chat rooms are scrolled down when opened
-                     */
-                    this.scrollDown();
-                    if (focus) {
-                        this.focus();
-                    }
-                    return this.__super__.afterShown.apply(this, arguments);
-                }
             }
         },
 

src/converse-muc-views.js

@@ -242,8 +242,9 @@
                 openRoom (ev) {
                     ev.preventDefault();
                     const jid = ev.target.getAttribute('data-room-jid');
+                    const name = ev.target.getAttribute('data-room-name');
                     this.modal.hide();
-                    _converse.api.rooms.open(jid);
+                    _converse.api.rooms.open(jid, {'name': name});
                 },
 
                 toggleRoomInfo (ev) {
@@ -264,7 +265,7 @@
                     );
                     const div = document.createElement('div');
                     div.innerHTML = tpl_room_item({
-                        'name': name,
+                        'name': Strophe.xmlunescape(name),
                         'jid': room.getAttribute('jid'),
                         'open_title': __('Click to open this room'),
                         'info_title': __('Show more information on this room')

src/converse-muc.js

@@ -482,6 +482,7 @@
                 'rooms': {
                     'close' (jids) {
                         if (_.isUndefined(jids)) {
+                            // FIXME: can't access views here
                             _converse.chatboxviews.each(function (view) {
                                 if (view.is_chatroom && view.model) {
                                     view.close();
@@ -543,9 +544,9 @@
                             attrs.nick = Strophe.getNodeFromJid(_converse.bare_jid);
                         }
                         if (_.isString(jids)) {
-                            return _converse.getChatRoom(jids, attrs);
+                            return getChatRoom(jids, attrs);
                         }
-                        return _.map(jids, _.partial(_converse.getChatRoom, _, attrs));
+                        return _.map(jids, _.partial(getChatRoom, _, attrs));
                     }
                 }
             });

src/templates/chatroom_form.html

 <div class="chatroom-form-container">
     <form class="converse-form chatroom-form">
         <fieldset class="form-group">
-            <span class="spinner centered"/>
+            <span class="spinner fa fa-spinner centered"/>
         </fieldset>
     </form>
 </div>

src/templates/login_panel.html

@@ -5,7 +5,7 @@
             <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
         </div>
         {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
-            <span class="spinner centered"/>
+            <span class="spinner fa fa-spinner centered"/>
         {[ } else { ]}
             {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
                 <div class="form-group">

src/templates/registration_request.html

-<span class="spinner login-submit"></span>
+<span class="spinner login-submit fa fa-spinner"></span>
 <p class="info">{{{o.__("Hold tight, we're fetching the registration form…")}}}</p>
 {[ if (o.cancel) { ]}
     <button class="btn btn-secondary button-cancel hor_centered">{{{o.__('Cancel')}}}</button>

src/templates/room_item.html

@@ -2,6 +2,7 @@
   <div class="available-chatroom d-flex flex-row">
     <a class="open-room available-room w-100"
        data-room-jid="{{{o.jid}}}"
+       data-room-name="{{{o.name}}}"
        title="{{{o.open_title}}}"
        href="#">{{{o.name}}}</a>
     <a class="right room-info icon-room-info"

src/templates/room_panel.html

 <!-- <div id="chatrooms"> -->
 <div class="d-flex">
     <span class="w-100">{{{o.heading_chatrooms}}}</span>
-    <a class="chatbox-btn fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
-    <a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
+    <a class="chatbox-btn trigger-list-chatrooms-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
+    <a class="chatbox-btn trigger-add-chatrooms-modal fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
 </div>
 <div class="list-container open-rooms-list rooms-list-container"></div>
 <div class="list-container bookmarks-list rooms-list-container"></div>

src/templates/rooms_list_item.html

 <div class="room-item">
 <div class="available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
-    <span class="msgs-indicator">{{{ o.num_unread }}}</span>
+    <span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
 {[ } ]}
 <a class="open-room available-room w-100"
     data-room-jid="{{{o.jid}}}"
-    title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
+    title="{{{o.open_title}}}" href="#">{{{o.name || o.jid}}}</a>
 
 <a class="right close-room icon-leave"
    data-room-jid="{{{o.jid}}}"

src/templates/trimmed_chat.html

@@ -2,6 +2,6 @@
     {[ if (o.num_unread) { ]} 
         <span class="badge badge-light">{{{o.num_unread}}}</span>
     {[ } ]}
-    {{{o. title }}}
+    {{{o.title || o.jid }}}
 </a>
 <a class="chatbox-btn close-chatbox-button fa fa-times"></a>

src/utils.js

@@ -705,6 +705,5 @@
         evt.initEvent(name, bubbles, cancelable);
         el.dispatchEvent(evt);
     };
-
     return u;
 }));

tests/index.html

@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
 
     <link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="../css/jasmine.css">
     <link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />

tests/transpiled.html

@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
 
     <link rel="stylesheet" type="text/css" media="screen" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="../css/jasmine.css">
     <link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />

tests/utils.js

@@ -83,18 +83,6 @@
         return this;
     };
 
-    utils.openContactsPanel = function (converse) {
-        this.openControlBox(converse);
-        var cbview = converse.chatboxviews.get('controlbox');
-        cbview.el.querySelector('#controlbox-tabs li:first-child a').click();
-    };
-
-    utils.openRoomsPanel = function (converse) {
-        utils.openControlBox();
-        var cbview = converse.chatboxviews.get('controlbox');
-        cbview.el.querySelector('#controlbox-tabs li:last-child a').click();
-    };
-
     utils.openChatBoxes = function (converse, amount) {
         var i = 0, jid, views = [];
         for (i; i<amount; i++) {
@@ -108,25 +96,36 @@
         return converse.roster.get(jid).trigger("open");
     };
 
-    utils.openChatRoom = function (_converse, room, server, nick) {
+    utils.openChatRoomViaModal = function (_converse, jid, nick) {
         // Opens a new chatroom
-        this.openControlBox(_converse);
-        this.openRoomsPanel(_converse);
+        return new Promise(function (resolve, reject) {
+            utils.openControlBox(_converse);
             var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
-        roomspanel.el.querySelector('input.new-chatroom-name').value = room;
-        roomspanel.el.querySelector('input.new-chatroom-server').value = server;
-        roomspanel.el.querySelector('form input[type="submit"]').click();
-        this.closeControlBox(_converse);
+            roomspanel.el.querySelector('.trigger-add-chatrooms-modal').click();
+            utils.closeControlBox(_converse);
+            const modal = roomspanel.add_room_modal;
+            utils.waitUntil(function () {
+                return u.isVisible(modal.el);
+            }, 1000).then(function () {
+                modal.el.querySelector('input[name="chatroom"]').value = jid;
+                modal.el.querySelector('form input[type="submit"]').click();
+                resolve();
+            }).catch(_.partial(console.error, _));
+        }).catch(_.partial(console.error, _));
     };
 
-    utils.openAndEnterChatRoom = function (converse, room, server, nick) {
+    utils.openChatRoom = function (_converse, room, server, nick) {
+        _converse.api.rooms.open(`${room}@${server}`);
+    };
+
+    utils.openAndEnterChatRoom = function (_converse, room, server, nick) {
         return new Promise(function (resolve, reject) {
-            sinon.spy(converse.connection, 'sendIQ');
-            utils.openChatRoom(converse, room, server);
-            var view = converse.chatboxviews.get((room+'@'+server).toLowerCase());
+            sinon.spy(_converse.connection, 'sendIQ');
+            _converse.api.rooms.open(`${room}@${server}`);
+            var view = _converse.chatboxviews.get((room+'@'+server).toLowerCase());
 
             // We pretend this is a new room, so no disco info is returned.
-            var IQ_id = converse.connection.sendIQ.firstCall.returnValue;
+            var IQ_id = _converse.connection.sendIQ.firstCall.returnValue;
             var features_stanza = $iq({
                     'from': room+'@'+server,
                     'id': IQ_id,
@@ -134,40 +133,40 @@
                     'type': 'error'
                 }).c('error', {'type': 'cancel'})
                     .c('item-not-found', {'xmlns': "urn:ietf:params:xml:ns:xmpp-stanzas"});
-            converse.connection._dataRecv(utils.createRequest(features_stanza));
+            _converse.connection._dataRecv(utils.createRequest(features_stanza));
 
             utils.waitUntil(function () {
-                return converse.connection.sendIQ.secondCall;
+                return _converse.connection.sendIQ.secondCall;
             }).then(function () {
                 // The XMPP server returns the reserved nick for this user.
-                IQ_id = converse.connection.sendIQ.secondCall.returnValue;
+                IQ_id = _converse.connection.sendIQ.secondCall.returnValue;
                 var stanza = $iq({
                     'type': 'result',
                     'id': IQ_id,
                     'from': view.model.get('jid'),
-                    'to': converse.connection.jid 
+                    'to': _converse.connection.jid 
                 }).c('query', {'xmlns': 'http://jabber.org/protocol/disco#info', 'node': 'x-roomuser-item'})
                     .c('identity', {'category': 'conference', 'name': nick, 'type': 'text'});
-                converse.connection._dataRecv(utils.createRequest(stanza));
+                _converse.connection._dataRecv(utils.createRequest(stanza));
                 // The user has just entered the room (because join was called)
                 // and receives their own presence from the server.
                 // See example 24: http://xmpp.org/extensions/xep-0045.html#enter-pres
                 var presence = $pres({
-                        to: converse.connection.jid,
+                        to: _converse.connection.jid,
                         from: room+'@'+server+'/'+nick,
                         id: 'DC352437-C019-40EC-B590-AF29E879AF97'
                 }).c('x').attrs({xmlns:'http://jabber.org/protocol/muc#user'})
                     .c('item').attrs({
                         affiliation: 'member',
-                        jid: converse.bare_jid,
+                        jid: _converse.bare_jid,
                         role: 'participant'
                     }).up()
                     .c('status').attrs({code:'110'});
-                converse.connection._dataRecv(utils.createRequest(presence));
-                converse.connection.sendIQ.restore();
+                _converse.connection._dataRecv(utils.createRequest(presence));
+                _converse.connection.sendIQ.restore();
                 resolve();
-            });
-        });
+            }).catch(_.partial(console.error, _));
+        }).catch(_.partial(console.error, _));
     };
 
     utils.clearBrowserStorage = function () {