test interaction with 'converse-bookmarks-pin' component

Author: mercihabam

src/headless/plugins/bookmarks/collection.js

@@ -82,6 +82,7 @@ class Bookmarks extends Collection {
             const groupchat = await api.rooms.create(bookmark.get('jid'), {
                 nick: bookmark.get('nick'),
                 password: bookmark.get('password'),
+                pinned: bookmark.get('pinned'),
             });
             groupchat.maybeShow();
         }

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

@@ -0,0 +1,56 @@
+/* global mock, converse */
+const { u } = converse.env;
+
+describe("The bookmarks pin list", function () {
+    it("shows a list of pinned bookmarks", mock.initConverse(['connected', 'chatboxesFetched'], {}, async function (_converse) {
+        const { api } = _converse;
+        await mock.waitForRoster(_converse, 'current', 0);
+        await mock.waitUntilBookmarksReturned(_converse);
+        await mock.openControlBox(_converse);
+
+        const bookmarks_pin_list = document.querySelector('converse-bookmarks-pin');
+        const main_list = document.querySelector('converse-rooms-list');
+
+        let muc_jid = 'room@conference.shakespeare.lit';
+        await api.bookmarks.set({
+            jid: muc_jid,
+            name: 'Romeo\'s room',
+            autojoin: true,
+            nick: 'romeo',
+            extensions: ['<pinned xmlns="urn:xmpp:bookmarks-pinning:0"/>'],
+        })
+        await mock.waitForMUCDiscoInfo(_converse, muc_jid);
+
+        await u.waitUntil(() => bookmarks_pin_list.querySelectorAll(".open-room").length);
+        let room_els = bookmarks_pin_list.querySelectorAll(".open-room");
+        expect(room_els.length).toBe(1);
+        expect(main_list.querySelectorAll(".open-room").length).toBe(0);
+
+        muc_jid = 'lounge@montague.lit';
+        await api.bookmarks.set({
+            jid: muc_jid,
+            name: 'Lounge',
+            autojoin: true,
+            nick: 'romeo',
+            extensions: ['<pinned xmlns="urn:xmpp:bookmarks-pinning:0"/>'],
+        });
+        await mock.waitForMUCDiscoInfo(_converse, muc_jid);
+
+        await u.waitUntil(() => bookmarks_pin_list.querySelectorAll(".open-room").length > 1);
+        room_els = bookmarks_pin_list.querySelectorAll(".open-room");
+        expect(room_els.length).toBe(2);
+        expect(main_list.querySelectorAll(".open-room").length).toBe(0);
+
+        // Unpin a room
+        bookmarks_pin_list.querySelector('.unpin-room').click();
+        await u.waitUntil(() => bookmarks_pin_list.querySelectorAll(".open-room").length === 1);
+        expect(bookmarks_pin_list.querySelectorAll(".open-room").length).toBe(1);
+        expect(main_list.querySelectorAll(".open-room").length).toBe(1);
+
+        // pin it again
+        main_list.querySelector('.pin-room').click();
+        await u.waitUntil(() => bookmarks_pin_list.querySelectorAll(".open-room").length === 2);
+        expect(bookmarks_pin_list.querySelectorAll(".open-room").length).toBe(2);
+        expect(main_list.querySelectorAll(".open-room").length).toBe(0);
+    }));
+});

src/shared/roomslist/templates/room-item.js

@@ -40,6 +40,7 @@ export function tplRoomItem (el, room) {
             alt_text: i18n_leave_room,
             text: __('Leave'),
             icon_class: 'fa-sign-out-alt',
+            btn_class: 'close-room',
             handler: (ev) => el.closeRoom(ev)
         }),
     ];
@@ -51,6 +52,7 @@ export function tplRoomItem (el, room) {
                 alt_text: __('Pin this groupchat to the top of the list'),
                 text: __('Pin'),
                 icon_class: 'fa-bookmark',
+                btn_class: 'pin-room',
                 handler: (ev) => el.pinRoom(ev)
             }))
         } else {
@@ -59,6 +61,7 @@ export function tplRoomItem (el, room) {
                 alt_text: __('Unpin this groupchat from the top of the list'),
                 text:  __('Unpin'),
                 icon_class: 'fa-bookmark-empty',
+                btn_class: 'unpin-room',
                 handler: (ev) => el.unpinRoom(ev)
             }))
         }
@@ -96,11 +99,12 @@ export function tplRoomItem (el, room) {
  * @param {string} config.text
  * @param {function} config.handler
  * @param {string} config.icon_class
+ * @param {string} config.btn_class
  * @returns 
  */
 function tplRoomMenuItem (config) {
-    const { room, alt_text, text, handler, icon_class } = config;
-    return html`<a class="dropdown-item" role="button"
+    const { room, alt_text, text, handler, icon_class, btn_class } = config;
+    return html`<a class="dropdown-item ${btn_class}" role="button"
             @click="${handler}"
             tabindex="0"
             data-room-jid="${room.get('jid')}"