Add new test for <converse-muc>

karma.conf.js

@@ -60,6 +60,7 @@ module.exports = function(config) {
       { pattern: "src/plugins/mam-views/tests/mam.js", type: 'module' },
       { pattern: "src/plugins/minimize/tests/minchats.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/autocomplete.js", type: 'module' },
+      { pattern: "src/plugins/muc-views/tests/component.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/corrections.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/hats.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/mentions.js", type: 'module' },

src/plugins/muc-views/styles/muc.scss

@@ -14,20 +14,10 @@
             width: var(--mobile-chat-width);
         }
 
-        .empty-history-feedback {
-            position: relative;
-            span {
-                width: 100%;
-                text-align: center;
-                position: absolute;
-                margin-top: 50%;
-            }
-        }
-
         .box-flyout {
-            overflow-y: hidden;
             background-color: var(--chatroom-head-bg-color);
-            width: 100%;
+            overflow-y: hidden;
+            width: var(--chatroom-width);
 
             @media screen and (max-height: $mobile-landscape-height) {
                 height: var(--mobile-chat-height);
@@ -39,6 +29,17 @@
                 width: var(--mobile-chat-width);
                 height: var(--fullpage-chat-height);
             }
+
+            .empty-history-feedback {
+                position: relative;
+                span {
+                    width: 100%;
+                    text-align: center;
+                    position: absolute;
+                    margin-top: 50%;
+                }
+            }
+
             .chatroom-body {
                 flex-direction: row;
                 flex-flow: nowrap;

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

@@ -0,0 +1,38 @@
+/*global mock, converse */
+
+const u = converse.env.utils;
+
+
+describe("The <converse-muc> component", function () {
+
+    it("can be rendered as a standalone component",
+            mock.initConverse([], {'auto_insert': false}, async function (done, _converse) {
+
+        const { api } = _converse;
+        const muc_jid = 'lounge@montague.lit';
+        const nick = 'romeo';
+        const muc_creation_promise = await api.rooms.open(muc_jid, {nick, 'hidden': true}, false);
+        await mock.getRoomFeatures(_converse, muc_jid, []);
+        await mock.receiveOwnMUCPresence(_converse, muc_jid, nick);
+        await muc_creation_promise;
+        const model = _converse.chatboxes.get(muc_jid);
+        await u.waitUntil(() => (model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED));
+
+        const span_el = document.createElement('span');
+        span_el.classList.add('converse-root');
+        span_el.classList.add('converse-embedded');
+
+        const muc_el = document.createElement('converse-muc');
+        muc_el.classList.add('chatbox');
+        muc_el.classList.add('chatroom');
+        muc_el.setAttribute('jid', muc_jid);
+        span_el.appendChild(muc_el);
+
+        const body = document.querySelector('body');
+        body.appendChild(span_el);
+        await u.waitUntil(() => muc_el.querySelector('converse-muc-bottom-panel'));
+        body.removeChild(span_el);
+        expect(true).toBe(true);
+        done();
+    }));
+});