From 876a07b3decfa5400b8460122443ee921b6aae76 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 27 Apr 2018 17:59:41 +0200 Subject: [PATCH] Fix the failing tests --- css/converse.css | 11 +- css/inverse.css | 11 +- mockup/chatbox.html | 30 +++--- mockup/chatroom.html | 50 +++++----- sass/_messages.scss | 14 ++- spec/chatbox.js | 155 ++++++++++++++++------------- spec/chatroom.js | 53 +++++----- src/templates/message.html | 4 +- src/templates/new_day.html | 2 +- src/templates/spoiler_message.html | 2 +- src/utils/core.js | 36 ++++--- 11 files changed, 205 insertions(+), 163 deletions(-) diff --git a/css/converse.css b/css/converse.css index b7e3bd09d..3e7fe9df4 100644 --- a/css/converse.css +++ b/css/converse.css @@ -8360,7 +8360,7 @@ body.reset { color: #3AA569; font-size: 14px; line-height: 14px; - padding: 0.5rem 1rem; } + padding: 0.35rem 1rem; } #conversejs .message.chat-info.badge { color: white; } #conversejs .message.chat-info.chat-state-notification { @@ -8408,9 +8408,13 @@ body.reset { margin-left: 0; } #conversejs .message.chat-msg .chat-msg-text { padding: 0; - color: #666; } + color: #666; + word-wrap: break-word; + word-break: break-all; } #conversejs .message.chat-msg .chat-msg-text .emojione { margin-bottom: -6px; } + #conversejs .message.chat-msg .chat-msg-media audio { + width: 100%; } #conversejs .message.chat-msg .avatar { margin-top: 0.5em; background: #818479; @@ -8425,7 +8429,8 @@ body.reset { #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author { font-weight: bold; } #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time { - padding-left: 0.5em; } + padding-left: 0.25em; + color: #9d9d9d; } #conversejs .message.chat-msg.chat-action .chat-msg-heading { margin-top: 0; } #conversejs .message.chat-msg.chat-msg-followup { diff --git a/css/inverse.css b/css/inverse.css index d6af0e79b..0d5e17cf1 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -8548,7 +8548,7 @@ body { color: #3AA569; font-size: 14px; line-height: 20px; - padding: 0.5rem 1rem; } + padding: 0.35rem 1rem; } #conversejs .message.chat-info.badge { color: white; } #conversejs .message.chat-info.chat-state-notification { @@ -8596,9 +8596,13 @@ body { margin-left: 0; } #conversejs .message.chat-msg .chat-msg-text { padding: 0; - color: #666; } + color: #666; + word-wrap: break-word; + word-break: break-all; } #conversejs .message.chat-msg .chat-msg-text .emojione { margin-bottom: -6px; } + #conversejs .message.chat-msg .chat-msg-media audio { + width: 100%; } #conversejs .message.chat-msg .avatar { margin-top: 0.5em; background: #818479; @@ -8613,7 +8617,8 @@ body { #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author { font-weight: bold; } #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time { - padding-left: 0.5em; } + padding-left: 0.25em; + color: #9d9d9d; } #conversejs .message.chat-msg.chat-action .chat-msg-heading { margin-top: 0; } #conversejs .message.chat-msg.chat-msg-followup { diff --git a/mockup/chatbox.html b/mockup/chatbox.html index 41e848fdc..148007e39 100644 --- a/mockup/chatbox.html +++ b/mockup/chatbox.html @@ -46,11 +46,11 @@
Romeo Montague - 15:31 + 15:31 -

+ He jests at scars that never felt a wound. -

+
@@ -64,11 +64,11 @@
Romeo Montague - 15:31 + 15:31 -

+ But soft, what light through yonder window breaks? -

+
@@ -77,11 +77,11 @@
Romeo Montague - 15:31 + 15:31 -

+ It is the east and Juliet is the sun! -

+
@@ -90,11 +90,11 @@
Romeo Montague - 15:31 + 15:31 -

+ Arise, fair sun, and kill the envious moon, -

+
@@ -105,14 +105,14 @@
Juliet Capulet - 15:31 + 15:31 -

+ O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name; Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet. -

+
diff --git a/mockup/chatroom.html b/mockup/chatroom.html index 1b095f16a..063918862 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -49,7 +49,7 @@ **Romeo Montague -

looks around

+ looks around
@@ -57,9 +57,9 @@
Romeo Montague - 15:31 + 15:31 -

He jests at scars that never felt a wound.

+ He jests at scars that never felt a wound.
@@ -76,11 +76,11 @@
Romeo Montague - 19:36 + 19:36 -

+ But, soft! what light through yonder window breaks? -

+
@@ -88,9 +88,9 @@
Romeo Montague - 19:36 + 19:36 -

It is the east, and Juliet is the sun.

+ It is the east, and Juliet is the sun.
@@ -98,9 +98,9 @@
Romeo Montague - 19:36 + 19:36 -

Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief

+ Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief
@@ -109,14 +109,14 @@
Juliet Capulet - 19:43 + 19:43 -

+ O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name; Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet. -

+
@@ -126,7 +126,7 @@
Romeo Montague - 19:36 + 19:36 Uploading file: juliet.jpg, 120kb @@ -138,9 +138,9 @@
Juliet Capulet - 19:45 + 19:45 -

+
@@ -155,7 +155,7 @@
Romeo Montague - 19:36 + 19:36
By a name @@ -179,9 +179,9 @@
Mercutio - 19:49 + 19:49 -

I mean, sir, in delay We waste our lights in vain, like lamps by day.

+ I mean, sir, in delay We waste our lights in vain, like lamps by day.
@@ -190,11 +190,11 @@
Mercutio - 19:49 + 19:49 -

+ Take our good meaning, for our judgment sits. - Five times in that ere once in our five wits.

+ Five times in that ere once in our five wits.
@@ -203,13 +203,13 @@
Mercutio - 19:49 + 19:49 -

+ True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy, Which is as thin of substance as the air And more inconstant than the wind, who wooes Even now the frozen bosom of the north, And, being anger'd, puffs away from thence, - Turning his face to the dew-dropping south. + Turning his face to the dew-dropping south.

diff --git a/sass/_messages.scss b/sass/_messages.scss index c694e2d9d..f67c97f80 100644 --- a/sass/_messages.scss +++ b/sass/_messages.scss @@ -32,7 +32,7 @@ color: $chat-head-color; font-size: $message-font-size; line-height: $line-height-small; - padding: 0.5rem 1rem; + padding: 0.35rem 1rem; &.badge { color: $chat-head-text-color; @@ -105,10 +105,19 @@ .chat-msg-text { padding: 0; color: $message-text-color; + word-wrap: break-word; + word-break: break-all; + .emojione { margin-bottom: -6px; } } + + .chat-msg-media { + audio { + width: 100%; + } + } .avatar { margin-top: 0.5em; @@ -127,7 +136,8 @@ font-weight: bold; } .chat-msg-time { - padding-left: 0.5em; + padding-left: 0.25em; + color: lighten($text-color, 15%); } } &.chat-action { diff --git a/spec/chatbox.js b/spec/chatbox.js index c1c07cfb9..6f7a28e10 100644 --- a/spec/chatbox.js +++ b/spec/chatbox.js @@ -593,11 +593,10 @@ expect(msg_obj.get('sender')).toEqual('them'); expect(msg_obj.get('delayed')).toEqual(false); // Now check that the message appears inside the chatbox in the DOM - var $chat_content = $(chatboxview.el).find('.chat-content'); - var msg_txt = $chat_content.find('.chat-msg').find('.chat-msg-text').text(); - expect(msg_txt).toEqual(message); - var sender_txt = $chat_content.find('span.chat-msg-them').text(); - expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); + var chat_content = chatboxview.el.querySelector('.chat-content'); + expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message); + expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy(); + expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Max Frankfurter'); done(); }); })); @@ -709,12 +708,10 @@ expect(msg_obj.get('sender')).toEqual('them'); expect(msg_obj.get('delayed')).toEqual(false); // Now check that the message appears inside the chatbox in the DOM - var $chat_content = $(chatboxview.el).find('.chat-content'); - var msg_txt = $chat_content.find('.chat-msg .chat-msg-text').text(); - expect(msg_txt).toEqual(message); - var sender_txt = $chat_content.find('span.chat-msg-them').text(); - expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); - expect(sender_txt.indexOf('max.frankfurter@localhost')).not.toBe(-1); + var chat_content = chatboxview.el.querySelector('.chat-content'); + expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message); + expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy(); + expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('max.frankfurter@localhost'); done(); })); }); @@ -1095,20 +1092,27 @@ var $chat_content = $(chatboxview.el).find('.chat-content'); chatboxview.clearSpinner(); //cleanup - var $time = $chat_content.find('time'); - expect($time.length).toEqual(4); - $time = $chat_content.find('time:first'); - expect($time.data('isodate')).toEqual(moment('2017-12-31T00:00:00').format()); + expect($chat_content[0].querySelectorAll('.date-separator').length).toEqual(4); + + var $day = $chat_content.find('.date-separator:first'); + expect($day.data('isodate')).toEqual(moment('2017-12-31T00:00:00').format()); + + var $time = $chat_content.find('time:first'); expect($time.text()).toEqual('Sunday Dec 31st 2017') - expect($time[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('Older message'); + $day = $chat_content.find('.date-separator:first'); + expect($day[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('Older message'); + var $el = $chat_content.find('.chat-msg:first').find('.chat-msg-text') expect($el.text()).toEqual('Older message'); $time = $chat_content.find('time:eq(1)'); - expect($time.data('isodate')).toEqual(moment('2018-01-01T00:00:00').format()); expect($time.text()).toEqual("Monday Jan 1st 2018"); - expect($time[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('Inbetween message'); + + $day = $chat_content.find('.date-separator:eq(1)'); + expect($day.data('isodate')).toEqual(moment('2018-01-01T00:00:00').format()); + expect($day[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('Inbetween message'); + $el = $chat_content.find('.chat-msg:eq(1)'); expect($el.find('.chat-msg-text').text()).toEqual('Inbetween message'); expect($el[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toEqual('another inbetween message'); @@ -1116,9 +1120,12 @@ expect($el.find('.chat-msg-text').text()).toEqual('another inbetween message'); $time = $chat_content.find('time:nth(2)'); - expect($time.data('isodate')).toEqual(moment('2018-01-02T00:00:00').format()); expect($time.text()).toEqual("Tuesday Jan 2nd 2018"); - expect($time[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('An earlier message on the next day'); + + $day = $chat_content.find('.date-separator:nth(2)'); + expect($day.data('isodate')).toEqual(moment('2018-01-02T00:00:00').format()); + expect($day[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('An earlier message on the next day'); + $el = $chat_content.find('.chat-msg:eq(3)'); expect($el.find('.chat-msg-text').text()).toEqual('An earlier message on the next day'); @@ -1126,9 +1133,9 @@ expect($el.find('.chat-msg-text').text()).toEqual('message'); expect($el[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toEqual('newer message from the next day'); - $time = $chat_content.find('time:last'); - expect($time.data('isodate')).toEqual(moment().startOf('day').format()); - expect($time[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('latest message'); + $day = $chat_content.find('.date-separator:last'); + expect($day.data('isodate')).toEqual(moment().startOf('day').format()); + expect($day[0].nextElementSibling.querySelector('.chat-msg-text').textContent).toBe('latest message'); done(); }); })); @@ -1210,11 +1217,10 @@ expect(msg_obj.get('sender')).toEqual('them'); expect(msg_obj.get('delayed')).toEqual(false); // Now check that the message appears inside the chatbox in the DOM - var $chat_content = $(chatboxview.el).find('.chat-content'); - var msg_txt = $chat_content.find('.chat-msg').find('.chat-msg-text').text(); - expect(msg_txt).toEqual(msgtext); - var sender_txt = $chat_content.find('span.chat-msg-them').text(); - expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); + var chat_content = chatboxview.el.querySelector('.chat-content'); + expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(msgtext); + expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy(); + expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff'); done(); })); @@ -1421,15 +1427,18 @@ expect(msg_obj.get('fullname')).toEqual(contact_name); expect(msg_obj.get('sender')).toEqual('them'); expect(msg_obj.get('delayed')).toEqual(true); - msg_txt = $chat_content.find('.chat-msg').find('.chat-msg-text').text(); - expect(msg_txt).toEqual(message); - sender_txt = $chat_content.find('span.chat-msg-them').text(); - expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); - var $time = $chat_content.find('time'); - expect($time.length).toEqual(1); - expect($time.attr('class')).toEqual('message chat-info chat-date badge badge-info'); - expect($time.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format()); + var chat_content = chatboxview.el.querySelector('.chat-content'); + expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message); + expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy(); + expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff'); + + var $day = $chat_content.find('.date-separator'); + expect($day.length).toEqual(1); + expect($day.attr('class')).toEqual('message date-separator'); + expect($day.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format()); + + var $time = $chat_content.find('time.separator-text'); expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY")); message = 'This is a current message'; @@ -1444,12 +1453,15 @@ expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object)); // Check that there is a http://www.opkode.com/\'onmouseover=\'alert(1)\'whatever'); - message = 'http://www.opkode.com/"onmouseover="alert(1)"whatever'; test_utils.sendMessage(view, message); @@ -1566,15 +1579,15 @@ expect(view.model.sendMessage).toHaveBeenCalled(); msg = $(view.el).find('.chat-content').find('.chat-msg').last().find('.chat-msg-text'); expect(msg.text()).toEqual(message); - expect(msg.html()).toEqual('https://en.wikipedia.org/wiki/Ender\'s_Game'); + expect(msg.html()).toEqual(''+message+''); - message = "https://en.wikipedia.org/wiki/Ender%27s_Game"; + message = "https://en.wikipedia.org/wiki/Ender's_Game"; test_utils.sendMessage(view, message); expect(view.model.sendMessage).toHaveBeenCalled(); msg = $(view.el).find('.chat-content').find('.chat-msg').last().find('.chat-msg-text'); expect(msg.text()).toEqual(message); - expect(msg.html()).toEqual('https://en.wikipedia.org/wiki/Ender%27s_Game'); + expect(msg.html()).toEqual(''+message+''); done(); })); @@ -1650,7 +1663,7 @@ test_utils.waitUntil(function () { return view.el.querySelectorAll('.chat-content .chat-msg video').length; - }, 1000).then(function () { + }, 2000).then(function () { var msg = view.el.querySelector('.chat-msg .chat-msg-text'); expect(msg.outerHTML).toEqual('Have you seen this funny video?'); var media = view.el.querySelector('.chat-msg .chat-msg-media'); @@ -1705,7 +1718,7 @@ expect(msg.outerHTML).toEqual('Have you downloaded this funny file?'); var media = view.el.querySelector('.chat-msg .chat-msg-media'); expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual( - 'Download file: "funny.pdf'); + 'Download: "funny.pdf'); done(); }); })); @@ -1734,12 +1747,14 @@ test_utils.waitUntil(function () { return view.el.querySelectorAll('.chat-content .chat-msg img').length; - }, 1000).then(function () { + }, 2000).then(function () { var msg = view.el.querySelector('.chat-msg .chat-msg-text'); expect(msg.outerHTML).toEqual('Have you seen this funny image?'); var media = view.el.querySelector('.chat-msg .chat-msg-media'); expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual( - ''); + ''+ + ''+ + ''); done(); }); })); @@ -1759,40 +1774,36 @@ test_utils.sendMessage(view, message); test_utils.waitUntil(function () { - return $(view.el).find('.chat-content').find('.chat-msg img').length; + return view.el.querySelectorAll('.chat-content .chat-image').length; }, 1000).then(function () { expect(view.model.sendMessage).toHaveBeenCalled(); - var msg = $(view.el).find('.chat-content').find('.chat-msg').last().find('.chat-msg-text'); - expect(msg.html()).toEqual( - ''); message += "?param1=val1¶m2=val2"; test_utils.sendMessage(view, message); return test_utils.waitUntil(function () { - return $(view.el).find('.chat-content').find('.chat-msg img').length === 2; + return view.el.querySelectorAll('.chat-content .chat-image').length === 2; }, 1000); }).then(function () { expect(view.model.sendMessage).toHaveBeenCalled(); var msg = $(view.el).find('.chat-content').find('.chat-msg').last().find('.chat-msg-text'); - expect(msg.html()).toEqual( - '') + expect(msg.html().trim()).toEqual( + '') // Test now with two images in one message message += ' hello world '+base_url+"/logo/conversejs-filled.svg"; test_utils.sendMessage(view, message); return test_utils.waitUntil(function () { - return $(view.el).find('.chat-content').find('.chat-msg img').length === 4; + return view.el.querySelectorAll('.chat-content .chat-image').length === 4; }, 1000); }).then(function () { expect(view.model.sendMessage).toHaveBeenCalled(); var msg = $(view.el).find('.chat-content').find('.chat-msg').last().find('.chat-msg-text'); - expect(msg.html()).toEqual( - ''+ - ' hello world '+ - ''+ - '' - ) + expect(msg[0].textContent.trim()).toEqual('hello world'); + expect(msg[0].querySelectorAll('img').length).toEqual(2); done(); }); })); @@ -1814,11 +1825,13 @@ var chatbox = _converse.chatboxes.get(contact_jid); expect(chatbox.messages.models.length, 1); var msg_object = chatbox.messages.models[0]; - var msg_time_author = $(view.el).find('.chat-content').find('.chat-msg') - .last().find('.chat-msg-author.chat-msg-me').text(); - var msg_time_rendered = msg_time_author.split(" ",1); - var msg_time = moment(msg_object.get('time')).format(_converse.time_format); - expect(msg_time_rendered[0]).toBe(msg_time); + + var msg_author = view.el.querySelector('.chat-content .chat-msg:last-child .chat-msg-author'); + expect(msg_author.textContent).toBe('dummy@localhost'); + + var msg_time = view.el.querySelector('.chat-content .chat-msg:last-child .chat-msg-time'); + var time = moment(msg_object.get('time')).format(_converse.time_format); + expect(msg_time.textContent).toBe(time); done(); })); }); diff --git a/spec/chatroom.js b/spec/chatroom.js index 8a49229ca..6876097bc 100644 --- a/spec/chatroom.js +++ b/spec/chatroom.js @@ -619,11 +619,11 @@ var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit'); var chat_content = view.el.querySelector('.chat-content'); var $chat_content = $(chat_content); - var time = chat_content.querySelector('time'); - expect(time).not.toBe(null); - expect(time.getAttribute('class')).toEqual('message chat-info chat-date badge badge-info'); - expect(time.getAttribute('data-isodate')).toEqual(moment().startOf('day').format()); - expect(time.textContent).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); + var indicator = chat_content.querySelector('.date-separator'); + expect(indicator).not.toBe(null); + expect(indicator.getAttribute('class')).toEqual('message date-separator'); + expect(indicator.getAttribute('data-isodate')).toEqual(moment().startOf('day').format()); + expect(indicator.querySelector('time').textContent).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); expect(chat_content.querySelectorAll('div.chat-info').length).toBe(1); expect(chat_content.querySelector('div.chat-info').textContent).toBe( "dummy has entered the room" @@ -654,11 +654,13 @@ }); _converse.connection._dataRecv(test_utils.createRequest(presence)); - time = chat_content.querySelector('time[data-isodate="'+moment().startOf('day').format()+'"]'); - expect(time).not.toBe(null); - expect(time.getAttribute('class')).toEqual('message chat-info chat-date badge badge-info'); - expect(time.getAttribute('data-isodate')).toEqual(moment().startOf('day').format()); - expect(time.textContent).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); + indicator = chat_content.querySelector('.date-separator[data-isodate="'+moment().startOf('day').format()+'"]'); + expect(indicator).not.toBe(null); + + expect(indicator.getAttribute('class')).toEqual('message date-separator'); + expect(indicator.getAttribute('data-isodate')).toEqual(moment().startOf('day').format()); + expect(indicator.querySelector('time').getAttribute('class')).toEqual('separator-text'); + expect(indicator.querySelector('time').textContent).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); expect(chat_content.querySelector('div.chat-info:last-child').textContent).toBe( "some1 has entered the room" ); @@ -680,11 +682,13 @@ }); _converse.connection._dataRecv(test_utils.createRequest(presence)); - time = chat_content.querySelector('time[data-isodate="'+moment().startOf('day').format()+'"]'); - expect(time).not.toBe(null); - expect(time.getAttribute('class')).toEqual('message chat-info chat-date badge badge-info'); - expect(time.getAttribute('data-isodate')).toEqual(moment().startOf('day').format()); - expect(time.textContent).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); + indicator = chat_content.querySelector('.date-separator[data-isodate="'+moment().startOf('day').format()+'"]'); + + expect(indicator).not.toBe(null); + expect(indicator.getAttribute('class')).toEqual('message date-separator'); + expect(indicator.getAttribute('data-isodate')).toEqual(moment().startOf('day').format()); + + expect(indicator.querySelector('time').textContent).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); expect($(chat_content).find('div.chat-info').length).toBe(4); expect($(chat_content).find('div.chat-info:last').html()).toBe( 'some1 has left the room. '+ @@ -716,10 +720,10 @@ var $time = $chat_content.find('time'); expect($time.length).toEqual(4); - $time = $chat_content.find('time:eq(3)'); - expect($time.attr('class')).toEqual('message chat-info chat-date badge badge-info'); - expect($time.data('isodate')).toEqual(moment().startOf('day').format()); - expect($time.text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); + var $indicator = $chat_content.find('.date-separator:eq(3)'); + expect($indicator.attr('class')).toEqual('message date-separator'); + expect($indicator.data('isodate')).toEqual(moment().startOf('day').format()); + expect($indicator.find('time').text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); expect($chat_content.find('div.chat-info').length).toBe(5); expect($chat_content.find('div.chat-info:last').html()).toBe("newguy has entered the room"); @@ -755,10 +759,11 @@ $time = $chat_content.find('time'); expect($time.length).toEqual(6); - $time = $chat_content.find('time:eq(5)'); - expect($time.attr('class')).toEqual('message chat-info chat-date badge badge-info'); - expect($time.data('isodate')).toEqual(moment().startOf('day').format()); - expect($time.text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); + $indicator = $chat_content.find('.date-separator:eq(5)'); + expect($indicator.attr('class')).toEqual('message date-separator'); + expect($indicator.data('isodate')).toEqual(moment().startOf('day').format()); + + expect($indicator.find('time').text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY")); expect($chat_content.find('div.chat-info').length).toBe(6); expect($chat_content.find('div.chat-info:last').html()).toBe( 'newguy has left the room. '+ @@ -2298,7 +2303,7 @@ .c('status', {'code': '307'}); _converse.connection._dataRecv(test_utils.createRequest(presence)); expect( - view.el.querySelectorAll('.chat-info')[3].textContent).toBe( + view.el.querySelectorAll('.chat-info')[2].textContent).toBe( "annoyingGuy has been kicked out"); done(); }).catch(_.partial(console.error, _)); diff --git a/src/templates/message.html b/src/templates/message.html index ef3f2e885..8a377c705 100644 --- a/src/templates/message.html +++ b/src/templates/message.html @@ -5,9 +5,9 @@
{{{o.username}}} - {{{o.pretty_time}}} + {{{o.pretty_time}}} -

+

diff --git a/src/templates/new_day.html b/src/templates/new_day.html index 638d92da0..b7c6e3a81 100644 --- a/src/templates/new_day.html +++ b/src/templates/new_day.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/templates/spoiler_message.html b/src/templates/spoiler_message.html index c815d5ebf..43a1e6187 100644 --- a/src/templates/spoiler_message.html +++ b/src/templates/spoiler_message.html @@ -3,7 +3,7 @@
{{{o.username}}} - {{{o.pretty_time}}} + {{{o.pretty_time}}}
{{{o.spoiler_hint}}} diff --git a/src/utils/core.js b/src/utils/core.js index 7c7d68f0d..602c2e77d 100644 --- a/src/utils/core.js +++ b/src/utils/core.js @@ -66,18 +66,6 @@ 'warn': _.get(console, 'log') ? console.log.bind(console) : _.noop }, console); - var unescapeHTML = function (htmlEscapedText) { - /* Helper method that replace HTML-escaped symbols with equivalent characters - * (e.g. transform occurrences of '&' to '&') - * - * Parameters: - * (String) htmlEscapedText: a String containing the HTML-escaped symbols. - */ - var div = document.createElement('div'); - div.innerHTML = htmlEscapedText; - return div.innerText; - }; - var isImage = function (url) { return new Promise((resolve, reject) => { var img = new Image(); @@ -200,6 +188,18 @@ return matches; } + u.unescapeHTML = function (htmlEscapedText) { + /* Helper method that replace HTML-escaped symbols with equivalent characters + * (e.g. transform occurrences of '&' to '&') + * + * Parameters: + * (String) htmlEscapedText: a String containing the HTML-escaped symbols. + */ + var div = document.createElement('div'); + div.innerHTML = htmlEscapedText; + return div.innerText; + }; + u.escapeHTML = function (string) { return string .replace(/&/g, "&") @@ -212,7 +212,11 @@ return URI.withinString(text, function (url) { var uri = new URI(url); uri.normalize(); - return `${u.escapeHTML(uri.readable())}`; + if (!url.startsWith('http://') && !url.startsWith('https://')) { + url = 'http://' + url; + } + url = encodeURI(decodeURI(url)).replace(/[!'()]/g, escape).replace(/\*/g, "%2A"); + return `${u.escapeHTML(uri.readable())}`; }); }; @@ -233,9 +237,9 @@ i.addEventListener('error', resolve); _.each(sizzle(`a[href="${url}"]`, obj), (a) => { - a.innerHTML = tpl_image({ + a.outerHTML= tpl_image({ 'url': url, - 'label_download': __('Download image file') + 'label_download': __('Download') }) }); }).catch(resolve) @@ -268,7 +272,7 @@ return tpl_image({ 'url': url, - 'label_download': __('Download image file') + 'label_download': __('Download') }) } return url;