[FIX] mail: fix "New messages" separator and channel_seen behaviour

- channel_seen is now called even for own message and only when needed
- channel_seen is now called with a message_id which transfer the
  decision of what is seen to the client which makes more sense

task-2282235
task-2282248

closes odoo/odoo#57950

X-original-commit: 04edfa50ccea305050d017c4a1996e561bc7bd57
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

12 files changed, 259 insertions, 80 deletions

diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index 63e4fb2cd77..99f982408b7 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -21,9 +21,9 @@
                 <t t-if="chatWindow.thread and chatWindow.thread.mass_mailing">
                     <i class="fa fa-envelope-o" title="Messages are sent by email" role="img"/>
                 </t>
-                <t t-if="chatWindow.thread and chatWindow.thread.message_unread_counter > 0">
+                <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
                     <div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item">
-                        (<t t-esc="chatWindow.thread.message_unread_counter"/>)
+                        (<t t-esc="chatWindow.thread.localMessageUnreadCounter"/>)
                     </div>
                 </t>
                 <div class="o-autogrow"/>
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_tests.js
index c63ec07520b..e5885d6f7d4 100644
--- a/addons/mail/static/src/components/discuss/tests/discuss_tests.js
+++ b/addons/mail/static/src/components/discuss/tests/discuss_tests.js
@@ -513,9 +513,8 @@ QUnit.test('sidebar: channel rendering with needaction counter', async function
     this.data['mail.channel'].records.push({ id: 20 });
     // expected needaction message
     this.data['mail.message'].records.push({
+        channel_ids: [20], // link message to channel
         id: 100, // random unique id, useful to link notification
-        model: 'mail.channel', // value to link message to channel
-        res_id: 20, // id of related channel
     });
     // expected needaction notification
     this.data['mail.notification'].records.push({
@@ -1744,9 +1743,23 @@ QUnit.test('new messages separator [REQUIRE FOCUS]', async function (assert) {
     // AKU TODO: thread specific test
     assert.expect(6);
 
+    // Needed partner & user to allow simulation of message reception
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
     // channel expected to be rendered, with a random unique id that will be
     // referenced in the test and the seen_message_id value set to last message
-    this.data['mail.channel'].records.push({ id: 20, seen_message_id: 125 });
+    this.data['mail.channel'].records.push({
+        id: 20,
+        seen_message_id: 125,
+        uuid: 'randomuuid',
+    });
     for (let i = 1; i <= 25; i++) {
         this.data['mail.message'].records.push({
             channel_ids: [20],
@@ -1777,17 +1790,18 @@ QUnit.test('new messages separator [REQUIRE FOCUS]', async function (assert) {
     document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop = 0;
     // composer is focused by default, we remove that focus
     document.querySelector('.o_ComposerTextInput_textarea').blur();
-    // simulate receiving a new message
-    const data = {
-        channel_ids: [20],
-        id: 126,
-        model: 'mail.channel',
-        res_id: 20,
-    };
-    await afterNextRender(() => {
-        const notifications = [[['my-db', 'mail.channel', 20], data]];
-        this.widget.call('bus_service', 'trigger', 'notification', notifications);
-    });
+    // simulate receiving a message
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            uuid: 'randomuuid',
+            message_content: "hu",
+        },
+    }));
+
     assert.containsN(
         document.body,
         '.o_MessageList_message',
@@ -2413,21 +2427,19 @@ QUnit.test('inbox: mark all messages as read', async function (assert) {
     this.data['mail.message'].records.push(
         // first expected message
         {
+            channel_ids: [20], // link message to channel
             id: 100, // random unique id, useful to link notification
-            model: 'mail.channel', // value to link message to channel
             // needaction needs to be set here for message_fetch domain, because
             // mocked models don't have computed fields
             needaction: true,
-            res_id: 20, // id of related channel
         },
         // second expected message
         {
+            channel_ids: [20], // link message to channel
             id: 101, // random unique id, useful to link notification
-            model: 'mail.channel', // value to link message to channel
             // needaction needs to be set here for message_fetch domain, because
             // mocked models don't have computed fields
             needaction: true,
-            res_id: 20, // id of related channel
         }
     );
     this.data['mail.notification'].records.push(
diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js
index 2b84762c9dd..26499d0f179 100644
--- a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js
+++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js
@@ -44,7 +44,7 @@ class DiscussSidebarItem extends Component {
         } else if (this.thread.channel_type === 'channel') {
             return this.thread.message_needaction_counter;
         } else if (this.thread.channel_type === 'chat') {
-            return this.thread.message_unread_counter;
+            return this.thread.localMessageUnreadCounter;
         }
         return 0;
     }
diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml
index 0a56d5c43f5..9b52651f0c6 100644
--- a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml
@@ -6,7 +6,7 @@
             t-att-class="{
                 'o-active': thread and discuss.thread === thread,
                 'o-starred-box': thread and thread === env.messaging.starred,
-                'o-unread': thread and thread.message_unread_counter > 0,
+                'o-unread': thread and thread.localMessageUnreadCounter > 0,
             }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined" t-att-data-thread-name="thread ? thread.displayName : undefined"
         >
             <t t-if="thread">
@@ -25,7 +25,7 @@
                     </div>
                 </t>
                 <t t-else="">
-                    <div class="o_DiscussSidebarItem_item o_DiscussSidebarItem_name" t-att-class="{ 'o-item-unread': thread.message_unread_counter > 0 }">
+                    <div class="o_DiscussSidebarItem_item o_DiscussSidebarItem_name" t-att-class="{ 'o-item-unread': thread.localMessageUnreadCounter > 0 }">
                         <t t-esc="thread.displayName"/>
                     </div>
                     <t t-if="thread.mass_mailing">
@@ -45,7 +45,7 @@
                             <div class="o_DiscussSidebarItem_command o_DiscussSidebarItem_commandRename fa fa-cog" t-on-click="_onClickRename" title="Rename conversation" role="img"/>
                         </t>
                         <t t-if="hasUnpin()">
-                            <t t-if="!thread.message_unread_counter">
+                            <t t-if="!thread.localMessageUnreadCounter">
                                 <div class="fa fa-times o_DiscussSidebarItem_command o_DiscussSidebarItem_commandUnpin" t-on-click="_onClickUnpin" title="Unpin conversation" role="img"/>
                             </t>
                         </t>
diff --git a/addons/mail/static/src/components/message/message_tests.js b/addons/mail/static/src/components/message/message_tests.js
index e69c40e35aa..eefd6f3294d 100644
--- a/addons/mail/static/src/components/message/message_tests.js
+++ b/addons/mail/static/src/components/message/message_tests.js
@@ -543,14 +543,14 @@ QUnit.test('do not show messaging seen indicator if not authored by me', async f
         id: 11,
         partnerSeenInfos: [['create', [
             {
-                id: this.env.session.partner_id,
+                channelId: 11,
                 lastFetchedMessage: [['insert', { id: 100 }]],
-                partner: [['insert', { id: this.env.messaging.currentPartner.id }]],
+                partnerId: this.env.messaging.currentPartner.id,
             },
             {
-                id: 100,
+                channelId: 11,
                 lastFetchedMessage: [['insert', { id: 100 }]],
-                partner: [['link', author]],
+                partnerId: author.id,
             },
         ]]],
         model: 'mail.channel',
@@ -614,14 +614,14 @@ QUnit.test('do not show messaging seen indicator if before last seen by all mess
     thread.update({
        partnerSeenInfos: [['create', [
             {
-                id: currentPartner.id,
+                channelId: 11,
                 lastSeenMessage: [['link', lastSeenMessage]],
-                partner: [['link', currentPartner]],
+                partnerId: this.env.messaging.currentPartner.id,
             },
             {
-                id: 100,
+                channelId: 11,
                 lastSeenMessage: [['link', lastSeenMessage]],
-                partner: [['insert', { id: 100 }]],
+                partnerId: 100,
             },
         ]]],
     });
@@ -658,15 +658,15 @@ QUnit.test('only show messaging seen indicator if authored by me, after last see
         id: 11,
         partnerSeenInfos: [['create', [
             {
-                id: currentPartner.id,
+                channelId: 11,
                 lastSeenMessage: [['insert', { id: 100 }]],
-                partner: [['link', currentPartner]],
+                partnerId: this.env.messaging.currentPartner.id,
             },
             {
-                id: 100,
-                partner: [['insert', { id: 100 }]],
+                channelId: 11,
                 lastFetchedMessage: [['insert', { id: 100 }]],
                 lastSeenMessage: [['insert', { id: 99 }]],
+                partnerId: 100,
             },
         ]]],
         messageSeenIndicators: [['insert', {
@@ -957,11 +957,12 @@ QUnit.test('open chat with author on avatar click should be disabled when curren
         id: 10,
     });
     const thread = await correspondent.getChat();
-    const threadView = this.env.models['mail.thread_view'].create({
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
         thread: [['link', thread]],
     });
     await this.createMessageComponent(message, {
-        threadViewLocalId: threadView.localId,
+        threadViewLocalId: threadViewer.threadView.localId,
     });
     assert.containsOnce(
         document.body,
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 0a87558e839..abc83a41f0d 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -43,7 +43,7 @@
                 <!-- MESSAGES -->
                 <t t-set="current_day" t-value="0"/>
                 <t t-set="prev_message" t-value="0"/>
-                <t t-if="threadView.thread.model === 'mail.channel' and threadView.thread.message_unread_counter > 0 and !threadView.thread.seen_message_id">
+                <t t-if="threadView.thread.model === 'mail.channel' and threadView.thread.localMessageUnreadCounter > 0 and !threadView.thread.lastSeenByCurrentPartnerMessageId">
                     <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item" t-att-class="{ 'o-disable-animation': env.disableAnimation }" t-transition="fade">
                         <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages">New messages</span>
                     </div>
@@ -75,7 +75,7 @@
                         t-ref="{{ message.localId }}"
                     />
                     <t t-set="prev_message" t-value="message"/>
-                    <t t-if="threadView.thread.model === 'mail.channel' and threadView.thread.message_unread_counter > 0 and threadView.thread.seen_message_id === message.id">
+                    <t t-if="threadView.thread.model === 'mail.channel' and threadView.thread.localMessageUnreadCounter > 0 and threadView.thread.lastSeenByCurrentPartnerMessageId === message.id">
                         <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item" t-att-class="{ 'o-disable-animation': env.disableAnimation }" t-transition="fade">
                             <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages">New messages</span>
                         </div>
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js
index 66866394a17..9eb61e6a100 100644
--- a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js
@@ -51,13 +51,13 @@ QUnit.test('rendering when just one has received the message', async function (a
         model: 'mail.channel',
         partnerSeenInfos: [['create', [
             {
-                id: 10,
-                partner: [['create', { id: 10 }]],
-                lastFetchedMessage: [['insert', { id: 100 }]]
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
             },
             {
-                id: 100,
-                partner: [['create', { id: 100 }]],
+                channelId: 1000,
+                partnerId: 100,
             },
         ]]],
         messageSeenIndicators: [['insert', {
@@ -98,14 +98,14 @@ QUnit.test('rendering when everyone have received the message', async function (
         model: 'mail.channel',
         partnerSeenInfos: [['create', [
             {
-                id: 10,
-                partner: [['create', { id: 10 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
             },
             {
-                id: 100,
-                partner: [['create', { id: 100 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 99 }]],
+                partnerId: 100,
             },
         ]]],
         messageSeenIndicators: [['insert', {
@@ -146,15 +146,15 @@ QUnit.test('rendering when just one has seen the message', async function (asser
         model: 'mail.channel',
         partnerSeenInfos: [['create', [
             {
-                id: 10,
-                partner: [['create', { id: 10 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 100 }]],
                 lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
             },
             {
-                id: 100,
-                partner: [['create', { id: 100 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 99 }]],
+                partnerId: 100,
             },
         ]]],
         messageSeenIndicators: [['insert', {
@@ -196,14 +196,14 @@ QUnit.test('rendering when just one has seen & received the message', async func
         model: 'mail.channel',
         partnerSeenInfos: [['create', [
             {
-                id: 10,
-                partner: [['create', { id: 10 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 100 }]],
                 lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
             },
             {
-                id: 100,
-                partner: [['create', { id: 100 }]],
+                channelId: 1000,
+                partnerId: 100,
             },
         ]]],
         messageSeenIndicators: [['insert', {
@@ -245,16 +245,16 @@ QUnit.test('rendering when just everyone has seen the message', async function (
         model: 'mail.channel',
         partnerSeenInfos: [['create', [
             {
-                id: 10,
-                partner: [['create', { id: 10 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 100 }]],
                 lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
             },
             {
-                id: 100,
-                partner: [['create', { id: 100 }]],
+                channelId: 1000,
                 lastFetchedMessage: [['insert', { id: 100 }]],
                 lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 100,
             },
         ]]],
         messageSeenIndicators: [['insert', {
diff --git a/addons/mail/static/src/components/notification_list/notification_list.js b/addons/mail/static/src/components/notification_list/notification_list.js
index 99b66fd5a38..a36bdaa34de 100644
--- a/addons/mail/static/src/components/notification_list/notification_list.js
+++ b/addons/mail/static/src/components/notification_list/notification_list.js
@@ -99,10 +99,10 @@ class NotificationList extends Component {
         // thread notifications
         const threadNotifications = threads
             .sort((t1, t2) => {
-                if (t1.message_unread_counter > 0 && t2.message_unread_counter === 0) {
+                if (t1.localMessageUnreadCounter > 0 && t2.localMessageUnreadCounter === 0) {
                     return -1;
                 }
-                if (t1.message_unread_counter === 0 && t2.message_unread_counter > 0) {
+                if (t1.localMessageUnreadCounter === 0 && t2.localMessageUnreadCounter > 0) {
                     return 1;
                 }
                 if (t1.lastMessage && t2.lastMessage) {
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.js b/addons/mail/static/src/components/thread_preview/thread_preview.js
index 6e30005225c..0e5a226a5f2 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.js
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.js
@@ -108,7 +108,9 @@ class ThreadPreview extends Component {
      * @param {MouseEvent} ev
      */
     _onClickMarkAsRead(ev) {
-        this.thread.markAsSeen();
+        if (this.thread.lastMessage) {
+            this.thread.markAsSeen(this.thread.lastMessage.id);
+        }
     }
 
 }
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index da364d4f99d..8a4baf3dfeb 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -6,7 +6,7 @@
             The preview template is used by the discuss in mobile, and by the systray
             menu in order to show preview of threads.
         -->
-        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.message_unread_counter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
+        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.localMessageUnreadCounter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
             <t t-if="thread">
                 <div class="o_ThreadPreview_sidebar">
                     <div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem">
@@ -16,7 +16,7 @@
                                 class="o_ThreadPreview_partnerImStatusIcon"
                                 t-att-class="{
                                     'o-mobile': env.messaging.device.isMobile,
-                                    'o-muted': thread.message_unread_counter === 0,
+                                    'o-muted': thread.localMessageUnreadCounter === 0,
                                 }"
                                 partnerLocalId="thread.correspondent.localId"
                             />
@@ -25,17 +25,17 @@
                 </div>
                 <div class="o_ThreadPreview_content">
                     <div class="o_ThreadPreview_header">
-                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.message_unread_counter === 0 }">
+                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="thread.displayName"/>
                         </span>
-                        <t t-if="thread.message_unread_counter > 0">
-                            <span class="o_ThreadPreview_counter" t-att-class="{ 'o-muted': thread.message_unread_counter === 0 }">
-                                (<t t-esc="thread.message_unread_counter"/>)
+                        <t t-if="thread.localMessageUnreadCounter > 0">
+                            <span class="o_ThreadPreview_counter" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                                (<t t-esc="thread.localMessageUnreadCounter"/>)
                             </span>
                         </t>
                         <span class="o-autogrow"/>
                         <t t-if="thread.lastMessage">
-                            <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': thread.message_unread_counter === 0 }">
+                            <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }">
                                 <t t-esc="thread.lastMessage.date.fromNow()"/>
                             </span>
                         </t>
@@ -51,7 +51,7 @@
                             <t t-esc="inlineLastMessageBody"/>
                         </span>
                         <span class="o-autogrow"/>
-                        <t t-if="thread.message_unread_counter > 0">
+                        <t t-if="thread.localMessageUnreadCounter > 0">
                             <span class="o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/>
                         </t>
                     </div>
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview_tests.js b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
index ed6ce3b6356..981abf6bca6 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
+++ b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
@@ -41,7 +41,17 @@ QUnit.module('thread_preview_tests.js', {
 });
 
 QUnit.test('mark as read', async function (assert) {
-    assert.expect(4);
+    assert.expect(8);
+    this.data['mail.channel'].records.push({
+        id: 11,
+        message_unread_counter: 1,
+    });
+    this.data['mail.message'].records.push({
+        channel_ids: [11],
+        id: 100,
+        model: 'mail.channel',
+        res_id: 11,
+    });
 
     await this.start({
         hasChatWindow: true,
@@ -52,16 +62,20 @@ QUnit.test('mark as read', async function (assert) {
             return this._super(...arguments);
         },
     });
-    const thread = this.env.models['mail.thread'].create({
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
         id: 11,
-        message_unread_counter: 1,
         model: 'mail.channel',
     });
     await this.createThreadPreviewComponent({ threadLocalId: thread.localId });
     assert.containsOnce(
         document.body,
         '.o_ThreadPreview_markAsRead',
-        "should have 1 mark as read button"
+        "should have the mark as read button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_counter',
+        "should have an unread counter"
     );
 
     await afterNextRender(() =>
@@ -71,6 +85,21 @@ QUnit.test('mark as read', async function (assert) {
         ['channel_seen'],
         "should have marked the thread as seen"
     );
+    assert.hasClass(
+        document.querySelector('.o_ThreadPreview'),
+        'o-muted',
+        "should be muted once marked as read"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ThreadPreview_markAsRead',
+        "should no longer have the mark as read button"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ThreadPreview_counter',
+        "should no longer have an unread counter"
+    );
     assert.containsNone(
         document.body,
         '.o_ChatWindow',
diff --git a/addons/mail/static/src/components/thread_view/thread_view_tests.js b/addons/mail/static/src/components/thread_view/thread_view_tests.js
index 2d0b3207ae1..3a141e751ec 100644
--- a/addons/mail/static/src/components/thread_view/thread_view_tests.js
+++ b/addons/mail/static/src/components/thread_view/thread_view_tests.js
@@ -272,8 +272,6 @@ QUnit.test('mark channel as fetched when a new message is loaded and as seen whe
         }
     });
     const thread = this.env.models['mail.thread'].create({
-        // FIXME should not be needed, see task-2277537
-        composer: [['create']], // avoid initial focus
         id: 100,
         isServerPinned: true, // just to avoid joinChannel to be called
         members: [['insert', [
@@ -288,8 +286,8 @@ QUnit.test('mark channel as fetched when a new message is loaded and as seen whe
                 name: "Fred",
             },
         ]]],
-        message_unread_counter: 1, // seen would not be called if not > 0
         model: 'mail.channel',
+        serverMessageUnreadCounter: 1, // seen would not be called if not > 0
     });
 
     const threadViewer = this.env.models['mail.thread_viewer'].create({
@@ -361,8 +359,8 @@ QUnit.test('mark channel as fetched and seen when a new message is loaded if com
                 name: "Fred",
             },
         ]]],
-        message_unread_counter: 1, // seen would not be called if not > 0
         model: 'mail.channel',
+        serverMessageUnreadCounter: 1, // seen would not be called if not > 0
     });
 
     const threadViewer = this.env.models['mail.thread_viewer'].create({
@@ -431,6 +429,143 @@ QUnit.test('show message subject if thread is mailing channel', async function (
     );
 });
 
+QUnit.test('new messages separator on posting message', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records = [{
+        channel_type: 'channel',
+        id: 20,
+        is_pinned: true,
+        message_unread_counter: 0,
+        name: "General",
+    }];
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_message',
+        "should have no messages"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator"
+    );
+
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "hey !"));
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should have the message current partner just posted"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "still no separator shown when current partner posted a message"
+    );
+});
+
+QUnit.test('new messages separator on receiving new message', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({
+        id:11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'channel',
+        id: 20,
+        is_pinned: true,
+        message_unread_counter: 0,
+        name: "General",
+        seen_message_id: 1,
+        uuid: 'randomuuid',
+    });
+    this.data['mail.message'].records.push({
+        body: "blah",
+        channel_ids: [20],
+        id: 1,
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_message',
+        "should have an initial message"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator"
+    );
+
+    document.querySelector('.o_ComposerTextInput_textarea').blur();
+    // simulate receiving a message
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            uuid: thread.uuid,
+            message_content: "hu",
+        },
+    }));
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "should now have 2 messages after receiving a new message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "'new messages' separator should be shown"
+    );
+
+    assert.containsOnce(
+        document.body,
+        `.o_MessageList_separatorNewMessages ~ .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({id: 2}).localId
+        }"]`,
+        "'new messages' separator should be shown above new message received"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_ComposerTextInput_textarea').focus());
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "'new messages' separator should no longer be shown as last message has been seen"
+    );
+});
+
 });
 });
 });