Controlbox related bugfixes

spec/muclist.js

@@ -1,6 +1,9 @@
 /* global mock, converse */
 
-describe("A list of open groupchats", function () {
+const u = converse.env.utils;
+
+
+fdescribe("A list of open groupchats", function () {
 
     it("is shown in controlbox", mock.initConverse(
             ['rosterGroupsFetched', 'chatBoxesFetched'],
@@ -8,15 +11,13 @@ describe("A list of open groupchats", function () {
                                         // have to mock stanza traffic.
             }, async function (done, _converse) {
 
-        const u = converse.env.utils;
-
         await mock.openControlBox(_converse);
         const controlbox = _converse.chatboxviews.get('controlbox');
-        let list = controlbox.el.querySelector('.list-container--openrooms');
+        let list = controlbox.querySelector('.list-container--openrooms');
         expect(u.hasClass('hidden', list)).toBeTruthy();
         await mock.openChatRoom(_converse, 'room', 'conference.shakespeare.lit', 'JC');
 
-        const lview = _converse.rooms_list_view
+        const lview = controlbox.querySelector('converse-rooms-list');
         await u.waitUntil(() => lview.querySelectorAll(".open-room").length);
         let room_els = lview.querySelectorAll(".open-room");
         expect(room_els.length).toBe(1);
@@ -24,23 +25,23 @@ describe("A list of open groupchats", function () {
 
         await mock.openChatRoom(_converse, 'lounge', 'montague.lit', 'romeo');
         await u.waitUntil(() => lview.querySelectorAll(".open-room").length > 1);
-        room_els = _converse.rooms_list_view.querySelectorAll(".open-room");
+        room_els = lview.querySelectorAll(".open-room");
         expect(room_els.length).toBe(2);
 
         let view = _converse.chatboxviews.get('room@conference.shakespeare.lit');
         await view.close();
-        room_els = _converse.rooms_list_view.querySelectorAll(".open-room");
+        room_els = lview.querySelectorAll(".open-room");
         expect(room_els.length).toBe(1);
         expect(room_els[0].innerText).toBe('lounge@montague.lit');
-        list = controlbox.el.querySelector('.list-container--openrooms');
+        list = controlbox.querySelector('.list-container--openrooms');
         u.waitUntil(() => Array.from(list.classList).includes('hidden'));
 
         view = _converse.chatboxviews.get('lounge@montague.lit');
         await view.close();
-        room_els = _converse.rooms_list_view.querySelectorAll(".open-room");
+        room_els = lview.querySelectorAll(".open-room");
         expect(room_els.length).toBe(0);
 
-        list = controlbox.el.querySelector('.list-container--openrooms');
+        list = controlbox.querySelector('.list-container--openrooms');
         expect(Array.from(list.classList).includes('hidden')).toBeTruthy();
         done();
     }));
@@ -97,7 +98,7 @@ describe("A list of open groupchats", function () {
 
         await _converse.api.waitUntil('roomsListInitialized');
         const controlbox = _converse.chatboxviews.get('controlbox');
-        const list = controlbox.el.querySelector('.list-container--openrooms');
+        const list = controlbox.querySelector('.list-container--openrooms');
         expect(Array.from(list.classList).includes('hidden')).toBeFalsy();
         const items = list.querySelectorAll('.list-item');
         expect(items.length).toBe(1);
@@ -115,10 +116,11 @@ describe("A groupchat shown in the groupchats list", function () {
             allow_bookmarks: false // Makes testing easier, otherwise we have to mock stanza traffic.
             }, async function (done, _converse) {
 
+        const controlbox = _converse.chatboxviews.get('controlbox');
         const u = converse.env.utils;
         const muc_jid = 'coven@chat.shakespeare.lit';
         await _converse.api.rooms.open(muc_jid, {'nick': 'some1'}, true);
-        const lview = _converse.rooms_list_view
+        const lview = controlbox.querySelector('converse-rooms-list');
         await u.waitUntil(() => lview.querySelectorAll(".open-room").length);
         let room_els = lview.querySelectorAll(".available-chatroom");
         expect(room_els.length).toBe(1);
@@ -259,7 +261,9 @@ describe("A groupchat shown in the groupchats list", function () {
         expect(_converse.chatboxes.length).toBe(1);
         await mock.openChatRoom(_converse, 'lounge', 'conference.shakespeare.lit', 'JC');
         expect(_converse.chatboxes.length).toBe(2);
-        const lview = _converse.rooms_list_view
+
+        const controlbox = _converse.chatboxviews.get('controlbox');
+        const lview = controlbox.querySelector('converse-rooms-list');
         await u.waitUntil(() => lview.querySelectorAll(".open-room").length);
         let room_els = lview.querySelectorAll(".open-room");
         expect(room_els.length).toBe(1);
@@ -301,7 +305,8 @@ describe("A groupchat shown in the groupchats list", function () {
             }).c('body').t('foo').tree());
 
         // If the user isn't mentioned, the counter doesn't get incremented, but the text of the groupchat is bold
-        const lview = _converse.rooms_list_view
+        const controlbox = _converse.chatboxviews.get('controlbox');
+        const lview = controlbox.querySelector('converse-rooms-list');
         let room_el = await u.waitUntil(() => lview.querySelector(".available-chatroom"));
         expect(Array.from(room_el.classList).includes('unread-msgs')).toBeTruthy();
 

src/plugins/bookmark-views/bookmarks-list.js

@@ -45,7 +45,7 @@ export default class BookmarksView extends ElementView {
     insertIntoControlBox () {
         const controlboxview = _converse.chatboxviews.get('controlbox');
         if (controlboxview !== undefined && !u.rootContains(_converse.root, this.el)) {
-            const el = controlboxview.el.querySelector('.list-container--bookmarks');
+            const el = controlboxview.querySelector('.list-container--bookmarks');
             el && el.parentNode.replaceChild(this.el, el);
         }
     }

src/plugins/controlbox/utils.js

@@ -1,6 +1,7 @@
 import { _converse } from "@converse/headless/core";
 
 export function addControlBox () {
-    const m = new _converse.ControlBox({'id': 'controlbox'});
-    return _converse.chatboxes.add(m);
+    const m = _converse.chatboxes.add(new _converse.ControlBox({'id': 'controlbox'}));
+     _converse.chatboxviews.get('controlbox')?.setModel();
+    return m;
 }

src/plugins/controlbox/view.js

@@ -18,10 +18,7 @@ class ControlBoxView extends ElementView {
     }
 
     initialize () {
-        this.model = _converse.chatboxes.get('controlbox');
-        this.listenTo(this.model, 'change:active-form', this.render);
-        this.listenTo(this.model, 'change:connected', this.onConnected);
-        this.listenTo(this.model, 'show', this.show);
+        this.setModel();
         this.render();
         _converse.chatboxviews.add('controlbox', this);
         /**
@@ -35,6 +32,20 @@ class ControlBoxView extends ElementView {
         api.trigger('controlBoxInitialized', this);
     }
 
+    setModel () {
+        this.model = _converse.chatboxes.get('controlbox');
+        this.initEventHandlers();
+    }
+
+    initEventHandlers () {
+        // Keep event handler registration in a separate method so that it can
+        // be called when a new controlbox is created and assigned to this
+        // element.
+        this.listenTo(this.model, 'change:active-form', this.render);
+        this.listenTo(this.model, 'change:connected', this.render);
+        this.listenTo(this.model, 'show', this.show);
+    }
+
     render () {
         if (this.model.get('connected') && this.model.get('closed') === undefined) {
             this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
@@ -51,10 +62,6 @@ class ControlBoxView extends ElementView {
         }
     }
 
-    onConnected () {
-        this.model.get('connected') && this.render();
-    }
-
     async close (ev) {
         if (ev && ev.preventDefault) {
             ev.preventDefault();

src/shared/avatar.js

@@ -8,7 +8,7 @@ const u = converse.env.utils;
 const AvatarMixin = {
 
     renderAvatar (el) {
-        el = el || this.el;
+        el = el || (this?.el ?? this);
         const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
         if (avatar_el === null) {
             return;