xmpp.chapril.org-conversejs/spec/controlbox.js

386 lines
19 KiB
JavaScript
Raw Normal View History

2021-01-29 14:15:27 +01:00
/*global mock, converse */
2020-04-22 13:11:48 +02:00
const $msg = converse.env.$msg;
const u = converse.env.utils;
const Strophe = converse.env.Strophe;
const sizzle = converse.env.sizzle;
2020-04-22 13:11:48 +02:00
describe("The Controlbox", function () {
it("can be opened by clicking a DOM element with class 'toggle-controlbox'",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {}, function (done, _converse) {
const toggle = document.querySelector('converse-controlbox-toggle');
spyOn(toggle, 'onClick').and.callThrough();
spyOn(toggle, 'showControlBox').and.callThrough();
2020-04-22 13:11:48 +02:00
spyOn(_converse.api, "trigger").and.callThrough();
// Redelegate so that the spies are now registered as the event handlers (specifically for 'onClick')
2021-01-29 14:15:27 +01:00
toggle.delegateEvents();
2020-04-22 13:11:48 +02:00
document.querySelector('.toggle-controlbox').click();
2021-01-29 14:15:27 +01:00
expect(toggle.onClick).toHaveBeenCalled();
expect(toggle.showControlBox).toHaveBeenCalled();
2020-04-22 13:11:48 +02:00
expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxOpened', jasmine.any(Object));
2021-01-29 14:15:27 +01:00
const el = document.querySelector("#controlbox");
2020-04-22 13:11:48 +02:00
expect(u.isVisible(el)).toBe(true);
done();
}));
it("can be closed by clicking a DOM element with class 'close-chatbox-button'",
mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
await mock.openControlBox(_converse);
2021-01-29 14:15:27 +01:00
const view = _converse.chatboxviews.get('controlbox');
2021-01-29 14:15:27 +01:00
spyOn(view, 'close').and.callThrough();
spyOn(_converse.api, "trigger").and.callThrough();
// We need to rebind all events otherwise our spy won't be called
2021-01-29 14:15:27 +01:00
view.delegateEvents();
2021-01-29 14:15:27 +01:00
view.querySelector('.close-chatbox-button').click();
expect(view.close).toHaveBeenCalled();
expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxClosed', jasmine.any(Object));
done();
}));
2020-04-22 13:11:48 +02:00
describe("The \"Contacts\" section", function () {
it("can be used to add contact and it checks for case-sensivity",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {}, async function (done, _converse) {
spyOn(_converse.api, "trigger").and.callThrough();
2021-01-29 14:15:27 +01:00
await mock.waitForRoster(_converse, 'all', 0);
2020-04-22 13:11:48 +02:00
await mock.openControlBox(_converse);
// Adding two contacts one with Capital initials and one with small initials of same JID (Case sensitive check)
_converse.roster.create({
jid: mock.pend_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit',
subscription: 'none',
ask: 'subscribe',
fullname: mock.pend_names[0]
});
_converse.roster.create({
jid: mock.pend_names[0].replace(/ /g,'.') + '@montague.lit',
subscription: 'none',
ask: 'subscribe',
fullname: mock.pend_names[0]
});
2021-01-29 14:15:27 +01:00
const rosterview = document.querySelector('converse-roster');
await u.waitUntil(() => Array.from(rosterview.querySelectorAll('.roster-group li')).filter(u.isVisible).length, 700);
2020-04-22 13:11:48 +02:00
// Checking that only one entry is created because both JID is same (Case sensitive check)
2021-01-29 14:15:27 +01:00
expect(Array.from(rosterview.querySelectorAll('li')).filter(u.isVisible).length).toBe(1);
done();
}));
2020-04-22 13:11:48 +02:00
it("shows the number of unread mentions received",
2021-01-29 14:15:27 +01:00
mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
2020-04-22 13:11:48 +02:00
await mock.waitForRoster(_converse, 'all');
await mock.openControlBox(_converse);
const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await mock.openChatBoxFor(_converse, sender_jid);
await u.waitUntil(() => _converse.chatboxes.length);
const chatview = _converse.chatboxviews.get(sender_jid);
chatview.model.set({'minimized': true});
2021-01-29 14:15:27 +01:00
const el = document.querySelector('converse-chats');
expect(el.querySelector('.restore-chat .message-count') === null).toBeTruthy();
const rosterview = document.querySelector('converse-roster');
expect(rosterview.querySelector('.msgs-indicator') === null).toBeTruthy();
2020-04-22 13:11:48 +02:00
let msg = $msg({
from: sender_jid,
to: _converse.connection.jid,
type: 'chat',
id: u.getUniqueId()
}).c('body').t('hello').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
_converse.handleMessageStanza(msg);
2021-01-29 14:15:27 +01:00
await u.waitUntil(() => rosterview.querySelectorAll(".msgs-indicator").length);
spyOn(chatview.model, 'handleUnreadMessage').and.callThrough();
2021-01-29 14:15:27 +01:00
await u.waitUntil(() => el.querySelector('.restore-chat .message-count')?.textContent === '1');
expect(rosterview.querySelector('.msgs-indicator').textContent).toBe('1');
2020-04-22 13:11:48 +02:00
msg = $msg({
from: sender_jid,
to: _converse.connection.jid,
type: 'chat',
id: u.getUniqueId()
}).c('body').t('hello again').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
_converse.handleMessageStanza(msg);
await u.waitUntil(() => chatview.model.handleUnreadMessage.calls.count());
2021-01-29 14:15:27 +01:00
await u.waitUntil(() => el.querySelector('.restore-chat .message-count')?.textContent === '2');
expect(rosterview.querySelector('.msgs-indicator').textContent).toBe('2');
2020-04-22 13:11:48 +02:00
chatview.model.set({'minimized': false});
expect(el.querySelector('.restore-chat .message-count')).toBe(null);
2021-01-29 14:15:27 +01:00
await u.waitUntil(() => rosterview.querySelector('.msgs-indicator') === null);
2020-04-22 13:11:48 +02:00
done();
}));
});
2020-04-22 13:11:48 +02:00
describe("The Status Widget", function () {
2020-04-22 13:11:48 +02:00
it("shows the user's chat status, which is online by default",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {}, async function (done, _converse) {
2020-04-22 13:11:48 +02:00
mock.openControlBox(_converse);
2021-01-29 14:15:27 +01:00
const view = await u.waitUntil(() => document.querySelector('converse-user-profile'));
expect(u.hasClass('online', view.querySelector('.xmpp-status span:first-child'))).toBe(true);
expect(view.querySelector('.xmpp-status span.online').textContent.trim()).toBe('I am online');
2018-11-26 12:58:06 +01:00
done();
}));
2020-04-22 13:11:48 +02:00
it("can be used to set the current user's chat status",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {}, async function (done, _converse) {
2020-04-22 13:11:48 +02:00
await mock.openControlBox(_converse);
var cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.change-status').click()
const modal = _converse.api.modal.get('modal-status-change');
await u.waitUntil(() => u.isVisible(modal.el), 1000);
2020-04-22 13:11:48 +02:00
modal.el.querySelector('label[for="radio-busy"]').click(); // Change status to "dnd"
modal.el.querySelector('[type="submit"]').click();
const sent_stanzas = _converse.connection.sent_stanzas;
const sent_presence = await u.waitUntil(() => sent_stanzas.filter(s => Strophe.serialize(s).match('presence')).pop());
expect(Strophe.serialize(sent_presence)).toBe(
`<presence xmlns="jabber:client">`+
`<show>dnd</show>`+
`<priority>0</priority>`+
`<c hash="sha-1" node="https://conversejs.org" ver="PxXfr6uz8ClMWIga0OB/MhKNH/M=" xmlns="http://jabber.org/protocol/caps"/>`+
2020-04-22 13:11:48 +02:00
`</presence>`);
2021-01-29 14:15:27 +01:00
const view = await u.waitUntil(() => document.querySelector('converse-user-profile'));
const first_child = view.querySelector('.xmpp-status span:first-child');
2020-04-22 13:11:48 +02:00
expect(u.hasClass('online', first_child)).toBe(false);
expect(u.hasClass('dnd', first_child)).toBe(true);
expect(view.querySelector('.xmpp-status span:first-child').textContent.trim()).toBe('I am busy');
done();
}));
2020-04-22 13:11:48 +02:00
it("can be used to set a custom status message",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {}, async function (done, _converse) {
2020-04-22 13:11:48 +02:00
await mock.openControlBox(_converse);
2019-03-01 10:53:12 +01:00
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.change-status').click()
const modal = _converse.api.modal.get('modal-status-change');
2020-04-22 13:11:48 +02:00
await u.waitUntil(() => u.isVisible(modal.el), 1000);
2020-04-22 13:11:48 +02:00
const msg = 'I am happy';
modal.el.querySelector('input[name="status_message"]').value = msg;
modal.el.querySelector('[type="submit"]').click();
const sent_stanzas = _converse.connection.sent_stanzas;
const sent_presence = await u.waitUntil(() => sent_stanzas.filter(s => Strophe.serialize(s).match('presence')).pop());
expect(Strophe.serialize(sent_presence)).toBe(
`<presence xmlns="jabber:client">`+
`<status>I am happy</status>`+
`<priority>0</priority>`+
`<c hash="sha-1" node="https://conversejs.org" ver="PxXfr6uz8ClMWIga0OB/MhKNH/M=" xmlns="http://jabber.org/protocol/caps"/>`+
2020-04-22 13:11:48 +02:00
`</presence>`);
2021-01-29 14:15:27 +01:00
const view = await u.waitUntil(() => document.querySelector('converse-user-profile'));
const first_child = view.querySelector('.xmpp-status span:first-child');
2020-04-22 13:11:48 +02:00
expect(u.hasClass('online', first_child)).toBe(true);
expect(view.querySelector('.xmpp-status span:first-child').textContent.trim()).toBe(msg);
2020-04-22 13:11:48 +02:00
done();
}));
});
});
2020-04-22 13:11:48 +02:00
describe("The 'Add Contact' widget", function () {
2020-04-22 13:11:48 +02:00
it("opens up an add modal when you click on it",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {}, async function (done, _converse) {
2018-11-26 12:58:06 +01:00
2020-04-22 13:11:48 +02:00
await mock.waitForRoster(_converse, 'all');
await mock.openControlBox(_converse);
2020-04-22 13:11:48 +02:00
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('add-contact-modal');
2020-04-22 13:11:48 +02:00
await u.waitUntil(() => u.isVisible(modal.el), 1000);
expect(modal.el.querySelector('form.add-xmpp-contact')).not.toBe(null);
2020-04-22 13:11:48 +02:00
const input_jid = modal.el.querySelector('input[name="jid"]');
const input_name = modal.el.querySelector('input[name="name"]');
input_jid.value = 'someone@';
2020-04-22 13:11:48 +02:00
const evt = new Event('input');
input_jid.dispatchEvent(evt);
expect(modal.el.querySelector('.suggestion-box li').textContent).toBe('someone@montague.lit');
input_jid.value = 'someone@montague.lit';
input_name.value = 'Someone';
modal.el.querySelector('button[type="submit"]').click();
2020-04-22 13:11:48 +02:00
const sent_IQs = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
2020-04-22 13:11:48 +02:00
`<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit" name="Someone"/></query>`+
`</iq>`);
2020-04-22 13:11:48 +02:00
done();
}));
it("can be configured to not provide search suggestions",
2021-01-29 14:15:27 +01:00
mock.initConverse([], {'autocomplete_add_contact': false}, async function (done, _converse) {
2020-04-22 13:11:48 +02:00
await mock.waitForRoster(_converse, 'all', 0);
mock.openControlBox(_converse);
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('add-contact-modal');
2020-04-22 13:11:48 +02:00
expect(modal.jid_auto_complete).toBe(undefined);
expect(modal.name_auto_complete).toBe(undefined);
await u.waitUntil(() => u.isVisible(modal.el), 1000);
expect(modal.el.querySelector('form.add-xmpp-contact')).not.toBe(null);
const input_jid = modal.el.querySelector('input[name="jid"]');
input_jid.value = 'someone@montague.lit';
modal.el.querySelector('button[type="submit"]').click();
const IQ_stanzas = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(
() => IQ_stanzas.filter(s => sizzle(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`, s).length).pop()
);
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit"/></query>`+
`</iq>`
);
done();
}));
it("integrates with xhr_user_search_url to search for contacts",
2021-01-29 14:15:27 +01:00
mock.initConverse([], { 'xhr_user_search_url': 'http://example.org/?' },
2020-04-22 13:11:48 +02:00
async function (done, _converse) {
await mock.waitForRoster(_converse, 'all', 0);
class MockXHR extends XMLHttpRequest {
open () {} // eslint-disable-line
responseText = ''
send () {
this.responseText = JSON.stringify([
2020-04-22 13:11:48 +02:00
{"jid": "marty@mcfly.net", "fullname": "Marty McFly"},
{"jid": "doc@brown.com", "fullname": "Doc Brown"}
]);
this.onload();
2020-04-22 13:11:48 +02:00
}
}
2020-04-22 13:11:48 +02:00
const XMLHttpRequestBackup = window.XMLHttpRequest;
window.XMLHttpRequest = MockXHR;
2020-04-22 13:11:48 +02:00
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('add-contact-modal');
2020-04-22 13:11:48 +02:00
await u.waitUntil(() => u.isVisible(modal.el), 1000);
// We only have autocomplete for the name input
expect(modal.jid_auto_complete).toBe(undefined);
expect(modal.name_auto_complete instanceof _converse.AutoComplete).toBe(true);
const input_el = modal.el.querySelector('input[name="name"]');
input_el.value = 'marty';
input_el.dispatchEvent(new Event('input'));
await u.waitUntil(() => modal.el.querySelector('.suggestion-box li'), 1000);
expect(modal.el.querySelectorAll('.suggestion-box li').length).toBe(1);
const suggestion = modal.el.querySelector('.suggestion-box li');
expect(suggestion.textContent).toBe('Marty McFly');
// Mock selection
modal.name_auto_complete.select(suggestion);
expect(input_el.value).toBe('Marty McFly');
expect(modal.el.querySelector('input[name="jid"]').value).toBe('marty@mcfly.net');
modal.el.querySelector('button[type="submit"]').click();
const sent_IQs = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
`</iq>`);
window.XMLHttpRequest = XMLHttpRequestBackup;
done();
}));
it("can be configured to not provide search suggestions for XHR search results",
2021-01-29 14:15:27 +01:00
mock.initConverse([],
2020-04-22 13:11:48 +02:00
{ 'autocomplete_add_contact': false,
'xhr_user_search_url': 'http://example.org/?' },
async function (done, _converse) {
await mock.waitForRoster(_converse, 'all');
await mock.openControlBox(_converse);
class MockXHR extends XMLHttpRequest {
open () {} // eslint-disable-line
responseText = ''
send () {
2020-04-22 13:11:48 +02:00
const value = modal.el.querySelector('input[name="name"]').value;
if (value === 'existing') {
const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
this.responseText = JSON.stringify([{"jid": contact_jid, "fullname": mock.cur_names[0]}]);
2020-04-22 13:11:48 +02:00
} else if (value === 'romeo') {
this.responseText = JSON.stringify([{"jid": "romeo@montague.lit", "fullname": "Romeo Montague"}]);
2020-04-22 13:11:48 +02:00
} else if (value === 'ambiguous') {
this.responseText = JSON.stringify([
2020-04-22 13:11:48 +02:00
{"jid": "marty@mcfly.net", "fullname": "Marty McFly"},
{"jid": "doc@brown.com", "fullname": "Doc Brown"}
]);
} else if (value === 'insufficient') {
this.responseText = JSON.stringify([]);
2020-04-22 13:11:48 +02:00
} else {
this.responseText = JSON.stringify([{"jid": "marty@mcfly.net", "fullname": "Marty McFly"}]);
2020-04-22 13:11:48 +02:00
}
this.onload();
2020-04-22 13:11:48 +02:00
}
}
2020-04-22 13:11:48 +02:00
const XMLHttpRequestBackup = window.XMLHttpRequest;
window.XMLHttpRequest = MockXHR;
2020-04-22 13:11:48 +02:00
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('add-contact-modal');
2020-04-22 13:11:48 +02:00
await u.waitUntil(() => u.isVisible(modal.el), 1000);
expect(modal.jid_auto_complete).toBe(undefined);
expect(modal.name_auto_complete).toBe(undefined);
const input_el = modal.el.querySelector('input[name="name"]');
input_el.value = 'ambiguous';
modal.el.querySelector('button[type="submit"]').click();
let feedback_el = modal.el.querySelector('.invalid-feedback');
expect(feedback_el.textContent).toBe('Sorry, could not find a contact with that name');
feedback_el.textContent = '';
input_el.value = 'insufficient';
modal.el.querySelector('button[type="submit"]').click();
feedback_el = modal.el.querySelector('.invalid-feedback');
expect(feedback_el.textContent).toBe('Sorry, could not find a contact with that name');
feedback_el.textContent = '';
input_el.value = 'existing';
modal.el.querySelector('button[type="submit"]').click();
feedback_el = modal.el.querySelector('.invalid-feedback');
expect(feedback_el.textContent).toBe('This contact has already been added');
input_el.value = 'Marty McFly';
modal.el.querySelector('button[type="submit"]').click();
const sent_IQs = _converse.connection.IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
`</iq>`);
window.XMLHttpRequest = XMLHttpRequestBackup;
done();
}));
});