controlbox.js 18 KB

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