jingle: added the tests for jingle & styled the header button

Author: PawBud

karma.conf.js

@@ -64,6 +64,7 @@ module.exports = function(config) {
       { pattern: "src/plugins/controlbox/tests/controlbox.js", type: 'module' },
       { pattern: "src/plugins/controlbox/tests/login.js", type: 'module' },
       { pattern: "src/plugins/headlines-view/tests/headline.js", type: 'module' },
+      { pattern: "src/plugins/jingle/tests/jingle.js", type: 'module' },
       { pattern: "src/plugins/mam-views/tests/mam.js", type: 'module' },
       { pattern: "src/plugins/mam-views/tests/placeholder.js", type: 'module' },
       { pattern: "src/plugins/minimize/tests/minchats.js", type: 'module' },

src/plugins/chatview/templates/chat-head.js

@@ -41,7 +41,7 @@ export default (o) => {
                 <div class="chatbox-title__text" title="${o.jid}">
                     ${ (o.type !== _converse.HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ display_name }</a>` : display_name }
                 </div>
-                <converse-call-notification class="d-flex flex-row-reverse justify-content-center chatbox-call-status" jid=${o.model.get('jid')}></converse-call-notification>
+                <converse-call-notification class="d-flex flex-row-reverse justify-content-center chatbox-call-status chatbox-title__text" jid=${o.model.get('jid')}></converse-call-notification>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ until(tpl_dropdown_btns(), '') }

src/plugins/chatview/tests/chatbox.js

@@ -296,8 +296,8 @@ describe("Chatboxes", function () {
             }));
 
 
-            it("can contain a button for starting a call",
-                    mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+            fit("can contain a button for starting a call",
+                    mock.initConverse(['chatBoxesFetched'], { blacklisted_plugins: ['converse-jingle']}, async function (_converse) {
 
                 const { api } = _converse;
                 await mock.waitForRoster(_converse, 'current');

src/plugins/jingle/chat-header-notification.js

@@ -3,6 +3,8 @@ import { _converse, api } from "@converse/headless/core";
 import tpl_header_button from "./templates/header-button.js";
 import { JINGLE_CALL_STATUS } from "./constants.js";
 
+import './styles/jingle.scss';
+
 export default class CallNotification extends CustomElement {
 
     static get properties() {

src/plugins/jingle/constants.js

@@ -1,4 +1,3 @@
-
 export const JINGLE_CALL_STATUS = {
     PENDING:      0,
     ACTIVE:       1,

src/plugins/jingle/index.js

@@ -8,6 +8,7 @@ import { _converse, converse } from '@converse/headless/core.js';
 import 'plugins/modal/index.js';
 import "./chat-header-notification.js";
 import './toolbar-button.js';
+import { JINGLE_CALL_STATUS } from './constants.js';
 import { html } from "lit";
 
 
@@ -28,6 +29,7 @@ converse.plugins.add('converse-jingle', {
         /* The initialize function gets called as soon as the plugin is
          * loaded by converse.js's plugin machinery.
          */
+        _converse.JINGLE_CALL_STATUS = JINGLE_CALL_STATUS;
         _converse.api.listen.on('getToolbarButtons', (toolbar_el, buttons) => {
             if (!this.is_groupchat) {
                 buttons.push(html`

src/plugins/jingle/templates/header-button.js

@@ -6,7 +6,7 @@ const tpl_active_call = (o) => {
     const button = __('Call Inititated');
     return html`
         <div>
-            <span><button @click=${ o.endCall }>${ button }</button></span>
+            <span><a class="button-color" @click=${ o.endCall }>${ button }</a></span>
         </div>
     `;
 }