controlbox.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. /*global mock, converse */
  2. const $msg = converse.env.$msg;
  3. const u = converse.env.utils;
  4. const Strophe = converse.env.Strophe;
  5. const sizzle = converse.env.sizzle;
  6. describe("The Controlbox", function () {
  7. it("can be opened by clicking a DOM element with class 'toggle-controlbox'",
  8. mock.initConverse([], {}, function (done, _converse) {
  9. spyOn(_converse.api, "trigger").and.callThrough();
  10. document.querySelector('.toggle-controlbox').click();
  11. expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxOpened', jasmine.any(Object));
  12. const el = document.querySelector("#controlbox");
  13. expect(u.isVisible(el)).toBe(true);
  14. done();
  15. }));
  16. it("can be closed by clicking a DOM element with class 'close-chatbox-button'",
  17. mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
  18. await mock.openControlBox(_converse);
  19. const view = _converse.chatboxviews.get('controlbox');
  20. spyOn(view, 'close').and.callThrough();
  21. spyOn(_converse.api, "trigger").and.callThrough();
  22. view.querySelector('.close-chatbox-button').click();
  23. expect(view.close).toHaveBeenCalled();
  24. expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxClosed', jasmine.any(Object));
  25. done();
  26. }));
  27. describe("The \"Contacts\" section", function () {
  28. it("can be used to add contact and it checks for case-sensivity",
  29. mock.initConverse([], {}, async function (done, _converse) {
  30. spyOn(_converse.api, "trigger").and.callThrough();
  31. await mock.waitForRoster(_converse, 'all', 0);
  32. await mock.openControlBox(_converse);
  33. // Adding two contacts one with Capital initials and one with small initials of same JID (Case sensitive check)
  34. _converse.roster.create({
  35. jid: mock.pend_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit',
  36. subscription: 'none',
  37. ask: 'subscribe',
  38. fullname: mock.pend_names[0]
  39. });
  40. _converse.roster.create({
  41. jid: mock.pend_names[0].replace(/ /g,'.') + '@montague.lit',
  42. subscription: 'none',
  43. ask: 'subscribe',
  44. fullname: mock.pend_names[0]
  45. });
  46. const rosterview = document.querySelector('converse-roster');
  47. await u.waitUntil(() => Array.from(rosterview.querySelectorAll('.roster-group li')).filter(u.isVisible).length, 700);
  48. // Checking that only one entry is created because both JID is same (Case sensitive check)
  49. expect(Array.from(rosterview.querySelectorAll('li')).filter(u.isVisible).length).toBe(1);
  50. done();
  51. }));
  52. it("shows the number of unread mentions received",
  53. mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
  54. await mock.waitForRoster(_converse, 'all');
  55. await mock.openControlBox(_converse);
  56. const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
  57. await mock.openChatBoxFor(_converse, sender_jid);
  58. await u.waitUntil(() => _converse.chatboxes.length);
  59. const chatview = _converse.chatboxviews.get(sender_jid);
  60. chatview.model.set({'minimized': true});
  61. const el = document.querySelector('converse-chats');
  62. expect(el.querySelector('.restore-chat .message-count') === null).toBeTruthy();
  63. const rosterview = document.querySelector('converse-roster');
  64. expect(rosterview.querySelector('.msgs-indicator') === null).toBeTruthy();
  65. let msg = $msg({
  66. from: sender_jid,
  67. to: _converse.connection.jid,
  68. type: 'chat',
  69. id: u.getUniqueId()
  70. }).c('body').t('hello').up()
  71. .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
  72. _converse.handleMessageStanza(msg);
  73. await u.waitUntil(() => rosterview.querySelectorAll(".msgs-indicator").length);
  74. spyOn(chatview.model, 'handleUnreadMessage').and.callThrough();
  75. await u.waitUntil(() => el.querySelector('.restore-chat .message-count')?.textContent === '1');
  76. expect(rosterview.querySelector('.msgs-indicator').textContent).toBe('1');
  77. msg = $msg({
  78. from: sender_jid,
  79. to: _converse.connection.jid,
  80. type: 'chat',
  81. id: u.getUniqueId()
  82. }).c('body').t('hello again').up()
  83. .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
  84. _converse.handleMessageStanza(msg);
  85. await u.waitUntil(() => chatview.model.handleUnreadMessage.calls.count());
  86. await u.waitUntil(() => el.querySelector('.restore-chat .message-count')?.textContent === '2');
  87. expect(rosterview.querySelector('.msgs-indicator').textContent).toBe('2');
  88. chatview.model.set({'minimized': false});
  89. expect(el.querySelector('.restore-chat .message-count')).toBe(null);
  90. await u.waitUntil(() => rosterview.querySelector('.msgs-indicator') === null);
  91. done();
  92. }));
  93. });
  94. describe("The Status Widget", function () {
  95. it("shows the user's chat status, which is online by default",
  96. mock.initConverse([], {}, async function (done, _converse) {
  97. mock.openControlBox(_converse);
  98. const view = await u.waitUntil(() => document.querySelector('converse-user-profile'));
  99. expect(u.hasClass('online', view.querySelector('.xmpp-status span:first-child'))).toBe(true);
  100. expect(view.querySelector('.xmpp-status span.online').textContent.trim()).toBe('I am online');
  101. done();
  102. }));
  103. it("can be used to set the current user's chat status",
  104. mock.initConverse([], {}, async function (done, _converse) {
  105. await mock.openControlBox(_converse);
  106. var cbview = _converse.chatboxviews.get('controlbox');
  107. cbview.querySelector('.change-status').click()
  108. const modal = _converse.api.modal.get('modal-status-change');
  109. await u.waitUntil(() => u.isVisible(modal.el), 1000);
  110. modal.el.querySelector('label[for="radio-busy"]').click(); // Change status to "dnd"
  111. modal.el.querySelector('[type="submit"]').click();
  112. const sent_stanzas = _converse.connection.sent_stanzas;
  113. const sent_presence = await u.waitUntil(() => sent_stanzas.filter(s => Strophe.serialize(s).match('presence')).pop());
  114. expect(Strophe.serialize(sent_presence)).toBe(
  115. `<presence xmlns="jabber:client">`+
  116. `<show>dnd</show>`+
  117. `<priority>0</priority>`+
  118. `<c hash="sha-1" node="https://conversejs.org" ver="PxXfr6uz8ClMWIga0OB/MhKNH/M=" xmlns="http://jabber.org/protocol/caps"/>`+
  119. `</presence>`);
  120. const view = await u.waitUntil(() => document.querySelector('converse-user-profile'));
  121. const first_child = view.querySelector('.xmpp-status span:first-child');
  122. expect(u.hasClass('online', first_child)).toBe(false);
  123. expect(u.hasClass('dnd', first_child)).toBe(true);
  124. expect(view.querySelector('.xmpp-status span:first-child').textContent.trim()).toBe('I am busy');
  125. done();
  126. }));
  127. it("can be used to set a custom status message",
  128. mock.initConverse([], {}, async function (done, _converse) {
  129. await mock.openControlBox(_converse);
  130. const cbview = _converse.chatboxviews.get('controlbox');
  131. cbview.querySelector('.change-status').click()
  132. const modal = _converse.api.modal.get('modal-status-change');
  133. await u.waitUntil(() => u.isVisible(modal.el), 1000);
  134. const msg = 'I am happy';
  135. modal.el.querySelector('input[name="status_message"]').value = msg;
  136. modal.el.querySelector('[type="submit"]').click();
  137. const sent_stanzas = _converse.connection.sent_stanzas;
  138. const sent_presence = await u.waitUntil(() => sent_stanzas.filter(s => Strophe.serialize(s).match('presence')).pop());
  139. expect(Strophe.serialize(sent_presence)).toBe(
  140. `<presence xmlns="jabber:client">`+
  141. `<status>I am happy</status>`+
  142. `<priority>0</priority>`+
  143. `<c hash="sha-1" node="https://conversejs.org" ver="PxXfr6uz8ClMWIga0OB/MhKNH/M=" xmlns="http://jabber.org/protocol/caps"/>`+
  144. `</presence>`);
  145. const view = await u.waitUntil(() => document.querySelector('converse-user-profile'));
  146. const first_child = view.querySelector('.xmpp-status span:first-child');
  147. expect(u.hasClass('online', first_child)).toBe(true);
  148. expect(view.querySelector('.xmpp-status span:first-child').textContent.trim()).toBe(msg);
  149. done();
  150. }));
  151. });
  152. });
  153. describe("The 'Add Contact' widget", function () {
  154. it("opens up an add modal when you click on it",
  155. mock.initConverse([], {}, async function (done, _converse) {
  156. await mock.waitForRoster(_converse, 'all');
  157. await mock.openControlBox(_converse);
  158. const cbview = _converse.chatboxviews.get('controlbox');
  159. cbview.querySelector('.add-contact').click()
  160. const modal = _converse.api.modal.get('add-contact-modal');
  161. await u.waitUntil(() => u.isVisible(modal.el), 1000);
  162. expect(modal.el.querySelector('form.add-xmpp-contact')).not.toBe(null);
  163. const input_jid = modal.el.querySelector('input[name="jid"]');
  164. const input_name = modal.el.querySelector('input[name="name"]');
  165. input_jid.value = 'someone@';
  166. const evt = new Event('input');
  167. input_jid.dispatchEvent(evt);
  168. expect(modal.el.querySelector('.suggestion-box li').textContent).toBe('someone@montague.lit');
  169. input_jid.value = 'someone@montague.lit';
  170. input_name.value = 'Someone';
  171. modal.el.querySelector('button[type="submit"]').click();
  172. const sent_IQs = _converse.connection.IQ_stanzas;
  173. const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
  174. expect(Strophe.serialize(sent_stanza)).toEqual(
  175. `<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
  176. `<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit" name="Someone"/></query>`+
  177. `</iq>`);
  178. done();
  179. }));
  180. it("can be configured to not provide search suggestions",
  181. mock.initConverse([], {'autocomplete_add_contact': false}, async function (done, _converse) {
  182. await mock.waitForRoster(_converse, 'all', 0);
  183. await mock.openControlBox(_converse);
  184. const cbview = _converse.chatboxviews.get('controlbox');
  185. cbview.querySelector('.add-contact').click()
  186. const modal = _converse.api.modal.get('add-contact-modal');
  187. expect(modal.jid_auto_complete).toBe(undefined);
  188. expect(modal.name_auto_complete).toBe(undefined);
  189. await u.waitUntil(() => u.isVisible(modal.el), 1000);
  190. expect(modal.el.querySelector('form.add-xmpp-contact')).not.toBe(null);
  191. const input_jid = modal.el.querySelector('input[name="jid"]');
  192. input_jid.value = 'someone@montague.lit';
  193. modal.el.querySelector('button[type="submit"]').click();
  194. const IQ_stanzas = _converse.connection.IQ_stanzas;
  195. const sent_stanza = await u.waitUntil(
  196. () => IQ_stanzas.filter(s => sizzle(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`, s).length).pop()
  197. );
  198. expect(Strophe.serialize(sent_stanza)).toEqual(
  199. `<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
  200. `<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit"/></query>`+
  201. `</iq>`
  202. );
  203. done();
  204. }));
  205. it("integrates with xhr_user_search_url to search for contacts",
  206. mock.initConverse([], { 'xhr_user_search_url': 'http://example.org/?' },
  207. async function (done, _converse) {
  208. await mock.waitForRoster(_converse, 'all', 0);
  209. class MockXHR extends XMLHttpRequest {
  210. open () {} // eslint-disable-line
  211. responseText = ''
  212. send () {
  213. this.responseText = JSON.stringify([
  214. {"jid": "marty@mcfly.net", "fullname": "Marty McFly"},
  215. {"jid": "doc@brown.com", "fullname": "Doc Brown"}
  216. ]);
  217. this.onload();
  218. }
  219. }
  220. const XMLHttpRequestBackup = window.XMLHttpRequest;
  221. window.XMLHttpRequest = MockXHR;
  222. await mock.openControlBox(_converse);
  223. const cbview = _converse.chatboxviews.get('controlbox');
  224. cbview.querySelector('.add-contact').click()
  225. const modal = _converse.api.modal.get('add-contact-modal');
  226. await u.waitUntil(() => u.isVisible(modal.el), 1000);
  227. // We only have autocomplete for the name input
  228. expect(modal.jid_auto_complete).toBe(undefined);
  229. expect(modal.name_auto_complete instanceof _converse.AutoComplete).toBe(true);
  230. const input_el = modal.el.querySelector('input[name="name"]');
  231. input_el.value = 'marty';
  232. input_el.dispatchEvent(new Event('input'));
  233. await u.waitUntil(() => modal.el.querySelector('.suggestion-box li'), 1000);
  234. expect(modal.el.querySelectorAll('.suggestion-box li').length).toBe(1);
  235. const suggestion = modal.el.querySelector('.suggestion-box li');
  236. expect(suggestion.textContent).toBe('Marty McFly');
  237. // Mock selection
  238. modal.name_auto_complete.select(suggestion);
  239. expect(input_el.value).toBe('Marty McFly');
  240. expect(modal.el.querySelector('input[name="jid"]').value).toBe('marty@mcfly.net');
  241. modal.el.querySelector('button[type="submit"]').click();
  242. const sent_IQs = _converse.connection.IQ_stanzas;
  243. const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
  244. expect(Strophe.serialize(sent_stanza)).toEqual(
  245. `<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
  246. `<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
  247. `</iq>`);
  248. window.XMLHttpRequest = XMLHttpRequestBackup;
  249. done();
  250. }));
  251. it("can be configured to not provide search suggestions for XHR search results",
  252. mock.initConverse([],
  253. { 'autocomplete_add_contact': false,
  254. 'xhr_user_search_url': 'http://example.org/?' },
  255. async function (done, _converse) {
  256. await mock.waitForRoster(_converse, 'all');
  257. await mock.openControlBox(_converse);
  258. class MockXHR extends XMLHttpRequest {
  259. open () {} // eslint-disable-line
  260. responseText = ''
  261. send () {
  262. const value = modal.el.querySelector('input[name="name"]').value;
  263. if (value === 'existing') {
  264. const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
  265. this.responseText = JSON.stringify([{"jid": contact_jid, "fullname": mock.cur_names[0]}]);
  266. } else if (value === 'romeo') {
  267. this.responseText = JSON.stringify([{"jid": "romeo@montague.lit", "fullname": "Romeo Montague"}]);
  268. } else if (value === 'ambiguous') {
  269. this.responseText = JSON.stringify([
  270. {"jid": "marty@mcfly.net", "fullname": "Marty McFly"},
  271. {"jid": "doc@brown.com", "fullname": "Doc Brown"}
  272. ]);
  273. } else if (value === 'insufficient') {
  274. this.responseText = JSON.stringify([]);
  275. } else {
  276. this.responseText = JSON.stringify([{"jid": "marty@mcfly.net", "fullname": "Marty McFly"}]);
  277. }
  278. this.onload();
  279. }
  280. }
  281. const XMLHttpRequestBackup = window.XMLHttpRequest;
  282. window.XMLHttpRequest = MockXHR;
  283. const cbview = _converse.chatboxviews.get('controlbox');
  284. cbview.querySelector('.add-contact').click()
  285. const modal = _converse.api.modal.get('add-contact-modal');
  286. await u.waitUntil(() => u.isVisible(modal.el), 1000);
  287. expect(modal.jid_auto_complete).toBe(undefined);
  288. expect(modal.name_auto_complete).toBe(undefined);
  289. const input_el = modal.el.querySelector('input[name="name"]');
  290. input_el.value = 'ambiguous';
  291. modal.el.querySelector('button[type="submit"]').click();
  292. let feedback_el = modal.el.querySelector('.invalid-feedback');
  293. expect(feedback_el.textContent).toBe('Sorry, could not find a contact with that name');
  294. feedback_el.textContent = '';
  295. input_el.value = 'insufficient';
  296. modal.el.querySelector('button[type="submit"]').click();
  297. feedback_el = modal.el.querySelector('.invalid-feedback');
  298. expect(feedback_el.textContent).toBe('Sorry, could not find a contact with that name');
  299. feedback_el.textContent = '';
  300. input_el.value = 'existing';
  301. modal.el.querySelector('button[type="submit"]').click();
  302. feedback_el = modal.el.querySelector('.invalid-feedback');
  303. expect(feedback_el.textContent).toBe('This contact has already been added');
  304. input_el.value = 'Marty McFly';
  305. modal.el.querySelector('button[type="submit"]').click();
  306. const sent_IQs = _converse.connection.IQ_stanzas;
  307. const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
  308. expect(Strophe.serialize(sent_stanza)).toEqual(
  309. `<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
  310. `<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
  311. `</iq>`);
  312. window.XMLHttpRequest = XMLHttpRequestBackup;
  313. done();
  314. }));
  315. });