diff --git a/src/plugins/muc-views/tests/muc-mentions.js b/src/plugins/muc-views/tests/muc-mentions.js index faa880b96..8fab48aec 100644 --- a/src/plugins/muc-views/tests/muc-mentions.js +++ b/src/plugins/muc-views/tests/muc-mentions.js @@ -55,7 +55,8 @@ describe("MUC Mention Notfications", function () { `); _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'); })); }); diff --git a/src/plugins/muc-views/tests/muclist.js b/src/plugins/muc-views/tests/muclist.js index 86698404c..10a92556a 100644 --- a/src/plugins/muc-views/tests/muclist.js +++ b/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); })); }); diff --git a/src/plugins/roomslist/view.js b/src/plugins/roomslist/view.js index 442b2f8cc..b3c83fb79 100644 --- a/src/plugins/roomslist/view.js +++ b/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