Expand test for rendering of images (and fix accordingly)

spec/chatbox.js

@@ -1317,16 +1317,10 @@
 
 
                 it("will render images from their URLs",
-                mock.initConverseWithPromises(
+                    mock.initConverseWithPromises(
-                    null, ['rosterGroupsFetched'], {},
+                        null, ['rosterGroupsFetched'], {},
-                    function (done, _converse) {
+                        function (done, _converse) {
 
-                    if (/PhantomJS/.test(window.navigator.userAgent)) {
-                        // Doesn't work when running tests in PhantomJS, since
-                        // the page is loaded via file:///
-                        done();
-                        return;
-                    }
                     test_utils.createContacts(_converse, 'current');
                     var base_url = document.URL.split(window.location.pathname)[0];
                     var message = base_url+"/logo/conversejs.svg";
@@ -1356,6 +1350,22 @@
                             '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2"><img src="'+
                                 message.replace(/&/g, '&amp;') +
                                 '" class="chat-image"></a>')
+
+                        // Test now with two images in one message
+                        message += ' hello world '+base_url+"/logo/conversejs.svg";
+                        test_utils.sendMessage(view, message);
+                        return test_utils.waitUntil(function () {
+                            return view.$el.find('.chat-content').find('.chat-message img').length === 4;
+                        }, 500);
+                    }).then(function () {
+                        expect(view.sendMessage).toHaveBeenCalled();
+                        var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
+                        expect(msg.html()).toEqual(
+                            '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2">'+
+                            '<img src="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2" class="chat-image"></a> hello world '+
+                            '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg">'+
+                            '<img src="'+base_url+'/logo/conversejs.svg" class="chat-image"></a>'
+                        )
                         done();
                     });
                 }));

src/utils.js

@@ -36,8 +36,11 @@
     ) {
     "use strict";
     locales = locales || {};
+    const b64_sha1 = Strophe.SHA1.b64_sha1;
     Strophe = Strophe.Strophe;
 
+    const URL_REGEX = /\b(https?:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b/g;
+
     var XFORM_TYPE_MAP = {
         'text-private': 'password',
         'text-single': 'text',
@@ -154,24 +157,32 @@
     };
 
     utils.addHyperlinks = function (text) {
-        var list = text.match(/\b(https?:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b/g ) || [];
+        const list = text.match(URL_REGEX) || [];
+        var links = [];
         _.each(list, (match) => {
             const prot = match.indexOf('http://') === 0 || match.indexOf('https://') === 0 ? '' : 'http://';
             const url = prot + encodeURI(decodeURI(match)).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
-            text = text.replace(match, '<a target="_blank" rel="noopener" href="' + url + '">'+ match + '</a>' );
+            const  a = '<a target="_blank" rel="noopener" href="' + url + '">'+ _.escape(match) + '</a>';
+            // We first insert a hash of the code that will be inserted, and
+            // then later replace that with the code itself. That way we avoid
+            // issues when some matches are substrings of others.
+            links.push(a);
+            text = text.replace(match, b64_sha1(a));
         });
+        while (links.length) {
+            const a = links.pop();
+            text = text.replace(b64_sha1(a), a);
+        }
         return text;
     };
 
     utils.renderImageURLs = function (obj) {
-        var list = obj.textContent.match(/\b(https?:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b/g ) || [];
+        const list = obj.textContent.match(URL_REGEX) || [];
         _.forEach(list, function (url) {
-            isImage(unescapeHTML(url)).then(function (img) {
+            isImage(url).then(function (img) {
                 img.className = 'chat-image';
-                var a = obj.querySelector('a');
+                var anchors = sizzle(`a[href="${url}"]`, obj);
-                if (!_.isNull(a)) {
+                _.each(anchors, (a) => { a.innerHTML = img.outerHTML; });
-                    a.innerHTML = img.outerHTML;
-                }
             });
         });
         return obj;