Fix issue #2168

spec/http-file-upload.js

@@ -224,7 +224,9 @@ describe("XEP-0363: HTTP File Upload", function () {
 
             describe("when clicked and a file chosen", function () {
 
-                it("is uploaded and sent out", mock.initConverse(async (done, _converse) => {
+                it("is uploaded and sent out", mock.initConverse(
+                        ['rosterGroupsFetched', 'chatBoxesFetched'], {} ,async (done, _converse) => {
+
                     const base_url = 'https://conversejs.org';
                     await mock.waitUntilDiscoConfirmed(
                         _converse, _converse.domain,
@@ -316,11 +318,15 @@ describe("XEP-0363: HTTP File Upload", function () {
                                 `</x>`+
                                 `<origin-id id="${sent_stanza.nodeTree.querySelector('origin-id').getAttribute("id")}" xmlns="urn:xmpp:sid:0"/>`+
                         `</message>`);
-                    await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
+                    const img_link_el = await u.waitUntil(() => view.el.querySelector('converse-chat-message-body .chat-image__link'), 1000);
                     // Check that the image renders
-                    expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.replace(/<!---->/g, '').trim()).toEqual(
+                    expect(img_link_el.outerHTML.replace(/<!---->/g, '').trim()).toEqual(
                         `<a class="chat-image__link" target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
                         `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a>`);
+
+                    expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.replace(/<!---->/g, '').trim()).toEqual(
+                        `<a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
+                        `Download image file "conversejs-filled.svg"</a>`);
                     XMLHttpRequest.prototype.send = send_backup;
                     done();
                 }));
@@ -420,12 +426,16 @@ describe("XEP-0363: HTTP File Upload", function () {
                                 `</x>`+
                                 `<origin-id id="${sent_stanza.nodeTree.querySelector('origin-id').getAttribute("id")}" xmlns="urn:xmpp:sid:0"/>`+
                         `</message>`);
-                    await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
+                    const img_link_el = await u.waitUntil(() => view.el.querySelector('converse-chat-message-body .chat-image__link'), 1000);
                     // Check that the image renders
-                    expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.replace(/<!---->/g, '').trim()).toEqual(
+                    expect(img_link_el.outerHTML.replace(/<!---->/g, '').trim()).toEqual(
                         `<a class="chat-image__link" target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
                         `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a>`);
 
+                    expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.replace(/<!---->/g, '').trim()).toEqual(
+                        `<a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
+                        `Download image file "conversejs-filled.svg"</a>`);
+
                     XMLHttpRequest.prototype.send = send_backup;
                     done();
                 }));

spec/messages.js

@@ -1876,15 +1876,16 @@ describe("A Chat Message", function () {
                     <x xmlns="jabber:x:oob"><url>${url}</url></x>
                 </message>`);
             _converse.connection._dataRecv(mock.createRequest(stanza));
-            await u.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg img').length, 2000);
-
+            _converse.connection._dataRecv(mock.createRequest(stanza));
+            await new Promise(resolve => view.model.messages.once('rendered', resolve));
+            await u.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg a').length, 1000);
             const msg = view.el.querySelector('.chat-msg .chat-msg__text');
             expect(u.hasClass('chat-msg__text', msg)).toBe(true);
             expect(msg.textContent).toEqual('Have you seen this funny image?');
             const media = view.el.querySelector('.chat-msg .chat-msg__media');
             expect(media.innerHTML.replace(/<!---->/g, '').replace(/(\r\n|\n|\r)/gm, "")).toEqual(
-                `<a class="chat-image__link" target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
-                `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a>`);
+                `<a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
+                `Download image file "conversejs-filled.svg"</a>`);
             done();
         }));
     });

src/utils/html.js

@@ -115,10 +115,11 @@ function renderAudioURL (_converse, uri) {
 }
 
 function renderImageURL (_converse, uri) {
-    if (!_converse.api.settings.get('show_images_inline')) {
-        return u.convertURIoHyperlink(uri);
-    }
-    return tpl_image({'url': uri.toString()});
+    const { __ } = _converse;
+    return tpl_file({
+        'url': uri.toString(),
+        'label_download': __('Download image file "%1$s"', getFileName(uri))
+    })
 }
 
 function renderFileURL (_converse, uri) {