unfurls.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /*global mock, converse */
  2. const { u } = converse.env;
  3. describe("A Groupchat Message", function () {
  4. it("will render an unfurl based on OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
  5. const nick = 'romeo';
  6. const muc_jid = 'lounge@montague.lit';
  7. await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
  8. const view = _converse.api.chatviews.get(muc_jid);
  9. const message_stanza = u.toStanza(`
  10. <message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  11. <body>https://www.youtube.com/watch?v=dQw4w9WgXcQ</body>
  12. <active xmlns="http://jabber.org/protocol/chatstates"/>
  13. <origin-id xmlns="urn:xmpp:sid:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04"/>
  14. <stanza-id xmlns="urn:xmpp:sid:0" by="${muc_jid}" id="8f7613cc-27d4-40ca-9488-da25c4baf92a"/>
  15. <markable xmlns="urn:xmpp:chat-markers:0"/>
  16. </message>`);
  17. _converse.connection._dataRecv(mock.createRequest(message_stanza));
  18. const el = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
  19. expect(el.textContent).toBe('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
  20. const metadata_stanza = u.toStanza(`
  21. <message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
  22. <apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  23. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="YouTube" />
  24. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
  25. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Rick Astley - Never Gonna Give You Up (Video)" />
  26. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />
  27. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:width" content="1280" />
  28. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:height" content="720" />
  29. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Rick Astley&amp;#39;s official music video for &quot;Never Gonna Give You Up&quot; Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick Ast..." />
  30. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:type" content="video.other" />
  31. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:url" content="https://www.youtube.com/embed/dQw4w9WgXcQ" />
  32. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:secure_url" content="https://www.youtube.com/embed/dQw4w9WgXcQ" />
  33. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:type" content="text/html" />
  34. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:width" content="1280" />
  35. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:height" content="720" />
  36. </apply-to>
  37. </message>`);
  38. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  39. const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
  40. expect(unfurl.querySelector('.card-img-top').getAttribute('src')).toBe('https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg');
  41. done();
  42. }));
  43. it("will render multiple unfurls based on OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
  44. const nick = 'romeo';
  45. const muc_jid = 'lounge@montague.lit';
  46. await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
  47. const view = _converse.api.chatviews.get(muc_jid);
  48. const message_stanza = u.toStanza(`
  49. <message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  50. <body>Check out https://www.youtube.com/watch?v=dQw4w9WgXcQ and https://duckduckgo.com</body>
  51. <active xmlns="http://jabber.org/protocol/chatstates"/>
  52. <origin-id xmlns="urn:xmpp:sid:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04"/>
  53. <stanza-id xmlns="urn:xmpp:sid:0" by="${muc_jid}" id="8f7613cc-27d4-40ca-9488-da25c4baf92a"/>
  54. <markable xmlns="urn:xmpp:chat-markers:0"/>
  55. </message>`);
  56. _converse.connection._dataRecv(mock.createRequest(message_stanza));
  57. const el = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
  58. expect(el.textContent).toBe('Check out https://www.youtube.com/watch?v=dQw4w9WgXcQ and https://duckduckgo.com');
  59. let metadata_stanza = u.toStanza(`
  60. <message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
  61. <apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  62. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="YouTube" />
  63. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
  64. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Rick Astley - Never Gonna Give You Up (Video)" />
  65. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />
  66. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:width" content="1280" />
  67. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:height" content="720" />
  68. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Rick Astley&amp;#39;s official music video for &quot;Never Gonna Give You Up&quot; Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick Ast..." />
  69. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:type" content="video.other" />
  70. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:url" content="https://www.youtube.com/embed/dQw4w9WgXcQ" />
  71. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:secure_url" content="https://www.youtube.com/embed/dQw4w9WgXcQ" />
  72. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:type" content="text/html" />
  73. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:width" content="1280" />
  74. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:video:height" content="720" />
  75. </apply-to>
  76. </message>`);
  77. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  78. await u.waitUntil(() => view.querySelectorAll('converse-message-unfurl').length === 1);
  79. metadata_stanza = u.toStanza(`
  80. <message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
  81. <apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  82. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://duckduckgo.com" />
  83. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="DuckDuckGo" />
  84. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://duckduckgo.com/assets/logo_social-media.png" />
  85. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="DuckDuckGo - Privacy, simplified." />
  86. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="The Internet privacy company that empowers you to seamlessly take control of your personal information online, without any tradeoffs." />
  87. </apply-to>
  88. </message>`);
  89. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  90. await u.waitUntil(() => view.querySelectorAll('converse-message-unfurl').length === 2);
  91. done();
  92. }));
  93. it("will not render an unfurl received from a MUC participant", mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
  94. const nick = 'romeo';
  95. const muc_jid = 'lounge@montague.lit';
  96. await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
  97. const view = _converse.api.chatviews.get(muc_jid);
  98. const message_stanza = u.toStanza(`
  99. <message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  100. <body>https://www.youtube.com/watch?v=dQw4w9WgXcQ</body>
  101. <active xmlns="http://jabber.org/protocol/chatstates"/>
  102. <origin-id xmlns="urn:xmpp:sid:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04"/>
  103. <stanza-id xmlns="urn:xmpp:sid:0" by="${muc_jid}" id="8f7613cc-27d4-40ca-9488-da25c4baf92a"/>
  104. <markable xmlns="urn:xmpp:chat-markers:0"/>
  105. </message>`);
  106. _converse.connection._dataRecv(mock.createRequest(message_stanza));
  107. const el = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
  108. expect(el.textContent).toBe('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
  109. spyOn(view.model, 'handleMetadataFastening').and.callThrough();
  110. const metadata_stanza = u.toStanza(`
  111. <message xmlns="jabber:client" from="${muc_jid}/arzu" to="${_converse.jid}" type="groupchat">
  112. <apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  113. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="YouTube" />
  114. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
  115. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Rick Astley - Never Gonna Give You Up (Video)" />
  116. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />
  117. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Rick Astley&amp;#39;s official music video for &quot;Never Gonna Give You Up&quot; Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick Ast..." />
  118. </apply-to>
  119. </message>`);
  120. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  121. await u.waitUntil(() => view.model.handleMetadataFastening.calls.count());
  122. expect(view.model.handleMetadataFastening.calls.first().returnValue).toBe(false);
  123. expect(view.querySelector('converse-message-unfurl')).toBe(null);
  124. done();
  125. }));
  126. it("will not render an unfurl based on OGP data if muc_show_ogp_unfurls is false",
  127. mock.initConverse(['chatBoxesFetched'],
  128. {'muc_show_ogp_unfurls': false},
  129. async function (done, _converse) {
  130. const nick = 'romeo';
  131. const muc_jid = 'lounge@montague.lit';
  132. await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
  133. const view = _converse.api.chatviews.get(muc_jid);
  134. const message_stanza = u.toStanza(`
  135. <message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  136. <body>https://www.youtube.com/watch?v=dQw4w9WgXcQ</body>
  137. <active xmlns="http://jabber.org/protocol/chatstates"/>
  138. <origin-id xmlns="urn:xmpp:sid:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04"/>
  139. <stanza-id xmlns="urn:xmpp:sid:0" by="${muc_jid}" id="8f7613cc-27d4-40ca-9488-da25c4baf92a"/>
  140. <markable xmlns="urn:xmpp:chat-markers:0"/>
  141. </message>`);
  142. _converse.connection._dataRecv(mock.createRequest(message_stanza));
  143. const el = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
  144. expect(el.textContent).toBe('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
  145. spyOn(view.model, 'handleMetadataFastening').and.callThrough();
  146. const metadata_stanza = u.toStanza(`
  147. <message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
  148. <apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  149. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="YouTube" />
  150. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
  151. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Rick Astley - Never Gonna Give You Up (Video)" />
  152. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />
  153. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Rick Astley&amp;#39;s official music video for &quot;Never Gonna Give You Up&quot; Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick Ast..." />
  154. </apply-to>
  155. </message>`);
  156. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  157. await u.waitUntil(() => view.model.handleMetadataFastening.calls.count());
  158. expect(view.model.handleMetadataFastening.calls.first().returnValue).toBe(false);
  159. expect(view.querySelector('converse-message-unfurl')).toBe(null);
  160. done();
  161. }));
  162. it("will only render a single unfurl when receiving the same OGP data multiple times",
  163. mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
  164. const nick = 'romeo';
  165. const muc_jid = 'lounge@montague.lit';
  166. await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
  167. const view = _converse.api.chatviews.get(muc_jid);
  168. const message_stanza = u.toStanza(`
  169. <message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  170. <body>https://www.youtube.com/watch?v=dQw4w9WgXcQ</body>
  171. <active xmlns="http://jabber.org/protocol/chatstates"/>
  172. <origin-id xmlns="urn:xmpp:sid:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04"/>
  173. <stanza-id xmlns="urn:xmpp:sid:0" by="${muc_jid}" id="8f7613cc-27d4-40ca-9488-da25c4baf92a"/>
  174. <markable xmlns="urn:xmpp:chat-markers:0"/>
  175. </message>`);
  176. _converse.connection._dataRecv(mock.createRequest(message_stanza));
  177. const el = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
  178. expect(el.textContent).toBe('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
  179. spyOn(view.model, 'handleMetadataFastening').and.callThrough();
  180. const metadata_stanza = u.toStanza(`
  181. <message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
  182. <apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
  183. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="YouTube" />
  184. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
  185. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Rick Astley - Never Gonna Give You Up (Video)" />
  186. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />
  187. <meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Rick Astley&amp;#39;s official music video for &quot;Never Gonna Give You Up&quot; Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick Ast..." />
  188. </apply-to>
  189. </message>`);
  190. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  191. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  192. _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
  193. await u.waitUntil(() => view.model.handleMetadataFastening.calls.count());
  194. const unfurls = await u.waitUntil(() => view.querySelectorAll('converse-message-unfurl'));
  195. expect(unfurls.length).toBe(1);
  196. done();
  197. }));
  198. });