Replace ElementView with CustomElement for RoomsList

src/plugins/muc-views/tests/muc-mentions.js

@@ -55,7 +55,8 @@ describe("MUC Mention Notfications", function () {
             </message>
         `);
         _converse.connection._dataRecv(mock.createRequest(message));
-        expect(Array.from(room_el.classList).includes('unread-msgs')).toBeTruthy();
+
+        await u.waitUntil(() => Array.from(room_el.classList).includes('unread-msgs'));
         expect(room_el.querySelector('.msgs-indicator')?.textContent.trim()).toBe('1');
 
         message = u.toStanza(`
@@ -80,6 +81,6 @@ describe("MUC Mention Notfications", function () {
         `);
         _converse.connection._dataRecv(mock.createRequest(message));
         expect(Array.from(room_el.classList).includes('unread-msgs')).toBeTruthy();
-        expect(room_el.querySelector('.msgs-indicator')?.textContent.trim()).toBe('2');
+        await u.waitUntil(() => room_el.querySelector('.msgs-indicator')?.textContent.trim() === '2');
     }));
 });

src/plugins/muc-views/tests/muclist.js

@@ -89,7 +89,7 @@ describe("A list of open groupchats", function () {
         expect(roomspanel.querySelector('.msgs-indicator').textContent.trim()).toBe('2');
         view.model.set({'minimized': false});
         expect(roomspanel.querySelectorAll('.available-room').length).toBe(1);
-        expect(roomspanel.querySelectorAll('.msgs-indicator').length).toBe(0);
+        await u.waitUntil(() => roomspanel.querySelectorAll('.msgs-indicator').length === 0);
     }));
 
     it("uses bookmarks to determine groupchat names",
@@ -395,6 +395,6 @@ describe("A groupchat shown in the groupchats list", function () {
         indicator_el = lview.querySelector(".msgs-indicator");
         expect(indicator_el === null);
         room_el = lview.querySelector(".available-chatroom");
-        expect(Array.from(room_el.classList).includes('unread-msgs')).toBeFalsy();
+        await u.waitUntil(() => Array.from(room_el.classList).includes('unread-msgs') === false);
     }));
 });

src/plugins/roomslist/view.js

@@ -1,16 +1,15 @@
 import RoomDetailsModal from 'plugins/muc-views/modals/muc-details.js';
 import RoomsListModel from './model.js';
 import tpl_roomslist from "./templates/roomslist.js";
-import { ElementView } from '@converse/skeletor/src/element.js';
+import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { initStorage } from '@converse/headless/utils/storage.js';
 import { isUniView } from '@converse/headless/utils/core.js';
-import { render } from 'lit';
 
 const { Strophe, u } = converse.env;
 
-export class RoomsList extends ElementView {
+export class RoomsList extends CustomElement {
 
     initialize () {
         const id = `converse.roomspanel${_converse.bare_jid}`;
@@ -23,23 +22,23 @@ export class RoomsList extends ElementView {
         this.listenTo(_converse.chatboxes, 'destroy', this.renderIfChatRoom)
         this.listenTo(_converse.chatboxes, 'change', this.renderIfRelevantChange)
 
-        this.render();
+        this.requestUpdate();
     }
 
     renderIfChatRoom (model) {
-        u.isChatRoom(model) && this.render();
+        u.isChatRoom(model) && this.requestUpdate();
     }
 
     renderIfRelevantChange (model) {
         const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
         const changed = model.changed || {};
         if (u.isChatRoom(model) && Object.keys(changed).filter(m => attrs.includes(m)).length) {
-            this.render();
+            this.requestUpdate();
         }
     }
 
     render () {
-        render(tpl_roomslist({
+        return tpl_roomslist({
             'addBookmark': ev => this.addBookmark(ev),
             'allow_bookmarks': api.settings.get('allow_bookmarks') && _converse.bookmarks,
             'closeRoom': ev => this.closeRoom(ev),
@@ -52,7 +51,7 @@ export class RoomsList extends ElementView {
             'showRoomDetailsModal': ev => this.showRoomDetailsModal(ev),
             'toggleRoomsList': ev => this.toggleRoomsList(ev),
             'toggle_state': this.model.get('toggle-state')
-        }), this);
+        });
     }
 
     showRoomDetailsModal (ev) { // eslint-disable-line class-methods-use-this